JavaScript入门

一、JavaScript简介
1.脚本语言
2.一种轻量级的编程语言
3.可插入HTML页码的编程代码
4.插入HTML页面后，由浏览器执行

二、用法
1.JavaScript脚本必须位于< script>与< /script>标签之间。
2.脚本可放在< body>与< head>或外部文件中。
通常位置：放在页面底部或者head中。

三、JavaScript输出
alert()弹出警告框
console.log()写到历览器的控制台里。

四、JavaScript语法
1.var定义变量，一切变量都是由var定义的。
2.语句由分号分隔
3.别使用关键字作为变量名
4.函数语法：

function 方法名(参数名1，参数名2){
	return -；
}
由于js里面所有的变量类型都是var所以参数列表可以只给出变量名即可。

因为函数也是一种数据类型：
var see = function(){
方法体;
}

5.添加按钮事件

<button type="button" style="color:blue;" onclick="getNum('周*涵')">点击它</button>
function getNum(a){
		console.log("欢迎你"+a);
	}

6.全局变量和局部变量
1.局部变量：在函数内部声明的变量是局部变量，只能在函数内部访问。
2.函数外声明的变量是全局变量，网页上所有脚本和函数都能访问它。

三、JavaScript数据类型
基本数据类型：
1.String 单引号，双引号都行
2.Number（数字）包括整形，浮点型
3.Boolean
4.Null
5.Undefined
引用数据类型:
Object（对象）
Array 数组
Function(函数)

JavaScript数组创建方式：

	//第一种创建数组的方式
	var arr = new Array();
	arr[0] = 1;
	arr[1] = 2;
	arr[2] = 3;
	console.log(arr);
	//第三种创建数组的方式
	var brr = new Array(4,5,6);
	console.log(brr);
	//第三种创建数据的方式
	var crr = [7,8,9];
	console.log(crr);

JavaScript创建对象的方式：

//第一种
//对象体用{}修饰，
//属性由键值对存放 name:"张三"
//逗号,隔开属性
//方法的定义 show:function(){}

var babe = {name:"张三",id:12,show:function(){
console.log("我叫张三!");
}};
//第二种
//创建一个“类”的形式
//属性，方法都必须用this.修饰

function Gal(){
this.name = "飞云之下";
this.id = 12;
this.show = function(){
方法体
}
}
var x = new Gal();
x.show();

注：
在方法中使用参数时，一定要加上this.,或者 方法名.

JavaScript动态数据类型

var key = 1;
var key = "asd";
key = 25.88;
都可以

使用taypeof查看数据类型

JavaScript String类型使用
1.字符串属性:
length–>表示长度
通过字符串[索引]访问字符串的某个值
var str = “asd”;
str[0]–>表示’a’;

2.indexOf() 定位某个字符首次出现的位置
3.lastIndexOf()定位某个字符串最后出现的位置
4.match（）方法，match()函数用来查找字符串中特定的字符，并且如果找到的话，则返回这个字符
5.slice(start,end)分隔字符串，左包右不包
6.substr（start,num）
7.search()检索子字符串，返回起始位置

字符串转换
1.数字转换为字符串
String(12+18);答案是"30"
（12+16）.toString();“28”
字符串转换数字
Number(“3.14”)–>3.14
Number("")—>0
Number(“12 35 6”)–>NAN不是数字
2.布尔值转换成字符串
String(false);
false.toString();
布尔值转换成数字
Number(false)—>0
Number(true)---->1
自动转换类型
当 JavaScript 尝试操作一个 “错误” 的数据类型时，会自动转换为 “正确” 的数据类型。
以下输出结果不是你所期望的：
5 + null // 返回 5 null 转换为 0
“5” + null // 返回"5null" null 转换为 “null”
“5” + 1 // 返回 “51” 1 转换为 “1”
“5” - 1 // 返回 4 “5” 转换为 5

JavaScript数组
join()方法
arr.join("|") 以|分开每个数组元素
sort()升序排序
reverse（）反转数组
unshift() 头部添加元素
push（）尾部添加元素
shift（）删除头部元素
pop（）删除尾部元素
splice（）
案例1：
var fruits = [“Banana”, “Orange”, “Apple”, “Mango”];
fruits.splice(2,0,“dd”)
向数组fruits第三个位置添加一个元素dd。第一个参数2是插入数组元素的索引位置
第二参数是0表示不做删除操作，第三个参数dd 是要添加的元素
案例2：
var fruits = [“Banana”, “Orange”, “Apple”, “Mango”];
fruits.splice(2,1)
从数组索引位置2的位置开始删除，删除的元素个数1
案例3：
var fruits = [“Banana”, “Orange”, “Apple”, “Mango”];
fruits.splice(2,1,“22”)
从数组索引位置2的位置开始删除，删除的元素个数1，并且添加一个新元素22到索引是2的位置

Date对象
RegExp正则表达式
创建方法：

第一种方式
//var regx = new RegExp("abc");
第二种方式
//var reg2 = /abc/;
abc不用加""

test()
reg.test(目标字符串);返回布尔值

计时器对象
设定的时间间隔来执行代码
setInterval（）-间隔的毫秒数不停执行指定的代码
setTimeout（）-在指定的毫秒数后执行代码

使用方法：

var dd = setInterval(执行函数部分，间隔时间（毫秒）);
//同理setTimeout（）；

停止方法：clearInterval(dd)；

四、DOM编程
当网页被加载时，浏览器会创建页面的文档对象模型。
JavaScript
1.修改所有HTML元素
2.改变所有HTML属性
3.改变所有CSS样式
4.对所有事件作出反应

getElementById()
获取该ID的第一个对象
innerText 获取元素节点的文本内容
innerHTML获取该文本内容和html元素

getElementsByName();
得到name属性相同的数组

write（）
向文档写入HTML表达式或者JavaScript代码
如
document.write(“hello”);
document.write("< h1>hello< /h1>");
都是在body的最后一行开始填写

DOM的属性
innerText 元素节点的文本内容
innerHTML元素节点的文本内容以及该节点的HTML元素

HTML DOM访问
1.getElementById();Dom元素
2.getElementsByName();Dom元素数组
3.getElementsByTagName()通过标签名找到DOm元素数组
4.getElementsByClassName();通过Class属性获得DOM元素数组

DOM修改
1.HTML内容
2.CSS样式 —>.Style
3.HTML属性
4.创建与删除HTML元素
5.改变事件

创建HTML元素

	//创建一个p元素
	var ele = document.createElement("p");
	//创建一个文本内容
	var str = document.createTextNode("我是一棵树!");
	//将文本内容加入p元素中
	ele.appendChild(str);
	//得到想要插入的元素
	var doc = document.getElementById("one");
	//追加到该元素的尾端
	doc.appendChild(ele);

插入具体位置
insertBefore(自己创建的节点,插入节点位置的后一个元素)；

//创建好自己的元素
myElement
//找到自己的父类元素
element
//找到想插入的位置的元素
before
//调用方法
element.insert(myElement,before);

删除DOM元素
首先你的知道该元素的父类
1.先找到父类
2.找到你想删除的元素
3.父类元素.removeChile(子类元素);

remove();不加参数，删除所有!

替换HTML元素
repalceChild（）
与insert使用方法差不多

五、HTML事件属性
格式：
DOM元素.方法名 = function(){};
一般是使用DOM来分配属性的。
1.onload，用户进入页面时被触发
只用于body
2.onchange事件，当用户改变输入字段时会触发
onchange事件
一般用于表单元素，input
3.onmouseover,onmouseout鼠标滑过，滑出事件
4.onmousedown,onmouseup事件
5.焦点事件
onfocus()焦点在此
onblur()焦点不在此
.focus()获取焦点

onkeydown键盘按下事件
onkeyup键盘抬起事件
onkeypress抬起，按下二为一

//onkeypress 键盘按下和释放事件合二为一
			 window.onkeypress=function(e){
			 	console.log(e.keyCode)
			 	if(e.keyCode==13){
			 		alert("回车登录");
			 	}
			 }