一、简介

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、特点：

  1. 交互性（它能够做的就是信息的动静交互）
  2. 安全性（不容许间接拜访本地硬盘）
  3. 跨平台性（只有是能够解析js的浏览器都能够执行，和平台无关）

3、和Java区别：

javascript ：Netscape公司的产品，最后叫Livescript。是一门直译式脚步语言，弱类型语言

Java ： Sun公司的产品，当初是Oracle公司的产品。须要先编译成字节码文件再执行，强类型语言

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. 只能由字母、数字、_（下划线）、$（美元符号）组成。

  1. 不能以数字结尾。

  1. 命名中不能呈现-（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类型，不存在相似整数除以整数还是整数的论断。

  1. 字符串和其余的数据应用+号运算，会连接成一个新的字符串。

  1. 字符串应用除了+以外的运算符：如果字符串自身是一个数字，那么会主动转成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显示如下：

21 42 63 84 4

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">

// 定义一个函数 : functionfunction demo2() {    return 666;}// 调用函数 :alert(demo2());

</script>

18.3、如果函数须要传递参数、不须要指定参数的类型、间接应用变量即可

<script type="text/javascript">

// 定义一个函数 : functionfunction demo3(a, b) {    return a + b;}// 调用函数 :alert(demo3(10, 20));//显示30

</script>

18.4、js中呈现二个重名的函数名、后者会把后面的笼罩掉

比照java、java有重载（同名不同参）、重写（同名同参同返回值类型、办法体不一样）

演示：

<script type="text/javascript">

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

function demo4() {

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

}

demo4(10, 20);demo4();

</script>

网页会显示 调用2...

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. 执行指令：事件触发后须要执行的代码，个别应用函数进行封装

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

案例：

<!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>

到此基础完结。