JavaScript 入门笔记

JavaScript

 

1.JS和DOM的关系

浏览器有渲染html代码的功能，把html源码在内存里形成一个DOM对象，就是文档对象

浏览器内部有一个JS的解释器/执行/引擎，如chrome用v8引擎

我们在html里面写一个JS代码，JS代码被引擎所执行，而执行的结果就是对DOM的操作，也就是我们常看到的特效，比如 图片漂浮，文字变色

 

浏览器执行时，遇到html代码就渲染，遇到js就解释执行，所以为了保证页面整体的显示，一般把js写在最后，即先渲染页面，再操作DOM

 

---

 

2.变量的声明

var name = 'jquery';

注: 

    严格区分大小写;

    变量名称:数字,字母,下划线.其中数字不能作为变量名称的起始.变量名称也可以以$来作为起始(不建议使用)

    不使用var 会污染全局变量;

     

    加var 表示在函数内部声明一个局部变量并且赋值，若没有则单单是个赋值过程，会往外一直找这个变量

 

调试：

    console.log();

    document.write(string);

    alert(string);

 

---

 

3.变量类型

    三大类(八种数据类型)

    - 传统类型

       Number(数值类型)

       String(字符串类型)

       Boolean(布尔类型)

  

     - 复合类型

       Object(对象类型)    类似php中的关联数组{name: 'tom', age: 18}

       Array (数组类型)     ['a', 3, true] 不管中途去掉某个值，索引始终从0...N编排 

       Function(函数类型)

 

     - 特殊类型

       undefined (未定义类型)

                 若声明变量时,没有赋初值.此时变量数据类型为undefined.

                 没有原生数据

       null      

    

 

   自定义函数

   可以重复执行的代码段.

 

   函数的组成:

   1.函数名称

     - 数字,字母,下划线,数字不能作为函数名称的起始.

     - 函数名称要尽量起的有意义.函数名称建议采用小驼峰式命名规则.

   2.参数(可选),一个函数最多有255个参数.

   3.函数体.

   4.返回值(可选)

 

   函数的声明

   1.function 函数名称([参数...]){

        函数体;

        返回值;

     }

 

   2.var 函数名称 = new Function(参数...函数体);

 

   3.匿名函数

     var test = function([参数...]){

        函数体;

        返回值;  

     }

 

    函数的调用

    1.直接用函数名称在代码段中调用.

    2.以超链接的形式调用自定义函数.

      例如:

       <a href='javascript:自定义函数名称([参数...])'>文本</a>

    3.以事件形式调用自定义函数.

 

    变量的作用域

    全局作用域和局部作用域

    1.全局作用域

      在函数体外声明的变量,作用域是全局作用域.

    2.局部作用域

      在函数体内声明的变量,作用域是局部作用域.

 

 

---

 

4.运算

    按照运算功能来划分

    -算术运算

        + - * / % ++ -- +(正) -(负)  

         

    -逻辑运算(JS，逻辑运算，返回的是最早能判断表达式结果的那个值)

        &&   ||   !

        

     

     -比较运算

        > < >= <= != === !== ==

 

     -赋值运算

        = += -= *= /= %=

 

     -连接运算(一旦遇到非法数字时，后面的一律理解为“拼接”)

        +

        

 

     按照参加运算数目来划分

     - 单目运算

          ++ -- +(正) -(负) !(非)

     - 双目运算

        

     - 三目运算

        exp1?exp2:exp3

        当exp1为真时,执行exp2,否则执行exp3.

 

---

 

5.分支语句

       if

       if...else...

       if...else if....

 

       switch()

 

---

 

6.循环

       for

            

       while

 

       do...while...

       while和do...while的区别:

       do...while循环是在循环条件不满足的情况下也会执行一次循环体.while在循环条件不满足的情况下不执行循环体.

 

---

 

7.JavaScript内置对象

    

   js中一切都可以理解为对象，在调用方法时，那一瞬间被包装成对象

    1.对象的声明

     var o = new Object();

     var o = {};

     var o = {name:'tom',age:10}

     

   2.对象中访问成员的方法

     对象名称.对象中的成员(属性和方法)

 

- 字符串对象

   var s = new String();

   var s = new String("hello");

   var s = "hello";

 

   属性和方法

   属性:

   length 获取字符串的长度

   

   方法:

   对象.indexof(子字符串)

   功能:判断子字符串在对象中首次出现的位置.从0开始

   返回:位置.若子字符串在对象中没有出现,则返回-1.

 

   对象.toUpperCase();

   功能:将对象转换为大写

 

   对象.toLowerCase();

   功能:将对象转换为小写

 

   对象.substr(start [,length])

   功能:字符串的截取.从start位置开始截取length长度.

           length可选参数不给默认截取到字符串尾.

 

   对象.slice(start[,end])

   功能:字符串的截取.从start位置开始截取,截取到第end位置为止.end可选参数不给默认截取到字符串尾.

 

   对象.replace(str1,str2)

 

-  数组对象

    声明:

    var a = new Array();

    var a = [];

    var a = new Array('team',1);

    var a = ['team',1...];

    var a = new Array(7); //7 是数组的长度

 

    数组的输出:

    document.write(数组的名称);

 

    数组的赋值

    a[0] = 'nico';

 

    属性:

    length 数组的长度

 

    方法:

    数组对象.concat(数组对象)

    功能:连接两个数组对象.

    返回:新合并的数组,新数组中元素的顺序取决于合并时两个数组的顺序.

 

    数组对象.pop()

    功能:将数组对象中的最后一个元素弹出.

    返回:被弹出(删除)的数组元素.

  

    数组对象.push(数组元素)

    功能:向数组末尾添加元素.

    返回:被添加元素后的数组的长度.

 

    数组对象.shift()

    功能:弹出数组头部一个元素

    返回:被弹出的数组元素.

 

    数组对象.unshift(元素名称)    

    功能:向数组的头部添加元素

    返回:被添加元素后的数组的长度.

 

     数组对象.join(',')

    

    数组对象.split(',')  

 

    数组对象.reverse()  

 

    数组对象.sort()  

 

-  日期对象

    var d = new Date()

     

    方法:

    对象.getFullYear()

    功能:获取四位的年份

    

    对象.getMonth()

    功能:获取月份,月份(0~11)

 

    对象.getDate()

    功能:获取日

 

    对象.getHours()

    功能:获取小时数

   

    对象.getMinutes()

    功能:获取分钟

 

    对象.getSeconds()

    功能:获取秒值.

 

    对象.getDay()

    功能:获取当前的星期值(0周日~6周六)

 

-  数学(Math)对象

    

    没有实例化，相当于PHP中的通过类名静态调用

    

    属性:

    PI 派值

 

    方法:

    Math.ceil(变量)

    功能:向上取整

 

    Math.floor(变量)

    功能:向下取整

 

    Math.round(变量)

    功能:四舍五入

 

    Math.abs(变量)

    功能:取绝对值

 

    Math.random()

    功能:返回伪随机值.大于等于0小于1 [0,1).

 

    Math.max(变量..)

    功能:返回变量中的较大者.

 

    Math.min(变量..)

    功能:返回变量中的较小者.

 

---

 

8.浏览器window对象

    注：window对象是浏览器宿主对象 和JS语言无关

    

    window对象的方法：

    window.alert(message);

    window.confirm(message);

    window.prompt();

    window.open();

    window.close();

    window.print();

 

    window.setInterval();

    window.setTimeout();

    window.clearInterval();

    window.clearTimeout();

 

    window对象的子对象：

    1.navigator 浏览器信息对象

    

    

     

    2.location 地址栏对象

     

    

 

    3.history 历史记录

    

        

 

     4.screen 屏幕对象

     

      

     5.document 对象（DOM对象）

     

     

    6.存储对象

       Web 存储 API 提供了 sessionStorage （会话存储） 和 localStorage（本地存储）两个存储对象来对网页的数据进行添加、删除、修改、查询操作。

     

      

     sessionStorage 用于临时保存同一窗口(或标签页)的数据，在关闭窗口或标签页之后将会删除这些数据。

 

     

     

    localStorage 用于长久保存整个网站的数据，保存的数据没有过期时间，直到手动去除。

 

---

 

9.DOM对象操作   

   DOM(Document Object Model 文档对象模型)

   Document HTML/XML

            XML

            eXtensionable Markup Language

            (扩展标记语言)

            用途:信息的记载和传递.

            特点:不作为.

   Object 将HTML转换为JavaScript对象.

   Model  模型

   

   找对象

   - document.getElementsByTagName(HTML tag标签)

     返回:对象组成的数组.

 

   - document.getElementsByName(HTML标签的name属性值)

     返回:对象组成的数组.

 

    - document.getElementById(HTML标签的id属性值)

     返回:对象.

 

    - document.getElementsByClassName(HTML标签的class属性值)

     返回:对象组成的数组.

 

    window.document为什么可以省略前面的window?

    答：还是作用域的问题，内部找不到往外层找，全局下有window.document

    

     

     

     

     

    Model  模型

    如果将HTML文档视为一个倒置树型结构.那么文档中的HTML标签,文本,注释,属性都可以被视为树型结构上的节点.节点之间是有关联的.找到其中的一个节点.就可以找到树型结构上的全部节点.

    注：一个空白、注释都是一个节点；

 

    节点:节点名称(nodeName),

           节点类型(nodeType).

           有些节点有节点值(nodeValue).

 

    父节点: 节点对象.parentNode

 

    子节点: 

        节点对象.childNodes  返回数组（包含空白节点） 

          

          

        节点对象.children    非标准属性，但兼容很好，不包括空白节点

                

         

        节点对象.firstChild

        节点对象的第一个子节点

        节点对象.lastChild

        节点对象的最后一个子节点

 

    同胞节点:

            节点对象.previousSibling

             上一个同胞节点

             

            节点对象.nextSibling

             下一个同胞节点

 

    document.createElement(HTML tag 标签)

    功能:创建新的HTML对象

    返回:对象

   

    父对象.appendChild(子对象)

    功能:将子对象添加到父对象中.

    

    

 

    父对象.removeChild(父对象.lastChild)

    功能:删除对象的最后一个子节点.

 

   

   操作对象

   属性

   1.属性的读取

     对象.属性名称

   2.属性的修改

     对象.属性名称 = 属性值

 

   文本

   1.读取

      对象.innerText

      对象.innerHTML   // 标签内的所有html代码

   2.修改

      对象.innerText = 修改的文本

      对象.innerHTML = 修改的文本

     innerHTML解析HTML标签,innerText不解析HTML标签.

 

   样式

    1.读(因为style属性后面还是对象,所以要用 . 继续访问，且只能去读内连样式的值，无法读取<style>中的值)

      对象. style. 属性名称;

    2.修改

      对象.style.属性名称=属性值;

      属性名称注意:background-color 要求将"-"去掉后将下一个单词首字母大写,即小驼峰式属性名称.

    3.批量修改样式

      对象.className = class样式名称

 

    获取运行时的style对象：

    obj.currentStyle[attr] 和 getComputedStyle(obj, null)[attr] 来获取

    前者只有ie和opera支持，后者标准浏览器中使用ie9以上也支持,第二个参数是伪元素

 

---

 

10.事件 

   1.事件源

     所有的HTML标签都可以被视为事件源

   2.事件

     鼠标 click 单击事件

          dblclick 双击事件

          mouseover 鼠标划入

          mouseout  鼠标划出

 

     键盘  keyup  键盘抬起

           keydown 键盘按下

           keypress 键盘按下

 

     文档  load 文档加载完毕

           unload 文档关闭前

 

     表单  focus 获取焦点

           blur  失去焦点

           change 表单改变

           submit 提交(属于form元素 return false 阻止提交)

  

    3.事件处理程序

      - <tag on事件="事件处理程序">

         事件处理程序可以是javascript代码,也可以是自定义函数的名称.

      - 对象.on事件 = 事件处理程序

         事件处理程序是匿名函数.

 

---

 

11.定时器

    

 

    n秒后执行的定时器

    

    clearTimeout() 方法可取消由 setTimeout() 方法设置的定时操作。

    clearTimeout() 方法的参数必须是由 setTimeout() 返回的 ID 值。

    注意: 要使用 clearTimeout() 方法, 在创建执行定时操作时要使用全局变量：

 

    每隔n秒执行的定时器

    

    setInterval() 方法可按照指定的周期（以毫秒计）来调用函数或计算表达式。

    setInterval() 方法会不停地调用函数，直到 clearInterval() 被调用或窗口被关闭。由 setInterval() 返回的 ID 值可用作 clearInterval() 方法的参数。

    提示： 1000 毫秒= 1 秒。

    提示： 如果你只想执行一次可以使用 setTimeout() 方法。