公众号  关注一波  不定期分享视频资料
 
 
 
                                                               
 
一、简介
 
1、概述：
 
JavaScript是目前web开发中不可缺少的脚本语言，js不需要编译即可运行，运行在客户端，需要通过浏览器来解析执行JavaScript代码。
 
诞生于1995年，当时的主要目的是验证表单的数据是否合法。
 
JavaScript本来应该叫Livescript，但是在发布前夕，想搭上当时超热的java顺风车，临时把名字改为了JavaScript。（也就是说js跟java没有关系，当时只是想借助java的名气）。
 
js组成部分：
 
 
 
（1）核心（ECMAScript）：这一部分主要是js的基本语法。
 
（2）BOM：Brower Object Model（浏览器对象模型），主要是获取浏览器信息或操作浏览器的，例如：浏览器的前进与后退、浏览器弹出提示框、浏览器地址栏输入网址跳转等操作等。
 
（3）DOM：Document Object Model（文档对象模型），此处的文档暂且理解为html，html加载到浏览器的内存中，可以使用js的DOM技术对内存中的html节点进行修改，用户从浏览器看到的是js动态修改后的页面。（增删改查）
 
2、特点：
 
交互性（它可以做的就是信息的动态交互）
安全性（不允许直接访问本地硬盘）
跨平台性（只要是可以解析js的浏览器都可以执行，和平台无关）
3、和Java区别：
 
 
4、作用
 
avaScript 被用来改进设计、验证表单、检测浏览器、创建cookies，等等。JavaScript 是因特网上最流行的脚本语言，并且可在所有主要的浏览器中运行，比如： Internet Explorer、 Maxthon、Mozilla、Firefox、Netscape、Chrome和 Opera等。
 
在目前学习阶段只要记住最常用的二个：（1）运态修改html及css代码 （2）验证表单
 
5、书写位置
 
5.1、内嵌式：
 
理论上js可以书写在页面的任意位置。
 
<script>
 
alert("内嵌式")
 
</script>
 
5.2、外链式：
 
首先新建一个文件类型为.js的文件，然后在该文件中写js语句，通过script标签对引入到html页面中。
 
<script src="js文件路径地址">这里不能写js语句</script>
 
5.3、行内式：
 
直接书写在标签身上，是一个简写的事件，所以又称之为事件属性。     onclick单击事件
 
<input type="button" value="点我呀!" onclick="alert('点我干啥!^6^');">
<button onclick="alert('恭喜你,中 500 万.');">点我呀!</button>
 
6、注释：
 
单行注释：		//	注释语句		快捷键ctrl+/
多行注释：		/* 注释语句 */    快捷键ctrl+shift+/   
注意：多行注释相互不能嵌套使用，只能在多行注释里面使用单行注释！
 
7、数据类型：
 
Js中的数据类型：
  
 
数值型：number（凡是数字都是数值型，不区分整数和小数）
字符串：string（凡是引号包裹起来的内容全部都是字符串）
布尔：boolean（true、false）
对象类型：object（特殊取值null）
未定义型：undefined
 
对比java中的数据类型：
 
整数：byte short int long
小数：float double
字符：char 
布尔：boolean
字符串：String
 
8、变量：
 
8.1、定义：就是存放数据的、内疗可以存储任意数据
 
8.2、声明变量：
  
 
var 变量名称 = 存储的数据;   	(variable 变量)
 
8.3、变量命名规范：
 
1.	只能由字母、数字、_（下划线）、$（美元符号）组成。
2.	不能以数字开头。
3.	命名中不能出现-（js会理解成减号进行减法的操作），不能和关键字冲突。
 
js是弱类型语言，不重视类型的定义，但js会根据为变量赋值的情况自定判断该变量是何种类型：
 
数值型：var i = 1;	var d = 2.35;
字符串：var str = "用心学习";
布尔型：var b = true;
 
对比Java:java是强类型的语言，注重类型的定义，Java定义类型如下：
 
整型：int i = 1;
浮点型：double d = 2.35;
字符串：String str = “用心学习”;
布尔型：boolean b = true;
 
总结：js中变量的定义。只要加一个var就行。java则使用什么类型的变量就要定义什么类型的。
 
9、检测数据类型：
 
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、算术运算符
 
+	-	*	/	%	++	--
 
注意：
 
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、关系（比较）运算符
 
>		>=		<		<=  	!=		
==	等于（只比较内容）	===	恒等于（比较内容的同时还要比较数据类型）
注意：关系运算符返回的结果只有两个：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、逻辑运算符
 
&&	 	与		true&&false		====>false
|| 		或		true||false			====>true
！ 		非		!true				====>false
false（理解）：false,  0,  null,  undefined 
true（理解）：true, 非0,  非null,  非undefined

针对 && 顺口溜: 找第一个出现的假值. (一假即假)
针对 || 顺口溜: 找第一个出现的真值. (一真即真)
 
演示一：
 
<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>
 
演示二:
 
<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、三元运算符：
 
条件？表达式1：表达式2
如果条件为true，返回表达式1的结果
如果条件为false，返回表达式2的结果
 
演示：
 
<script>

    // 请问1 :  3 ? “aaa” : “bbb” 结果为 ?
    alert(3 ? "aaa" : "bbb");       // aaa

    // 请问2 :  0 ? “ccc” : “ddd”  结果为 ?
    alert(0 ? "ccc" : "ddd");       // ddd
    
</script>
 
14、if条件语句
 
这个和Java中if语句一样。
 
演示：
 
<script>

      var score = 59;

      if (score >= 90) {
          alert("优秀");
      } else if (score >= 80) {
          alert("良好");
      } else if (score >= 60) {
          alert("及格");
      } else {
          alert("不及格");
      }

  </script>
 
15、switch分支结构
 
这个和java中switch结构一样。只是Java中表达式为：常量 整型（去long）、字符、字符串
 
演示：
 
<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、循环结构 while、do-while. for;
 
while(循环条件){循环体;}
do{循环体;}while(循环条件);
for(循环变量赋初值；循环条件；循环变量增值){循环语句;}
console.log（...）; 以日志的形式在控制台输出结果！
 
演示：
 
<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显示如下：
 
 
17、循环嵌套
 
演示案例9*9乘法表
 
 <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、自定义函数
 
函数是命名的独立的语句段，这个语句段可以被当作一个整体来引用和执行：
 
格式：
 
function 函数名(形式参数){函数体}
调用函数：函数名(实际参数);
 
18.1、函数只有被调用后才会执行
 
18.2、如果函数需要返回值、直接使用return 返回、不会像java一样要考虑返回值的类型
 
<script type="text/javascript">

    // 定义一个函数 : function
    function demo2() {
        return 666;
    }

    // 调用函数 :
    alert(demo2());

</script>
 
18.3、如果函数需要传递参数、不需要指定参数的类型、直接使用变量即可
 
<script type="text/javascript">

    // 定义一个函数 : function
    function demo3(a, b) {
        return a + b;
    }

    // 调用函数 :
    alert(demo3(10, 20));//显示30

</script>
 
18.4、js中出现二个重名的函数名、后者会把前面的覆盖掉
 
对比java、java有重载（同名不同参）、重写（同名同参同返回值类型、方法体不一样）
 
演示：
 
<script type="text/javascript">

    // 定义一个函数 : function
    function demo4(a, b) {
        alert("调用1...");
    }

   function demo4() {
       alert("调用2...");
   }

    demo4(10, 20);
    demo4();

</script>
 
会显示二次下面的图片：
 
 
19、匿名函数
 
匿名函数是没有名字的函数
 
function(形式参数){函数体}
调用方式：将匿名函数赋值给一个变量，通过变量名调用函数
定义函数并赋值给变量：var fn = function(形式参数){函数体}
调用函数：fn(实际参数);
 
演示：
 
<script type="text/javascript">

    // 匿名函数 : 没有名称的函数
    var func = function(i, u) {
        alert(i + " love " + u);
    }

    // 调用函数 :
   func("柳岩", "小白");//显示柳岩love小白

</script>
 
20、案例-轮播图
 
说明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>
 
实现一：
 
<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>
 
实现二：
 
<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事件
 
21.1、事件概述：
 
事件三要素：
1.	事件源：被监听的html元素（就是这个事件加给谁），就是某个（某些）html标签
2.	事件类型：某类动作，例如点击事件，移入移除事件，敲击键盘事件等
3.	执行指令：事件触发后需要执行的代码，一般使用函数进行封装
语法格式：事件源.事件类型=执行指令
 
21.2、常用的事件：
 
 
案例：
 
<!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>
 
到此基础结束。
 
 
 
==============《轮播图图片路径问题》================
 
 
 
 
 
                                                       =================================
 
                    公众号  关注一波  （一叶知秋博客）不定期分享视频资料
 
                                                       
 
 
 
 

 
 
Document.currentScript 属性返回当前正在运行的脚本所属的 <script> 元素。调用此属性的脚本不能是 JavaScript 模块，模块应当使用 import.meta 对象。
 
 
值得注意的是，如果当前正在执行的代码是被其他代码作为回调函数或者事件处理函数调用的，那么 currentScript 属性不会指向任何 <script>元素，而是会返回 null。这个属性只在脚本被解析后首次运行时有效。
 
实例1（下例演示了如何检测当前正在执行脚本的 
if (document.currentScript.async) {
  console.log("Executing asynchronously");
} else {
  console.log("Executing synchronously");
}
 
实例2（获取自身get参数）
 
// 注意：该代码需要写在js文件里(<script src="..."></script>)，直接在浏览器控制台执行无效
var src = document.currentScript.src;
var getParam = src.substring(src.lastIndexOf('?')+1);
console.log(getParam);

最近，一个实时人物删除（Real Time Person removation）的项目在GitHub上流行起来。
 
这个项目的神奇之处在于，只需要在网页浏览器中使用JavaScript，并使用200多行TensorFlow.js代码，就能让视频屏幕中的字符和对象实时从复杂的背景中消失。
 
虽然这不能让你像哈利波特那样隐形的梦想在现实生活中成真，但至少你可以在视频和动画中体验隐形的刺激。
 
这个项目开发者是谷歌网站工程师杰森·梅耶斯。通过TensorFlow.js制作了一个插件，允许系统分离人和背景，然后实时从场景中移除任何人，这意味着人们可以从视频中“消失”。效果如下所示：
 
 
为了使人物在镜头中“消失”，必须首先找到人体的位置区域。这里使用的是TensorFlow.js已经训练过的身体分割模型，可以直接在浏览器或Node.js中使用机器学习模型。
 
项目地址请参见：https://github.com/jasonmayes/Real-Time-Person-Removal

JavaScript(JS)的基本语法
 
目录
 
JavaScript(JS)的基本语法
 
一. 与html结合方式
 
二. 注释
 
三. 数据类型：
 
四. 变量
 
五. 运算符(和Java有点类似)
 
六. 流程控制语句（和JAVA 类似）：
 
七. JS特殊语法：
 

一. 与html结合方式
 
            1. 内部JS：定义<script>，标签体内容就是js代码（可以理解为和html代码写在一起）
             2. 外部JS：定义<script>，通过src属性引入外部的js文件（单独定义的JS代码，没有和html代码写在一块）
 
            * 注意：
                 1. <script>可以定义在html页面的任何地方。但是定义的位置会影响执行顺序。
                 2. <script>可以定义多个。
 
二. 注释
 
            和Java语言一样
             1. 单行注释：//注释内容
             2. 多行注释：/*注释内容*/
 
三. 数据类型：
 

             1. 原始数据类型(基本数据类型)：（不知道原始数据类型也可以学好JavaScript）
                 1. number：数字。 整数/小数/NaN(not a number 一个不是数字的数字类型)
                 2. string：字符串。 字符串  "abc"、 "a" 、'abc'
                 3. boolean: true和false
                 4. null：一个对象为空的占位符
                 5. undefined：未定义。如果一个变量没有给初始化值，则会被默认赋值为undefined
             2. 引用数据类型：对象
 
四. 变量
 

             1、变量：一小块存储数据的内存空间
             2、Java语言是强类型语言，而JavaScript是弱类型语言。
                 * 强类型：在开辟变量存储空间时，定义了空间将来存储的数据的数据类型。只能存储固定类型的数据
                 * 弱类型：在开辟变量存储空间时，不定义空间将来的存储数据类型，可以存放任意类型的数据。
             3、语法：
                 * var 变量名 = 初始化值;
             4、typeof运算符：获取变量的类型。
                 * 注：null运算后得到的是object
 
五. 运算符(和Java有点类似)
 
    1. 一元运算符：只有一个运算数的运算符
                 分别有 ++、--、 +(正号)  
                 1.1  ++ --: 自增(自减)
                     ++(--) 在前，先自增(自减)，再运算
                     ++(--) 在后，先运算，再自增(自减)
                 1.2 +(-)：正负号
                 1.3 注意：在JS中，如果运算数不是运算符所要求的类型，那么js引擎会自动的将运算数进行类型转换
                 1.4 其他类型转number：
                         string转number：按照字面值转换。如果字面值不是数字，则转为NaN（不是数字的数字）
                         boolean转number：true转为1，false转为0
      2. 算数运算符
                 +     -      *     /     %   ...
 
     3. 赋值运算符
                 =     +=      -=  ....
 
      4. 比较运算符
                 >      <       >=       <=       ==       ===(全等于)
                 * 比较方式
                   1. 类型相同：直接比较
                       * 字符串：按照字典顺序比较。按位逐一比较，直到得出大小为止。
                   2. 类型不同：先进行类型转换，再比较
                       * ===：全等于。在比较之前，先判断类型，如果类型不一样，则直接返回false
 
      5. 逻辑运算符
                 && （与）    ||（或）      !（非）
                 * 其他类型转boolean：
                    1. number：0或NaN为假，其他为真
                    2. string：除了空字符串("")，其他都是true
                    3. null&undefined:都是false
                    4. 对象：所有对象都为true（这个地方很有用的，if(对象){   }这样写，感觉逼格很高）
 
      6. 三元运算符
                 ?  :  表达式
                 var a = 3;
                 var b = 4;
         
                 var c = a > b ? 1:0;
                 * 语法：
                     * 表达式? 值1:值2;
                     * 判断表达式的值，如果是true则取值1，如果是false则取值2；
 
六. 流程控制语句（和JAVA 类似）：
 

             1. if...else...
             2. switch:
                 * 在java中，switch语句可以接受的数据类型： byte int shor char,枚举(1.5) ,String(1.7)
                     * switch(变量):
                         case 值:
                 * 在JS中,switch语句可以接受任意的原始数据类型
             3. while
             4. do...while
             5. for
 
七. JS特殊语法：
 

             1. 语句以 ; (分号)结尾，如果一行只有一条语句则 ; 可以省略 (不建议)
             2. 变量的定义使用var关键字，也可以不使用
                 * 用： 定义的变量是局部变量
                 * 不用：定义的变量是全局变量(不建议)
 
以上就是JavaScript(JS)简单的基本语法，其他的可以自行上网搜索。。。。
 
想要查看JS的简单介绍，可以点击查看
 
 
 
请看点击查询基本语法章节
 
请看点击查询基本对象章节
 
请看点击查询BOM对象章节
 
请看点击查询DOM对象章节