一、JAVA Script

1.1 基本用法

HTML中的三把利器的JS 又称为JavaScript，看着好像和Java有点联系，实际上他和java半毛钱关系都没有，JavaScript和我们学习的Python、Go、Java、C++等，都是一种独立的语言，Python的解释器有Python2.7、Python3.x，浏览器具有解释JavaScript的功能，所以它才是HTML的三把利器之一。

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

引入JavaScript代码，类似于Python的import

head中引入JS与body中引入JS区别

html代码从上而下解析，如果在head中引入JS，影响页面打开的速度，存在风险，所以通常放在htmlbody的最下方，这样页面内容先展示，最后在加载JS。注：写在最下面要有底线，写在body内部的最底下。

注释

单行注释通过 // 多行通过 /* */

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <title>摩羯座</title>
</head>
<body>
    <div>
        <input type="button" onclick="demo()" value="登录">
    </div>

    <script>
        function demo() {
            console.log('123123') // 等同于python里的input
            alert('提示框！！！') // 提示框
            flag = confirm('确认要登录吗？') //确认框
            console.log(flag)
        }
    </script>
</body>
</html>

1、点击【登录】

出现弹窗

2、点击【确定】

1.2 html引入JS文件

可以在<header>或者<body>中引入

1、创建js文件：demo.js

function demo() {
            console.log('123123') // 等同于python里的input
            alert('提示框！！！') // 提示框
            flag = confirm('确认要登录吗？') //确认框
            console.log(flag)
        }

2、在html里 <body>标签-导入js文件

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <title>Title</title>
</head>
<body>
    <div>
        <input type="button" onclick="demo()" value="登录">
    </div>
    <script src="demo.js"></script>
</body>
</html>

1.3 写一个登录接口

1、定义好登录用户名、密码

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <title>Title</title>
</head>
<body>
    <div>
        <input type="text" placeholder="请输入用户名" id="username">
        <input type="password" placeholder="请输入密码" id="password">
        <input type="button" onclick="login()" value="登录">
    </div>
    <script>
        function login() {
            var username = 'wdc';
            var password = '123456';
            var user = document.getElementById('username').value;
            var passwd = document.getElementById('password').value;
            console.log(user);
            console.log(passwd);
            /*
            * 1、获取用户名和密码的value
            * 2、if 进行判断
            * */
        }
    </script>
</body>
</html>

2、判断用户名、密码是否验证通过

js的判断语句

if (username == user){    console.log('用户名验证通过')}else {    alert('你的用户名不对')}

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <title>Title</title>
</head>
<body>
    <div>
        <input type="text" placeholder="请输入用户名" id="username">
        <input type="password" placeholder="请输入密码" id="password">
        <input type="button" onclick="login()" value="登录">
    </div>
    <script>
        function login() {
            var username = 'wdc';
            var password = '123456';
            var user = document.getElementById('username').value;
            var passwd = document.getElementById('password').value;
            console.log('username-->'+user);
            console.log('password-->'+passwd);
            // if a==b:
            //    xxx
            if (username == user){
                console.log('用户名验证通过')
            }else {
                alert('你的用户名不对')
            }
            /*
            * 1、获取用户名和密码的value
            * 2、if 进行判断
            * */
        }
    </script>
</body>
</html>

3、if语句，and的用法要加“&&”

            if (username == user && password==passwd ){
                console.log('登录成功')
            }else {
                alert('你的用户名不对')
            }

4、if语句，else if用法

            if (username == user && password==passwd ){
                console.log('登录成功')
            }else if (username != user) {
                console.log('用户名有错误！')
            }else if(password != passwd){
                    console.log('密码错误！')
            }else {
                console.log('都错了')
            }

5、for 循环

        function test() {
            var l = ['奔驰','宝马','奥迪','凯迪拉克']; //生命数组
//            var l1 = new Array(1,2,3,4); //第二种声明方式
            for (var i in l){
                console.log(l[i])
            }

或者

        function test() {
            var l = ['奔驰','宝马','奥迪','凯迪拉克']; //生命数组
//            var l1 = new Array(1,2,3,4); //第二种声明方式
            for (var i=0;i<l.length;i++){
                console.log(l[i])
            }

6、字典循环

        function test() {
            var m = {"name": "wdc", "age": 18};

            for (var k in m) {
                console.log(m[k])
            }
        }
        // 不能用下方这种方式循环字典
            for (var i=0;i<l.length;i++) {
               console.log(l[i])
            }

7、字符串循环

        function test() {
            var s = '测试循环字符串';
            for (var i in s) {
                console.log(s[i])
            }
        }

或者

        function test() {
            var s = '测试循环字符串';
            for (var i = 0; i < s.length; i++) {
                console.log(s[i])
            }
        }

1.4 匿名函数

<body>
            <input type="button" value="匿名函数测试" id="i1">
    <script>
        element = document.getElementById('i1');
        element.onclick = function () {
            console.log('测试匿名函数')
        }
    </script>

</body>

1.5 作用域

<body>
       <input type="button" value="作用域" onclick="test_var()">
    <script>
        function test_var() {
            var name = 'wdc'
            console.log(name)
        }
    </script>
</body>

HTML基础三-JS的更多相关文章

前端总结·基础篇·JS（三）arguments、callee、call、apply、bind及函数封装和构造函数
前端总结系列前端总结·基础篇·CSS(一)布局前端总结·基础篇·CSS(二)视觉前端总结·基础篇·CSS(三)补充前端总结·基础篇·JS(一)原型.原型链.构造函数和字符串(String) 前 ...
Bootstrap <基础三十二>模态框（Modal）插件
模态框(Modal)是覆盖在父窗体上的子窗体.通常,目的是显示来自一个单独的源的内容,可以在不离开父窗体的情况下有一些互动.子窗体可提供信息.交互等. 如果您想要单独引用该插件的功能,那么您需要引用 ...
Bootstrap <基础三十一>插件概览
在前面布局组件中所讨论到的组件仅仅是个开始.Bootstrap 自带 12 种 jQuery 插件,扩展了功能,可以给站点添加更多的互动.即使不是一名高级的 JavaScript 开发人员,也可以着手 ...
Bootstrap <基础三十>Well
Well 是一种会引起内容凹陷显示或插图效果的容器 <div>.为了创建 Well,只需要简单地把内容放在带有 class .well 的 <div> 中即可.下面的实例演示了 ...
Bootstrap<基础三> 排版
Bootstrap 使用 Helvetica Neue. Helvetica. Arial 和 sans-serif 作为其默认的字体栈. 使用 Bootstrap 的排版特性,您可以创建标题.段落. ...
前端总结·基础篇·JS（一）五大数据类型之字符串（String）
前端总结系列前端总结·基础篇·CSS(一)布局前端总结·基础篇·CSS(二)视觉前端总结·基础篇·CSS(二)补充前端总结·基础篇·JS(一)五大数据类型之字符串(String) 目录这是& ...
前端总结·基础篇·JS（二）数组深拷贝、去重以及字符串反序和数组（Array）
目录这是<前端总结·基础篇·JS>系列的第二篇,主要总结一下JS数组的使用.技巧以及常用方法. 一.数组使用 1.1 定义数组 1.2 使用数组 1.3 类型检测二.常用技巧 2.1 ...
前端总结·基础篇·JS（四）异步请求及跨域方案
前端总结系列前端总结·基础篇·CSS(一)布局前端总结·基础篇·CSS(二)视觉前端总结·基础篇·CSS(三)补充前端总结·基础篇·JS(一)原型.原型链.构造函数和字符串(String) 前 ...
前端总结·基础篇·JS（一）原型、原型链、构造函数和字符串（String）
前端总结系列前端总结·基础篇·CSS(一)布局前端总结·基础篇·CSS(二)视觉前端总结·基础篇·CSS(三)补充前端总结·基础篇·JS(一)原型.原型链.构造函数和字符串(String) 前 ...

随机推荐

C++ 函数重载和参数的缺省值
一.函数重载 1.1 重载的起源自然语言中,一个词可以有许多不同的含义,即该词被重载了.人们可以通过上下文来判断该词到底是哪种含义."词的重载"可以使语言更加简练.例如" ...
一篇了解大数据架构及Hadoop生态圈
一篇了解大数据架构及Hadoop生态圈阅读建议,有一定基础的阅读顺序为1,2,3,4节,没有基础的阅读顺序为2,3,4,1节. 第一节集群规划大数据集群规划(以CDH集群为例),参考链接: ht ...
1+x证书《Web前端开发》等级考试样题
Web前端开发初级理论考试样题2019 http://blog.zh66.club/index.php/archives/149/ Web前端开发初级实操考试样题2019 http://blog.zh ...
Spring Boot 如何干掉 if else？
需求这里虚拟一个业务需求,让大家容易理解.假设有一个订单系统,里面的一个功能是根据订单的不同类型作出不同的处理. 订单实体: service接口: 传统实现根据订单类型写一堆的if else: 策 ...
2019-11-29-WPF-从触摸消息转触摸事件
原文:2019-11-29-WPF-从触摸消息转触摸事件 title author date CreateTime categories WPF 从触摸消息转触摸事件 lindexi 2019-11- ...
PHP RSA签名
/** * RSA签名 * @param $data 待签名数据 * @param $private_key 私钥字符串 * return 签名结果 */function rsaSign($data, ...
【C#常用方法】2.DataTable(或DataSet)与Excel文件之间的导出与导入（使用NPOI）
DataTable与Excel之间的互导 1.项目添加NPOI的引用 NPOI项目简介: NPOI是一个开源的C#读写Excel.WORD等微软OLE2组件文档的项目,特点是可以在没有安装Office ...
Asp.net core 简单介绍
Asp.net core 是一个开源和跨平台的框架,用于构建如WEB应用,物联网(IoT)应用和移动后端应用等连接到互联网的基于云的现代应用程序.asp.net core 应用可运行.net和.net ...
spring事务概念与获取事务时事务传播行为源码分析
一.事务状态:org.springframework.transaction.TransactionStatus isNewTransaction 是否是新事务 hasSavepoint 是否有保存点 ...
架构师小跟班：推荐一款Java在线诊断工具，arthas入门及使用教程
安装官方网站: https://alibaba.github.io/arthas/index.html 一.下载arthas-boot.jar,然后用java -jar的方式启动: wget htt ...

HTML基础三-JS