JavaScript基础知识

ECMAScript核心语法：

1、书写JS位置：

在静态页面中的head标签中:
<script type="text/javascript">
// 书写JavaScript

</script>

在head中引入JS
<script type="text/javascript" src="js/index.js"></script>

注意事项：一般为优化用户的体验效果，会将js的代码写在body的末尾

2、JavaScript中的注释：
// 单行注释
/* */ 多行注释


3、JavaScript中数据类型：

1. 原始数据类型(基本数据类型)：
1. number：数字。 整数/小数/NaN(not a number 一个不是数字的数字类型)
2. string：字符串。 字符串 "abc" "a" 'abc'
3. boolean: true和false
4. null：一个对象为空的占位符
5. undefined：未定义。如果一个变量没有给初始化值，则会被默认赋值为undefined

2. 引用数据类型：对象
数据类型检查:
typeof 变量名称;
例如：
var a ='刘德华';
console.log(typeoof a);
注意： JavaScript为一个弱类型的语言(该语言变量在执行的时候才明白其具体的数据类型是何种类型)。

4、变量：
* 变量：一小块存储数据的内存空间
* Java语言是强类型语言，而JavaScript是弱类型语言。
* 强类型：在开辟变量存储空间时，定义了空间将来存储的数据的数据类型。只能存储固定类型的数据
* 弱类型：在开辟变量存储空间时，不定义空间将来的存储数据类型，可以存放任意类型的数据。
* 语法：
* var 变量名 = 初始化值;

5、运算符：
算术运算符：
+ - * / %

赋值运算符:
=
+=
-=
*=
/= %=

比较运算符：
> < >= <= != == ===(全等于)(比对值与数据类型是否都相等)


逻辑运算符:

&&(与) ||(或) !(非)

注意：
其他类型转boolean：
1. number：0或NaN为假，其他为真
2. string：除了空字符串("")，其他都是true
3. null&undefined:都是false
4. 对象：所有对象都为true

三元运算符:
var 变量 = 表达式?值1:值2;

6、流程控制语句

分支结构：
if(){}

if(){ }else{ }

if(){ }else if(){ }...else{}
选择结构：
switch(){
case 常量：

break;
case 常量：

break;
default:

break;

}
循环结构：
for(){}
while(){}
do{}while();
for...in

使用循环打印九九乘法表：


7、特殊语法：

1. 语句以;结尾，如果一行只有一条语句则 ;可以省略 (不建议)
2. 变量的定义使用var关键字，也可以不使用
* 用： 定义的变量是局部变量
* 不用：定义的变量是全局变量(不建议)

8、JS常用对象：


函数对象：
函数定义：
function 函数名称(参数...){

}

函数调用： 只跟函数名称相关
函数名称() || 函数名称(参数)

如果调用函数时传递了参数，而函数定义时候没有参数列表，则可以通过arguments数组获取传递参数。

函数有返回值，只需在函数中书写return 关键字 + 返回值。

数组拥有.length 属性 ： 返回数组的长度。

在js中出现同名的方法会出现覆盖的现象。调用的是最后的函数。

数组对象：

数组创建：
案例一：
var cars = ["Saab", "Volvo", "BMW"];
案例二：
var cars = new Array("Saab", "Volvo", "BMW");

遍历：
for(var x in cars){ // x - 数组元素的索引
console.log(cars[x]);
}

方法：
push() : 向数组最佳内容
join('连接符') ： 将数组中的内容按照指定的连接符连接并返回一个字符串


注意：数组清空 ： 数组名称 .length = 0;

Date: 日期对象

构建方式：
var myDate=new Date();

方法：
getFullYear() ：
getMonth()：
getDate()：
getHours()：
getMinutes()：
getSeconds():

Math :数学对象：
1. 创建：
* 特点：Math对象不用创建，直接使用。 Math.方法名();

2. 方法：
random():返回 0 ~ 1 之间的随机数。 含0不含1
ceil(x)：对数进行上舍入。
floor(x)：对数进行下舍入。
round(x)：把数四舍五入为最接近的整数。
3. 属性：
PI

Number对象(数字)：


string对象(字符串、字符):

属性：
length ： 返回其长度

方法：
创建标签、Java类似方法

RegExp(正则表达式对象) ：
1. 正则表达式：定义字符串的组成规则。
1. 单个字符:[]
如： [a] [ab] [a-zA-Z0-9_]
* 特殊符号代表特殊含义的单个字符:
\d:单个数字字符 [0-9]
\w:单个单词字符[a-zA-Z0-9_]
2. 量词符号：
?：表示出现0次或1次
*：表示出现0次或多次
+：出现1次或多次
{m,n}:表示 m<= 数量 <= n
* m如果缺省： {,n}:最多n次
* n如果缺省：{m,} 最少m次
3. 开始结束符号
* ^:开始
* $:结束

正则对象：
1. 创建
1. var reg = new RegExp("正则表达式");
2. var reg = /正则表达式/;
2. 方法
1. test(参数):验证指定的字符串是否符合正则定义的规范

Global全局对象：

decodeURI() 解码某个编码的 URI。
decodeURIComponent() 解码一个编码的 URI 组件。
encodeURI() 把字符串编码为 URI。
encodeURIComponent() 把字符串编码为 URI 组件。

parseFloat() 解析一个字符串并返回一个浮点数。
parseInt() 解析一个字符串并返回一个整数。

eval() 计算 JavaScript 字符串，并把它作为脚本代码来执行。
isNaN() 检查某个值是否是数字。 /* 数字- false 非数字 - true */



DOM操作：
(Document Object Model) 译为文档对象模型: 浏览器在解析HTML的时候生成树结构-可以通过JS对该树进行CRUD操作。


HTML Document：

文档： 及一个HTML就是一个文档（文档节点）

创建节点方式：
document.createAttribute() ： 创建属性节点
document.createElement() : 创建元素节点
document.createTextNode() ： 创建文本节点


案例：<a href="https://www.baidu.com">百度</a>

//创建属性节点
var attr = document.createAttribute('href');
attr.value='https://www.baidu.com';

//创建文本节点
var txt = document.createTextNode("百度");

//创建标签节点
var a = document.createElement("a");

//将文本设置到a标签中
a.appendChild(txt);
a.setAttributeNode(attr);


查找节点方式：
document.getElementsByClassName() 返回文档中所有指定类名的元素集合，作为 NodeList 对象。
document.getElementById() 返回对拥有指定 id 的第一个对象的引用。
document.getElementsByName() 返回带有指定名称的对象集合。
document.getElementsByTagName() 返回带有指定标签名的对象集合。


HTML Element ：
元素： 指HTML所有的元素节点(标签)

element.appendChild() 为元素添加一个新的子元素
element.firstChild 返回元素的第一个子节点
element.focus() 设置文档或元素获取焦点

element.getAttribute() 返回指定元素的属性值

element.getElementsByTagName() 返回指定标签名的所有子元素集合。
element. getElementsByClassName() 返回文档中所有指定类名的元素集合，作为 NodeList 对象。

element.innerHTML 设置或者返回元素的内容。

element.nextSibling 返回该元素紧跟的一个节点
element.nextElementSibling 返回指定元素之后的下一个兄弟元素（相同节点树层中的下一个元素节点）。
element.previousSibling 返回某个元素紧接之前元素
element.previousElementSibling 返回指定元素的前一个兄弟元素（相同节点树层中的前一个元素节点）。

element.removeChild() 删除一个子元素

element.setAttribute() 设置或者改变指定属性并指定值。
HTML Attributes:
属性 ： 指HTML元素的属性节点
ttr.name 返回属性名称
attr.value 设置或者返回属性值


HTML Events :

鼠标事件：
onclick 当用户点击某个对象时调用的事件句柄。
oncontextmenu 在用户点击鼠标右键打开上下文菜单时触发
ondblclick 当用户双击某个对象时调用的事件句柄。
onmousedown 鼠标按钮被按下。
onmouseenter 当鼠标指针移动到元素上时触发。
onmouseleave 当鼠标指针移出元素时触发
onmousemove 鼠标被移动。
onmouseover 鼠标移到某元素之上。
onmouseout 鼠标从某元素移开。
onmouseup 鼠标按键被松开。

onload 一张页面或一幅图像完成加载。

表单事件：
onblur 元素失去焦点时触发
onchange 该事件在表单元素的内容改变时触发( <input>, <keygen>, <select>, 和 <textarea>)
onfocus 元素获取焦点时触发
onfocusin 元素即将获取焦点时触发
onfocusout 元素即将失去焦点时触发
oninput 元素获取用户输入时触发
onreset 表单重置时触发
onsearch 用户向搜索域输入文本时触发 ( <input="search">)
onselect 用户选取文本时触发 ( <input> 和 <textarea>)
onsubmit 表单提交时触发