JavaScript 笔记

MOOC JavaScript 笔记

入门篇

1-1

1. 定义函数

function 函数名()
{
     函数代码;
}

2. 输出内容

document.write()

输出换行符 “
”

3. 警告对话窗

alert(字符串或变量);  

4.确认（confirm 消息对话框）

confirm(str);
参数说明:

str：在消息对话框中要显示的文本
返回值: Boolean值
返回值:

当用户点击"确定"按钮时，返回true
当用户点击"取消"按钮时，返回false
注: 通过返回值可以判断用户点击了什么按钮

5. 提问（prompt 消息对话框）

prompt(str1, str2);
参数说明：

str1: 要显示在消息对话框中的文本，不可修改
str2：文本框中的内容，可以修改
返回值:

1. 点击确定按钮，文本框中的内容将作为函数返回值
2. 点击取消按钮，将返回null

6.打开新窗口（window.open）

语法：

window.open([URL], [窗口名称], [参数字符串])
参数说明:

URL：可选参数，在窗口中要显示网页的网址或路径。如果省略这个参数，或者它的值是空字符串，那么窗口就不显示任何文档。
窗口名称：可选参数，被打开窗口的名称。
    1.该名称由字母、数字和下划线字符组成。
    2."_top"、"_blank"、"_self"具有特殊意义的名称。
       _blank：在新窗口显示目标网页
       _self：在当前窗口显示目标网页
       _top：框架网页中在上部窗口中显示目标网页
    3.相同 name 的窗口只能创建一个，要想创建多个窗口则 name 不能相同。
   4.name 不能包含有空格。
参数字符串：可选参数，设置窗口参数，各参数用逗号隔开。

7.关闭窗口

用法：

window.close();   //关闭本窗口
或

<窗口对象>.close();   //关闭指定的窗口

2-2 认识DOM

1.  通过ID获取元素

语法:

 document.getElementById("id")

2. innerHTML 属性
3. 改变HTML样式

Object.style.property=new style;

4. 控制显示

Object.style.display = value

5. 控制类名（className 属性）

className 属性设置或返回元素的class 属性。

object.className = classname

进阶篇

1.  JS是==区分大小==写的，如：classname和ClassName是不一样的。同时注意方法、属性、变量等的大小写吆。
2.  使用 src= "文件名" 可以实现外部导入js
3.  变量以字母、下划线或美元符号开头
4.  算术操作符 → 比较操作符 → 逻辑操作符 → "="赋值符号

5.  数组   创建数组的同时，还可以为数组指定长度，长度可任意指定。

var myarray=new Array();

注意：
1.创建的新数组是空数组，没有值，如输出，则显示undefined。
2.虽然创建数组时，指定了长度，但实际上数组都是变长的，也就是说即使指定了长度为8，仍然可以将元素存储在规定长度以外。

我们还可以用简单的方法创建上面的数组和赋值：

第一种方法：

var myarray = new Array(66,80,90,77,59);//创建数组同时赋值
第二种方法：

var myarray = [66,80,90,77,59];//直接输入一个数组（称 “字面量数组”）

注意：数组存储的数据可以是任何类型（数字、字符、布尔值等)

只需使用下一个未用的索引，任何时刻可以不断向数组增加新元素

myarray.length; //获得数组myarray的长度

6. 二维数组		二维数组的表示: myarray[ ][ ]

1. 二维数组的定义方法一

var myarr=new Array();  //先声明一维 
for(var i=0;i<2;i++){   //一维长度为2
   myarr[i]=new Array();  //再声明二维 
   for(var j=0;j<3;j++){   //二维长度为3
   myarr[i][j]=i+j;   // 赋值，每个数组元素的值为i+j
   }
 }
先一维后二维		一维列 二维行as/sa

7. break(终止)  continue(跳过)

5-1 函数

1. function

6-1 事件

1. 主要事件表

注意: 在网页中，如使用事件，就在该元素中设置事件属性。

2. 加载事件

事件会在页面加载完成后，立即发生，同时执行被调用的程序。
注意：

1. 加载页面时，触发onload事件，事件写在标签内。
2. 此节的加载页面，可理解为打开一个新页面时。

7-1

1. Date 日期对象

注意:使用关键字new，Date()的首字母必须大写。

2.  返回指定位置的字符.   

语法:

stringObject.charAt(index)

3.  返回指定的字符串首次出现的位置

说明：

1.该方法将从头到尾地检索字符串 stringObject，看它是否含有子串 substring。

2.可选参数，从stringObject的startpos位置开始查找substring，如果没有此参数将从stringObject的开始位置查找。

3.如果找到一个 substring，则返回 substring 的第一次出现的位置。stringObject 中的字符位置是从 0 开始的。

注意：1.indexOf() 方法区分大小写。

2.如果要检索的字符串值没有出现，则该方法返回 -1。

4. 字符串分割split()

知识讲解：

split() 方法将字符串分割为字符串数组，并返回此数组。

语法：
stringObject.split(separator,limit)

注意：如果把空字符串 ("") 用作 separator，那么 stringObject 中的每个字符之间都会被分割。

5. 提取字符串substring()

substring() 方法用于提取字符串中介于两个指定下标之间的字符。

语法:

stringObject.substring(startPos,stopPos)

注意：

1. 返回的内容是从 start开始(包含start位置的字符)到 stop-1 处的所有字符，其长度为 stop 减start。

2. 如果参数 start 与 stop 相等，那么该方法返回的就是一个空串（即长度为 0 的字符串）。

3. 如果 start 比 stop 大，那么该方法在提取子串之前会先交换这两个参数。

8-1 Window对象

1. 总览：

2. 计时器setInterval()
语法:

setInterval(代码,交互时间);
参数说明：

1. 代码：要调用的函数或要执行的代码串。

2. 交互时间：周期性执行或调用表达式之间的时间间隔，以毫秒计（1s=1000ms）。

返回值:

一个可以传递给 clearInterval() 从而取消对"代码"的周期性执行的值。

3. 计时器setTimeout()

setTimeout()计时器，在载入后延迟指定时间后,去执行一次表达式,仅执行一次。

语法:

setTimeout(代码,延迟时间);
参数说明：

1. 要调用的函数或要执行的代码串。

2. 延时时间：在执行代码前需等待的时间，以毫秒为单位（1s=1000ms)。

   4. Navigator
      Navigator 对象包含有关浏览器的信息，通常用于检测浏览器与操作系统的版本
      
   5. Location
      location用于获取或设置窗体的URL，并且可以用于解析URL。

对象属性

对象方法

9-1. DOM

1. HTML文档可以说由节点构成的集合，DOM节点有:

元素节点：上图中 、、

等都是元素节点，即标签。
文本节点:向用户展示的内容，如

• …
• 中的JavaScript、DOM、CSS等文本。
  属性节点:元素属性，如 标签的链接属性href=“http://www.imooc.com”。

  2.  getElementsByName()方法
  

  返回带有指定名称的节点对象的集合。
  语法：

  document.getElementsByName(name)
  与getElementById() 方法不同的是，通过元素的 name 属性查询元素，而不是通过 id 属性。

  注意:

  1 因为文档中的 name 属性可能不唯一，所有 getElementsByName() 方法返回的是元素的数组，而不是一个元素。

  2 和数组类似也有length属性，可以和访问数组一样的方法来访问，从0开始。

  3.  getElementsByTagName()方法
  

  返回带有指定标签名的节点对象的集合。返回元素的顺序是它们在文档中的顺序。

  语法:

  document.getElementsByTagName(Tagname)
  说明:

  1.Tagname是标签的名称，如p、a、img等标签名。

  2.和数组类似也有length属性，可以和访问数组一样的方法来访问，所以从0开始。

  4. 区别
  

  区别getElementByID,getElementsByName,getElementsByTagName
  以人来举例说明，人有能标识身份的身份证，有姓名，有类别(大人、小孩、老人)等。

  1 ID 是一个人的身份证号码，是唯一的。所以通过getElementById获取的是指定的一个人。

  2 Name 是他的名字，可以重复。所以通过getElementsByName获取名字相同的人集合。

  3 TagName可看似某类，getElementsByTagName获取相同类的人集合。如获取小孩这类人，getElementsByTagName(“小孩”)。
  

  5.  getAttribute()方法
  

  通过元素节点的属性名称获取属性的值。

  语法：

  elementNode.getAttribute(name)
  说明:

  1. elementNode：使用getElementById()、getElementsByTagName()等方法，获取到的元素节点。

  2. name：要想查询的元素节点的属性名字

      6.setAttribute()方法
     

  setAttribute() 方法增加一个指定名称和值的新属性，或者把一个现有的属性设定为指定的值。

  语法：

  elementNode.setAttribute(name,value)
  说明：

  1.name: 要设置的属性名。

  2.value: 要设置的属性值。

  注意：

  1.把指定的属性设置为指定的值。如果不存在具有指定名称的属性，该方法将创建一个新属性。

  2.类似于getAttribute()方法，setAttribute()方法只能通过元素节点对象调用的函数。

  7. 节点属性
  8. 访问子节点childNodes
  

  访问选定元素节点下的所有子节点的列表，返回的值可以看作是一个数组，他具有length属性。

  语法：

  elementNode.childNodes
  注意：

  如果选定的节点没有子节点，则该属性返回不包含节点的 NodeList。

  9. 访问子节点的第一和最后项
  

  node.firstChild
  node.lastChild

  10.访问父节点parentNode
  

  获取指定节点的父节点

  语法：

  elementNode.parentNode
  注意:父节点只能有一个。