在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. 一些css单位

    https://blog.csdn.net/qq_40001322/article/details/80867289 1.em 在做手机端的时候经常会用到的做字体的尺寸单位 说白了 em就相当于“倍” ...

  2. 第四周课程总结&试验报告2

    试验报告2 写一个名为Rectangle的类表示矩形.其属性包括宽width.高height和颜色color,width和height都是double型的,而color则是String类型的.要求该类 ...

  3. [转帖]开源许可证GPL、BSD、MIT、Mozilla、Apache和LGPL的区别

    开源许可证GPL.BSD.MIT.Mozilla.Apache和LGPL的区别 https://www.geek-workshop.com/thread-1860-1-1.html     liamj ...

  4. 小菜鸟之JAVA面试题库1

    四次挥手 客户端发送释放连接报文,关闭客户端到服务端的数据传输 服务端收到后,发送确认报文给客户端 服务端发送释放连接报文,关闭服务端到客户端的数据传输 客户端发送一个确认报文给服务端 ------- ...

  5. linux 使用tmux

    一. 什么是tmux 1.1. tmux 是两个单词的缩写,即“Terminal MultipleXer”,意思是“终端复用器“ 1.2. tmux 结构 1.2.1. tmux主要由三层: < ...

  6. Redis学习笔记（一）Windows下redis的安装和启动

    在Windows上安装redis 下载地址:https://github.com/microsoftarchive/redis/releases 选择图中红框标出来的下载,解压到磁盘上,文件夹命名为r ...

  7. 接口测试-免费开放的api

    归纳一些不错的免费开放的api 1.Apizza免费开放的Api接口 链接: https://www.jianshu.com/p/e6f072839282 接口文档:https://www.apiop ...

  8. Zabbix 配置钉钉脚本告警

    1.钉钉账号创建,并创建一个组,在组中添加一个机器人,然后记下webhook地址即可. 2.编辑一个报警脚本,此处使用的是BASH脚本,并覆盖我们的webhook地址到相应的位置. [root@loc ...

  9. C++ 多态、虚函数(virtual 关键字)、静态联编、动态联编

    函数重写:(在子类中重写父类中的函数) 父类中被重写的函数  依然会继承  给子类. 子类中重写的函数将覆盖父类中的函数. 通过作用域分辨符  ::  可以访问到父类中的函数. 例如: #includ ...

  10. python：set() 函数

    描述 Python 内置函数 创建一个无序不重复元素集 可进行关系测试,删除重复数据 集合对象还支持union(联合), intersection(交), difference(差)和sysmmetr ...