javascript基础

本周学习知识点：

一、javascript基本语法：

    javascript 和 java的区别

变量

数据类型

闭包特性

运算符和流程控制

对象的声明与应用

函数的声明与应用

二、javascript 内置对象：                

1. 日期对象

2. 数学对象

3. 字符串对象

4. 数组对象

5. 正则表达式对象

三、javascript DOM和事件：

     1. DOM概念

     2. DOM的增删改查

     3.window对象的子对象

     4.javascript位置相关的属性

     5. 事件分类

     6. 事件绑定

 

 

 

一、javascript基本语法：

   A、javascript 和 java的区别

       javascript 是解释型语言；java是编译型语言

       区别在于：解释型语言先将编写的代码翻译成计算机认识的二进制代码，翻译之后直接执行其结果，而编译型语言会先将翻译的结果生成可执行文件，下次再请求时直接执行这个可执行文件即可。

B、变量

  1. 声明变量使用var关键字，变量一旦声明后直到浏览器关闭，变量才被释放。

  2.javascript中变量作用域和php的变量作用域是不一样。

   全局变量指的是在函数外面声明的变量；局部变量指的是在函数内部声明的变量（javascript的全局变量是在整个javascript执行的范围内 全部都可以使用）。

在php中如果在函数内部想使用外部的变量，需要先把这个变量声明为全局的 global 或 $GLOBALS。

  3.如果函数内和函数外定义了相同的变量，函数内部使用局部的变量，函数外部使用全局的变量。

  4.javascript代码执行过程：遇到函数先开辟一块空间，所以执行到第一个alert时，还没有定义这个变量所以为undefined。

 var v=’global’;

function test(){

     alert();//undefined

     var v=’function’;

     alert(v);

}

test();

 

C、数据类型

1. 基本数据类型：

    a. 字符串

    b. 数值型

    c. 布尔型

    2. 复合数据类型

    a. 对象

    b. 数组

 3. 其他数据类型

    a. 函数

    b. null

    c. undefined

D、javascript的闭包特性

   闭包是javascript语言的一个特性；

　 当我们在函数内定义一个函数时，并且在函数外使用了这个内部函数的引用，这种情况就会产生一个闭包。

　　闭包的结果是：我们可以在内部函数中使用外部函数的变量，也就是内部函数将外部函数的变量包含在了内部函数中。

　　闭包所包含的是当前变量最终的值。

 闭包作用：闭包可以让我们在函数外部得到函数内部作用域的变量。

E、 数据类型之间的转换

1. 自动类型转换：

　　在运行 + 操作时，如果出现字符串 和 数值类型的运算，数值类型会自动被转换为字符串类型

2. 强制类型转换：

　　当自动类型转换不能实现我们的需要时，我们需要手动的转换（强制类型转换）

　　String()

　　Number()

　　Boolean()

　　parseInt()

　　parseFloat()

F、运算符和表达式

1. 算数运算符：+  -  *  /  %  ++  -- 

　　 + 有两种用法： 字符串连接   四则运算

2. 赋值运算符：=  +=  -=  *=  /=  %= 

3. 条件运算符：>  <  ==  !=  >=  <=  ===  !== 

4. 逻辑运算符：&&  ||  ！

5. 其他运算符 ？： 三目运算符

G、循环结构

while()：条件型语句

do-while()  

for()： 计数型语句

break: 语句

continue: 语句

二、javascript 内置对象：

A、日期对象：可以使用系统内置的构造函数来创建日期对象：new Date（）；

日期对象方法：

getYear()//返回年份，不建议使用

getFullYear()//返回年份，4位数，建议使用

getMonth()//返回月份，其值范围为0~11

getDate()//返回日期对象中的一个月中的第几天

getDay()//返回星期中的某一天，0~6

getHours()//返回日期对象中的小时部分

getMinutes()//返回日期对象中的分钟部分

getSeconds()//返回日期对象中的秒钟部分

getMilliseconds()//返回日期对象中的毫秒部分

getTime()//返回日期对象中的时间戳的毫秒数

getTimezoneOffset()//返回日期对象中的时区的时差数，单位是秒

B、数学对象：为数学计算提供常量和计算函数。

1. 数学对象的属性：

Math.PI://3.1415926

Math.SQRT2://2的平方根

2.数学对象的方法：

Math.abs()://绝对值

Math.ceil()://进一取整

Math.floor()://退一取整

Math.max(num1,num2….)://取最大值

Math.min()://取最小值

Math.pow(x,y)://返回x的y次幂

Math.random()://0.0~1.0之间的随机数

Math.round()://四舍五入

Math.sqrt2()://平方根

C、字符串对象：

字符串对象的方法：

indexOf(“abc”)//返回子字符串abc在字符串中第一次出现的位置

lastIndexOf(“abc”)//返回子字符串abc在字符串中最后一次出现位置

match(regexp)//找到一个或多个正则表达式的匹配

replace(表达式,替换的字符串)//替换一个与正则表达式相匹配的子串

search(regexp)//查找与正则表达式相匹配的子字符串

split(正则表达式,数组最大长度)//用于把一个字符串分割成字符串的数组

slice(startindex,endindex)//返回一个子字符串(截取字符串

substr(startindex,length)             //返回一个子字符串

substring(startindex,endindex)             //返回一个子字符串

toLowerCase()//将字符串转换为小写

toUpperCase()//将字符串转换为大写

 

字符串对象拥有的属性：

constructor               //对创建该对象的函数的引用

length               //字符串的长度

D、数组对象 ：

数组对象的属性：

array.length//数组元素的个数

数组对象的方法

toString()//将数组转换为字符串

join()//将数组元素连接成字符串

push()//在数组尾部添加元素

concat()//添加元素并生成新数组

unshift()//在数组头部添加元素

pop()//删除并返回数组的最后一个元素

shift()//删除并返回数组的第一个元素

splice()//删除、替换或插入数组元素

slice()//返回数组中的一部分（截取）

reverse()//颠倒数组中的元素

sort()//将数组元素排序

遍历数组：

for() 循环

for...in()循环

E、RegExp对象

正则表达式：用来存储规则对象（正则表达式是一种规则，一种语言，他不依赖任何语言，只是某种语言如何支持正则表达式）。

三、javascript DOM和事件

DOM：Document Object Model:文档对象模型象

Document: 文档 html、xml文件

Object:  如果使用js操作html文档，就需要先将html文档转换成js对象。

    a.操作属性

b.操作内容(IE/Chrome innerText  FF:textContent)、innerHTML、表单

c.操作样式（内联）

d.转成对象的两种方法：

   （1）通过元素名（多个），id（一个），name（多个）

     var obj=document.getElementsByTagName('div');

 var obj=document.getElementById('div');

 var obj=document.getElementsByName();//通常表单使用此方法

    (2) 通过数组的形式

//var obj=document.images();//找到所有图像

//var obj=document.forms();//找到所有表单

//var obj=document.scripts();//找到所有脚本

//var obj=document.links();//找到所有超链接

//var obj=document.embeds();//视频、音频

Model:  根据树状结构将文档转换成一个一个的节点。

   通过某一个节点，通过节点之间的关系能够找到其他的节点：

　　父节点：parentNode

　　子节点（长子、次子）childNodes   firstChild     lastChild

　　同胞节点（第一个、第二个）nextSibling  previousSibling

　　每个节点都有三个属性：

　　nodeName：节点名称

　　nodeValue：节点值

　　nodeType： 节点类型（元素节点类型、属性节点、文本节点）

  注意：nodeValue属性对于文档节点和元素节点是不可用的。

A、JavaScript对象模型由以下4个部分组成：

    1.JavaScript语言核心部分：该部分主要包括JavaScript的数据类型、运算符和表达式。

    2.与数据类型相关的核心对象：布尔对象、日期对象、数学对象、数字对象和字符串对象等。

    3.与浏览器相关的对象：该部分主要包括Window对象、Navigator对象、Location 、History、 screen 对象等。

    4.与文档相关的对象：Document对象、Form对象和Image对象等。

B、JavaScript的对象层次:Window对象是整个浏览器窗口，而Document对象只是用于显示HTML文档的白色区域。

C、BOM :浏览器对象模型（Brower Object Model），该对象模型提供了独立于内容的、与浏览器窗口进行交互的对象。

 window对象是BOM模型中的顶层对象，因此所有BOM模型中的对象都是该对象的子对象。

window对象子对象:

Document对象Document对象就是HTML对象

History对象History对象所存储的是当前窗口的浏览历史

   Back()   回到上一历史记录网址

   Forward（）回到下一历史记录网址

    Go（）去哪个地址

Location对象当前文档的URL

Math对象为数学计算提供常量和计算函数

Navigator对象浏览器的总体信息

Screen对象有关用户所使用的显示器信息

Screen.availHeight   屏幕区域可用高度

screen.availWidth    屏幕区域可用宽度

Screen.height         屏幕区域实际高度

Screen.width          屏幕区域实际宽度

D、window 对象常用方法：

    alert（）

　confirm（）

　　prompt（）

setInterval（）注意可以开多个定时器

　　clearInterval()

     setTimeout()

     clearTimeout()

open（）

E、javascript 位置相关属性：

style.top：元素距离顶部距离

style.left：元素距离左边的距离

offsetWidth：对象(元素)的宽度

offsetHeight：对象(元素)的高度

offsetTop：  距离对象的父元素的顶部的距离

offsetLeft： 距离对象的父元素的左边的距离

F、事件的绑定：

   1、直接在元素上通过事件绑定：   Onclick=‘function（）’

   2、在JavaScript代码中设置对象事件

     Document.getElementById(‘click2’).Onclick=function(){}

  3.以监听器的形式将事件绑定到元素上(通过绑定触发器的形式)

   当我们需要为同一个元素的同一个事件绑定多个操作时，使用第二种方案就不可以了，因为我们的onclick属性只能保存最后设置的值。

需要调用元素的 addEventListener(什么事件，执行的代码， false);

 IE、FF兼容：addEventListener（）参数1： 需要添加事件元素、参数2： 事件名称、参数3： 事件发生时执行的函数。

if(input.addEventListener){

   input.addEventListener(‘focus’,clearC,false);

   input.addEventListener(‘focus’,clearx,false);

}else{

    input.attachEvent(‘onfocus’,clearC);

     input.attachEvent(‘onfocus’,clearX);

}

G、事件对象 

当事件发生的时候，自动生成一个event对象(通常获得事件发生的时候，键盘按键的状态、鼠标的状态、发生事件的元素等)

srcElement: 事件源对象

keyCode：按键码

clientX：  鼠标指针的水平坐标

clientY：  鼠标指针的垂直坐标

screenX:  

screenY:

var eve = e || window.event;    // FF  IE

H、事件分类

获得焦点事件（onfocus）

失去焦点事件（onblur）

内容改变事件（onchange）

页面事件：

onload    页面加载完毕

鼠标事件：

onclick()  鼠标单击

ondblclick()鼠标双击

onmouseover() 鼠标移入事件

onmouseout()  鼠标移除事件

onmousemove()鼠标移动事件

onmouseup()  鼠标按键被松开事件

J、键盘事件

Onkeydown    按键被按下

Onkeyup         按键抬起

Onkeypress     按键被按住

表单事件：Onsubmit   Onreset

 

 

学习总结： 

一、HTML中使用JavaScript：

 

1. 使用<script>JS代码</script>标签:src属性：表示包含要执行代码的外部文件。type属性：text/javascript（可省略）

      <script type=“text/javascript”>

alert(‘hello,js’);

      </script>

2.  使用事件传入JavaScript代码

     <div onclick=“alert(‘hello,js’)”></div>

3.  使用<a href=“javascript:alert(‘hello,js’);”></a>