JavaScript 一个可以 “游戏” 的语言

本文主要是介绍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 的开始和结束。

1. 输出关键字（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 编程

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

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

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

代表当前浏览器地址栏

  属性
  	  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”

这篇关于JavaScript 一个可以 “游戏” 的语言的文章就介绍到这儿，希望我们推荐的文章对大家有所帮助，也希望大家多多支持为之网！