JavaScript入门

1.JavaScript入门

1.使用方式 
	(1)可以写在部分标签里,例如
		<button onlick="alter('消息内容');">文本内容</button>
        <a href="JavaScript:alter('内容')">文本内容</a>
	(2)内部方式:在head或者body标签的里面或者下面
    	<script></script>
	(3)外部方式---导入外部xx.js文件(推荐使用)
		<script src="js/外部js文件"></script> 
		好处:可以在不同页面同时引用,可以利用到浏览器的缓存机制
		//script标签一旦用于引入外部文件,就不能再编写代码了,编写无效,如果需要,再创建一个新的script标签
2.JS语法(严格区分大小写,会忽略空格和换行)
	如何定义变量
        (1)var定义,可以省略
		(2)js是弱类型语言,可以重复定义变量,后面的值会将前面的值覆盖掉
	查看数据类型语法:typeof(变量名)
3.常见数据类型划分
	整数和小数:number---提升为js内置对象Number
	字符和字符串:string---提升为String
	boolean类型:---提升为Boolean
	对象类型:object---提升为Object(代表所有内置/自定义对象模板)
	undefined:未定义类型(没有意义)
4.运算符(弱类型语言:true代表1,false代表0)
	算术运算符
    赋值运算符
    比较运算符
    逻辑运算符
    三元运算符
3.流程控制语句与java不同的地方
	(1)switch 语句
		case 后可以跟变量
		string--->number---->parseInt

2.JS中的函数

1.如何定义函数
	格式:
		function 函数名(参数名称列表){
            语句体中可以最终return结果;
            或者输出内容
        }
//注意事项:
//1.定义函数时候,形式参数不能带var,直接写参数名称
//2.定义函数不需要书写返回值类型,语句体中可以出现return
//3.不存在函数重载,后面的函数会将前面函数覆盖
//4.当实际参数列表个数大于形式参数列表个数,函数依旧会被调用,计算结果为NaN
//5.当实际参数列表个数小于形式参数列表个数,多余的部分不参与运算
//6.js中的函数存在默认的数组,对象名称arguments
2.如何调用函数
	(1)如果函数中有return语句,采用赋值调用 
		var 结果 = 函数名称(实际参数列表)
	(2)如果函数里直接输出,单独调用  
		函数名称(实际参数列表);

3.js常见函数以及属性

(1)window对象的功能
	window.alert("消息内容");弹出一个提示框
    window.setInteval(定时任务(),时间毫秒值):每经过毫秒执行任务
    window.setTimeout(定时任务(),时间毫秒值):经过多少毫秒后执行一次任务
    window.open(url,打开方式)
控制台对象:
	console.log("输出内容");在控制台输出数据
通过js脚本语言向浏览器输出内容
	document.write("内容");
(2)DOM HTML:
	先获取标签
	改变HTML内容:
        innerText:给标签设置普通文本内容,不能解析标签
        innerHTML:给标签设置HTML内容
    改变HTML属性
    	document.getElementById(id).属性名= 新的属性值
(3)DOM CSS:
	改变HTML样式:
		document.getElementById(id).style.属性=新的风格
		display为样式中的一个属性none为隐藏,block为显示

4.如何自定义对象

1.定义对象的语法格式和函数定义一样
	(1)function 对象名(参数列表){
    		给属性赋值;
    		添加功能(方法);
		}
	(2)function 对象名(){}
	(3)利用Object对象,所有js对象的模板,Object是JS内置对象
2.创建对象
	(1)var 对象名称 = new 函数(实际参数);
	(2)var 对象名称 = new 函数();
	(3)var 对象名称 = new Object();
	(4)利用字面值的方式--->json格式(JS的一种建议表达式,能够描述一个对象或者数组的格式,可以存储/表示数据)	
				key:value---键值对
		例子:	
	描述对象:	var p={
                    "name":"哈哈",
                    "age":42,
            		"play":function(){
                        alert("嘿嘿");
                    }
                };
	描述数组:   var students=employee:{[
        		{"id":1,"name":哼哼},
        		{"id":2,"name":呼呼}
    			]};
3.访问对象属性
	(1)对象名称.属性名
	(2)对象名称["属性名"];
4.访问对象方法
	(1)对象名称.方法名();
	(2)对象名称[角标].属性名
5.给对象添加属性和方法
	(1)对象名.属性名 = 值 ;
	(2)对象名.方法名 = function(){方法体}
4.for-in语句:类似于Java中增强for
      for(var 变量 in 对象名称/数组对象名称){
             使用对象[变量]
         }

5.学习JS常用的内置对象

1.String内置对象
	\':在字符串插入'
	特有方法:
			Object.valueOf():比较对象的原始值是否相同
            charAt(index):返回指定索引处的字符
            concat(str):拼接功能
			fontcolor("颜色单词"):改变颜色
            substr(startIndex,length):指定位置开始,指定长度结束
			substring(start,end):从指定开始到指定结束,不包后
			spilt("分隔符号"):拆分功能
            
2.Array内置对象
	var 数组名称 = ["数值",...];
    var 数组名称 = new Array(size);
    var 数组名称 = new Array("数值",...);
	特有方法:
            join(separator):将数组中的元素按照指定的分隔符,拼接成字符串
			
3.Date内置对象
	var 对象名 = new Data();
	(1)获取年/月
	getYear():当前年份-1900年
	date.getFullYear();
	date.getMonth();//范围为0-11
	date.getDate();
	date.getHours();
	date.getMinutes();
	date.getSeconds();
    (2)网页时钟
    	步骤:
			1)创建日期对象
            	var date = new Date();
            2)获取当前日期和时间,拼接成字符串形式

			3)把时间字符串放在span标签中,作为他的文本内容
				通过DOM的document获取标签
                通过innerHTML向其中添加时间
                window的功能:setInteval(定时任务,时间毫秒值)

6.JS事件编程

1.三要素:
	(1)事件源---标签
	(2)编写事件监听器---自定义函数
	(3)将函数绑定在事件源上
2.常见时间编程的分类
	单击事件click
	双击事件dbclick
	
	鼠标点击获取焦点事件 focus
	鼠标失去焦点事件 blur
	
	选项卡发生变化的事件 change
	
	鼠标经过事件(经过div/某个元素时) mouseover
	鼠标移出事件 mouseout
	
	页面载入事件   load事件:一般用在body
				 当body的所有内容加载完毕触发这个事件
	
	键盘按下事件   keydown
	
	form表单有一个表单提交事件 submit
	当绑定函数返回值为true,能够提交,否则不能提交

7.DOM操作

1.DOM:基于文档对象模型编程
	浏览器在解析html页面的时候,将每一个标签封装成对象,称为标签对象,或者称为节点对象/元素对象,形成一种树结构
2.DOM编程核心思想:
	1.通过一些方式获取标签对象(通过文档对象的方法获取标签对象)
	2.使用标签对象访问标签属性--改变属性
3.获取标签对象方式
	(1)通过查询节点关系获取标签对象
				parentNode
				childNodes
				firstChild
				lastChild
				nextSibling
				previousSibling
	(2)document对象的集合属性
                all:获取页面中所有的标签对象
				links:获取页面中a标签对象
				imags:获取图像img标签对象
				forms:获取表单form标签对象...
	(3)通过document对象的方法来获取标签对象
            document.getElementById("唯一的id属性值") ;常用的
	   		document.getElementsByclassName("所有的同名的class属性值") ;
	   		document.getelementsByTagName("所有同名的标签名称") ;
	   		document.getelementsByName("所有同名的name属性值") ;

8.正则表达式(JS的一种内置对象)

1.正则表达式用于定义一些字符串的规则,计算机可以通过正则表达式来检查一个字符串是否符合规则.
	严格区分大小写
2.
	(1)数量量词:
				X:表示任意字符
                X+:表示X字符出现一次或者多次
                X?:表示X字符出现一次或者两次
                X*:表示X字符串0次或者多次
	(2)匹配的范围
                X{n}:表示X字符恰好出现n次
                X{n,}:表示X至少出现n次
                X{n,m}:表示X字符至少出现n次,但是不超过m次
				
				\d等价于[0-9]:匹配数字字符
				\w等价于[A-Za-z0-9_]:匹配数字或者字母或者下划线
     (3)如果想完全匹配,必须加入边界匹配符号
			^:以...开头
			$:以...结尾
                

8.1 创建正则表达式

1.创建正则表达式对象
	(1)var 变量 = new RegExp("正则表达式","匹配模式");
		匹配模式:可以是
        			i:忽略大小写
                    g:全局匹配模式
    (2)使用字面量创建正则表达式
         var 变量 = /正则表达式/匹配模式
	(3)正则表达式的方法: 
	test():使用这个方法可以检查一个字符串是否符合正则表达式的规则,符合为true,否则为false.