初学JavaScript笔记、每天进步一点点

JavaScript是什么？

Javascript是一种基于对象和事件驱动的客户端直译式脚本语音（官方文档），

JavaScript由3部分组

ECMAScript描述了该语音的语法和基本对象；
DOM描述了处理网页的内容的方法和接口；
BOM描述了浏览器进行交互的方法和接口。

JavaScript特点：

脚本编写语音，基于对象的语音，简单性，动态性，安全性，跨平台性。

JavaScript书写方式（俩种）：

<script type='text/javascript' src='js文件地址‘></script>

<script type="text/javascript">js内容</script>

js输出方式:

浏览器输出：document.write('输出内容')；

控制台输出：console.log('内容')；

浏览器提示框输出：alert('内容')；

浏览器输入框输出：prompt(“请输入内容”)；

confirm(' ')有确定，取消按钮的输出框；

标识符定义：

标识符是指变量、函数、属性的名字，或者函数的参数。

标识符命名规则：

1.标识符首字母不能是数字，可以是下划线( _ )，美元符($) ，或者字母开始。

2.标识符中其它字符可以是下划线（_）、美元符($)、字母或数字组成的。

3.严格区分字母的大小写。

4.不能使用关键字或保留字。

变量的定义：

可以改变的量。

7种数据类型：

数字（number）、文本或字符串（string）、布尔（boolean）、未定义（undefined）、空对象指针（null）、对象（object）、Symbol（独一无二的类型、es6新增的类型）。

语句！（重点）

条件语句：通过判断指定表达式的值来决定执行还是跳过某些语句。

if语句： if( 判断条件 ) {

条件成功执行的代码

} else{

否则执行的代码

}

if ( a = b ) {
   console.log(123);  //条件不成功 代码不执行
} else {
   console.log(321);  //条件不成功 代码执行
}

循环语句: for (初始化；条件判断；计数器变量更新){

要循环执行的代码（循环体）

}

for (var i=0; i<5; i++){
console.log(i);  // 输出0、1、2、3、4
}

for in 循环：var a=0;先定义初始值while(a<10条件判断){document.write(a,需要执行的代码);a++;计数器更新}

do while循环：var

a=0;先定义初始值do{document.write(a,需要执行的代码)；a++；计数器更新} while(a<10条件判断)。

while循环和do while循环的区别，1.do while循环会无条件执行一次循环体而while循环不会。2.while循环是先判断，后执行。Do while循环是先执行，后判断。

函数 （function）（必用）

函数就是把完成特定功能的一些语句集合成一个独立的代码块，起个名字（函数名）。可以在同一个程序或其他程序中多次重复使用（通过函数名调用）。

函数的作用：1、使程序变得更简短而清晰；2、有利于程序维护；3、可以提高程序开发的效率；4、提高了代码的重用性(复用性)。

定义函数的两种方式：命名函数、匿名函数。

定义命名函数（有函数名）：function 函数名(形参、实参，比如a){函数体；}。命名函数的调用：函数名()；

定义匿名函数（没有函数名）：function（）{函数体}；将函数赋值给一个变量：var fun = function(){函数体}。意思是将函数赋值给一个变量。调用方式：fun();

两个函数名不能相同，否则后一个函数会把前一个函数覆盖，这种情况叫做函数重载。

数组（array）

声明数组的两种方式：1.构造函数声明方式，var a=new

Array(元素1,元素2,元素3..)。2.隐式声明：var a=[1,2,3,4];

数组末尾添加：push()方法在数组末尾增加一个或多个元素。使用方式：a.push(添加的内容)；

数组开头添加：unshift()方法向数组的开头加入新的元素，返回值是新数组的长度。可以一次添加多个元素。使用方式：a.unshift(添加的内容)；

数组删除：使用delete运算符delete arr[2];

直接赋值null或“”；arr[3] = null; 前两种删除方法会保留位置（长度）。

a.pop()方法删除数组的最后一个元素，返回删除的元素，括号内写任何内容无效。a.pop()；

a.shift()删除数组的第一个元素，返回删除的元素。括号内写任何内容无效。a.shift()；

数组排序：将数组中的元素进行排序，并且返回排序后的数组。arr.sort(fun)；function fun(a,b){ return a-b; //升序（从小到大）} functionfun(a,b){ return b-a; //降序(从大到小)}。

如果只使用sort()排序，将会按照数字首字母的大小进行升序排列。

arr.reverse ()将数组元素颠倒顺序(数组倒置)；

arr.join(“任意分隔符，比如>，<”) 方法用于把数组转换成字符串。

concat() 方法合并两个或多个数组。

indexOf() 方法可返回某个指定的元素在数组中首次出现的位置。如果在数组中没找到字符串则返回 -1。

日期对象(date)

国际协调时间1970,1,1,0,0,0,0，就是1970年1月1日0时0分0秒0毫秒。在此时间之前为负，之后为正。

var 变量名=new Date();//为系统当前时间。

toString() 方法可把 Date 对象转换为字符串

toLocaleString() 方法可根据本地时间把 Date 对象转换为字符串，并返回结果。

valueOf() 方法返回 Date 对象的原始值。返回值为Number类型，返回当前Date对象所表示的时间距1970年1月1日午夜的毫秒数。

getTime() 方法可返回距1970 年 1 月 1 日凌晨之间的毫秒数。

setTime() 方法以毫秒设置 Date 对象。

获取日期信息的方法：

getFullYear() 从 Date 对象以四位数字返回年份。

getMonth() 从 Date 对象返回月份 (0 ~ 11)。注：用该属性获取月份时需要+1。

getDate() 从 Date 对象返回一个月中的某一天 (1 ~31)。

getDay() 从 Date 对象返回一周中的某一天 (0 ~6)，星期几。

getHours() 返回 Date 对象的小时 (0 ~ 23)。

getMinutes() 返回 Date 对象的分钟 (0 ~ 59)。

getSeconds() 返回 Date 对象的秒数 (0 ~ 59)。

getMilliseconds() 返回 Date 对象的毫秒(0 ~ 999)。

设置日期的方法：

setFullYear(需要设置的值) 设置 Date 对象中的年份（四位数字）。

setMonth(需要设置的值) 设置 Date 对象中月份 (0 ~ 11)。注：用该属性设置月份时，需要+1。

setDate(需要设置的值) 设置 Date 对象中月的某一天 (1 ~ 31)。

setHours(需要设置的值) 设置 Date 对象中的小时 (0 ~ 23)。

setMinutes(需要设置的值) 设置 Date 对象中的分钟 (0 ~ 59)。

setSeconds(需要设置的值) 设置 Date 对象中的秒钟 (0 ~ 59)。

setMilliseconds(需要设置的值) 设置 Date 对象中的毫秒 (0 ~ 999)。

字符串和Math（数学）对象

1. toLowerCase()把字符串转化为全小写。

2. toUpperCase()把字符串转换为大写。

BOM（浏览器对象模型）（难点）

Window核心对象，window的子级对象包括：document（文档）、history（历史记录）、location（URL）、navigator（浏览器信息）、screen（屏幕信息）

超时调用（一次性计时器）setTimeout

例如：var ID = setTimeout(fun,1000,3,4); function fun(a,b){ alert(a+b); }如上函数会在1000毫秒以后弹框输出7

清除超时调用（清除计时器），clearTimeout(要清除的定时器变量名);//可清除该定时器

间歇调用（计时器），setInterval

setInterval(function (){函数体的内容},1000)

DOM（文档对象模型）

DOM概念：DOM是“Document Object Model”（文档对象模型）的首字母缩写。

获取元素：（4种方式）

1.标签获取：document.getElementsByTagName(“标签名”)

2.类名获取：document.getElementsByClassname（’类名‘）

3.ID获取元素：document.getElementById(“ID名”)

4.通过标签的name值获取元素：document.getElementsByName(“要查找的name值”)

文档读取的四种方式: 标签ID名.innerHTML=(“要输出的内容”)

1 innerHTML 返回标签的开始和结束标签之间的HTML及文本2

2 outerHTML当前元素的开始标记和结束标记之间的所有文本和HTML标签（包括当前元素）

3 innerText属性设置或返回标签的开始和结束标签之间的文本

4 outerText 设置(包括标签)或获取(不包括标签)对象的文本

.getAttribute() 方法返回指定属性名的属性值

.setAttribute() 方法添加指定的属性，并为其赋指定的值

改变CSS样式语法：节点.style.属性名=“属性值”;例如：div.style.width=“100px”;

Event（事件）（重点）

onload：一张页面或一幅图像完成加载后触发。

onclick事件，在对象被点击时发生。

onresize：在窗口或框架被调整大小时发生

ondblclick:事件会在对象被双击时发生。

onfocus事件在对象获得焦点时。onblur事件在对象失去焦点时

onselect 事件在文本框中的文本被选中时发生

onchange事件在域的内容改变时发生

onreset事件会在表单中的重置按钮被点击时发生

onsubmit事件会在表单中的确认按钮被点击时发生

onmouseover：事件会在鼠标指针移动到指定的对象上时发生。

onmouseout：事件会在鼠标指针移出指定的对象时发生。

onmousedown：事件会在鼠标按键被按下时发生。

onmouseup：事件会在鼠标按键被松开时发生。

onkeydown：事件会在用户按下一个键盘按键时发生。

onkeyup：事件会在键盘按键被松开时发生。

onkeypress:事件会在键盘按键被按下并释放一个键时发生。

onmousemove:鼠标拖动

Event（事件）对象（难点）

event.keyCode：获得按键的code值（我们在程序里是怎么知道我们是按得哪个键呢，我们可以通过keyCode获得，程序员早在一开始就把键盘上的每一个键定义了一个code，在程序里我们可以判断值来知道我们点击了哪个键）

组合键发送代码：if(event.ctrlKey&&event.keyCode==13);

事件冒泡 由子级元素先触发，父级元素后触发 事件捕获则相反 由父级元素先触发，子级元素后触发

event.stopPropagation()：终止事件在传播过程的捕获、目标处理或起泡阶段进一步传播

event.preventDefault() ：取消事件的默认动作

event.clientX、event.clientY：鼠标相对于浏览器窗口可视区域的X，Y坐标（窗口坐标），可视区域不包括工具栏和滚动条。IE事件和标准事件都定义了这2个属性

event.offsetX、event.offsetY:鼠标相对于事件源元素（触发事件的元素）的X,Y坐标，只有IE事件有这2个属性，标准事件没有对应的属性

event.screenX、event.screenY：鼠标相对于用户显示器屏幕左上角的X,Y坐标。标准事件和IE事件都定义了这2个属性

正则

点这里进入正则文档