Web前端之JavaScript

一. 加入JavaScript代码的三种方法

加在标签中的

<!DOCTYPE html>
<html>
<head>
<meta charset="utf-8">
<title>Examples</title>
<script>
    add here
</script>
<link href="task10.css" rel="stylesheet">
</head>
<body>
</body>
</html>

2.将JavaScript代码存放在以.js为扩展名的独立文件中

<!DOCTYPE html>
<html>
<head>
<meta charset="utf-8">
<title>Examples</title>
<script src="file.js">
    add here
</script>
<link href="task10.css" rel="stylesheet">
</head>
<body>
</body>
</html>

3.将

<!DOCTYPE html>
<html>
<head>
<meta charset="utf-8">
<title>Examples</title>
<link href="task10.css" rel="stylesheet">
</head>
<body>
<script src="file.js">
    add here
</script>
</body>
</html>

二.JavaScript语法

注释

//这是被注释内容
/*这是被注释
段落*/

变量，数据类型，命名

var mood = "happy";
var age = 33;
或
var mood = "happy" , age = 33;

数据类型为var，无需区分

函数名，方法名，对象属性命名采用驼峰命名法

3.对象

var lennon = Object();
lennon.name = "john";
lennon.year = 1940;
lennon.living = false;
或
var lennon = {name = "jhon",year = 1940,living = false};

4.操作

"10"+20 = 1020;
10+20 = 30;

5.语句

JavaScript语句参考c++，在此不多描述。

三.DOM

1.D

D指document，DOM把编写的网页文档转换为一个文档对象

2.O

O指object，JavaScript中有三类对象

用户指定对象（user-defined object）：有程序员自行创建的对象

内建对象(native object)：内建在JavaScript语言内的对象

宿主对象(host object)：有浏览器提供的对象

3.M

M指model，即文档的结构

四.节点

1.元素节点（element node）

指的是

之类的元素

2.文本节点(text node)

指元素包含的文本

3.属性节点（attribute node）

指

title="a gentle reminder"

这种属性

五.获取元素

DOM获取元素的三种方法

1.document.getElementById("id") 返回一个与那个有着给定id属性值得元素节点对应的对象。

2.document.getElementByTagName("tag") 返回一个具有相同标签的数组。

3.document.getElementByClassName("class") 返回一个具有相同类名的元素数组

事件处理函数
onclick = "show(this);return false",作用为：在特定事件发生时调用特定的JavaScript代码。其中return false防止了转到目标链接窗口。

六.DOM属性

childNodes 属性可以用来获得任何一个元素的所有子元素。

firstChild 代表childNodes数组的第一个元素。

nodeValue 代表节点的值。

nodeType

元素节点的nodeType属性值是1

属性节点的nodeType属性值是2

文本节点的nodeType属性值是3

七.JavaScript优化方面

1.平稳退化：确保网页在没有JavaScript的情况下也能正常工作。

2.向后兼容性：确保老版本的浏览器能兼容所写的JavaScript语句。其中使用对象检测。

3.性能考虑：尽量减少访问DOM和标记，合并放置脚本，压缩脚本。

Web前端学习之JavaScript