JavaScript 课堂笔记（上）

1、概述

1.1 什么是JavaScript？

1.1.1 概念

JavaScript 是脚本语言，是一种解释性脚本语言（代码不进行预编译）
JavaScript 是一种轻量级的编程语言。
JavaScript 是可插入 HTML 页面的编程代码。
JavaScript 插入 HTML 页面后，可由所有的现代浏览器执行。
JavaScript 很容易入门。

1.1.2 作用

• 1、为网页添加各式各样的动态功能,
• 2、为用户提供更流畅美观的浏览效果。
  通常JavaScript脚本是通过嵌入在HTML中来实现自身的功能的。

1.2 JavaScript历史-了解

它最初由Netscape的Brendan Eich设计。JavaScript是甲骨文公司的注册商标。Ecma国际以JavaScript
为基础制定了ECMAScript标准。JavaScript也可以用于其他场合，如服务器端编程。完整的JavaScript
实现包含三个部分：ECMAScript，文档对象模型，浏览器对象模型。
Netscape在最初将其脚本语言命名为LiveScript，后来Netscape在与Sun合作之后将其改名为
JavaScript。JavaScript最初受Java启发而开始设计的，目的之一就是“看上去像Java”，因此语法上有
类似之处，一些名称和命名规范也借自Java。但JavaScript的主要设计原则源自Self和Scheme。
JavaScript与Java名称上的近似，是当时Netscape为了营销考虑与Sun微系统达成协议的结果。为了取
得技术优势，微软推出了JScript来迎战JavaScript的脚本语言。为了互用性，Ecma国际（前身为欧洲计
算机制造商协会）创建了ECMA-262标准（ECMAScript）。两者都属于ECMAScript的实现。尽管
JavaScript作为给非程序人员的脚本语言，而非作为给程序人员的脚本语言来推广和宣传，但是
JavaScript具有非常丰富的特性。
发展初期，JavaScript的标准并未确定，同期有Netscape的JavaScript，微软的JScript和CEnvi的
ScriptEase三足鼎立。1997年，在ECMA（欧洲计算机制造商协会）的协调下，由Netscape、Sun、微
软、Borland组成的工作组确定统一标准：ECMA-262。

1.3 JavaScript的用法

JavaScript通常简称为js,或者js脚本。

1.3.1 HTML页面中的JavaScript

在html页面中的脚本必须位于script围堵标签之间，script标签放在head中可以，body中也可以，
放在最后也可以，对位置要求不严格。
我们可以在 HTML 文档中放入不限数量的script标签，通常的做法是把内容统一放入head或者页
面底部。这样就可以把它们安置到同一处位置，不会干扰页面的内容。
PS:有些案例中可能会在 script 标签中出现type=“text/javascript”。现在完全可以省略了，JavaScript已
经 是所有现代浏览器以及 HTML5 中的默认脚本语言。

<!DOCTYPE html>
<html>
<head>
<meta charset="utf-8" />
<title>JavaScript的用法</title>
<script>
alert("hello JavaScript1-1");
</script>
<script>
alert("hello JavaScript1-2");
</script>
</head>
<body>
<script>
alert("hello JavaScript2-1");
</script>
<script>
alert("hello JavaScript2-2");
</script>
</body>
</html>
<script>
alert("hello JavaScript3-1");
</script>
<script>
alert("hello JavaScript3-2");
</script>

1.3.2 外部的JavaScript

可以把脚本保存到外部文件中。外部文件通常包含被多个网页使用的代码。外部 JavaScript 文件的文件
扩展名是 .js。
当我们使用外部文件时，在HTML页面的script 标签的 “src” 属性中设置该 .js 文件：

myScript.js文件  //外部js文件中不能有script标签，直接编写JavaScript脚本代码即可
function fun1(){
alert("hello JavaScript");
}
<!DOCTYPE html>
  <html>
 <head>
 <script src="js/myScript.js"/>
 </head>
   <body>
   <script>
   fun1();//调用脚本中的内容s
      </script>
    </body>
</html>
外部文件引入一次即可，在head或者body中都可以。

PS:外部脚本不能包含 script 标签。
1.3.3 标签属性中的JavaScript
直接编写在HTML标签的一些属性中，用于简单的JavaScript代码的编写，用的偏少。

1.4 JavaScript显示数据

1.4.1 使用window.alert()弹出框

PS：这里的window可以省略，等价于alert(“hello world”);

1.4.2 使用document.write()将内容写入到html文档

1.4.3 使用innerHTML写入到html元素

2、JavaScript的注释

JavaScript注释与java的单行和多行注释相同。
单行注释以 // 开头。
多行注释以 /* 开始，以 */ 结尾。

3、JavaScript基本语法

JavaScript 是一个脚本语言。它是一个轻量级，但功能强大的编程语言。
JavaScript语法跟Java很相似，但是也有区别。JavaScript是弱语言类型，即有些时候有些错误不影响运
行，但是依然推荐大家按照规范去编写代码，语言弱，程序员不能弱。

3.1 JavaScript变量

声明变量的关键字：var
语法：var 变量名称；

变量的命名规则：

• 变量必须以字母开头
• 变量也能以 $ 和 _ 符号开头
• 变量名称对大小写敏感（y 和 Y 是不同的变量）
• 不能使用关键字保留字
  变量的命名规范：
• 见名知意 。例如：breadPirce,userService等，避免无意义的a,b,c等
• 推荐驼峰命名法，即第一个单词的首字母小写，以后每个单词的首字母大写。例如lastName

3.2 JavaScript的语句

JavaScript 语句向浏览器发出的命令。语句的作用是告诉浏览器该做什么。
JavaScript 是脚本语言，浏览器会在读取代码时，逐行地执行脚本代码。而对于传统编程来说，会在执
行前对所有代码进行编译。
JavaScript中也有分支结构和循环结构，语法与java类似，此处就不再深入讲解。细节上的内容等我们
后面使用过的时候再给大家单独指出。
PS：一般一行只写一条语句，每句结尾编写分号结束。

3.3 JavaScript的数据类型

3.3.1 值类型(基本类型)

3.3.1.1 字符串String

字符串是存储字符的变量。字符串可以是引号中的任意文本。必须使用单引号或双引号；

3.3.1.2 数字Number

JavaScript 只有一种数字类型。数字可以带小数点，也可以不带：

3.3.1.3 布尔Boolean

只能有两个值：true 或 false。

3.3.1.4 空Null

3.3.1.5 未定义Undefined

表示变量不含有值。可以通过将变量的值设置为 null 来清空变量。
共有4中情况会出现undefined的值（有些知识语法还未学习，但是不影响理解，大家根据学过的java知
识对比理解）
1、变量声明且没有赋值；
2、获取对象中不存在的属性时；
3、函数需要实参，但是调用时没有传值，形参是undefined；
4、函数调用没有返回值或者return后没有数据，接收函数返回的变量是undefined。

### 3.3.1.6 Symbol

（Symbol 是 ES6 引入了一种新的原始数据类型，表示独一无二的值）–后续课程中介绍。

3.3.2 引用数据类型：

对象(Object)、数组(Array)、函数(Function)。稍后详细介绍。

3.3.3 JavaScript拥有动态类型

JavaScript 拥有动态类型。这意味着相同的变量可用作不同的类型：

var param;     // param类型为 undefined
param = 5;      // 现在 param 为数字
param = "John";    // 现在 param 为字符串
PS:虽然JavaScript支持这种写法，但是我不推荐这种写法。大家尽量开始声明变量的时候就确定好将要
盛放什么类型的值，以后尽量不随意改变。

4、JavaScript对象

4.1 JavaScript的String对象

4.1.1 String对象属性–长度属性

var str="我喜欢,最喜欢";
//注意：字符串中出现的\'是一个字符，转义为一个单引号
console.log(str);
//获取字符串的长度：，切记：所有转移符号的长度都算一个，即\'长度为1
console.log("字符串的长度="+str.length);//22

4.1.2 String对象方法

JavaScript中的String对象方法与java的String方法很多都类似甚至一样，这里不再一一赘述。提供大家
一个参考表格，需要的自行查阅。

4.2 JavaScript的Array对象

Array 对象用于在变量中存储多个值，也就是数组。

4.2.1 声明数组

4.2.2 数组的长度 length属性

PS：大家需要注意的length是数组的属性，不是方法，所以调用的时候没有括号。

var nameArr=["张三","李四","王五"];
var len=nameArr.length; //获取数组的长度

4.2.2 Array对象的方法

方法比较多，这里不再给大家一一讲述，给大家一个表格参考表格。感兴趣的同学自行查阅。

4.3 JavaScript的Date对象

4.3.1 创建日期对象

var date1 = new Date();
var date2 = new Date(milliseconds);
var date3 = new Date(dateString);
var date4 = new Date(year, month, day, hours, minutes, seconds, milliseconds);

4.3.2 日期对象的常用方法

4.4 JavaScript的Math对象

与java中的Math相似，跟数学相关的内容都这里。有很多方法属性与java中的也类似。

4.4.1 Math常用属性

var pi=Math.PI;//返回圆周率

4.4.2 Math常用方法

var num=Math.random();// 返回 0 ~ 1 之间的随机数。
var max=Math.max(12,34,-90,9);//返回 n个数值中的最大值。
var min=Math.min(12,34,-90,9);//返回 n个数值中的最小值。