在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. Flume入门案例

    首先需要通过一个配置文件来配置Agent. 通过flume提供的工具启动agent就可以工作了.   (1)编写配置文件 #example.conf:单节点Flume配置 #命名Agent a1的组件 ...

  2. eclipse 导出jar 没有主清单属性的解决方法

    eclipse编写导出的jar文件,运行出现了没有主清单属性,问题在哪里呢?有下面几种方法: 1. 导出jar文件的时候选择[可运行的jar文件]而不是[Jar文件]即可,如下图: 2. 在jar文件 ...

  3. Quartz持久化到mongodb

    springboot中集成quzrtz ,持久到mongodb 1.pom引用 <?xml version="1.0" encoding="UTF-8"? ...

  4. Oracle-DDL 3- 触发器

    DDL-数据定义语句: 四.触发器 -- 触发器(trigger),与某些特定的操作绑定,当达到触发条件后会自动触发--主要用来将某些操作的过程记录下来,或者阻止某些非法的操作,保护数据 /*触发条件 ...

  5. java多线程的优先性问题

    多线程的优先级问题 重点:理解线程优先级的继承性.规则性.随机性 线程的优先级 在操作系统中,线程可以划分优先级,.尽可能多的给优先级高的线程分配更多的CPU资源. 线程的优先级分为1~10,有三个预 ...

  6. Centos8 安装ifconfig(net-tools.x86_64)

    情况: yum search net-tools.x86_64 没有找到结果 解决: 1.yum search net-tools 2. yum install -y net-tools.x86_64 ...

  7. 走环概率问题（至今有点迷）--牛客第二场（ Eddy Walker）

    思路: 概率结论题,好像属于线性递推,现在也不太懂(lll￢ω￢) #define IOS ios_base::sync_with_stdio(0); cin.tie(0); #include < ...

  8. AppCan全局搜索

    Ctrl + H,在项目中全局搜索英文和中文

  9. vue cli3项目发布在apache www/vue目录下并配置history路由

    注意:vue项目打包后默认是指向服务器的根路径(比如apache默认www目录是根路径,当然也可以修改),这种情况不需要做路径的配置,只需要做history配置,如果不是发布到根路径而是www/vue ...

  10. 比较接口：Comparable和Comparator

    Comparable和Comparator是两个用于定义对象之间比较规则的接口. 一.public interface Comparator<T> Comparator接口中有两个方法(不 ...