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 ====>falsefalse（了解）：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>