1.为什么要学习JavaScript?

JavaScript 是 web 开发者必学的三种语言之一：

(1)HTML 定义网页的内容

(2)CSS 规定网页的布局

(3)JavaScript 对网页行为进行编程;

2.JavaScript 能够改变 HTML 内容

(1)getElementById() 是多个 JavaScript HTML 方法之一。

eg: 

document.getElementById('id名').innerHTML='hello'

3.<script> 标签

在 HTML 中，JavaScript 代码必须位于 <script> 与 </script> 标签之间。

 4.javascript的输出

JavaScript 显示方案

JavaScript 能够以不同方式“显示”数据：

1. 使用 window.alert() 写入警告框

2. 使用 document.write() 写入 HTML 输出

3. 使用 innerHTML 写入 HTML 元素

4. 使用 console.log() 写入浏览器控制台

在 HTML 文档完全加载后使用 document.write() 将删除所有已有的 HTML

 5.javascript语句

在 HTML 中，JavaScript 语句是由 web 浏览器“执行”的“指令”。

JavaScript 程序：

计算机程序是由计算机“执行”的一系列“指令”。

在编程语言中，这些编程指令被称为语句。

JavaScript 程序就是一系列的编程语句。

注释：在 HTML 中，JavaScript 程序由 web 浏览器执行。

JavaScript 语句由以下构成：值、运算符、表达式、关键词和注释。

 6.JavaScript 值

JavaScript 语句定义两种类型的值：混合值和变量值。

混合值被称为字面量（literal）。变量值被称为变量。

 7.JavaScript 变量

在编程语言中，变量用于存储数据值。

JavaScript 使用 var 关键词来声明变量。

= 号用于为变量赋值。

8.JavaScript 运算符

JavaScript 使用算数运算符（+ - * /）来计算值：

9.JavaScript 表达式

表达式是值、变量和运算符的组合，计算结果是值。

10.JavaScript 字符集

JavaScript 使用 Unicode 字符集。

Unicode 覆盖世界上几乎所有的字符、标点和符号。

11.JavaScript 标识符

所有 JavaScript 变量必须以唯一的名称的标识。

这些唯一的名称称为标识符。

标识符可以是短名称（比如 x 和 y），或者更具描述性的名称（age、sum、totalVolume）。

构造变量名称（唯一标识符）的通用规则是：

1. 名称可包含字母、数字、下划线和美元符号

2. 名称必须以字母开头

3. 名称也可以 $ 和 _ 开头（但是在本教程中我们不会这么做）

4. 名称对大小写敏感（y 和 Y 是不同的变量）

5. 保留字（比如 JavaScript 的关键词）无法用作变量名称

6. 提示：JavaScript 标识符对大小写敏感。

12.重复声明 JavaScript 变量

如果再次声明某个 JavaScript 变量，将不会丢它的值。

在这两条语句执行后，变量 carName 的值仍然是 "porsche"：

eg:

var carName = "porsche";

var carName;

 13.typeof运算符

typeof [1,2,3,5,6]       //object

typeof 运算符把数组返回为 "object"，因为在 JavaScript 中数组即对象。

14.JavaScript 函数

JavaScript 函数是被设计为执行特定任务的代码块。

JavaScript 函数会在某代码调用它时被执行。

函数调用

函数中的代码将在其他代码调用该函数时执行：

1. 当事件发生时（当用户点击按钮时）

2. 当 JavaScript 代码调用时

3. 自动的（自调用）

函数返回

当 JavaScript 到达 return 语句，函数将停止执行。

如果函数被某条语句调用，JavaScript将在调用语句之后“返回”执行代码。

15.javarscript对象

对象也是变量。但是对象包含很多值。

空格和折行都是允许的。对象定义可横跨多行：

eg:

var person={

    name:'lili',

    age:18

}

访问对象属性:

1. objectName.propertyName

2. objectName["propertyName"]

访问对象方法：

您能够通过如下语法访问对象方法：

objectName.methodName()

方法实际上是以属性值的形式存储的函数定义。

请不要把字符串、数值和布尔值声明为对象！

16.JavaScript事件

HTML事件是发生在HTML元素上的“事情”。

当在HTML页面中使用JavaScript 时，JavaScript 能够“应对”这些事件。

HTML事件

HTML事件可以是浏览器或用户做的某些事情。

下面是 HTML 事件的一些例子：

1. HTML 网页完成加载

2. HTML 输入字段被修改

3. HTML 按钮被点击

通常，当事件发生时，用户会希望做某件事。

JavaScript 允许您在事件被侦测到时执行代码。

通过JavaScript代码，HTML允许您向HTML元素添加事件处理程序。

常见的 HTML 事件

下面是一些常见的 HTML 事件：

1. onchange HTML 元素已被改变

2. onclick  用户点击了 HTML 元素

3. onmouseover  用户把鼠标移动到 HTML 元素上

4. onmouseout   用户把鼠标移开 HTML 元素

5. onkeydown    用户按下键盘按键

6. onload   浏览器已经完成页面加载

JavaScript能够做什么？

事件处理程序可用于处理、验证用户输入、用户动作和浏览器动作：

  • 每当页面加载时应该做的事情
  • 当页面被关闭时应该做的事情
  • 当用户点击按钮时应该被执行的动作
  • 当用户输入数据时应该被验证的内容

让 JavaScript 处理事件的不同方法有很多：

1. HTML 事件属性可执行 JavaScript 代码

2. HTML 事件属性能够调用 JavaScript 函数

3. 您能够向 HTML 元素分配自己的事件处理函数

4. 您能够阻止事件被发送或被处理

 17.JavaScript 字符串

JavaScript 字符串用于存储和操作文本

其他六个 JavaScript 中有效的转义序列：

1. \b   退格键

2. \f   换页

3. \n   新行

4. \r   回车

5. \t   水平制表符

6. \v   垂直制表符

18.JavaScript 字符串方法

(0)返回字符串索引

1.indexOf() 方法返回字符串中指定文本首次出现的索引（位置）

2.lastIndexOf() 方法返回指定文本在字符串中最后一次出现的索引：

如果未找到文本， indexOf() 和 lastIndexOf() 均返回 -1。

3.search()方法返回字符串中指定文本第一次出现的位置,没有找到返回-1

两种方法，indexOf() 与 search()，是相等的。

这两种方法是不相等的。区别在于：

  • search() 方法无法设置第二个开始位置参数。
  •  indexOf() 方法无法设置更强大的搜索值（正则表达式）。

 

（1）提取部分字符串

有三种提取部分字符串的方法：

1. slice(start, end)

2. substring(start, end)

3. substr(start, length)

slice()方法：不会改变原字符串，返回的是截取的字符串

提取字符串的某个部分并在新字符串中返回被提取的部分。

slice(startindex,endindex)

注意：

如果某个参数为负，则从字符串的结尾开始计数

如果省略第二个参数，则该方法将裁剪字符串的剩余部分

 

substring() 方法:不会改变原字符串，返回的是截取的字符串

substring(startindex,endindex)

substring() 类似于 slice()。

注意：

不同之处在于 substring() 无法接受负的索引。

如果省略第二个参数，则该 substring() 将裁剪字符串的剩余部分。

 

substr() 方法:不会改变原字符串，返回的是截取的字符串

substr(startindex,length)

substr() 类似于 slice()。

注意：

不同之处在于第二个参数规定被提取部分的长度。

如果首个参数为负，则从字符串的结尾计算位置。

第二个参数不能为负，因为它定义的是长度，可以不写，默认去后面所有。

 

（2）替换字符串内容

1.replace() 方法用另一个值替换在字符串中指定的值

replace(旧值，新值)  不会改变原字符串，返回的是新字符串

注意：

replace() 对大小写敏感

如需执行大小写不敏感的替换，请使用正则表达式 /i（大小写不敏感）：

eg:

str = "Please visit Microsoft!";

var n = str.replace(/MICROSOFT/i, "W3School");

请注意正则表达式不带引号。

默认只会替换第一个值，使用/g可以全局匹配替换

如需替换所有匹配，请使用正则表达式的 g 标志（用于全局搜索）

eg:

str = "Please visit Microsoft and Microsoft!";

var n = str.replace(/Microsoft/g, "W3School");

（3）转换为大写和小写

1.toUpperCase() 把字符串转换为大写，不会改变原字符串

2.toLowerCase() 把字符串转换为小写，不会改变原字符串

 

(4)concat() 方法   连接两个或多个字符串

所有字符串方法都会返回新字符串。它们不会修改原始字符串。

正式地说：字符串是不可变的：字符串不能更改，只能替换。

 

（5）String.trim()

trim()方法删除字符串两端的空白符

注意：

Internet Explorer 8 或更低版本不支持 trim() 方法。

如需支持 IE 8，您可搭配正则表达式使用 replace() 方法代替：

eg:

var str = "       Hello World!        ";

alert(str.replace(/^[\s\uFEFF\xA0]+|[\s\uFEFF\xA0]+$/g, ''));

（6）提取字符串字符

这是两个提取字符串字符的安全方法：

charAt(position)

charCodeAt(position)

1.charAt() 方法返回字符串中指定下标（位置）的字符串：

2.charCodeAt()方法返回字符串中指定索引的字符 unicode 编码

（7）属性访问（Property Access）

ECMAScript 5 (2009) 允许对字符串的属性访问 [ ]：

eg:

var str='qwrqwer qewr'

console.log(srt[0])     //q

使用属性访问有点不太靠谱：

1. 不适用 Internet Explorer 7 或更早的版本

2. 它让字符串看起来像是数组（其实并不是）

3. 如果找不到字符，[ ] 返回 undefined，而 charAt() 返回空字符串。

4. 它是只读的。str[0] = "A" 不会产生错误（但也不会工作！）

 

（8）split() 把字符串转换为数组

eg:

var txt = "a,b,c,d,e";   // 字符串

txt.split(",");          // 用逗号分隔

txt.split(" ");          // 用空格分隔

txt.split("|");          // 用竖线分隔