全栈架构师之路

Appearance

JavaScript入门 ​

js概述 ​

js简介 ​

JavaScript 是互联网上最流行的脚本语言，广泛用于客户端（浏览器），用来给 HTML 网页增加 动态效果。

20190524102233

js的作用 ​

js 的作用很多，在目前学习阶段，只需要记住如下两个最最最常用的就可以了：

  • 动态修改 html 及 css 代码

  • 表单数据校验

js的组成 ​

  1. ECMAScript：JavaScript 的基本语法；

1995年Netscape公司发布的Netscape Navigator 2.0中，发布了与Sun联合开发的JavaScript 1.0并且大获成功， 并且随后的3.0版本中发布了JavaScript1.1，恰巧这时微软进军浏览器市场，IE 3.0搭载了一个JavaScript的克隆版-JScript， 再加上Cenvi的ScriptEase（也是一种客户端脚本语言），导致了三种不同版本的客户端脚本语言同时存在。为了建立语言的标准化，1997年JavaScript 1.1作为草案提交给欧洲计算机制造商协会（ECMA），第三十九技术委员会（TC39）被委派来“标准化一个通用的，跨平台的，中立于厂商的脚本语言的语法和语意标准”。最后在Netscape、Sun、微软、Borland等公司的参与下制订了ECMA-262，该标准定义了叫做ECMAScript的全新脚本语言。【ES6】 从此以后的Javascript，JScript，ActionScript等脚本语言都是基于ECMAScript标准实现的。 所以，ECMAScript实际上是一种脚本在语法和语义上的标准。实际上JavaScript是由ECMAScript，DOM和BOM三者组成的。 所以说，在JavaScript，JScript和ActionScript中声明变量，操作数组等语法完全一样，因为它们都是ECMAScript。但是在操作浏览器对象等方面又有各自独特的方法，这些都是各自语言的扩展。

  1. BOM：浏览器对象模型

Brower Object Model 浏览器对象模型，主要是获取浏览器信息或操作浏览器的，例如：浏览器的前进与后退、浏览器弹出提示框、浏览器地址栏输入网址跳转等操作等；

  1. DOM：文档对象模型

Document Object Model 文档（html文件内容）对象模型，此处的文档暂且理解为html，html加载到浏览器的内存中，可以使用js的DOM技术对内存中的html节点进行修改，用户从浏览器看到的是js动态修改后页面；

js的引入方式 ​

内部js ​

html
<head>
  <meta charset="UTF-8">
  <title></title>
  <script type="text/javascript">
    //这里写你的js代码
  </script>
</head>

外部js ​

html
<head>
  <meta charset="UTF-8">
  <title></title>
  <script type="text/javascript" src="../xxx.js"></script>
</head>

练习 ​

需求 ​

提示

利用alert("")函数，可以在页面上弹窗

分析 ​

方式1: 在当前页面编写JavaScript代码实现

方式2: 将代码编写到一个独立的JavaScript文件中

编码 ​

  • practice1.html

    html
    <!DOCTYPE html>
<html>
 <head>
  <meta charset="UTF-8">
  <title></title>
    <!-- 外部js -->
    <script src="../js/practice1.js"></script>
 </head>
 <body>

 </body>
    <!-- 内部js -->
    <script>
        alert("Hello JavaScript");
    </script>
</html>

  • practice1.js

    javascript
    alert("Hello JavaScript");

小结 ​

  • js 的组成

    • ECMAScript
    • BOM
    • DOM

  • js 的引入方式

    • 内部js
    • 外部js

js基本语法 ​

js变量定义 ​

js 是弱类型语言，不重视类型的定义，但 js 会根据为变量赋值的情况自定判断该变量是何种类型

  • 整型

    javascript
    var i = 0;

  • 浮点型

    javascript
    var d = 2.35

  • 字符串

    javascript
    var str = “用心做教育”;

  • 布尔型

    javascript
    var b = true;

  • 对象类型

    javascript
    ["a", "b", "c"];
// 在js当中，是object类型

js数据类型 ​

  • 原始/基本数据类型

    • 数字类型：number

    • 布尔类型：boolean

    • 字符串类型：string

    • 未定义类型：undefined

    • 空类型：null

  • 引用数据类型

    • var obj = new Object();
    • var str = new String();
    • var date = new Date();

js运算符 ​

  • 赋值运算符

    javascript
    var x = 5;

  • 比较运算符

    >, <, ==, !=, ===

    javascript
    var str="5";
var num=5;

num == str;
// true

num === str;
// false

  • 逻辑运算符

    &&, ||

  • 算数运算符

    +, -, *, /, %

  • 三元运算符

    ?:

js流程控制语句 ​

分支结构

  • if

    javascript
    if (expression)
  statement
    javascript
    if (expression1)
  statement1
else if (expression2)
  statement2
else
  statement3

  • switch

    javascript
    switch (expression) {
  case constant1:
    statement1;
    break;
  case constant2:
    statement2;
    break;
  default:
    statement3;
    break;
}

循环结构

  • while

    javascript
    while (expression)
  statement

  • do-while

    javascript
    do
  statement;
while(expression);

  • for

    javascript
    for (initialize; test; increment)
  statement

  • for-in【不推荐使用】

    javascript
    for (variable in object)
  statement

  • for-of

    javascript
    for (variable of object)
  statement

注释 ​

  • 单行注释

    javascript
    // single line comment

  • 多行注释

    javascript
    /*
 * multiple line comment
 */

小结 ​

  • js 变量定义

    javascript
    var a = 1.5;

  • js 数据类型

    • number
    • boolean
    • String
    • undefined
    • null

  • js 运算符

    java大部分的运算符都支持

  • js 流程控制语句

    分支结构

    • if - else if - else
    • switch - case - default - break

    循环结构

    • while
    • do-while
    • for
    • for-of

js函数 ​

普通函数 ​

javascript
function funcname(arg1, arg2, arg3, ...) {
  statements
}

匿名函数 ​

javascript
function(arg1, arg2, arg3, ...) {
  statements
}

js函数内置对象【扩展】 ​

在函数中，可以使用arguments数组，获取实际参数数组

练习 ​

需求 ​

  • 分别编写形参与实参的个数不一致的情况，并查看结果
  • 使用arguments，获取实际参数

编码 ​

  • practice2.html

    html
    <!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <title>Title</title>

    <script type="text/javascript">
        // 普通函数
        // function fn(a, b, c) {
      
        // 匿名函数
        var fn = function(a, b, c) {
            console.log(a);
            console.log(b);
            console.log(c);

            for (var arg of arguments) {
                console.log(arg);
            }
        }

        fn(1);
    </script>
</head>
<body>

</body>
</html>

小结 ​

  • js 中的两种函数定义方式
    • 普通函数
    • 匿名函数

js事件 ​

事件概述 ​

Listener-Summary-Sample

Listener-Summary

  • 事件源

    被监听的html元素

  • 事件

    某类动作，例如点击事件，移入移除事件，敲击键盘事件等

  • 监听器

    绑定事件与事件源的。在事件源上注册上某事件。

  • 事件触发后的响应行为

    事件触发后需要执行的代码，一般使用函数进行封装

js常用事件 ​

事件名描述
onload某个页面或图像被完成加载
onsubmit当表单提交时触发该事件
onclick鼠标点击某个对象
ondblclick鼠标双击某个对象
onblur元素失去焦点
onfocus元素获得焦点
onchange用户改变域的内容
onkeydown某个键盘的键被按下
onkeypress某个键盘的键被按下或按住
onkeyup某个键盘的键被松开
onmousedown某个鼠标按键被按下
onmouseup某个鼠标按键被松开
onmouseover鼠标被移到某元素之上
onmouseout鼠标从某元素移开
onmousemove鼠标被移动

事件绑定 ​

技术铺垫 ​

  • 根据 id 获取控件

    javascript
    var widget = document.getElementById("id");
    html
    <!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <title>Title</title>
</head>
<body>

<button id="btn">我是按钮，请点击我</button>

<script type="text/javascript">
  var btnWidget = document.getElementById("btn");
</script>

</body>
</html>

静态绑定 ​

在html代码中完成绑定

html
<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <title>Title</title>

    <script type="text/javascript">
        function clickBtn() {
            alert("Hello World!");
        }
    </script>
</head>
<body>

  <!------------------------------------------------------------------->
  <!-- 静态绑定方式 -->
  <button onclick="clickBtn();">我是按钮，请点击我</button>
  <!------------------------------------------------------------------->

</body>
</html>

动态绑定 ​

在javascript代码中完成绑定

html
<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <title>Title</title>
</head>
<body>

<!------------------------------------------------------------------->
<!-- 静态绑定方式 -->
<button id="btn">我是按钮，请点击我</button>
<!------------------------------------------------------------------->

<script type="text/javascript">
  document.getElementById("btn").onclick = function() {
    alert("Hello World");
  };
</script>

</body>
</html>

this关键字的使用【正在建设中】 ​

练习一 ​

需求 ​

  • 为按钮绑定点事件，并且将 js 代码，写到<head>标签内部

技术铺垫 ​

  • window.onload 事件

编码 ​

  • practice3.html

    html
    <!DOCTYPE html>
<html>
<head>
  <meta charset="UTF-8">
  <title>Title</title>
  
  <!------------------------------------------------------------------->
  <!-- 推荐将所有的js代码，写到head标签内部 -->
  <script type="text/javascript">
    
    // 页面全部加载结束之后的绑定事件
    window.onload = function () {
      
      // 浏览器以字符流形式接收html
      // 当文档加载到这里的时候，并没有加载到id为"btn"的控件
      // 所以获取控件就获取不到
      // 既然获取不到，自然就无法为控件绑定事件
      // 所以必须让所有的文档全部加载结束之后再绑定事件
      document.getElementById("btn").onclick = function() {
        alert("Hello World");
      };
    };
  </script>
  <!------------------------------------------------------------------->

</head>
<body>

<!------------------------------------------------------------------->
<button id="btn">我是按钮，请点击我</button><br>
<!------------------------------------------------------------------->

</body>
</html>

练习二 ​

需求 ​

  • 鼠标光标移开用户名输入框之后，检查用户名是否输入

技术铺垫 ​

  • 控件的失去焦点事件

    widget.onblur

  • 通过标签对象获取标签的 value 属性值：

    javascript
    var widget = document.getElementById("id");
var widgetVal = widget.value;

编码 ​

  • practice4.html
html
<!DOCTYPE html>
<html>

<head>
    <meta charset="UTF-8">
    <title>Title</title>


    <script type="text/javascript">
        // 页面加载完成事件
        window.onload = function () {

            // username离焦事件
            document.getElementById("username").onblur = function (event) {

                // 获取username的value
                var username = document.getElementById("username").value;

                // 判断username是否为空
                if (!username) {
                    alert("请求输入用户名！");
                }

            }
        }
    </script>
</head>

<body>
<form action="" method="get">
    <input type="text" name="username" id="username" placeholder="请输入用户名"/><br/>
    <input type="submit" value="提交订单"/>
</form>
</body>
</html>

练习三 ​

需求 ​

  • 修改商品数量后自动计算出商品总价

编码 ​

  • practice5.html
html
<!DOCTYPE html>
<html>

<head>
  <meta charset="UTF-8">
  <title></title>

  <script type="text/javascript">

    // 方法定义
    function calculateTotalPrice(num) {

      // 获取单价
      var prodPrice = document.getElementById("prodPrice").value;

      // 计算总价
      var totalPrice = prodPrice * num;

      // 设置控件值
      document.getElementById("totalPrice").value = totalPrice;
    }
  </script>
</head>

<body>
<form action="" method="get">
    商品单价：<input value="10" id="prodPrice"/>
    *商品件数：<input type="text" id="num" onchange="calculateTotalPrice(this.value);"/>
    =商品总价：<input type="text" id="totalPrice"/><br />
    <input type="submit" value="提交订单" />
</form>
</body>
</html>

练习四 ​

需求 ​

  • 演示 onsubmit 事件是怎么阻止表单提交的

技术铺垫 ​

  • onsubmit 方法的返回值为 true，表单能够正常提交；返回值为 false 表单提交被阻止
  • onsubmit 方法注册到 form 标签上的时候，前面需要加 return

编码 ​

静态绑定方式 ​

  • practice6.html

    html
    <!DOCTYPE html>
<html>
<head>
    <meta charset="UTF-8">
    <title>Title</title>

    <script type="text/javascript">
        function checkForm(){
            return false;
        }
    </script>

</head>
<body>
<form action="#" onsubmit="return checkForm();">
    用户名：<input type="text"  name="username" id="username"/><br />
    密码：<input type="password" name="password" id="password"/><br />
    <input type="submit" value="注册" />
</form>
</body>

</html>
动态绑定方式 ​

  • practice7.html

    html
    <!DOCTYPE html>
<html>
<head>
    <meta charset="UTF-8">
    <title>Title</title>

    <script type="text/javascript">
        window.onload = function () {
            document.getElementById("registFrom").onsubmit = function () {
                return false;
            }
        }
    </script>

</head>
<body>
<form action="#" id="registFrom">
    用户名：<input type="text" name="username" id="username"/><br/>
    密码：<input type="password" name="password" id="password"/><br/>
    <input type="submit" value="注册"/>
</form>
</body>
</html>

综合案例 ​

需求 ​

  • 注册表单校验
  • 对表单中的用户名和密码进行非空校验，校验不通过阻止表单提交

编码 ​

html
<!DOCTYPE html>
<html>
<head>
    <meta charset="UTF-8">
    <title>Title</title>

    <script>
        window.onload = function () {
            document.getElementById("registFrom").onsubmit = function () {

                var username = document.getElementById("username").value;
                var password = document.getElementById("password").value;

                if (username && password) {
                    return true;
                } else {
                    return false;
                }
            };
        }
    </script>
</head>
<body>
<form action="#" id="registFrom">
    用户名：<input type="text" name="username" id="username"/><br/>
    密码：<input type="password" name="password" id="password"/><br/>
    <input type="submit" value="注册"/>
</form>
</body>
</html>

BOM ​

BOM概述 ​

BOM（Browser Object Model），浏览器对象模型(将客户端的浏览器抽象成一类对象)，是将我们使用的浏览器抽象成对象模型，例如我们打开一个浏览器，会呈现出以下页面，通过js提供浏览器对象模型对象我们可以模拟浏览器功能。

例如，在浏览器地址栏输入地址，敲击回车这个过程，我们可以使用location对象进行模拟。在例如，浏览器中的前进和后退按钮，我们可以使用history对象模拟。当然除此之外，BOM对象不仅仅具备这些功能

BOM对象 ​

  • 【了解】Screen对象，Screen 对象中存放着有关显示浏览器屏幕的信息。

  • 【重点】Window对象,Window 对象表示一个浏览器窗口或一个框架。

  • 【了解】Navigator对象，包含的属性描述了正在使用的浏览器

  • 【重点】History对象，其实就是来保存浏览器历史记录信息。

  • 【重点】Location对象，Location 对象是 Window 对象的一个部分，可通过window.location 属性来访问。

Window对象 ​

弹框方法 ​

API ​

  • onload 事件

    javascript
    onload = function() {

}

  • alert

    javascript
    alert("Hello");

  • confirm

    javascript
    var flag = confirm("确定要删除吗？");

  • prompt

    javascript
    var value = prompt("请输入密码");
练习 ​

  • practice8.html

    html
    <!DOCTYPE html>
<html>
<head>
    <meta charset="UTF-8">
    <title>Title</title>

    <script type="text/javascript">
        var confirmFlag = confirm("确定要删除吗？");
        if(confirmFlag) {
            console.log("删除了.............");
        };
    </script>
</head>
<body>
</body>
</html>

定时器方法 ​

API ​

  • setInterval(code, millisec)

    按照指定时间，周期性地执行

    • code

    当时间到了的时候，运行的代码 - 普通函数/匿名函数

    • millsec

    毫秒，这一个运行多次的代码，时长是多长。1秒执行一次，还是2秒执行一次，如果是1秒的话，转换成毫秒就是1000

    • 返回值

    一个id

  • clearInterval(id_of_setinterval)

    清除周期性执行的方法 把setInterval得到的返回值，传给clearInterval的话，这个定时器就被销毁了

  • setTimeout(code, millisec)

    在指定时间(毫秒值)后执行一次 参数和返回值，与setInterval一致

  • clearTimeout(id_of_settimeout)

    清除setTimeout()方法 参数与clearInterval一致

练习一 ​

  • 定时炸弹

    html
    <!DOCTYPE html>
<html>
<head>
    <meta charset="UTF-8">
    <title></title>

    <script>

        function boom() {
            var timeout = setTimeout(function() {
                alert("我爆炸了.....................");
            }, 3000);
            // clearTimeout(timeout);
        }

    </script>

</head>
<body>
<button onclick="boom();">点我，我会爆炸</button>
</body>
</html>
练习二 ​

  • 轮播图

    html
    <!DOCTYPE html>
<html>
<head>
    <meta charset="UTF-8">
    <title>Title</title>

    <script>
        var imgIdx = 0;

        function changeImg() {
            imgIdx = (imgIdx + 1) % 3;

            document.getElementById("img").src = "img/" + (imgIdx + 1) + ".jpg";
        }

        window.onload = function(){
            setInterval("changeImg();",2000);
        };
    </script>
</head>
<body>
<div >
    <img width="100%" id="img" src="../img/3.jpg"/>
</div>
</body>
</html>

Location对象 ​

  • location.href【属性】

    获取或者设置当前的URL

    js
    alert(location.href);
// 输出当前页面的url地址

location.href = "http://www.baidu.com";
// 将当前的url地址设置为"http://www.baidu.com"

  • location.reload()【方法】

    重新加载当前页面

History对象 ​

操作浏览器的浏览历史

  • history.back()

    向回退一页

  • history.forward()

    向前进一页

  • history.go()

    指定向前进(正数)或往后退(负数)

学习目标总结 ​

  • 了解什么是 JavaScript【了解】
  • 掌握 JavaScript 的基础语法【掌握】
  • 掌握 JavaScript 中函数的定义两种方式【重点】
  • 掌握 JavaScript 中常用的事件【重点】
  • 掌握 JavaScript 中 BOM 对象的常用方法【熟悉】