web页面的组成部分
HTML:定义了网页的内容
CSS:描述了网页的布局
JavaScript:网页的行为
完整的JavaScript
完整的JavaScript实现包含三个部分:ECMAScript,DOM(文档对象模型)和BOM(浏览器对象模型)
DOM (Document Object Model)(文档对象模型)是用于访问 HTML 元素的正式 W3C 标准
JavaScript 是脚本语言
1.JavaScript 是一种轻量级但功能强大的可插入 HTML 页面的编程语言,语法规则定义了语言结构;
2.JavaScript 插入 HTML 页面后,可由所有的现代浏览器执行
3.使用 JavaScript 来处理 HTML 内容是非常强大的功能;JavaScript 能够改变任意 HTML 元素的大多数属性
4.HTML 中的脚本必须位于 <script> </script>
标签之间
5.JavaScript 对大小写是敏感的;当编写 JavaScript 语句时,请留意是否关闭大小写切换键
6.脚本可位于 HTML 的
或 部分中,或者同时存在于两个部分中;通常的做法是把函数放在页面底部。也可以把脚本保存到外部文件中;外部文件通常包含被多个网页使用的代码;外部 JavaScript 文件的文件扩展名是 .js;如需使用外部文件,请在<script> </script>
标签的 "src" 属性中设置该 .js 文件
js可以通过不同的方式来输出数据
JavaScript 没有任何打印或者输出的函数
1.使用 document.write() 仅仅向文档输出写内容;如果在文档加载完成后使用该方法,会覆盖整个文档
2.使用 window.alert() 弹出警告框
3.使用 innerHTML 写入到 HTML 元素
4.alert() 函数在 JavaScript 中并不常用,但它对于代码测试非常方便
5.如果浏览器支持调试,可以使用 console.log() 方法在浏览器中显示 JavaScript 值;浏览器中使用 F12 来启用调试模式, 在调试窗口中点击 "Console" 菜单
例子如下:
<script>
document.write(Date());
window.alert(5 + 6);
document.getElementById("demo").innerHTML = "段落已修改。"; //这个方法是 HTML DOM 中定义的;如需从JS访问某个HTML元素,可使用 "id" 属性来标识,并 innerHTML 来获取或插入元素内容
console.log(c);//程序中调试是测试,查找及减少bug(错误)的过程
</script>
JavaScript 语法
JavaScript 字面量
在编程语言中,一个字面量是一个常量,如 3.14;JS字面量包括:
1.数字(Number)字面量 :可以是整数或者是小数,或者是科学计数(e)
2.字符串(String)字面量 :可以使用单引号或双引号
3.表达式字面量 :用于计算
4.数组(Array)字面量 :定义一个数组
5.对象(Object)字面量 :定义一个对象
6.函数(Function)字面量 :定义一个函数
JavaScript 变量
1.在编程语言中,变量是存储信息的"容器",用于存储数据值
2.在 JavaScript 中创建变量通常称为"声明"变量;我们使用 var 关键词来声明变量;变量声明之后,该变量是空的(没有值);如需向变量赋值,请使用等号;不过,您也可以在声明变量时对其赋值;一个好的编程习惯是,在代码开始处,统一对需要的变量进行声明
3.可以在一条语句中声明很多变量;该语句以 var 开头,并使用逗号分隔变量即可,声明也可横跨多行
4.在计算机程序中,经常会声明无值的变量。未使用值来声明的变量,其值实际上是 undefined;如果重新声明 JavaScript 变量,该变量的值不会丢失
5.变量是一个名称,可以通过变量名访问;在指令式语言中,变量通常是可变的。字面量是一个恒定的值
6.变量可以使用短名称(比如 x 和 y),也可以使用描述性更好的名称(比如 age, sum, totalvolume);变量一般以字母开头,也能以 $ 和 _ 符号开头(不过我们不推荐这么做)
7.变量名称对大小写敏感(y 和 Y 是不同的变量)
8.JavaScript 中,变量常见的是驼峰法的命名规则,如 lastName (而不是lastname)
9.当向变量分配文本值时,应该用双引号或单引号包围这个值;当向变量赋的值是数值时,不要使用引号。如果用引号包围数值,该值会被作为文本来处理
var lastname="Doe",age=30,
job="carpenter";
JavaScript 操作符
JavaScript使用 算术运算符 来计算值;使用赋值运算符给变量赋值
JavaScript语言有多种类型的运算符:
Type | 实例 | 描述 |
---|---|---|
赋值,算术和位运算符 | = + - * / << >> | 在 JS 运算符中描述 |
条件,比较及逻辑运算符 | == != < > | 在 JS 比较运算符中描述 |
JavaScript 语句
1.在 HTML 中,JavaScript 语句向浏览器发出的命令,告诉浏览器要做的事情;语句通常是用分号分隔的,在一行中可编写多条语句;浏览器按照从上到下的顺序执行JS语句
document.getElementById("demo").innerHTML="你好 Dolly";
document.getElementById("myDIV").innerHTML="你最近怎么样?";
2.JavaScript 可以分批地组合起来;代码块以左花括号开始,以右花括号结束;代码块的作用是一并地执行语句序列
function myFunction(){
document.getElementById("demo").innerHTML="你好Dolly";
document.getElementById("myDIV").innerHTML="你最近怎么样?";
}
3.JavaScript 语句通常以一个 语句标识符 为开始,并执行该语句;语句标识符是保留关键字
JavaScript 语句标识符 (关键字) :
语句 | 描述 |
---|---|
break | 用于跳出循环 |
catch | 语句块,在 try 语句块执行出错时执行 catch 语句块 |
continue | 跳过循环中的一个迭代 |
do ... while | 执行一个语句块,在条件语句为 true 时继续执行该语句块 |
for | 在条件语句为 true 时,可以将代码块执行指定的次数 |
for ... in | 用于遍历数组或者对象的属性(对数组或者对象的属性进行循环操作) |
function | 定义一个函数 |
if ... else | 用于基于不同的条件来执行不同的动作 |
return | 退出函数 |
switch | 用于基于不同的条件来执行不同的动作 |
throw | 抛出(生成)错误 |
try | 实现错误处理,与 catch 一同使用 |
var | 声明一个变量 |
while | 当条件语句为 true 时,执行语句块 |
4.JavaScript 会忽略多余的空格。可以向脚本添加空格,来提高其可读性
5.可以在文本字符串中使用反斜杠对代码行进行换行
document.write("你好 \
世界!");
JavaScript 关键词
JavaScript 语句通常以关键词为开头。 例如:var 关键词告诉浏览器创建一个新的变量
JavaScript 标识符
和其他任何编程语言一样,JavaScript 保留了一些标识符和关键字为自己所用,这些关键字有些在当前的语言版本中并没有使用,但在以后 JavaScript 扩展中会用到
JavaScript 标识符必须以字母、下划线(_)或美元符($)开始;后续的字符可以是字母、数字、下划线或美元符(数字是不允许作为首字符出现的,以便 JavaScript 可以轻易区分开标识符和数字)
JavaScript 注释
1.我们可以添加注释来对 JavaScript 进行解释,或者提高代码的可读性;JavaScript 不会执行注释
2.单行注释以 // 开头;多行注释以 / 开始,以 / 结尾;我们一般把注释放到代码行的结尾处
3.注释也可以用于阻止其中一条代码行的执行(可用于调试)
JavaScript 数据类型
1.JavaScript 数据类型:字符串(String)、数字(Number)、布尔(Boolean)、数组(Array)、对象(Object)、空(Null)、未定义(Undefined);编程语言中,数据类型是一个非常重要的内容。
2.JavaScript 拥有动态类型。这意味着相同的变量可用作不同的类型
3.字符串是存储字符(比如 "Bill Gates")的变量;字符串可以是引号中的任意文本;也可以使用引号,只要不匹配包围字符串的引号即可
4.JavaScript 只有一种数字类型。数字可以带小数点,也可以不带;极大或极小的数字可以通过科学(指数)计数法来书写
5.布尔(逻辑)只能有两个值:true 或 false;布尔常用在条件测试中
6.数组下标是基于零的,所以第一个项目是 [0],第二个是 [1],以此类推
7.对象由花括号分隔。在括号内部,对象的属性以名称和值对的形式 (name : value) 来定义;属性由逗号分隔;空格和折行无关紧要;声明可横跨多行;对象属性有两种寻址方式:
name=person.lastname
name=person["lastname"]
8.Undefined 这个值表示变量不含有值,可以通过将变量的值设置为 null 来清空变量
9.当您声明新变量时,可以使用关键词 "new" 来声明其类型
10.JavaScript 变量均为对象。当您声明一个变量时,就创建了一个新的对象
JavaScript 函数
1.函数是由事件驱动的或者当它被调用时执行的可重复使用的代码块;函数就是包裹在花括号中的代码块,前面使用了关键词 function;当调用该函数时,会执行函数内的代码;可以在某事件发生时直接调用函数(比如当用户点击按钮时),并且可由 JavaScript 在任何位置进行调用
2.JavaScript 对大小写敏感。关键词 function 必须是小写的,并且必须以与函数名称相同的大小写来调用函数
3.在调用函数时,您可以向其传递值,这些值被称为参数,这些参数可以在函数中使用;您可以发送任意多的参数,由逗号 (,) 分隔;当您声明函数时,要把参数作为变量来声明;变量和参数必须以一致的顺序出现,第一个变量就是第一个被传递的参数的给定的值,以此类推;函数很灵活,您可以使用不同的参数来调用该函数,这样就会给出不同的消息
4.有时,我们会希望函数将值返回调用它的地方,通过使用 return 语句就可以实现;在使用 return 语句时,函数会停止执行,并返回指定的值;但此时整个 JavaScript 并不会停止执行,仅仅是函数。JavaScript 将继续执行代码,从调用函数的地方,函数调用被返回值取代
5.在 JavaScript 函数内部声明的变量(使用 var)是局部变量,所以只能在函数内部访问它。(该变量的作用域是局部的)。可以在不同的函数中使用名称相同的局部变量,因为只有声明过该变量的函数才能识别出该变量。
只要函数运行完毕,本地变量就会被删除
6.在函数外声明的变量是全局变量,网页上的所有脚本和函数都能访问它;如果把值赋给尚未声明的变量,该变量将被自动作为全局变量声明
7.JavaScript 变量的生命期从它们被声明的时间开始;局部变量会在函数运行以后被删除;全局变量会在页面关闭后被删除
JavaScript 字符集
JavaScript 使用 Unicode 字符集;Unicode 覆盖了所有的字符,包含标点等字符;Unicode 使文本的处理、存储和运输,独立于平台和语言
Unicode 可以由不同的字符集实现。最常用的编码是 UTF-8 和 UTF-16
字符集 | 描述 |
---|---|
UTF-8 | UTF8 中的字符是1到4字节长,可以代表Unicod 标准中的任何字符;UTF-8向后兼容 ASCII, 是电子邮件和网页的首选编码 |
UTF-16 | 16位Unicode转换格式是一种可变长度的Unicode字符编码,能编码整个Unicode指令表,主要用于操作系统和环境,如 Microsoft Windows、Java 和 .NET |
Unicode的前128个字符(与 ASCII 一一对应)使用一个与 ASCII二进制值相同的八位组进行编码,使有效的 ASCII 文本在进行 UTF-8 编码时也是有效的;所有的 HTML 4 处理器支持 UTF-8,所有的 HTML 5 和 XML 处理器支持 UTF-8 和 UTF-16
HTML5 中默认的字符编码是 UTF-8