共计 7312 个字符，预计需要花费 19 分钟才能阅读完成。
1、概述：
JavaScript 是目前 web 开发中不可短少的 脚本 语言，js 不须要编译即可运行，运行在客户端，须要通过浏览器来解析执行 JavaScript 代码。
诞生于 1995 年，过后的次要目标是 验证表单的数据是否非法。
JavaScript 原本应该叫 Livescript，然而在公布前夕，想搭上过后超热的 java 逆风车，长期把名字改为了 JavaScript。（也就是说 js 跟 java 没有关系，过后只是想借助 java 的名气）。
js 组成部分：
- ECMA：Script: 形成了 JS 外围的语法根底
- BOM：Brower Object Model 浏览器对象模型
- DOM: Document Object Model 文档对象模型
（1）外围（ECMAScript）：这一部分次要是 js 的根本语法。
（2）BOM：Brower Object Model（浏览器对象模型），次要是获取浏览器信息或操作浏览器的，例如：浏览器的后退与后退、浏览器弹出提示框、浏览器地址栏输出网址跳转等操作等。
（3）DOM：Document Object Model（文档对象模型），此处的文档暂且了解为 html，html 加载到浏览器的内存中，能够应用 js 的 DOM 技术对内存中的 html 节点进行批改，用户从浏览器看到的是 js 动静批改后的页面。（增删改查）
2、特点：
- 交互性（它能够做的就是信息的动静交互）
- 安全性（不容许间接拜访本地硬盘）
- 跨平台性（只有是能够解析 js 的浏览器都能够执行，和平台无关）
3、和 Java 区别：
- java：须要先编译成字节码文件，再执行
- JavaScript：直译式脚本文件
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
字符串：String8、变量：
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); 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) + " ");
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>
正文完
发表至： javascript
2020-12-10
