JavaScript学习笔记1

JavaScript技术
1.DOM相关知识
什么是DOM:Document Object Model，文档对象模型
文档：指的是标记型文档(html,xml)
对象：可以使用dom里面的相关属性和方法来解析标记型文档。
Dom的组成：核心Dom，Html Dom，XML Dom。
Dom如何解析html文档：

Dom会根据html的层次结构，在内存中形成一个树形结构，树形结构里面有标记元素和树形和文本等元素
整个html文档对应一个document对象，通过document文档对象，可以操作html里面得到所有元素
2.节点的访问：
节点对象.childNodes:获取该节点的所有子节点。
节点对象.parentNode：获取该节点的父节点。
3.获取文档中的元素：
下面的方法是html dom的方法
根据标记的id属性值获取元素对象：document,getElementById(id属性对应的值)
根据标记的名称获取元素对象：document.getElementsByTagName(标记的名称)；
根据标记的name属性值获取元素对象：document.getElementsByName(name属性对应的值)；
1.2 JavaScript概述
什么是JavaScript:他是基于对象和时间驱动的语言，它应用于客户端。
***基于对象：再js里面提供了一些对象，可以直接使用。
面向对象：在java里面先创建对象再使用。
***事件驱动：js里面它触发事件，调用函数，实现网页里面的动态效果。
***客户端：浏览器。
JavaScript和java的区别：
1.javaScript是网景的产品，java是sun公司额产品，现在是oracle
2.javascript的运行只要系统里面有浏览器就可以，java的运行依赖于虚拟机。
2.javascript是弱类型语言，java是强类型语言。
弱类型语言：在js里面，所有的变量都用var定义：var a=10; var b=”hello js”;
强类型语言：在java里面，int a=10;int b=”hello java”错误的写法
Javascript的组成：
1.EcmaScript：规范了js的基本语法。
2.Bom:Browser object model，浏览器对象模型，操作浏览器。
3.Dom:Document Object model,文档对象模型，操作文档。
Js作用：他是给网页增加动态效果。
1.内嵌式：
在网页里面引入js代码的基本语法：<script type=“text/javascript”js代码</script>
2.外链式：
在网页里面引入js文件的预压：<script type=”text/javvascript” src=”js文件的url”></script>
操作步骤：1.创建一个js文件2.在script标记里面，使用src属性来引入外部的js文件。
比如：

<!DOCTYPE html>
<html>
	<head>
		<meta charset="UTF-8">
		<title></title>
		<script type="text/javascript" src="javascript1.js"></script>
		
	</head>
	<body>
		<br/>
		来学习javascript
	</body>
</html>

3.javascript的数据类型
Number：数字类型
String:字符串类型
Object:对象类型
Null：空类型
Undefined:未知的类型
Boolean：布尔类型
比如：

var a=10;
		//alert(typeof a);
		var b="hello js";
		//alert(typeof b);
		var c=null;
		//alert(typeof c);
		var d;
		//alert(typeof d);
		var e=true;
		alert(typeof e);

4.变量的定义
在js里面定义变量都用var来定义。
5.运算符
算术运算符：+ -* /等等
比较运算符：> < >= <= !=等等
逻辑运算符：$$ || !
赋值运算符：+= -=等等
注意：var 1=10;var b=”0”; var c=a-b;在进行减法（乘除法）操作时，会把String类型的值，转换为number类型
6.条件语句：
If，if else,if else if else等语句
其他语句：for语句，switch,case语句等等
比如：

 var a3=10;
    var b3=2r0;
    if(a3==b3)
    {
      alert("相等的是10");
    }
    else
    {
    	alert("other---");
    }

1.3 javascript的使用
1.函数的定义和使用
在js里面定义函数三种方式：
1.创建普通的函数：
语法：

function add1(a,b){
Var sum=a+b;
Return sum;
}

  2.创建匿名函数
     语法：var add2=function (a,b){
        Var sum=a+b;

Return sum;
}
3.创建动态函数：
语法：1.定义函数的参数：var param=”a,b”;
2.创建函数体：var method=”var sum=a+b; return sum;”
3.动态函数：var add3=new Function(param,method);
2.事件处理
事件：它通过触发事件，去调用相关的函数，来实现网页的动态效果。
如何在网页里面触发事件？
网页里面绑定事件常用的两种方式：
第一种：直接通过事件绑定函数
比如：

<input type=”button” name=”btn” value=”点我”onclick=”add();”/>
            Function add(){alert(“点我啊”);}

 第二种：通过给事件属性赋一个函数

 <input type=”button” name=”bbs” value=”aa” id=”inputID”/>
       Document.getElementById(“inputID”)onclick=function(){
                       Alert(“点我了吗?”);

}
常用事件：
点击事件：onclick
失去焦点事件：onblur
获取焦点：onfocuse
键盘事件:onkeyup onkeydown onkeypress
页面加载事件：onload
注意：页面加载事件是在整个html网页加载完毕后才会执行这个事件对应的函数。
鼠标事件：onmouseout onmouseover onmousemove
3.常用对象
1.window对象
常用的属性:History,document,Navigator,location,Screen
比如：

var aa=window.location.href;
                  alert(aa);//获取当前的url地址

常用的方法：
设置定时器方法

   var id1=setInterval(js代码，事件):每隔一段时间s循环执行对应的js代码
        2    .var id2=setTimeout（js代码，时间）：每隔一段见，执行一次对应的js代码
       清楚定时器的方法：
        clearInterval(id1);
        clearTimeout(id2);
  2.Date对象
      使用方式和java的差不多。
       Var myDate=new Date();
      >>>获取年份：myDate.getFullYear();
      >>>获取月份：myDate.getMonth(); 
      >>>获取天：myDate,getDay();
  3.String对象
      >>>0.获取字符串长度：length
      >>>1.与html相关的方法：
            字体加粗：bold();字体变大:big();
      >>>2.与java相似的方法：
               Indexof(),concat(),substr(),substring();

4.阶段性案列：传智书城的页面设计
1.传智书城的首页设计
通过div+css完成页面布局。
自己通过div+css完成一个简单的页面布局：

<!DOCTYPE html>
<html>
	<head>
		<meta charset="UTF-8">
		<title></title>
		<style type="text/css">
			/*设置id选择器*/
		#header{
			background-color:black;/*背景色*/
			color:white;/*文字颜色*/
			padding:50px;
			text-align:center;
		}
		#left{
			background-color: gray;
			line-height:100px;  /*两段文字之间的间距*/
			height:400px;
			width:100px;
			padding:10px;/*中间的文字距离边界之间的距离*/
			float:left;/*
			            *none-默认值，对象不漂浮
			            * left-文本流向对象的右边
			            * right-文本流向对象的左边
			            * */
		}
		#right{
			color:red;
			font-size:20px;
			text-align: center;/*字体居中*/
			padding:5px;
			float:left;
		}
		#footer{
			background-color: black;
			color:white;
			text-align: center;/*字体居中*/
			padding:5px;
			clear:both;/*不允许有浮动对象*/
			
		}	
		</style>
	</head>
	<body>
		<div id="header">导航菜单</div>
		<div id="left">商品分类1<br/> 商品分类2<br/>
		</div>
		<div id="right">商品详细信息</div>
		<div id="footer">版权信息</div>
	</body>
</html>

2.传智书城的注册页面设计：
表单校验：1.用户输入的数据符合咱们定义的规范，允许用户提交表单，如果用户输入的数据不符合规范，不允许提交。
表单校验的知识点总结：1.错误信息:在一行显示，用他的innerHTML属性回显错误信息。
2.时间:onkeyup键盘松开触发事件，调用对应的函数
Onsubmit提交事件(提交按钮)，调用对应的函数
3.正则表达式和正则校验。
操作步骤：1.创建正则表达式对象2.调用test方法，来判断用户输入的数据是否符合规范
比如：

var regx=/^1[3|5|7|8]{1}[0-9]{9}$/;
		//2.调用test方法，判断手机号是否符合规范

var value=“11012345678”;
var flag=regx.test(value);
alert(flag);

比如：

<!DOCTYPE html>
<html>
	<head>
		<meta charset="UTF-8">
		<title></title>
	</head>
	<body>
		<h3>注册页面</h3>
		<form action="registersuccess.html" method="get" onsubmit="return checkForm()">
			用户名：<input type="text" name="username" id="usernameId" onkeyup="checkName();"/>
			      <span id="usernameMsg"></span><br/><br/>
			密码：<input type="password" name="password" id="passwordId" onkeyup="checkPassword();"/>
			    <span id="passwordMsg"></span><br/><br/>
			手机号：<input type="text" name="phone" id="phoneId" onkeyup="checkPhone();"/>
			      <span id="phoneMsg"></span><br/><br/>
			      <input type="submit" value="注册" />
		</form>
	</body>
	<script type="text/javascript">
		//表单校验
		//1.定义全局变量用来接收标记对象
		var usernameObj;
		var passwordObj;
		var phoneObj;
		var usernameMsg;
		var passwordMsg;
		var phoneMsg;
		//2.获取标记对象
		window.onload=function()
		{//2.1获取输入控件的标记对象
			usernameObj=document.getElementById("usernameId");
			passwordObj=document.getElementById("passwordId");
			phoneObj=document.getElementById("phoneId");
		//2.2获取错误信息的标记对象--span标记
		    usernameMsg=document.getElementById("usernameMsg");
		    passwordMsg=document.getElementById("passwordMsg");
		    phoneMsg=document.getElementById("phoneMsg");
		}
		//3.校验用户名
		function checkName()
		{
			//3.1获取用户名
			var value=usernameObj.value;
			//3.2创建正则表达式来校验用户户名书否符合规范
			//用户名以不分大小写的字母开始，包含字母、数字、下划线，长度4-7位
			var regex=/^[a-zA-Z]\w{3,6}$/;
			//3.3校验
			if(value=="")//!value等同与value==""
			{
				usernameMsg.innerHTML="用户名不能为空";
				return false;
			}
			else if(!regex.test(value))
			{
				usernameMsg.innerHTML="用户名必须以字母开始，不区分大小写，包含字母数字下划线，长度4-7";
				return false;
			}
			else//符合规范
			{
				usernameMsg.innerHTML="";
				return true;
			}
		}
		//4.校验密码
		function checkPassword()
		{
			//4.1获取用户输入的密码
			var value=passwordObj.value;
			//4.2创建正则表达式
			//密码是字母和数字组成，长度是3-6位
			var regex=/^[a-zA-Z0-9]{3,6}$/;
			//4.3校验
			if(value=="")
			{
				passwordMsg.innerHTML="密码不能为空";
				return false;
			}
			else if(!regex.test(value))
			{
				passwordMsg.innerHTML="密码是字母和数字组成，长度是3-6位";
				return false;
			}
			else{
				passwordMsg.innerHTML="";
				return true;
			}
		}
		//5.校验手机号
		function checkPhone()
		{
		     //5.1获取用户输入的手机号
			var value=phoneObj.value;
			//4.2创建正则表达式
			//手机号开始1，第二位为3/5/7/8，后9位任意
			var regex=/^1[3|5|7|8]{1}[0-9]{9}$/;
			//4.3校验
			if(value=="")
			{
				phoneMsg.innerHTML="手机号不能为空";
				return false;
			}
			else if(!regex.test(value))
			{
				phoneMsg.innerHTML="手机号不符合规范";
				return false;
			}
			else{
				phoneMsg.innerHTML="";
				return true;
			}
		}
       //表单校验,通过返回true或者false来控制表单是否提交
       function checkForm()
       {
       	var usernameFlag=checkName();
       	var passwordFlag=checkPassword();
       	var phoneFlag=checkPhone();
       	return usernameFlag && passwordFlag && phoneFlag;
       }
	</script>
</html>