在HTML中可以将JavaScript/JS的代码写在head中，被script标签所包裹，当浏览器解释HTML时，遇到style标签时，按照CSS规则解释，遇到Script标签时，按照JavaScript的语法规则解释

1.js的导入，建议将大的js的文件放到body内部的最下边，这样先加载静态信息，然后加载js
2.不可在导入的js标签内写js代码<script></script>
3.const 定义常量，var定义变量有预解析,let也可以定义变量没有预解析

<!DOCTYPE html>

<html lang="en">

<head>

    <meta charset="UTF-8">

    <title>Title</title>

</head>

<body>

<!--    onclick点击事件，绑定了js中的f()函数-->

    <input type="text" placeholder="输入用户名" id="user">

    <input type="password" placeholder="输入密码" id="pwd">

    <input type="button" onclick="f()" value="login">

    <br>

    <input type="button" onclick="f1()" value="for循环">

    <br>

    <input type="button" onclick="f2()" value="switch循环">

    <br>

    <input type="button" value="匿名函数测试" id="i1">

    <br>

    <input type="button" onclick="f4()" value="变量" >

<!--绑定js文件-->

<!--    <input type="submit" onclick="f1()" value="跳转">-->

<!--<script>-->

<!--    function f() {-->

<!--        // console.log('2312')//打印-->

<!--        //alert('1232')//提示框-->

<!--        confirm('确认框')//确认框-->

<!--    }-->

<!--</script>-->

    <script>

        function f() {

            var user = 'mh';

            var pwd = '123456';

            var u = document.getElementById('user').value;

            var p = document.getElementById('pwd').value;

            if (user==u && pwd==p){

                alert('登录成功')

            }

            else {

                alert('用户名或密码错误')

            }

        }

        function f1() {

            // 打印数组

            var l = ['a','b','c','d']

            // for (var i in l){

            //     console.log(l[i])

            // }

            // for (var i=0;i<l.length;i++){

            //     console.log(i)

            // }

            // 打印字典

            var d = {'name':'mg','age':18}

            // for (var k in d){

            //     console.log(d[k])

            // }

            //打印字典

            var str = '没吃药'

            // for (var i=0;i<str.length;i++){

            //     console.log(str[i])

            // }

        }

        function f2() {

            var uname = document.getElementById('user').value

            switch (uname) {

                case 'mh':

                    console.log('shimh');

                    break;

                case 'hh':

                    console.log('shihh');

                    break;

                default:

                    console.log('xxxx')

            }

        }

        //匿名函数测试

        e = document.getElementById('i1')

        e.onclick = function () {

            f2()

        }

        function f3() {

            var name = 'hh'

            console.log(name)

        }

        function f4() {

            console.log(name)

        }

    </script>

<!--引入js文件-->

<!--    <script src="6_demo.js"></script>-->

</body>

</html>

web前端_js的更多相关文章

  1. Web前端开发推荐阅读书籍、学习课程下载

    转自http://www.xuanfengge.com/fe-books.html 前言 学校里没有前端的课程,那如何学习JavaScript,又如何使自己成为一个合格的前端工程师呢? 除了在项目中学 ...

  2. Web前端需要熟悉大学里【高大上】的计算机专业课吗？

    作为一名刚刚大学毕业,进入新的学习阶段的研究生,我必须说大学的专业课非常重要!不管你信不信,事实就是如此! 一.大学学习的专业课非常重要,它决定了我们能走到什么高度 前端的发展非常快,我常常觉得刚刚关 ...

  3. web前端开发分享-目录

    1. web前端开发分享-css,js入门篇 2. web前端开发分享-css,js进阶篇 3. web前端开发分享-css,js提高篇 4. web前端开发分享-css,js工具篇 5. web前端 ...

  4. Web前端温故知新-CSS基础

    一.CSS定义与编写CSS 1.1 CSS的定义 全名:Cascading Style Sheets -> 层叠样式表 定义:CSS成为层叠样式表,它主要用于设置HTML页面中的文本内容(字体. ...

  5. web前端的春天 or 噩梦

    「 微信应用号可以做什么」 简单说,微信"小程序"可以为开发者提供基于微信的表单.导航.地图.媒体和位置等开发组件,让他们在微信的网页里构建一个 HTML 5 应用.同时微信还开放 ...

  6. Web 前端开发精华文章推荐（jQuery、HTML5、CSS3）【系列十二】

    2012年12月12日,[<Web 前端开发人员和设计师必读文章>系列十二]和大家见面了.梦想天空博客关注 前端开发 技术,分享各种增强网站用户体验的 jQuery 插件,展示前沿的 HT ...

  7. 也许你需要点实用的-Web前端笔试题

    之前发的一篇博客里没有附上答案,现在有空整理了下发出来,希望能帮助到正在找工作的你,还是那句话:技术只有自己真正理解了才是自己的东西,共勉. Web前端笔试题 Html+css 1.对WEB标准以及w ...

  8. 用grunt搭建web前端开发环境

    1.前言 本文章旨在讲解grunt入门,以及讲解grunt最常用的几个插件的使用. 2.安装node.js Grunt和所有grunt插件都是基于nodejs来运行的,如果你的电脑上没有nodejs, ...

  9. 每天成长一点---WEB前端学习入门笔记

    WEB前端学习入门笔记 从今天开始,本人就要学习WEB前端了. 经过老师的建议,说到他每天都会记录下来新的知识点,每天都是在围绕着这些问题来度过,很有必要每天抽出半个小时来写一个知识总结,及时对一天工 ...

随机推荐

  1. Python assert 关键字

    Python assert(断言)用于判断一个表达式,在表达式条件为 False 的时候触发异常. 断言可以在条件不满足程序运行的情况下直接返回错误,而不必等待程序运行后出现崩溃的情况. 语法格式: ...

  2. VC/MFC中的CComboBox控件使用详解

    CComboBox控件详解 CComboBox控件又称作组合框控件,其有三种形态可供选择,1.简单组合框(Simple)2.下拉组合框(Drop-down)3.下拉列表式组合框(Drop-down l ...

  3. [xpath] 定位中starts-with、contains和text()的用法

    starts-with 顾名思义,匹配一个属性开始位置的关键字 contains 匹配一个属性值中包含的字符串 text() 匹配的是显示文本信息,此处也可以用来做定位用 eg //input[sta ...

  4. 用Java实现对英文版《飘》的文件读取与写入操作

    从文件读入<飘>的英文版,并将结果输出到文件中 要求一: 实现对英文版<飘>的字母出现次数统计 package File; import java.io.FileInputSt ...

  5. C++练习 | 铁轨问题

    #include <iostream> #include <cmath> #include <cstring> #include <string> #i ...

  6. 基于MatConvNet的CNN图像搜索引擎PicSearch

    简介 Picsearch是一种基于卷积神经网络特征的图像搜索引擎. Github:https://github.com/willard-yuan/CNN-for-Image-Retrieval Web ...

  7. 福建工程学院第十四届ACM校赛J题题解

    第六集,想不到你这个浓眉大眼的都叛变革命了 题意: 给你两个只包含01的字符串S和T,问你在允许一次错误的情况下,T是否能成为S的子串 思路: 这个问题的解法挺多,我是用fft匹配的,也比较简单,针对 ...

  8. 分布式的几件小事（三）dubbo的通信协议与序列化

    1.dubbo的通信协议 ①dubbo协议 Dubbo缺省协议采用单一长连接和NIO异步通讯,适合于小数据量大并发的服务调用,以及服务消费者机器数远大于服务提供者机器数的情况. 特点 : dubbo缺 ...

  9. 11 Scrapy框架之递归解析和post请求

    一.递归爬取解析多页页面数据 - 需求:将糗事百科所有页码的作者和段子内容数据进行爬取切持久化存储 - 需求分析:每一个页面对应一个url,则scrapy工程需要对每一个页码对应的url依次发起请求, ...

  10. CSS行高——line-height 垂直居中等问题

    CSS行高——line-height   初入前端的时候觉得CSS知道display.position.float就可以在布局上游刃有余了,随着以后工作问题层出不穷,才逐渐了解到CSS并不是几个sty ...