JavaScript

HTML：负责了一个页面的结构

   css: 负责了一个页面的样式

   javascript: 负责与用户进行交互。

   javascript的历时：

             微软： 盖茨认为未来是"视窗"的世界。

       网景： 1995年推出了一款浏览器（导航者）和liveScript(校验功能)，非常受欢迎

       和sun公司合作，借用了Java的名字，把liveScript改名成JavaScript。70%市场份额

       

JavaScript的特点：       

         1、跨平台

    2、安全性（JavaScript的代码不能直接访问硬盘的内容）

JavaScript与Java的区别：

         1、JavaScript是属于网景公司产品，Java是sun公司的产品

    2、JavaScript是基于对象的语言，Java是面向对象的语言。

    3、JavaScript是解释型语言，Java是解释、编译型语言

    4、JavaScript是弱类型语言，Java是强类型语言

   Java中声明变量的时候必须要明确该变量的数据类型。

   JavaScript声明变量不需要明确是何种数据类型，任何的变量都是使用一个关键字var去声明即可

如何编写JavaScript的代码？

  方式一：可以使用<script> 进行编写

    格式：

     <script type="text/javascript">

       js代码;

     </script>

     例：<scripttype = "text/javascript">

                     alert("哈哈");

                   </script>

  方式二：引入外部的JavaScript文件

    格式：<scriptsrc="1JavaScript.js"type="text/javascript"></script>

    注意：1、<script>是有开始标签与结束标签的，千万不要在一个标签中结束了。

        2、如果<script>已经用于引入了js文件，那么该<script>标签体就不能再写js代码了

     

 

javascript常用的函数：

 alert("显示的内容..“);弹出框

 document.write("数据");//向页面输出数据...   

网页的注释：

 html <!--

  css的注释 /* 注释的内容 */

 JavaScript //注释的内容单行注释            /* 注释的内容 */ 多行注释

控制流程语句

  if语句

    格式：

           if(判断条件){

                     符合条件执行的代码

                     }

   if语句的特殊之处：

           1、在JavaScript中的if语句条件不单止可以写布尔表达式，还可以写任何的数据

             number 非0位true，0为false

       string 内容不能空是true，内容空的时候是false

                   undefinedfalse

                   NaNfalse

 

var workAge = 2;

var str = null;

var b;

if(b){

         document.write("welcome");

}else{

         document.write("baibai");

         }

  选择语句：

   switch(变量){

           case 值1

          

             break;

         case值2

          

             break;

         case值3

          

             break;

         }

         特殊之处：

1、  在JavaScript中case后面可以跟常量与变量还可以跟表达式

javascript的变量声明：

           格式：

             var 变量名 = 数据;

           声明变量要注意的事项：

             1、在JavaScript中声明变量是 使用var关键字声明的，JavaScript中的变量可以存储任意的数据类型数据

                   2、JavaScript中变量数据类型是根据存储的值决定的，可以随时更改存储数据的类型。

                   3、定义了多个同名的变量时，后定义的同名变量是覆盖前面定义的同名变量。

                   4、声明变量的时候可以省略var关键字，但是不建议省略

         javascript的数据类型

           typeof 查看变量的数据类型

           使用格式：typeof 变量名

           number 小数与整数

           string 字符串 注意：JavaScript中没有字符的概念，只有字符串，字符串可以卸载单引号或者双引号中

           boolean 布尔数据类型

           undefined undefined代表该变量没有定义呢

运算符：

           +（加法、正数、连接符）

           true 是1，false 是0；

  vara = 1;

  a =a + 1;

 document.write("a+1="+ a +"<br/>");// 2

 document.write("1+false:"+(1+false)+"<br/>");//1

 document.write("1+true:"+ (1+true)+"<br/>");// 2

 document.write("hello"+1);// hello1

 document.write("<br/>");

 

  除法：

  vara = 10;

  varb = 3;

 document.write("除法运算是：" + (a/b) + "<br/>");// 如果两个整数相除不能整除的时候结果还是小数

 

  比较运算符

  字符串与字符串的比较规则是：

    情况1：能找到对应位置上的不同字符，那么就比较第一个不同字符的大小

         情况2：不能找到对应位置上的不同字符，这时候比较的是两个字符串的长度

   

 document.write("10大于3吗？"+(10>3)+"<br/>");//true

 document.write("10字符串大于3字符串吗？"+("10">"3")+"<br/>");//false字符串与字符串比较

 document.write("10大于字符串9吗？"+(10>"9")+"<br/>");//true 字符串还可以和数字进行比较  凡是数字与字符串进行比较，会先把字符串转换成

  数字再进行 比较的。

 

  逻辑运算符：

  //没有单与的

 document.write((true&&true)+"<br/>");// true

 document.write((true&&false)+"<br/>");// false

 document.write((false&&true)+"<br/>");// false

 document.write((false&&false)+"<br/>");// false

 

 document.write((true||true)+"<br/>");// true

 document.write((true||false)+"<br/>");// true

 document.write((false||true)+"<br/>");// true

 document.write((false||false)+"<br/>");// false

 

  三目运算符

    布尔表达式？值1：值2;

  varage = 19;

 document.write(age>18?"成年人":"未成年人");

 

字符串转数字

   parseInt()  可以把一个字符串转换成整数

         parseFloat()  可以把一个字符串转换成小数

var a = "12";

a = 12.54;

a = "12354abcad1232";

a = "a112";// NAN not a number(不是一个数字)

a = "012";// 如果首位是0，那么就先去除0再进行转换

a = "0x10";// 如果一个字符串是以0x开头，那么会把字符串中的内容当成十六进制的数据处理的

var b = parseInt(a);/*parseInt 方法如果接收的字符串含有非数字的字符，那么parse方法会从字符串的首个字符开始寻找，一直知道非数组字符为止，然后就是用前面的数字字符转换成数字*/

document.write("结果：" + b+ "<br/>");

 

var c = "3.14";

c = "10";//如果一个字符串是整数的，那么使用parseFloat还是转换成整数

c = "100a";

c = "a100";

c = parseFloat(c);

document.write("结果："+c+"<br/>");

 javascript 提供了一个 isNaN 的方法让我们判断该字符串是否是一个数字

   is not a number 不是一个数字

         不是一个数字返回true，是一个数字返回false

document.write("123不是一个数字吗？"+isNaN("123")+"<br/>");

循环语句0702：

if

switch

 switch 语句的特殊之处：case后面可以跟常量与变量或者是表达式

循环语句：

 while

    格式：

           while(判断的条件){

             循环体内容

           }

           var count = 0;

     while(count<5){

             document.write("helloworld"+"<br/>");

                   count++;

           }

  dowhile循环语句

   do{

                   循环语句

         }while(判断条件);

         //计算1-100奇数的总和

var num = 1;

var result = 0;

do{

         if(num%2!=0){

           result += num;

         }

         num++;

}while(num<=100);

document.write("结果："+result+"<br/>");

 

  for循环语句：

    格式

           for(初始化语句;判断的条件;循环后的语句){

             循环体语句；

           }

           //需求：计算1-100偶数的总和

var result = 0;

for(var i = 1; i<=100; i++){

 if(i%2==0){

   result += i;

  }

}

document.write("结果："+result+"<br/>");

//正方形* 5行5列

for(var i = 0; i<5; i++){

 for(var j = 0; j<5; j++){

   document.write("*&nbsp;")

  }

 document.write("<br/>");

}

document.write("<hr/>");

//直角三角形

for(var i = 0; i < 5; i++){

 for(var j = 0; j <= i; j++){

   document.write("*&nbsp;");

  }

 document.write("<br/>");

}

document.write("<hr/>");

//乘法口诀

for(var i = 1; i <= 9; i++){

 for(var j = 1; j <= i; j++){

   document.write(j+"*"+i+"="+(i*j)+"&nbsp;&nbsp;");

  }

 document.write("<br/>");

}

for-in语句：

 for(数据类型变量名 : 遍历的目标){

          

  }

 for-in语句的格式：

   for(var 变量名 in 遍历的目标){

        

         }

  for-in语句的作用：

    1、可以用于遍历数组的元素  注意：使用for-in语句遍历数组元素的时候遍历出来是数组的下标。

          2、可以用于遍历对象的所有属性数据  注意：使用for-in语句遍历对象的属性的时候，遍历出来的是对象的属性名。

with语句：有了with语句，在存储对象属性和调用方法时就不用重复指定对象

    格式：

           with(对象){

          

           }

函数：

  函数的定义格式：

   function 函数名(形参列表){

           函数体;

         }

 javascript的函数要注意的细节：

    1、在JavaScript中函数 定义形参时是不能使用var关键字声明变量的。

         2、在JavaScript中的函数是没有返回值类型的，如果函数需要返回数据给调用者，直接返回即可，如果不需要返回则不返回。

         3、在JavaScript中是没有函数重载的概念得，后定义的同名函数会直接覆盖前面定义的同名函数。

        4、在JavaScript中任何的函数内部都隐式的维护了一个arguments（数组）的对象，给函数传递数据的时候，是会先传递到arguments对象中，然后再由arguments      对象分配数据给形参

var str1 = new String("hello");

  varstr2 = new String("hello");

 document.write("两个字符串的对象一样吗？"+(str1.toString()==str2.toString()));

创建一个字符串的方式：

方式1：

  newString("字符串的内容");

方式2：

  varstr = "字符串的内容";

字符串常用的方法：

 Anchor()                 生产锚点

 Blink()            为元素添加blink标签

 charAt()                 返回指定索引位置处的字符

 charCodeAt()        返回一个整数，代表指定位置上字符的Unicode编码

 concat()                 返回字符串值，该值包含了两个或更多个提供的字符串的连接

 fontcolor()    把带有COLOR属性的一个HTML<FONT>标记放置在String对象中的文本两端

 indexOf()                返回String对象内第一次出现子字符串的字符位置

 italics()                   把HTML<I>标记放置在String对象中的文本两端

 link()              把一个有HREF属性的HTML锚点放置在String对象中的文本两端

 replace()                返回根据正则表达式进行文字替换后的字符串的复制

 split()             切割

 substr()                  截取子串

 toUpperCase()     转大写

 toLowerCase()     转小写

日期对象（Date)

var date = new Date();// 获取到当前的系统时间

document.write("年:"+date.getFullYear()+"<br/>");

document.write("月:"+(date.getMonth()+1)+"<br/>");

document.write("日:"+date.getDate()+"<br/>");

 

document.write("时："+date.getHours()+"<br/>");

document.write("分："+date.getMinutes()+"<br/>");

document.write("秒："+date.getSeconds()+"<br/>");

定时方法

 window.setInterval("代码","每隔指定的毫秒数");//setInterval 定时方法，第一个参数要指定调用的代码，第二个参数是每隔指定的毫秒数调用指定的代码

Number 对象

  创建Number对象的方式：

       方式1：

           var 变量 = new Number(数字);

         方式2：

           var 变量 = 数字;

  常用的方法：

   toString()          把数字转换成指定进制形式的字符串

         toFixed()            指定保留小数位,而且还带有四舍五入

Math 对象常用的方法：

 ceil()             向上取整

 floor()            向下取整

 random()               随机数方法// 产生的伪随机数介于 0 和 1 之间（含0，不含1）

 round()          四舍五入

Array数组对象：

  创建数组的方式1：

   var 变量名 = new Array();// 创建一个长度为0的数组

  创建数组的方式2：

   var 变量名 = new Array(长度); // 创建一个指定长度的数组对象

  创建数组的方式3：

   var 变量名 = new Array("元素1","元素2",......);// 给数组指定元素创建数组的对象

  创建数组的方式4：

   var 变量名 = ["元素1","元素2",......];

  数组要注意的细节：

1、  在JavaScript中数组的长度是可以发生变化的，

数组常用的方法：

 concat()                 把arr1与arr2的数组元素组成一个新的数组返回

 join()              使用指定的分隔符把数组中的元素拼装成一个字符串返回

 pop()            移除数组中的最后一个元素并返回该元素

 push()            将新元素添加到一个数组中，并返回数组的新长度值

 reverse()                翻转数组的元素

 shift()            移除数组中的第一个元素并返回该元素

 slice()            指定数组的开始索引值与结束索引值截取数组的元素，并且返回子数组

 sort()             返回一个元素已经进行了排序的Array对象

 splice()          从一个数组中移除一个或多个元素，如果必要，在所移除元素的位置上插入新元素，

自定义对象：

  在JavaScript中没有类的概念，只要有函数即可创建对象

  自定义对象的方式1：使用无参的函数创建对象

    例子：

          function Person(){}

          var p = new Person();// 创建了一个Person对象了

          p.id = 110;

          p.name = "张三";

  方式2：使用带参的函数创建对象

   function Person(id,name){

   this.id = id;

   this.name = name;

   this.say = function(){

     alert(name+"呵呵");

    }

  }

  varp = new Person(110,"李四");// 创建对象

  方式3：使用Object函数创建对象

   var p = new Object();

   p.id = 110;

   p.name = "张三";

  方式4：使用字面量的方式创建

           var p = {

                     id : 110,

                     name : "张三",

                     say : function(){

                            alert(this.name+"哈哈");

                     }

                   }

需求：想把getMax与searchEle方法添加到数组对象中

 function Array(){

    this.prototype= new Object();

  }

prototype(原型):

 prototype注意的细节：

    1、prototype是函数(function)的一个必备属性（书面一点的说法是"保留属性")(只要是function，就一定要一个prototype属性）

         2、prototype的值是一个对象

         3、可以任意修改函数的prototype属性的值

         4、一个对象会自动拥有prototype的所有成员属性和方法

JavaScript组成部分：

  1、EMCAScript(基础语法)

  2、BOM(BrowserObject Model)浏览器对象模型

  3、DOM

    浏览器对象模型中把浏览器的各个部分都是用了一个对象进行描述，如果我们要操作浏览器的一些属性，我就可以通过浏览器对象模型的对象进行操作

   window             代表了一个新开的窗口

   location             代表了地址栏对象

   screen               代表了整个屏幕的对象

 window 对象常用的方法：

   oper()                 打开一个新的窗口

//      resizeBy()         更改窗口的当前位置缩放指定的x和y偏移量           //过时，浏览器不支持了

         resizeTo() 将窗口的大小更改为指定的宽度和高度值

         moveBy() 相对于原来的窗口移动指定的x,y值

         moveTo()        将窗口左上角的屏幕位置移动到指定的x和y位置

         setInterval()     每经过指定毫秒值后就会执行指定的代码

         clearInterval() 根据一个任务的ID取消定时任务

         setTimeout()    经过指定毫秒值后执行指定的代码一次

注意：使用window对象的任何属性与方法都可以省略window对象不写的

事件：

  注册事件的方式：

    方式一：直接在html元素上注册

           <body οnlοad="ready()">

           function ready(){

       alert("body的元素被加载完毕了。。。");

     }

         方式二：可以用js代码先找到对应的对象再注册  // 推荐使用

           var bodyNode =document.getElementById("body");

     bodyNode.onload = function(){

      alert("body的元素被加载完毕...");

     }

常用的事件：

  鼠标点击相关：

   onclick                         在用户用鼠标左键单击对象时触发

         ondblclick          当用户双击对象时触发

         onmousedown          当用户用任何鼠标按钮单击对象时触发

         onmouseup               当用户在鼠标位于对象之上时释放鼠标按钮时触发

  鼠标移动相关：

   onmouseout              当用户将鼠标指针移出对象边界时触发

         onmousemove          当用户将鼠标划过对象时触发

  焦点相关的：

   onblur                         在对象失去输入焦点时触发

         onfocus                       当对象获得焦点时触发

  其他：

   onchange          当对象或选中区的内容改变时触发

         onload                         在浏览器完成对象的装载后立即触发

         onsubmit          当表单将要被提交时触发

地址栏对象(Location)：

 href                设置以及获取地址栏的对象

 reload()         刷新当前的页面

Screen 对象

   availHeight                         获取系统屏幕的工作区域高度，排除Microsoft Windows 任务栏

         availWidth                           获取系统屏幕的工作区域宽度，排除Windows  任务栏

         height                                   获取屏幕的垂直分辨率

         width                                    获取屏幕的水平分辨率

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

  一个HTML页面被浏览器加载的时候，浏览器就会对整个HTML页面上的所有标签都会创建一个对应的对象进行描述，我在浏览器上看到的信息只不过就是这些html对象的属性信息而已。我们只要能找到对应的对象操作对象的属性，则可以改变浏览器当前显示的内容

  varallNodes = document.all;// 获取html文件中的所有标签节点

 for(var i=0; i<allNodes.length; i++){

         alert(allNodes[i].nodeName);//标签的名字 nodeName;

  }

通过html元素的标签属性找节点

 document.getElementById("html元素的id");//根据ID属性值找元素

 document.getElementsByTagName("标签名");// 根据标签名获取所有的标签对象

 document.getElementsByName("html元素的name");// 根据标签的name属性值去找对应的标签，返回的是一个数组

// innerHTML 是用于设置标签体的内容的，value是用于设置标签的value属性值

通过关系（父子关系、兄弟关系）找标签

         parentNode                        获取当前元素的父节点

         childNodes                          或取当前元素的所有下一级子元素

         firstChild                    获取当前节点的第一个子节点

         lastChild                     获取当前节点的最后一个子节点

         nextSibling                          获取当前节点的下一个节点         （兄节点）

         previousSibling                   获取当前节点的上一个节点（弟节点）

 

我们可以通过标签的类型进行判断筛选

         文本节点的类型：3

         注释的节点类型：8

         标签节点的类型：1

创建节点、插入节点、设置节点的属性

         document.createElement("标签名")                        创建新元素节点

         elt.setAttribute("属性名","属性值")              设置属性

         elt.appendChild(e)                                                 添加元素到elt中最后的位置

         插入目标元素的位置

         elt.insertBefore(new,child);                       添加到elt中，child之前 // 参数1：要插入的节点 

         elt.removeChild(eChild)                                        删除指定的子节点

插入目标元素的位置

         elt.insertBefore(newNode,oldNode);                        添加到elt中，child之前

         注意：elt必须是oldNode的直接父节点 

         elt.removeChild(child)                                           删除指定的子节点

         注意：elt必须是child的直接父节点

正则表达式的创建方式：

        

         方式1：

                   /正则表达式/模式

         方式2：

                   newRegExp("正则表达式",模式);

正则表达式对象常用的方法：

         test  使用正则对象去匹配字符串，如果匹配成功返回true，否则返回false

         exec 根据正则表达式去查找字符串符合规则的内容

模式：

  g            (全文查找出现的所有 pattern)

  i             (忽略大小写)