js详细基本总结

1.什么是js？

JS代码就是JavaScript编写的脚本文件的代码。用单独文件保存，扩展名为.JS

JS即Javascript，Javascript是一种由Netscape的LiveScript发展而来的脚本语言，主要目的是为了解决服务器终端语言，比如Perl，遗留的速度问题。当时服务端需要对数据进行验证，由于网络速度相当缓慢,只有28.8kbps，验证步骤浪费的时间太多。于是Netscape的浏览器Navigator加入了Javascript，提供了数据验证的基本功能。

Javascript就是适应动态网页制作的需要而诞生的一种新的编程语言，如今越来越广泛地使用于Internet网页制作上。 Javascript是由 Netscape公司开发的一种脚本语言（scripting language），或者称为描述语言。在HTML基础上，使用Javascript可以开发交互式Web网页。Javascript的出现使得网页和用户之间实现了一种实时性的、动态的、交互性的关系，使网页包含更多活跃的元素和更加精彩的内容。 运行用Javascript编写的程序需要能支持Javascript语言的浏览器。Netscape公司 Navigator 3．0以上版本的浏览器都能支持 Javascript程序，微软公司Internet Explorer 3．0以上版本的浏览器基本上支持Javascript。微软公司还有自己开发的Javascript，称为JScript。 Javascript和Jscript基本上是相同的，只是在一些细节上有出入。 Javascript短小精悍， 又是在客户机上执行的，大大提高了网页的浏览速度和交互能力。 同时它又是专门为制作Web网页而量身定做的一种简单的编程语言。

2.js调试

 出错：编写时，没反应；运行时，才出错！

      运行时没效果-->开浏览器的“控制台”!

      firefox-->工具-->web开发者-->Web控制台

   1.错误原因；2.指向错误位置的超链接；

   xxx方法未定义：不是因为方法未定义 真实原因是方法中有错误！

   IE-->F12-->脚本-->控制台

 打桩：调试逻辑错误

      在控制台输出指定内容

      concole.log("输出内容") 不影响网页布局

3.变量：

  所有变量都要用var声明：强烈推荐但不是必须

      js中的变量声明时，不必考虑数据类型！

      首次初始化值时，初始化什么类型的值，变量就是什么类型！

      定义变量时，同时初始化：强烈建议！

      未初始化的变量：默认为undefined-->未定义(2种情况：指定值未得到；未被使用过)

4.小点总结

数据类型：undefined-->经常用于判断是否出错！（输入javaScript的都是字符串）

          null：用过，现在被清空--数据类型为object

         *****boolean类型:0，null，“”，false，undefined，NaN等效于false，其余都为true！

隐式转换：boolean类型做计算：自动转换为数字：true->1； flase->0

          任何类型碰上string都会转为string--同Java

 

强制转换；x.toString():将任何类型转为字符串

        parseInt(x):将任意类型转换为整数

           **凡是从页面上传入到js的都是字符串类型；parseInt会去除整数后的小数位；如果不能转换，返回NaN(Not a Number)

             表示一个非法的数字；却是Number类型；

       重点：自动去除数字*前后*的空格，然后再转换；

             自动去除数字*后*的非数字字符 

           boolean类型可以隐式转换为数字，但不能强转，否则会返回NaN

       3 parseFloat(x):用法：同parseInt

         typeof(x):返回任何对象的类型名称

 

isNaN：判断一个数据是否为数字：如果x是数字:false；如果不是数字：true

          如果是空字符串不验证：false；

         “”-->false-->0

        如果可自动转为数字的内容：false-->是数字

        如果需要强转的内容：true-->不是数字

        如果字面量内容本身为数字，则返回false-->是数字

 

NaN：NaN和任何东西做==比较永远返回false；NaN和任何数字做计算，永远返回NaN；

     多数情况用于判断错误！

 

String对象的属性：length

5.js中String与正则表达式：

   str.search(regexp):同indexOf()

   str=str.replace(regexp,替换值)；   

     regexp:正则表达式对象：/正则表达式/属性后缀   g:全局替换； i：忽略大小写 如果不加g，仅替换第一个

    var arr=str.match(regexp)返回：找到会返回一个数组  *没找到返回null*

 

Array对象：

   数组不限制长度和类型

   创建：[]-->凡是[]，都是数组 var arr =[];创建一个0个元素的数组对象

                           var arr = [100,"a",true]创建一个三个元素的数组，并初始化

   获取或设置某个元素的值：数组变量[i]

Array API:

  将数组内容转为字符串：var str = arr.toString();-->默认按逗号分割    var str =arr.join(分割字符串);-->可自定义分割符

  拼接数组或追加新元素：concat(元素1，元素2，...)；  concat(数组b):将数组拼接到原数组之后

  *拼接不会影响原数组，会创建新数组

  

从数组中截取一段子数组:var啊让人=slice(start,end+1);

 

**排序：sort():直接修改原数组对象，不会产生新数组对象；默认的sort方法会将所有元素转换为字符串再排序

        自定义排序：1.定义比较器：就是一个普通方法

                      参数：2个  返回值：整数

                      作用：定义任意两个元素之间的统一比较规则

                   2.直接将比较器传入sort方法中，作为参数

 

笔试题：js中方法定义的3种语法有哪些

        //提前所有代码的执行加载

      * function compare(a,b){return a-b}

        //严格按解释执行，必须先定义再使用

        var compare = new Function("a","b","return a-b");

        var compare = function(a,b){return a-b;}（时髦）

 

移除元素：arr.splice(start,元素个数)

    public int indexOf(String str)

    返回指定子字符串在此字符串中第一次出现处的索引。);后续元素自动补齐。

 

Math: 

   只要验证字符串格式时，就要使用test方法；test方法验证时，都会和^，$共同使用，要求完全匹配。

   返回：验证通过：true；否则返回：false

 

取消事件：2个return 方法中的return负责抛出boolean值  元素中的return负责接受方法抛出的boolean值

          如果收到true，则继续触发事件，否则，取消事件

查找表单中的控件：按name查找  var arr = document.getElementsByName("name值");

                 数组中每个元素保存找到的控件对象

 

正则表达式对象.exec（）：即可以找到关键字的位置，也可以找到关键字的内容；返回值：一次只找到一个匹配项

                          arr：第一个元素，放的是匹配的内容

                       arr.index属性：匹配内容出现的位置。

 

日期类型： 

    原理同Java

    API三句话：1.每个分量都有一对get/set方法；2.get/set年月日星期，单数；时分秒，复数；

               3.只有月中的日从1开始到31结束，其余都是从0开始到-1结束；

 

日期类型计算：先取分量的值-->做计算-->set回日期对象

             Locale：当地的

              Date：只取日期部分   Time：只取时间部分      d.getFullYear()

 

arguments对象：function中接收传入参数的模拟的数组对象 在js中模拟重载效果  arguments.length:参数个数   arguments[i]:取第几个参数

 

alert不是全局函数。

eval函数：专门用于执行字符串格式的代码。eval("alert('Hello')")

 

对URI的内容进行转码

encodeURI：将多字节字符，转为单字节字符

decodeURI：将单字节转为多字节

当URI中包含多字节字符时，必须转为单字节字符

 

（document掌管浏览器的HTML 前端DOM：javaScript DOM）

window对象中的confirm：确认框 用户可以选择确认和取消；当用户进行不可逆的危险操作时，必须确认后再执行

 

*超链接：

    第一种：替换当前页：html:<a href="url"></a>

                    js:location.href="url";

    第二种：打开新窗口，可重复：

               html:<a href="url" target="_blank"></a>

                js:window.open("url");

    第三种：打开新窗口，只能打开一个：

                 js:window.open("url","name");

               浏览器规定同名窗口只能打开一个！

 

history:浏览器的历史记录栈；每成功访问一个网址，网址就会入栈；关闭浏览器，清空栈

        如何用js实现前进，后退，刷新：history.go(1)：前进      history.go(-1)后退(如果go(-1)不管用，go(-2))        history.go(0)刷新

 

navigator:浏览器的信息，如名称，版本号  *由浏览器厂商定义，没有标准

           cookieEnabled:检测浏览器是否启用cookie(浏览器中保存用户信息的文件/机制)

userAgent:保存浏览器的组织，类型，版本号

 

Timer定时器：只要自己可以动的都是用定时器实现的。周期性定时器：反复，周期性变化；每隔一段时间，重复做相同事

             一次性定时器：一次性执行，自动停止  先等待一段时间，再执行一次，自动停止

 

        三要素：1.做什么事：方法； 2.何时启动：事件；可以动态绑定：将方法作为对象传递  3.全局变量保存定时器编号：启动计时器时获得，

关闭计时器时必须使用

        周期性定时器和一次性定时器用法完全相同

  周期性定时器：启动：timer=setInterval(方法名，间隔的毫秒数)；

                            新建一个线程（类似）

               停止：clearInterval(timer);

                            关闭一个线程

               一次性定时器：启动：timer=setTimeout(方法名，等待的毫秒数);

               停止：timer=clearTimeout(timer);

               取消等待

如果样式被程序操作，由class操作是最高效的。

 

三个事件：onmouseover:鼠标进入，仅在进入时触发一次

         onmousemove:鼠标移动，只要一动就会触发

         onmouseout:鼠标移出

 

（display:none 隐藏）

 

DOM：专门操作网页元素的API

   获取或修改任意元素的任意属性

   属性：元素对象，属性名

  样式：元素对象.style.样式属性名——>不推荐

  等效于：<标签 style="样式属性...">

  .className属性：只要使用程序修改样式  等效于:<标签 class="类名">

 

问题：java星期：1-7：日-六   js星期：0-6：日-六

array.indexOf():IE8可能不支持

 

回顾：

1.DOM：页面中一切元素，属性，文本都是节点对象。可以使用.（点）访问或修改任何对象的任何属性

修改样式，使用.className+CSS整体样式修改

 

 查找：1.ById:getElementById("id值")  2.ByName：var arr =getElementsByName("name值")

 

正课：按层次结构查找：obj.parentNode:得到obj节点对象的父节点

                    obj.childNodes:得到obj节点下的所有字节点对象,包含所有字节点，受干扰

      按标签名查找：var arr =obj.getElementsByTagName("标签名")

      向上爬：parentNode  向下爬：getElementsByTagName

 

动态添加新元素：三步：1.创建空元素对象：var newObj =document.createElement("标签名")

                     2.设置元素的属性

                        newObj.属性名=属性值   newObj.style.样式属性=属性值  newObj.className=类名

                     3.将新元素对象挂到网页中的指定位置

                 追加：parentNode.appendChild(newObj);

                 插入：parentNode.insertBefore(newObj,nodeObj)

动态删除元素：parentNode.removeChild(node);从parentNode对象下删除node元素对象

 

内容改变事件：onChange

    列表框：selectedIndex属性：选中项的下标

 

标准：DOM/DHTML DOM：无所不能。 API繁琐

     HTML DOM：对标准HTML元素对象的封装  封装：常用元素的常用属性和方法

     问题：无法实现所有功能   优点：对常用元素对象简化操作

 

标准DOM添加元素：3步

标准DOM：无所不能。API繁琐

HTML DOM：封装了常用元素对象的常用属性和方法

     局限：不是所有元素都支持

     优点：简化

 

例如：

   标准DOM selObj.getElementsByTagName("option")

   HTML DOM： var arr = selObj.options

 

select对象：属性：options，获得select对象下的所有选项；将options数组.length=0等效于清空所有选项

           sekectedIndex，获得当前选中项的下标；size显示的元素个数，专用于多选

          <select size="5" multiple>

方法：add(optObj);remove(index)

Option对象：

   创建：var newOpt = new Option(innerHTML,value);

 

Table对象：

   属性：*rows，获得所有行对象的数组。cells，获得所有单元格的td对象

   *方法：var newRow = insertRow(index)  

        index=-1：追加，用的多

        deleteRow(index);删除最后一行：table.deleteRow(table.rows.lenghth-1);

TableRow对象：

  属性：*cells，获得一行中的所有单元格; *rowIndex, 当前行的下标  经常用于删除行

  方法：*insertCell（index）：

        deleteCell（index）；

 

TableCell对象：

 

事件处理机制：

  1.由外向内的捕捉； 2.由内向外的冒泡触发

event对象：封装了事件信息，和this一样是关键字；e更多表示事件，e中保存的就是事件对象

  

取消冒泡：e.cancelBubble=true;

利用冒泡：子元素中定义大量重复事件时，可以在父元素中仅定义一次即可

 

this：保存当前事件触发的对象，会改变

e.srcELement || e.target:保存最初触发事件的对象，不会改变

  IE              Firefox  ||指让浏览器自动选择可用的。