The fourth day of learning front-end in LeByte-javaScript learning

1. Introduction

1 Overview:

JavaScript is currently an indispensable scripting language in web development . js does not need to be compiled to run. It runs on the client side and needs to be parsed and executed through the browser.

Born in 1995, the main purpose at that time was to verify the validity of the data in the form .

JavaScript was originally called Livescript, but on the eve of its release, I wanted to ride the hot java ride and temporarily changed its name to JavaScript. (That is to say, js has nothing to do with java, I just wanted to use java's reputation at the time).

js components:

(1) Core (ECMAScript): This part is mainly the basic grammar of js.

(2) BOM: Brower Object Model (Browser Object Model), mainly used to obtain browser information or operate the browser, such as: browser forward and backward, browser pop-up prompt box, browser address bar input URL jump And so on.

(3) DOM: Document Object Model (document object model), the document here is temporarily understood as html, html is loaded into the memory of the browser, and the html node in the memory can be modified using the DOM technology of js. The browser sees the page after js dynamic modification. (Addition, deletion, modification and investigation)

2. Features:

1. Interactivity (what it can do is dynamic interaction of information)
2. Security (Do not allow direct access to the local hard disk)
3. Cross-platform (as long as it can be executed by a browser that can parse js, it has nothing to do with the platform)

3. Difference from Java:

javascript: Netscape's product, originally called Livescript. Is a literal translation language, weakly typed language

Java: Sun's product is now Oracle's product. Need to be compiled into bytecode file before execution, strongly typed language

4. Function

avaScript is used to improve design, validate forms, check browsers, create cookies, etc. JavaScript is the most popular scripting language on the Internet, and it can run in all major browsers, such as: Internet Explorer, Maxthon, Mozilla, Firefox, Netscape, Chrome, Opera, etc.

In the current learning stage, just remember the two most commonly used ones: (1) Modification of html and css code for movement mode (2) Verification form

5. Writing position

5.1, internal fitting type:

In theory, js can be written anywhere on the page.

<script>

alert("embedded")

</script>

5.2. External chain type:

First create a file with the file type of .js, and then write js statements in the file, and introduce them into the html page through the script tag pair.

<script src="js文件路径地址">这里不能写js语句</script>

5.3, In-line formula:

Writing directly on the label is an abbreviated event, so it is also called an event attribute. onclick click event

<input type="button" value="点我呀!" onclick="alert('点我干啥!^6^');">

<button onclick="alert('恭喜你,中 500 万.');">点我呀!</button>

6. Notes:

单行注释：       //  注释语句        快捷键ctrl+/

多行注释：       /* 注释语句 */    快捷键ctrl+shift+/   

注意：多行注释相互不能嵌套使用，只能在多行注释里面使用单行注释！

7. Data type:

Data types in Js:

数值型：number（凡是数字都是数值型，不区分整数和小数）

字符串：string（凡是引号包裹起来的内容全部都是字符串）

布尔：boolean（true、false）

对象类型：object（特殊取值null）

未定义型：undefined

Compare the data types in java:

整数：byte short int long

小数：float double

字符：char 

布尔：boolean

字符串：String

8. Variables:

8.1. Definition: It is to store data, internal therapy can store any data

8.2. Declare variables:

var 变量名称 = 存储的数据;       (variable 变量)

8.3. Variable naming convention:

1.  只能由字母、数字、_（下划线）、$（美元符号）组成。

2.  不能以数字开头。

3.  命名中不能出现-（js会理解成减号进行减法的操作），不能和关键字冲突。

js is a weakly typed language and does not pay attention to the definition of the type, but js will determine the type of the variable based on the assignment of the variable:

数值型：var i = 1;  var d = 2.35;

字符串：var str = "用心学习";

布尔型：var b = true;

Contrast with Java: Java is a strongly typed language, focusing on the definition of types. Java defines types as follows:

整型：int i = 1;

浮点型：double d = 2.35;

字符串：String str = “用心学习”;

布尔型：boolean b = true;

Summary: The definition of variables in js. Just add a var. Java defines what type of variables are used.

9. Test data type:

typeof(value); 或者typeof value;     返回这个变量的类型. 

说明 : 同一个变量, 可以进行不同类型的数据赋值.

<script type="text/javascript">

    var a;
    alert(typeof a);  // undefined
    a = 998;
    alert(typeof a); // number
    a = "用心学习";
    alert(typeof a); // string
    a = true;
    alert(typeof a); // boolean

</script>

10. Arithmetic operators

+   -   *   /   %   ++  --

note:

1.  由于js中的小数和整数都是number类型，不存在类似整数除以整数还是整数的结论。

2.  字符串和其他的数据使用+号运算，会连接成一个新的字符串。

3.  字符串使用除了+以外的运算符：如果字符串本身是一个数字，那么会自动转成number进行运算

，否则就会返回一个NaN的结果，表示这不是一个数字。NaN：not a number

<script>

    alert(1234 / 1000 * 1000); // 1234
    var s = "12";
    s -= 10;
    alert(s);  // 2
    var s = "aa";
    s -= 10;
    alert(s);  // NaN       Not a Number 不是一个数字
    var s = "12";
    s += 10;
    alert(s);       // 1210 

</script>

11. Relation (comparison) operators

>       >=      <       <=      !=      

==  等于（只比较内容）   === 恒等于（比较内容的同时还要比较数据类型）

注意：关系运算符返回的结果只有两个：true / false

<script>

    // 请问1 : 3 > 5, 结果为 ?
    alert(3 > 5);   // false

    // 请问2 : “22” == 22  结果为 ?
    alert("22" == 22); // true  (仅仅判断数值)

    // 请问3 : “22” === 22  结果为 ?

    alert("22" === 22);  // false  (恒等于, 数值和类型都要相等)

</script>

12. Logical operators

&&      与       true&&false     ====>false

||      或       true||false         ====>true

！       非       !true               ====>false

false（理解）：false,  0,  null,  undefined 

true（理解）：true, 非0,  非null,  非undefined

针对 && 顺口溜: 找第一个出现的假值. (一假即假)

针对 || 顺口溜: 找第一个出现的真值. (一真即真)

Demo one:

<script>

    // 短路与 (一假即假)

    // 口诀 : 找第一个为假的值.

    // 请问1 :  8 < 7 && 3 < 4, 结果为 ?

    alert(8 < 7 && 3 < 4);  // false

    // 请问2 :  -2 && 6 + 6 && null 结果为 ?

    alert(-2 && 6 + 6 && null); // null

    // 请问3 :  1 + 1 && 0 && 5  结果为 ?

    alert(1 + 1 && 0 && 5); // 0

</script>

Demo two:

<script>

    // 短路或 : 一真即真.

    // 口诀 : 找第一个为真的值.

    // 请问1 :  0 || 23 结果为 ?

    alert(0 || 23); // 23

    // 请问2 :  0 || false || true  结果为 ?

    alert(0 || false || true); // true

    // 请问3 :  null || 10 < 8 || 10 + 10结果为 ?

    alert(null || 10 < 8 || 10 + 10);  // 20

    // 请问4 :  null || 10 < 8 || false结果为 ?

    alert(null || 10 < 8 || false); // false

</script>

13. Ternary operator:

条件？表达式1：表达式2

如果条件为true，返回表达式1的结果

如果条件为false，返回表达式2的结果

Demo:

<script>

    // 请问1 :  3 ? “aaa” : “bbb” 结果为 ?

    alert(3 ? "aaa" : "bbb");       // aaa

    // 请问2 :  0 ? “ccc” : “ddd”  结果为 ?

    alert(0 ? "ccc" : "ddd");       // ddd

</script>

14. If conditional statement

This is the same as the if statement in Java.

Demo:

<script>

      var score = 59;

      if (score >= 90) {

          alert("优秀");

      } else if (score >= 80) {

          alert("良好");

      } else if (score >= 60) {

          alert("及格");

      } else {

          alert("不及格");

      }

  </script>

15, switch branch structure

This is the same as the switch structure in java. But the expression in Java is: constant integer (to long), character, string

Demo:

<script>
      var score = 59;

      // 需求 : 将需要一个整型数值, 不想要小数点.

      // window 对象的 parseInt 方法.

      score = window.parseInt(score / 10 + "");

      // alert(score);

      switch (score) {

          case 10:

          case 9:

              alert("优秀!");

              break;

          case 8:

              alert("良好!");

              break;

          case 7:

          case 6:

              alert("及格!");

              break;

          default:

              alert("不及格!");

              break;

      }

  </script>

16. Loop structure while, do-while. for;

while(循环条件){循环体;}

do{循环体;}while(循环条件);

for(循环变量赋初值；循环条件；循环变量增值){循环语句;}

console.log（...）; 以日志的形式在控制台输出结果！

Demo:

<script>
    // 需求 : 统计 1~100 之间能够被3和7整除的数字个数
    var count = 0;

    // 1. 遍历 1~100 之间的所有整型数值

    for (var i = 1; i <= 100; i++) {

        // 2. 判断

        if (i % 3 == 0 && i % 7 == 0) {

            // alert(i);

            console.log(i);

            // 3. 累加个数

            count++;

        }

    }

    // 4. 查看结果

    // alert(count);

    console.log(count);

console.log shows as follows:

21 42 63 84 4

17, loop nesting

Demo case 9*9 multiplication table

 <style>

        table {

            /* 将 table 表格的线变成了细线 */

            border-collapse: collapse;

            /*color: red;*/

            border-color: red;

        }

    </style>

    <script>

        // 需求 : 九九乘法口诀表

        document.write("<table border='1px solid red' cellspacing='0' cellpadding='8px'>");

        document.write("<caption>九九乘法口诀表</caption>");

        for (var i = 1; i <= 9; i++) {

            document.write("<tr>");

            for (var j = 1; j <= i; j++) {

                document.write("<td>");

                document.write(j + "*" + i + "=" + (j*i) + "&nbsp;&nbsp;&nbsp;&nbsp;");

                document.write("</td>");

            }

            document.write("</tr>");

        }

        document.write("</table>");

    </script>

18. Custom functions

A function is a named independent sentence segment, which can be referenced and executed as a whole:

format:

function 函数名(形式参数){函数体}

调用函数：函数名(实际参数);

18.1 The function will only be executed after it is called

18.2, if the function needs to return a value, use return directly to return, not like java to consider the type of return value

<script type="text/javascript">

    // 定义一个函数 : function

    function demo2() {

        return 666;

    }

    // 调用函数 :

    alert(demo2());

</script>

18.3. If the function needs to pass parameters, does not need to specify the type of the parameter, just use the variable directly

<script type="text/javascript">

    // 定义一个函数 : function

    function demo3(a, b) {

        return a + b;

    }

    // 调用函数 :

    alert(demo3(10, 20));//显示30

</script>

18.4. There are two function names with the same name in js, and the latter will overwrite the previous one

Contrast java and java with overloading (with different parameters with the same name) and rewriting (with the same name, the same parameter, the same return value type, and the method body are different)

Demo:

<script type="text/javascript">
    // 定义一个函数 : function

    function demo4(a, b) {

        alert("调用1...");

    }

   function demo4() {

       alert("调用2...");

   }

    demo4(10, 20);

    demo4();

</script>

The web page will display calling 2...

19. Anonymous function

An anonymous function is a function without a name

function(形式参数){函数体}

调用方式：将匿名函数赋值给一个变量，通过变量名调用函数

定义函数并赋值给变量：var fn = function(形式参数){函数体}

调用函数：fn(实际参数);

Demo:

<script type="text/javascript">

    // 匿名函数 : 没有名称的函数

    var func = function(i, u) {

        alert(i + " love " + u);

    }

    // 调用函数 :

   func("柳岩", "小白");//显示柳岩love小白

</script>

20. Case-Carousel Picture

说明1 : script 标签需要放在 body 标签之后.

说明2 : window.setInterval(“字符串函数名称()”, 时间毫秒数);

说明3 : window.setInterval(函数名称, 时间毫秒数);

说明4 : window.setInterval(匿名函数, 时间毫秒数);            推荐使用

<head>

    <meta charset="UTF-8">

    <title>轮播图</title>

    <style>

        div {

            width: 80%;

            margin: 50px auto;

        }

        img {

            width: 100%;

        }

    </style>

</head>

<body>

    <div class="container">

        <img src="../img/01.jpg" alt="图片">

    </div>

</body>

Realize one:

<script>

    // 需求 : 动态获取页面中的 img 标签, 然后修改 img 标签的 src 属性.

    // 1. 获取 img 标签

    var img = document.getElementById("img");

    // alert(img);

    // 定义一个变量

    var count = 1;

    // 1.2 定义一个函数

    function changeImageSrc() {

        count++;

        img.src = "../img/0"+count+".jpg";

        // 判断

        if (count == 8) {

            count = 0;

        }

    }

    // 2. 循环切换图片

    // window.setInterval(函数, 时间毫秒); 在指定的时间毫秒间隔, 不断调用第一个参数传入的函数.

    // 调用方式一 :

    // window.setInterval("changeImageSrc()", 1000);

    // 调用方式二 :

    window.setInterval(changeImageSrc, 1000);

</script>

Implementation two:

<script>
    // 需求 : 动态获取页面中的 img 标签, 然后修改 img 标签的 src 属性.

    // 1. 获取 img 标签

    var img = document.getElementById("img");

    // alert(img);

    // 定义一个变量

    var count = 1;

    // 2. 循环切换图片

    // window.setInterval(匿名函数, 时间毫秒); 在指定的时间毫秒间隔, 不断调用第一个参数传入的匿名函数.

    window.setInterval(function() {

        count++;

        img.src = "../img/0"+count+".jpg";

        // 判断

        if (count == 8) {

            count = 0;

        }

    }, 1000);

</script>

21, js event

21.1. Event overview:

事件三要素：

1.  事件源：被监听的html元素（就是这个事件加给谁），就是某个（某些）html标签

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

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

语法格式：事件源.事件类型=执行指令

Case:

<!DOCTYPE html>

<html lang="en">

<head>

    <meta charset="UTF-8">

    <title>事件</title>

    <script>

        // 窗口 : window 对象提供了一个事件类型  onload 页面加载完成事件.

        // 事件源 : window    事件类型 : 页面加载完成事件 (onload)  执行指令: 就是赋值的 function 函数.

        window.onload = function () {

            // 获取页面的 btn 按钮

            var btn = document.getElementById("btn");

            // alert(btn);

            // 给 btn 按钮绑定一个事件 (单击事件 onclick)

            // 事件源 : btn按钮    事件类型 : 单击事件 (onclick)  执行指令: 就是赋值的 function 函数.

            btn.onclick = function () {

                alert("恭喜你, 中了 500 万!");

            }

        }
    </script>
</head>
<body>

    <button id="btn">按钮</button>
</body>

</html>

This is the end of the foundation.