在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. Angular build编译内存溢出"JavaScript heap out of memory"的解决办法

    关于最近使用angular build编译打包的时候,遇到内存溢出的突发情况,做一个简单记录 编译报错如下↓↓↓ 报错信息很直观地指出是内存溢出了.是什么导致了内存溢出呢?其根本原因在于 nodejs ...

  2. Unity打包出来的App 跳转其他 App

    void Start()//在android测试成功 { bool fail = false; string bundleId = "跳转的包名";//包名称 AndroidJav ...

  3. [Python3] 036 函数式编程 返回函数

    目录 函数式编程 之 返回函数 1. 引子 2. 闭包 closure 函数式编程 之 返回函数 函数可以返回具体的值 也可以返回一个函数作为结果 1. 引子 1.1 定义一个普通函数 >> ...

  4. PostgreSQL的同步级别与MySQL的半同步after_sync比较

    MySQL的半同步中通过binlog进行流复制,同步级别和PostgreSQL对比可以发现: PostgreSQL                MySQL off local            ...

  5. python-day29(正式学习)

    目录 元类 什么是元类 为什么用元类 内置函数exec class创建类 type实现 自定义元类 _ _ call _ _ _ _ new _ _ 自定义元类控制的实例化 属性查找顺序 元类 警告! ...

  6. python并发编程-进程理论-进程方法-守护进程-互斥锁-01

    操作系统发展史(主要的几个阶段) 初始系统 1946年第一台计算机诞生,采用手工操作的方式(用穿孔卡片操作) 同一个房间同一时刻只能运行一个程序,效率极低(操作一两个小时,CPU一两秒可能就运算完了) ...

  7. CVE-2017-17558漏洞学习

    简介 这是USB core中的一个拒绝服务漏洞.带有精心设计的描述符的恶意USB设备可以通过在配置描述符中设置过高的bNumInterfaces值来导致内核访问未分配的内存.虽然在解析期间调整了该值, ...

  8. Redis5版本集群搭建

    一.简介 1.1 Redis是什么 Redis是一个开源的,使用ANSI C 编写,高性能的Key-Value的NoSQL数据库. 1.2 Redis特点 (1)基于内存 (2)可持久化数据 (3)具 ...

  9. 设置队列中文件上的“X”号的点击事件+uploadLimit动态加1

    目的:1.设置文件队列中“x”号的点击事件 2.每次删除服务器文件后,把uploadLimit + 1: 'onUploadSuccess': function (file, data, respon ...

  10. 导出excel模版

    方法一: public void ToExcel(){ //第一步:获取模版物理路径 string file_1 = Server.MapPath("/Content/Excel/downE ...