JavaScript 是互联网上最流行的脚本语言，这门语言可用于 HTML 和 web，更可广泛用于服务器、PC、笔记本电脑、平板电脑和智能手机等设备。
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<title>1.我的第一个js.html</title>
<!-- <script>-->
<!-- alert(‘hello world‘);-->
<!-- </script>-->
<script src="js/js.js"></script>
</head>
<body>
</body>
</html>
undefined : 变量没有初始值,仅仅在判断函数参数是否传递的情况下有用。
null : 表示一个空值，与undefined值相等.它和0以及空字符串‘‘不同，0是一个数值，‘‘表示长度为0的字符串，而null表示“空”。
number : JavaScript不区分整数和浮点数，统一用Number表示
boolean : ture / false
string : 以单引号‘或双引号"括起来的任意文本.
Array : JavaScript的数组可以包括任意数据类型
Object : JavaScript的对象是一组由键-值组成的无序集合,键都是字符串类型，值乐意是任意数据类型。use strict：严格检查模式，预防JavaScript的随意性导致产生的一些问题，必须写在第一行~
<script> a=3 b=0.23 c=2e5 console.log(a) console.log(b) console.log(c) </script>
3.字符串（String）字面量可以使用单引号或双引号
<script> a=3 b="0.23" // typeof 是判断字面量的类型 console.log(typeof a) console.log(a) console.log(typeof b) console.log(b) </script>
4.表达式字面量用于计算：
<p id="demo"></p> <script> document.getElementById("demo").innerHTML=4*20; </script>
5.数组（Array）字面量定义一个数组：
[40, 100, 1, 5, 25, 10]
6.对象（Object）字面量定义一个对象：
{firstName:"John", lastName:"Doe", age:50, eyeColor:"blue"}
7.函数（Function）字面量定义一个函数：
function myFunction(a, b) { return a * b;}
1.JavaScript 使用关键字 var 来定义变量， 使用等号来为变量赋值
变量是一个名称。字面量是一个值。
<p id="demo"></p> <script> var length; length = 6; document.getElementById("demo").innerHTML = length; </script>
三种变量命名规则：
var firstName=‘king‘;//小驼峰var FirstName=‘queen‘;//大驼峰var first_name=‘maizi‘;//下划线法
JavaScript使用 算术运算符 来计算值:
<script> a = 5; b = 6; console.log("a+b="+(a+b)) console.log("a*b="+(a*b)) console.log("a-b="+(a-b)) console.log("a/b="+(a/b)) </script>
JavaScript 同样保留了一些关键字，这些关键字在当前的语言版本中并没有使用，但在以后 JavaScript 扩展中会用到。
不是所有的 JavaScript 语句都是”命令”。双斜杠 // 后的内容将会被浏览器忽略：
JavaScript 有多种数据类型：数字，字符串，数组，对象等等：
<script> var length = 16; // Number 通过数字字面量赋值 var points = length * 10; // Number 通过表达式字面量赋值 var lastName = "Johnson"; // String 通过字符串字面量赋值 var cars = ["Saab", "Volvo", "BMW"]; // Array 通过数组字面量赋值 var person = {firstName:"John", lastName:"Doe"}; // Object 通过对象字面量赋值 console.log(typeof length); console.log(length); console.log(typeof points); console.log(points); console.log(typeof lastName); console.log(lastName); console.log(typeof cars); console.log(cars); console.log(typeof person); console.log(person); </script>
JavaScript 语句可以写在函数内，函数可以重复引用,引用一个函数 = 调用函数(执行函数内的语句)
function myFunction(a, b) { return a * b; // 返回 a 乘以 b 的结果}
JavaScript 使用 Unicode 字符集。
由于HTML文档被浏览器解析后就是一棵DOM树，要改变HTML的结构，就需要通过JavaScript来操作 DOM。
始终记住DOM是一个树形结构。操作一个DOM节点实际上就是这么几个操作：
在操作一个DOM节点前，我们需要通过各种方式先拿到这个DOM节点。最常用的方法是document.getElementById() 和 document.getElementsByTagName() ，以及CSS选择器document.getElementsByClassName() 。
由于ID在HTML文档中是唯一的，所以 document.getElementById() 可以直接定位唯一的一个DOM节点。 document.getElementsByTagName() 和 document.getElementsByClassName() 总是返回一组DOM节点。要精确地选择DOM，可以先定位父节点，再从父节点开始选择，以缩小范围。
例如：
// 返回ID为‘test‘的节点：
var test = document.getElementById(‘test‘);
// 先定位ID为‘test-table‘的节点，再返回其内部所有tr节点：
var trs = document.getElementById(‘test-table‘).getElementsByTagName(‘tr‘);
// 先定位ID为‘test-div‘的节点，再返回其内部所有class包含red的节点：
var reds = document.getElementById(‘test- div‘).getElementsByClassName(‘red‘);
// 获取节点test下的所有直属子节点:
var cs = test.children;
// 获取节点test下第一个、最后一个子节点：
var first = test.firstElementChild;
var last = test.lastElementChild;
第二种方法是使用 querySelector() 和 querySelectorAll() ，需要了解selector语法，然后使
用条件来获取节点，更加方便：
// 通过querySelector获取ID为q1的节点：
var q1 = document.querySelector(‘#q1‘);
// 通过querySelectorAll获取q1节点内的符合条件的所有节点：
var ps = q1.querySelectorAll(‘div.highlighted > p‘);
注意：低版本的IE<8不支持
querySelector 和 querySelectorAll 。IE8仅有限支持。
拿到一个DOM节点后，我们可以对它进行更新。
可以直接修改节点的文本，方法有两种：
一种是修改 innerHTML 属性，这个方式非常强大，不但可以修改一个DOM节点的文本内容，还可以直接通过HTML片段修改DOM节点内部的子树：
// 获取<p id="p-id">...</p>
var p = document.getElementById(‘p-id‘);
// 设置文本为abc:
p.innerHTML = ‘ABC‘; // <p id="p-id">ABC</p>
// 设置HTML:
p.innerHTML = ‘ABC <span style="color:red">RED</span> XYZ‘;
// <p>...</p>的内部结构已修改 1234567
用 innerHTML 时要注意，是否需要写入HTML。如果写入的字符串是通过网络拿到了，要注意对字符
编码来避免XSS攻击。
第二种是修改 innerText 属性，这样可以自动对字符串进行HTML编码，保证无法设置任何HTML标
签：
// 获取<p id="p-id">...</p>
var p = document.getElementById(‘p-id‘); // 设置文本:
p.innerText = ‘<script>alert("Hi")</script>‘;
// HTML被自动编码，无法设置一个<script>节点:
// <p id="p-id"><script>alert("Hi")</script></p>
修改CSS也是经常需要的操作。DOM节点的 style 属性对应所有的CSS，可以直接获取或设置。因为
CSS允许 font-size 这样的名称，但它并非JavaScript有效的属性名，所以需要在JavaScript中改写为
驼峰式命名 fontSize ：
// 获取<p id="p-id">...</p>
var p = document.getElementById(‘p-id‘);
// 设置CSS:
p.style.color = ‘#ff0000‘;
p.style.fontSize = ‘20px‘;
p.style.paddingTop = ‘2em‘;
appendChild
当我们获得了某个DOM节点，想在这个DOM节点内插入新的DOM，应该如何做？如果这个DOM节点是空的，例如， ，那么，直接使用 innerHTML = ‘child‘就可以修改DOM节点的内容，相当于“插入”了新的DOM节点。
如果这个DOM节点不是空的，那就不能这么做，因为 innerHTML 会直接替换掉原来的所有子节点。
有两个办法可以插入新的节点。一个是使用 appendChild ，把一个子节点添加到父节点的最后一个子点。例如：
<!-- HTML结构 -->
<p id="js">JavaScript</p>
<div id="list">
<p id="java">Java</p> <p id="python">Python</p>
<p id="scheme">Scheme</p>
</div>
把 JavaScript 添加到的最后一项：
var
js = document.getElementById(‘js‘),
list = document.getElementById(‘list‘);
list.appendChild(js);
现在，HTML结构变成了这样：
<!-- HTML结构 -->
<div id="list">
<p id="java">Java</p>
<p id="python">Python</p>
<p id="scheme">Scheme</p>
<p id="js">JavaScript</p>
</div> 因为我们插入的 js 节点已经存在于当前的文档树，因此这个节点首先会从原先的位置删除，再插入
到新的位置。
更多的时候我们会从零创建一个新的节点，然后插入到指定位置：
var
list = document.getElementById(‘list‘),
haskell = document.createElement(‘p‘);
haskell.id = ‘haskell‘;
haskell.innerText = ‘Haskell‘;
list.appendChild(haskell);
这样我们就动态添加了一个新的节点：
<!-- HTML结构 -->
<div id="list">
<p id="java">Java</p>
<p id="python">Python</p>
<p id="scheme">Scheme</p>
<p id="haskell">Haskell</p>
</div>
动态创建一个节点然后添加到DOM树中，可以实现很多功能。举个例子，下面的代码动态创建了一个
节点，然后把它添加到 节点的末尾，这样就动态地给文档添加了新的CSS定义：
var d = document.createElement(‘style‘);
d.setAttribute(‘type‘, ‘text/css‘);
d.innerHTML = ‘p { color: red }‘;
//head 头部标签
document.getElementsByTagName(‘head‘)[0].appendChild(d);
可以在Chrome的控制台执行上述代码，观察页面样式的变化。
insertBefore
如果我们要把子节点插入到指定的位置怎么办？可以使用
parentElement.insertBefore(newElement, referenceElement); ，子节点会插入到
referenceElement 之前。
还是以上面的HTML为例，假定我们要把 Haskell 插入到 Python
之前：
<!-- HTML结构 -->
<div id="list">
<p id="java">Java</p>
<p id="python">Python</p>
<p id="scheme">Scheme</p>
</div>
可以这么写：
var
list = document.getElementById(‘list‘),
ref = document.getElementById(‘python‘),
haskell = document.createElement(‘p‘);
haskell.id = ‘haskell‘;
haskell.innerText = ‘Haskell‘;
list.insertBefore(haskell, ref);
新的HTML结构如下：
<!-- HTML结构 -->
<div id="list">
<p id="java">Java</p>
<p id="haskell">Haskell</p>
<p id="python">Python</p>
<p id="scheme">Scheme</p>
</div>
删除一个DOM节点就比插入要容易得多。
要删除一个节点，首先要获得该节点本身以及它的父节点，然后，调用父节点的 removeChild 把自己删掉：
// 拿到待删除节点:
var self = document.getElementById(‘to-be-removed‘);
// 拿到父节点:
var parent = self.parentElement;
// 删除:
var removed = parent.removeChild(self);
removed === self; // true
注意到删除后的节点虽然不在文档树中了，但其实它还在内存中，可以随时再次被添加到别的位置。
当你遍历一个父节点的子节点并进行删除操作时，要注意， children 属性是一个只读属性，并且它
在子节点变化时会实时更新。
例如，对于如下HTML结构：
<div id="parent">
<p>First</p>
<p>Second</p>
</div>
当我们用如下代码删除子节点时：
var parent = document.getElementById(‘parent‘);
parent.removeChild(parent.children[0]);
parent.removeChild(parent.children[1]); // <-- 浏览器报错
浏览器报错： parent.children[1] 不是一个有效的节点。原因就在于，当 First
节点被删除
后， parent.children 的节点数量已经从2变为了1，索引 [1] 已经不存在了。
因此，删除多个节点时，要注意 children 属性时刻都在变化。
回顾
用JavaScript操作表单和操作DOM是类似的，因为表单本身也是DOM树。
不过表单的输入框、下拉框等可以接收用户输入，所以用JavaScript来操作表单，可以获得用户输入的内容，或者对一个输入框设置新的内容。
HTML表单的输入控件主要有以下几种：
文本框，对应的 <input type="text"> ，用于输入文本；
口令框，对应的 <input type="password"> ，用于输入口令；
单选框，对应的 <input type="radio"> ，用于选择一项；
复选框，对应的 <input type="checkbox"> ，用于选择多项；
下拉框，对应的 <select> ，用于选择一项；
隐藏文本，对应的 <input type="hidden"> ，用户不可见，但表单提交时会把隐藏文本发送到服务器。
获取值
如果我们获得了一个 节点的引用，就可以直接调用 value 获得对应的用户输入值：
// <input type="text" id="email">
var input = document.getElementById(‘email‘);
input.value; // ‘用户输入的值‘
这种方式可以应用于 text 、 password 、 hidden 以及 select 。但是，对于单选框和复选
框， value 属性返回的永远是HTML预设的值，而我们需要获得的实际是用户是否“勾上了”选项，所
以应该用 checked 判断：
// <label><input type="radio" name="weekday" id="monday" value="1">
Monday</label>
// <label><input type="radio" name="weekday" id="tuesday" value="2">
Tuesday</label>
var mon = document.getElementById(‘monday‘);
var tue = document.getElementById(‘tuesday‘);
mon.value; // ‘1‘
tue.value; // ‘2‘
mon.checked; // true或者false
tue.checked; // true或者false
设置值
设置值和获取值类似，对于 text 、 password 、 hidden 以及 select ，直接设置 value就可以：
// <input type="text" id="email">
var input = document.getElementById(‘email‘);
input.value = ‘test@example.com‘; // 文本框的内容已更新
对于单选框和复选框，设置 checked 为 true 或 false 即可。
提交表单
最后，JavaScript可以以两种方式来处理表单的提交（AJAX方式在后面章节介绍）。
方式一是通过
原文：https://www.cnblogs.com/sikaha/p/14683513.html