JavaScript一个可以“游戏”的语言帝小辰-

前言

学会这个语言，可以让你写出“有意思”的代码。

为什么学习JavaScript？

. HTML 定义了网页的内容
. CSS 描述了网页的布局
. JavaScript 网页的行为

JavaScript概述

. JavaScript 还是一们基于对象和时间驱动的脚本语言，它主应用于客户端。
. JavaScript 是 Web 的编程语言。
. 所有现代的 HTML 页面都使用 JavaScript。

1.特点
. 解释运行，不需要编译
. 基于对象
. 弱类型

2.优点
. 交互性
. 安全性
. 跨平台–基于浏览器

JavaScript 与 HTML ？

1.直接在html中书写js代码

    通过<script type="text/javascript"></script>标签,      在这个标签的内部可以书写js代码 

2.引入外部的js文件

 通过<script type="text/javascript" src="demo1.js"></script>   来引入外部的js文件   注意: 这个标签不能够合并成自闭标签, 否则会引入失败. 

JavaScript 格式关键字

. JavaScript的内容是在HTML 中的 head 中定义的。

1. script 标签

                   <script> JavaScript </script> 

： 正如我之前所述，JavaScript 的内容定义在 HTML 的 head 中，而在 head 中，我们规定使用 script 标签来记录 JavaScript 的开始和结束。

2. 输出关键字（alert）

： 定义的是你点击我们定义的按钮之后，弹出的页面所显示的内容。

JavaScript 数据类型

： JavaScript 数据类型分为 基本数据类型 和 复杂数据类型

1.基本数据类型

1.1 number

. 代表数字的基本类型；
. 在 JavaScript 中并不区分整形和浮点型，
. JavaScript 中所有数字类型底层实现都是浮点型;

    数值类型中有几个特殊值： Infinity ：  正无穷大   -infinity ： 负无穷大;          NaN ： 非数字型，该类型十分特殊，和任何值都不相等，包括本身;     即：NaN==NaN 返回的结果是 false。可以使用 isNaN() 判断某值是否为 NaN; 

. 数字类型虽然是基本数据类型，
. 但是 JavaScript 本身提供了对应的包装对象Number，具有和数值处理相关的属性
. 和方法;

   Number 提供的属性：              Number.MAX_VALUE ： 可表示的最大数字              Number.MIN_VALUE ： 可表示最小的数字              Number.NaN       ： 非数字值              Number.POSITIVE_INFINITY ： 正无穷大              Number.NEGATIVE_INFINITY ： 负无穷大 

1.2 string

. 代表字符串的基本数据类型；
. 字符串常量使用双引号引起来；
. 和数据基本类型 number 一样,JavaScript 中提供了包装对象 String；
. 在 包装对象String 中我们提供字符串处理相关的属性和方法；

   String对象提供的属性：         length：字符串中字符数； 

1.3：boolean

. 对于 boolean 类型，就是 true 和 false 的关系；

1.4：undefined

. undefined 类型只有一个值，就是他本身（undefined）；
. 该类型表示变量未定义，当一个变量为初始化是，返回值为 undefined；

1.5 null

. null 只有一个值就是 null；
. null 用来表示尚未存在的对象；
. null 常用来表示函数企图返回一个不存在的对象；

2.复杂数据类型

： 复杂的数据类型实际指的就是 对象，该概念我们日后会详细解释；

JavaScript 变量

1.变量的定义

： JavaScript 中有数据类型，但是引用是不区分类型；
. 以上语句也可以解释为什么 JavaScript 有个特点叫 弱类型了；
. 需要注意的是：JavaScript 中的变量名区分大小写；

2.定义变量关键字

： var 变量名

JavaScript 运算符

算术运算符： +，-，，/，%，++，–
赋值运算符 ： =，+=，-=，=，/=，%=
比较运算符： ，!=，=，!==，>，>=，<，<=
位运算符： & ， |
逻辑运算符： && ，||
前置逻辑运算符： ! (not)
三元运算符： ? :
其他运算符： typeof, delete

 比较运算符: ==，!=，===，!==  ==和===的区别：   ==：如果2个变量是不同的类型，会先尝试将它们转成相同的类型，再进行比较；   如果2个变量是相同的类型，则直接进行比较；      ===：如果2个变量是不同的类型，直接返回false；   如果2个变量是相同的类型，再进行比较     其他运算符: typeOf, delete  typeof: 判断变量或值的类型    是一个运算符而不是方法  delete: 从数组或对象中删除对应的值或属性  可以从数组中删除元素，该元素的位置会保留，类型变为undefined 

JavaScript 判断

1.if

 if条件语句    语法和Java中大致相同, 但是判断条件没有类型的限制 

2.switch

 switch选择语句    语法和Java中大致相同, 并且也支持字符串类型 

JavaScript 循环

1.while

2.do…while

3.for

JavaScript 函数

： JavaScript 函数就是包裹在花括号中的代码块，前面使用了关键词 function：
. 当调用该函数时，会执行函数内的代码。（通俗点讲就相当于Java中的方法）

注意：
. JavaScript 对大小写敏感。
. 关键词 function 必须是小写的，并且必须以与函数名称相同的大小写来调用函数。

1.普通方法定义函数

           function  函数名(形式参数...)             {                 执行语句；                 return 返回值；           } 

2.匿名函数

   var 匿名（自定义名字） = function(){...}    匿名（自定义名字）(); 

3.动态函数

   var 自定义名字 = new Function(“x” ,”y”,”alert(x+y);”);     自定义名字(4,6);  如同：    function 自定义名字(x,y)    {    alert(x+y);    }    自定义名字(4,6); 

JavaScript 数组

1. JavaScript中的数组特点

1.  可以存任意元素，长度是可变的。 

2.  js中的数组的长度是可以被任意改变的    

3.  如果数组中某一位置没有赋值, 那么该处的值为undefined     

4.  js中的数组的内容可以是不同类型的    

5.  js中的数组就是用[]括起来并用逗号分割开的一组内容, 本质上就是一段字符串. 

2. 定义JavaScript数组

2.1：创建一个数组
var arrayObj = new Array();

2.2：创建一个数组并指定长度，注意不是上限，是长度
var arrayObj = new Array([size]);

2.3：创建一个数组并赋值
var arrayObj = new Array([element0[, element1[, …[, elementN]]]]);

2.4：数组直接量定义数组
var arrayObj = [1,2,5,6,3];

3.JS数组的包装对象

JS中提供了数组的包装对象Array，提供了数组处理相关的属性和方法。

  Array对象提供的属性：                       length：数组长度 

对象

1.JS内置对象

RegExp 对象

   创建正则对象的两种方式     var reg1 = new RegExp("", "");      var reg2 = /xxx/ig;    常用方法：             rgexp.test(str)           检索字符串是否符合该正则表达式规则。返回 true 或 false。                 修饰符用于执行不区分大小写和全文的搜索。                i - 修饰符是用来执行不区分大小写的匹配。                g - 修饰符是用于执行全文的搜索           （而不是在找到第一个就停止查找,而是找到所有的匹配）。 

String对象

     var str1 = new String("xxx");      var str2 = "xxx";    常用方法：    strVariable.length     返回 String 对象的长度。       strObj.charAt(index)     返回指定索引位置处的字符。       strObj.indexOf(subString[, startIndex])           返回 String 对象内第一次出现子字符串的字符位置。       strObj.lastIndexOf(substring[, startindex])        返回 String 对象中子字符串最后出现的位置。 

Array对象

     var arr1 = new Array();      var arr2 = [];               numVar = arrayObj.length            返回一个整数值，这个整数比数组中所定义的最高位元素的下标大 1。         array1.concat([item1[, item2[, . . . [, itemN]]]])            返回一个新数组，这个新数组是由两个或更多数组组合而成的。         arrayObj.join([separator])             返回字符串值，其中包含了连接到一起的数组的所有元素，                         元素由指定的分隔符分隔开来。         arrayObj.pop( )                     移除数组中的最后一个元素并返回该元素。 

自定义对象

： 除了js内置的对象，也可以自己定义对象。

1.构造函数定义对象

很像java中的构造函数。P不一定要大写。

   function  Person(){}         var p = new Person();          p.name = “zhangsan”;//定义成员变量。        p.age = 20; 

定义成员函数。

    p.run = function(){         alert(“run”);        }     p.run(); 

2.对象直接量：

   var obj = {        name:”wangwu”,        age:29,        run:function(){           alert(“run”)         }     }; 

DOM 编程

1. DHTML概述

所谓的DHTML就是将浏览器中常用的对象和HTML中的常用标签用JS对象表示，
. 并在这些对象上提供属性和方法，从而实现通过操作这些JS对象来操作
浏览器及浏览器中展示的页面内容的技术，从而将原来静态的HTML变为了可以通过JS操作能动的页面，即动态HTML，DHTML。

  现代的主流浏览器都支持DHTML，所以我们只要学习DHTML相关的技术，   就可以在任意主流浏览器中通过JS技术操作HTML页面了。 

2.BOM和DOM

DHTML分为BOM和DOM。

. 其中BOM是Browse Object Modle 即浏览器对象模型，
. 其中封装了浏览器操作相关对象。
. DOM是Document Object Modle 即文档对象模型，
. 将整个HTML文档按照文档结构组织成了树形结构。

2.1.BOM

2.1.1 Window 对象

代表当前浏览器窗口的对象。
. 是这个浏览器运行环境，所以调用其属性和方法时，
. 可以省略window.

  子对象     document     history     navigator     location   方法       alert       confirm       prompt       close       setInterval       clearInterval   事件       onload 

2.2.2. history对象

代表浏览器的浏览历史记录。

  属性      Length   方法      Back       Forward       Go 

2.2.3.location

代表当前浏览器地址栏

  属性      Href   方法       Reload 

2.2.4.navigator

   属性              appName 

3.3.DOM

3.3.1.获取对象

 根据id获取页面中的元素               document.getElementById(“xxx”);                  根据name获取页面中的元素               document.getElementsByName(“xxx”);                 根据标签名获取页面中的元素               document.getElementsByTagName(“xxx”); 

3.3.2.进行增删改查

 在父节点上增加子节点               parentNode.appendNode(childNode);  在父节点上删除子节点               parentNode.removeChild(childNode) 

直接移除自己,但是只是移除自己,子孙不移除,
也可以在此方法中传入一个true表明在删除自己的同时,子孙也被移除

     childNode.removeNode();               childNode.removeNode(true);                 凭空创建节点               var tag = document.createElement("tagName");               var attr = document.createAttribute("href");                 设置属性               tag.setAttributeNode(attr);                 替换子节点               parentNode.replaceChild(newChild,oldChild);                 克隆节点               var ele2 = ele.cloneNode();//只克隆当前元素          var ele2 = ele.cloneNode(true);//克隆当前元素包括子元素 

3.3.3.修改样式

 方式一：通过class属性修改样式       document.getElementById("tagName").className =”newClzName”;  方式二：直接修改css样式          tagEle.style.stylename = “stylevalue”