前端学习笔记——JavaScript

一、JavaScript基础

1.JavaScript介绍

JavaScript是互联网上最流行的脚本语言，可用于Web和HTML，也可广泛用于服务器、PC端、移动端。
JavaScript脚本语言：
  JavaScript是一种轻量级的编程语言
  JavaScript是可插入HTML页面的编程代码
  JavaScript插入HTML页面后，可由所有的浏览器执行

2.JavaScript实现

用法：
  HTML中的脚本必须位于标签之间
  脚本可被放置在HTML页面的和部分中
标签：
  在HTML中插入JavaScript，使用之间书写代码
使用限制：
  在HTML中，不限制脚本数量
  通常会把脚本放置于标签中，以不干扰页面内容

3.JavaScript输出

通常用来操作HTML
文档输出：document,write(“string”);
     可输出字符串或一个标签

4.JavaScript语法

JavaScript语句像浏览器发出命令，语句的作用是告诉浏览器该做什么。
语句之间用分号（;）分隔。
标识符必须以字母、下划线或美元符号开始
对大小写很敏感，可以忽略多余空格。

5.JavaScript注释

//单行注释
/多行注释/

6.JavaScript变量

var ii=10;

7.JavaScript数据类型

可以通过赋值为null的方式清楚变量
  字符串（String）
  数字（Number）
  布尔（Boolean）
  数组（Array）
  对象（Object）
  空（null）
  未定义

二、JavaScript语法

1.JavaScript运算符

  算术运算符：+、-、、%、/、++、–
  赋值运算符：=、+=、-=、=、/=、%=
  字符串操作：
  比较运算符：= =、= = =、!=、!==、>、<、>=、<=
  逻辑运算符：&&、||、!
  条件运算符：a < b ? “ ” : “ ”

2.JavaScript条件语句
  if…else、switch

3.JavaScript循环语句
  for循环、for/in、while循环、do…while

4.JavaScript跳转语句
  break、continue

三、JavaScript函数

1.了解函数
函数是由事件驱动的或者当它被调用时执行的可重复使用的代码块

2.定义函数
function 函数名(){
函数体;
}

3.函数调用
在

缺点：每次修改函数名时，需要在函数定义处和调用处两次修改

（2）DOM0级事件处理：把一个函数赋值给一个事件处理程序属性

缺点：同时定义多个事件时，只会执行最后一个事件，例中只会弹出2窗口。

（3）DOM2级事件处理：
addEventListener(“事件名” , “事件处理函数” , “布尔值”) ;其中，布尔值true表示事件捕获，false表示事件冒泡
removeEventListener() ;

运行代码时，会依次弹出三个窗口，不会产生覆盖。

(4）IE事件处理程序
attachEvent()、detachEvent()使用与DOM2级相似。

3.事件对象

事件对象：在触发DOM事件的时候都会产生一个对象
常用属性及方法：
  type：获取事件类型
  target：获取事件目标
  stopPropagation()：阻止事件冒泡
  preventDefault()：阻止事件默认行为

七、JavaScript内置对象

1.什么是对象

万物皆对象，每个对象带有属性和方法。
自定义对象：
（1）定义并创建对象实例

（2）使用函数来定义对象，然后创建新的对象实例

2.String字符串对象

用于处理已有的字符串，可以使用双引号或单引号
常用属性及方法：
  length：字符串长度
  inedxOf(string)：在字符串中查找字符串。若存在返回当前位置；否则返回-1.
  match(string)：内容匹配。若有则输出，否则返回null
  replace(stringa,stringb)：替换内容，将stringa替换为stringb
  toUpperCase( )/toLowerCase( )：字符串大小写转换
  split(char)：以char为分割符字符串转换为数组

3.Date日期对象

用于处理日期和时间，获取当日的日期。
常用方法：
  getFullYear( )：获取年份
  getTime( )：获取毫秒
  setFullYear(year,month,day)：设置具体的日期
  getDay( )：获取星期

4.Array数组对象

使用单独的变量名储存一系列的值
数组的创建：eg. var myArray=[“Hello”,”World”];
数组的访问：通过指定数组名以及索引号码进行访问，数组下标从0开始。
常用方法：
  concat(array)：合并数组
  sort( )：排序

  push( p)：追加元素
  reverse( )：反转数组

5.Math对象

执行常见的算术任务
常用方法：
  round( )：四舍五入
  random( )：返回0~1之间的随机数
  max( )：返回最大值
  min( )：返回最小值
  abs( )：返回绝对值

八、DOM对象控制HTML元素

常用方法：
  getElementById( )：获取name
  getElementByTagName( )：获取元素
  getAttribute( )：获取元素属性
  setAttribute( )：设置元素属性
  childNodes( )：访问子节点
  parentNode( )：访问父节点
  createElement( )：创建元素节点
  createTextNode( )：创建文本节点
  insertBefore( )：插入节点
  removeChild( )：删除节点
  offsetHeight：网页尺寸
  scrollHeight：网页尺寸

九、JavaScript浏览器对象

1.Window对象

（1）Window对象指当前的浏览器窗口
所有JavaScript全局对象、函数以及变量均自动成为window对象的成员：
  全局变量是window对象的属性
  全局函数是window对象的方法
  甚至HTML DOM的document也是window对象的属性之一
（2）window尺寸
  window.innerHeight：浏览器窗口的内部高度
  window.innerWidth：浏览器窗口的内部宽度
（2）window方法
  window.open(url,windowname,style)：打开新窗口
  window.close( )：关闭当前窗口

2.计时器

计时事件：在一个设定的时间间隔之后执行代码
计时方法
  setInterval( )：间隔指定的毫秒数不停的执行指定的代码
  clearInterval( )：停止setInterval( )方法执行的函数代码
  setTimeout( )：暂停指定的毫秒数后执行指定的代码
  clearTimeout( )：停止执行setTimeout( )方法的函数代码

3.History对象

包含浏览器历史（url）的集合
常用方法:
  history.back( )：与在浏览器点击后退按钮相同
  history.forward( )：与在浏览器中点击向前按钮相同
  history.go( )：进入历史中的某个页面

4.Location对象

用于获取当前页面的地址（url），并把浏览器重新定向到新的页面
属性及方法：
  location.hostname：返回web主机的域名
  location.pathname：返回当前页面的路径和文件名
  location.port：返回web主机的端口
  location.protocol：返回所使用的web协议
  location.href：返回当前页面的URL
  location.assign( )：加载新的文档

5.Screen对象

包含有关用户屏幕的信息
常用属性：
  screen.availWidth：可用的屏幕宽度
  screen.availHeight：可用的屏幕高度
  screen.Height：屏幕高度
  screen.Width：屏幕宽度

6.Navigator对象

7.弹出窗口

8.Cookies