JavaScript（购物Demo）

JavaScript是嵌入HTML中在浏览器中的脚本语言，具有与java和C语言类似的语法

1. 一种网页编程技术，用来向HTML页面添加交互式行为
2. 直接嵌入HTML页面
3. 由浏览器解释执行代码，不进行预编译

数据类型转换函数

1. toString：所有数据类型均可转换为String类型；
2. parseInt：强制转换成整数，如果不能转换，则返回NaN（not a number）；
3. parseFloat：强制转换成浮点型，如果不能转换，则返回NaN；
4. typeof：查询当前类型，返回string/number/boolean/object/function/undefine    例如：typeof（"test"+3），返回“string”；
5. isNaN(is not a number?)，判断被检测表达式经过转换后是不是一个数，如果被检测表达式不是数则返回true，否则返回false；
6. null：null在程序中代表“无值”或者“无对象”，可以通过给一个变量赋值null来清除变量的内容；
7. undefined：声明了变量但从未赋值，对象属性不存在；

document对象

innerText：设置或获取位于对象起始和结束标签内的文本；

innerHTML:设置或获取位于对象起始和结束标签内的HTML；

节点属性

1. getAttribute():方法：根据属性名称获取属性；
2. setAttribute()
3. removeAttribute()

查询节点

如果需要操作HTML元素，必须首先找到该元素

查询节点的方式：

1. 通过id查询   document.getElementById("idname")  通过制定的ID来返回元素节点，忽略文档的结构；查找整个HTML文档中的任何HTML元素；如果ID错误，则返回null。
2. 通过层次（节点关系）查询   parentNode---遵循文档的上下层次结构，查找单个父节点  childNodes---遵循文档的上下层次结构，查找多个子节点
3. 通过标签名称查询  getElementsByTagName()---根据指定的标签名称返回所有的元素；忽略文档结构；查找整个HTML文档中的所有元素；如果标签从、名称错误，则返回长度为0的节点列表。返回一个节点列表（数组）：使用节点类表的length属性获取个数；[index]:定位具体的元素
4. 通过name属性查询 document.getElementsByName()

创建新节点

1. documen.createElement(elementname)  elementname:要创建元素标签名称；返回新创建的节点

添加新节点

1. parentNode.appendChild(newNode)  追加：新节点作为父节点的最后一个子节点添加
2. parentNode.insertBefore(newNode,refNode)  refNode:参考节点，新节点位于此节点之前添加

删除节点

node.removeChild(childNode)   

删除某子节点；childNode必须是node的子节点。

自定义对象

1. 自定义对象是一种特殊的数据类型，由属性和方法封装而成  ----属性指与对象有关的值：对象名.属性 ----方法指对象可以执行的行为或可以完全的功能：对象名.方法名（）
2. 创建自定义对象 ---直接创建对象  ---使用构造器创建对象   ---使用JSON创建对象

JSON是一种轻量级的数据交换格式

1. 使用名/值对的方式定义
2. 名称需要使用“”引起来
3. 多对定义之间使用，隔开
4. 名称可以是属性
5. 字符串类型的属性值，需要使用“”引起来

事件属性

1. 鼠标事件：onclick,ondblclick,onmousedown,onmouseup,onmouseover,onmouseout
2. 键盘事件：onkeydown,onkeyup
3. 状态事件：onload,onchange,onfource,onblur,onsubmit

event对象

1. 任何事件触发后将会产生一个event对象
2. event对象记录事件发生的鼠标位置、键盘按键状态和触发对象等信息   ---获得event对象 ---使用event对象或的相关信息，如单击位置，触发对象等
3. 常用属相：clientX/clientY/cancelBubble等
4. 对于event对象，经常需要获得事件源(通常要考虑浏览器兼容问题)
5. IE浏览器：event.srcElement
6. Firefox浏览器：event.target

string对象

1. 大小写转换方法 ---x.toLowerCase()   --x.toUpperCase()
2. 获取指定字符：
3. x.charAt(index)：返回指定位置的字符
4. x.charCodeAt(index)：返回指定位置字符的Unicode编码
5. index：字符位置
6. 查询指定字符串：
7. x.indexOf(findstr,[index])
8. x.lastIndexOf(findstr,[index])
9. findstr：查找的字符串
10. index：开始查找的位置索引，可以省略
11. 返回find石头人在X中出现的首字符位置索引，如果没有找到，则返回-1
12. lastIndexOf：从后面找起
13. 获取子字符串：
14. x.substring(start,[end])
15. 替换子字符串：
16. x.replace(findstr,tostr)
17. 查分子字符串：
18. x.split(bystr,[howmany])

number对象

1. toFixed(num):转换为字符串，并并保留小数点后一定位数

array对象

1. 创建数组对象
2. var a1 =new Array();
3. 获取数组元素的个数：length属性
4. 访问数a1[1]；
5. x.reverse()；---反向数组---改变数组x中数值的顺序
6. x.sort([sortfunc])：数组排序

date对象

读取时间毫秒数：getTime(),setTime()

读写时间分量--getDate(),getDay(),getFullYear()

--------------------setDate(),setDay(),setFullYear()

转换为字符串

--toString()

--toLocaleTimeString()

--toLocaleDateString()

展示基于JavaScript的一个小小的购物demo

	
聚划算
	

		

			

				
商品名
				
商品价格
				
商品库存
				
好评率
				
操作
			
		
		

			

				
龙瞎皮肤
				
888
				
100
				
50%
				

					
				
			
			

				
寒冰源计划皮肤
				
666
				
50
				
70%
				

					
				
			
			

				
劫源计划皮肤
				
555
				
30
				
60%
				

					
				
			
		
		

			

				
LOL皮肤选购
			
		
	
	
购物车
	

		

			

				
商品名
				
商品单价
				
商品数量
				
商品总价
				
操作
			
		
		

			
		
		

			

				
总价：