在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. 【Linux-驱动】简单字符设备驱动结构和初始化

    (1)在编写简单字符设备驱动的时候,首先要申请一个设备结构struct cdev: struct cdev { struct kobject kobj; struct module *owner; / ...

  2. sql server备份损坏

    sql server备份损坏 转自:https://www.cnblogs.com/zhijianliutang/p/4080916.html 1.备份文件和数据库放在同一个(或一组)的物理磁盘上.磁 ...

  3. 创建Maven Web项目时很慢解决办法

    点击加号,Name输入archetypeCatalog,Value输入internal archetypeCatalog表示插件使用的archetype元数据,不加这个参数时默认为remote,loc ...

  4. 多边形面积(Area_Of_Polygons)

    原理: 任意多边形的面积可由任意一点与多边形上依次两点连线构成的三角形矢量面积求和得出. 分析: 由于给出的点是相对于我们的坐标原点的坐标,每个点实际上我们可以当作一个顶点相对于原点的向量,如下图所示 ...

  5. 计算机网络--TCP三次握手和四次挥手

    TCP(传输控制协议) TCP(Transmission Control Protocol 传输控制协议)是一种面向连接的.可靠的.基于字节流的传输层通信协议.通过三次握手建立连接,通讯完成时要拆除连 ...

  6. java不同包中protected修饰的属性和方法调用方法

    protected修饰的静态属性和方法的调用方式1:直接类名调用 2:实例化父类对象进行调用 3:实例化子类对象进行调用 protected修饰的非静态属性和方法的调用方式:1:实例化子类对象进行调用 ...

  7. 本人亲测-C#常用工具类

    /* * HTTP接口工具类 */ public class HttpUitls { /* * get请求 */ public static string Get(string Url) { //Sy ...

  8. 使用python的selenium库刷超星网课

    网课很多看不完呀 所以动手做了一个基础的自动答题和下一节的程序 用到了python 3 selenium Chrome 如何自动化Chrome?https://www.cnblogs.com/eter ...

  9. 第一篇 HTML 认识HTML

    认识HTML 学习一门语言,我们要先了解它,可以不用太资深,但要做到别人问,你能回答得出来! 注:推荐大家去网址:www.w3school.com.cn 前端学习手册(免费的) HTML(超文本标记语 ...

  10. Linux中的grep 命令

    介绍grep文本处理命令,它也可以解释正则. 常用选项: -E :开启扩展(Extend)的正则表达式. -i :忽略大小写(ignore case). -v :反过来(invert),只打印没有匹配 ...