JavaScript基础知识篇二

JavaScript篇二

一. js的交互框

1.警告框

//无返回值 只是弹窗警告
function test01(){
	alert("点我干啥...");
}

2.询问框

    function test02(){
    // 询问框有返回值    返回值就是 输入的 内容 
    var pwd = prompt("你的银行卡密码多少?");

    if(pwd == "1234"){
    	alert("今天你买单 ");
    }else{
    	alert("密码不对 ....");
    	}
    }

3.确认框

function test03(){
    // 返回的 是 boolean   如果点 确认   返回true    如果点  取消  false 
    var flag = confirm("你吃早餐了吗 ");
    if(flag){
        alert(" 吃的什么?");
    }else{
        alert("我们一起去吃早餐...");
    }
}

二. js的内置对象

1.date 日期对象

// date 对象 需要 创建   (日期对象 )
//  date 是obj 类型  需要new  

var date = new Date();

// date 的一些函数 

// 可以获取 年月日 
// date.getFullYear 显示 年份  
// date.getMonth 显示月份     国外 (0 是一月份 , 11 是 12月份 )
// date.getDate  显示日期  
// date.getHours 时
// date.getMinutes 分
// date.getSeconds 秒
// date.toLocaleDateString() 转成本地时间的字符串
// date.getDay  获取的 是  周几   (0是 周日      6 是周六)

2.Math 数学类

// abs()   绝对值 
var a = Math.abs(-4);
console.log(a);

//floor()  向下取  
console.log(Math.floor(3.8)); // 3
console.log(Math.floor(-3.8)); // -4

// sqrt() 开方		    
console.log(Math.sqrt(16)) //4

// pow  幂运算  a^b   a 底数       b 叫 指数
console.log(Math.pow(3, 4));//81

// round 四舍五入 
var a1 = 5.967;
var a2 = Math.round(a1);//6

// 随机数
Math.random(); // 返回值是  [0,1)

3.String 对象

		var s1 = "1234"; // 字符串  
		var s2 = new String("abc"); // 对象   
		
		// 字符串的方法  
		// 获取字符串的 指定为位置的字符 
		var ch = s1.charAt(1); 
		console.log(ch);
		
		// indexOf() ;   从左往右 查询是否 有指定的字符 如果没有返回 -1 
		var s3 = "hellojava";
		var s4 = s3.indexOf('a');
		console.log(s4);
		
		// substr(m,n) 返回给定字符串中从m位置开始，取n个字符，如果参数n省略，则意味着取到字符串末尾。 
		// 从2 开始 包含了 2  截取 3个字符  
		var s5 = s3.substr(2,3);
		console.log(s5);
		
		// subString(m,n)  返回给定字符串中从m位置开始，到n位置结束
		
		// 包头 不 包尾 
		var s6 = s3.substring(3,5);
		console.log(s6);
		
		// 转成 大小 
		console.log(s5.toUpperCase());
		
		// 转成小写 
		console.log("ANDROID".toLowerCase());
		
		// 从长度  length
		console.log(s3.length);

三.js的对象

概述：Js只是基于对象并非面向对象。它的面向对象特性没有JAVA那么强大

	// js 中对象 创建 
		// Object 是所有 对象 的  基类    其他对象都是 obj 进行衍生出来 
		var obj = new Object(); 
		
		// js 中对象 添加属性    对象.属性  
		obj.name = "乔峰";
		obj.age = 40; 
		
		console.log(obj);
		
		// 对象 使用属性    对象.属性  
		console.log(obj.name);
		console.log(obj.age);
		
		// js 删除 属性   delete 对象.属性 
		delete obj.age; 
		console.log(obj);

四. json

1.json的概述

JSON就是指：Javascript   object  native   javascript原生对象
JSON也是一种轻量级数据交换(服务器和客户端进行交互)格式

2.json的2种格式

1. 名称/值对的集合(map)
2. 值的有序列表(数组)

3.json的语法

	1. 名称/值对的集合(map)。
		开始:  {  
    		键1:值1,键2:值2
    	结束:    }
    例子: {"name":"马云","age":53} ;
    2. 值的序列: 
    	开始: [ 
        	值1,值2,值3...
        结束: ] 
    例子: ["阿里巴巴","华为","腾讯"] 
            
    注意: 
        1. 键都是字符串 
        2. 值可以是任何类型,boolean,int等 如果是字符串 我们的值必须是 "" 包裹 
        3. 一定要按照json语法格式来属性 开始和结尾的符号{},
           逗号分隔,键值对中的: 或者 ""不能少写        

4.js中json的使用

        // json 对象  
		//使用json 语法的js 就是 json 对象 
		// josn的键值对 集合  
		var json01 = {"name":"马云","age":53};
		
		// 如何访问json 对象的 属性  (和js 的对象方法一样) 对象.属性 
		console.log(json01.name);
		console.log(json01.age);
		
		// js的方式 2   数组类型的json 
		var json02 = ["宝安区","福田区","南山"];
		// 数组方式的json 对象 通过 下标访问我们的值 
		console.log(json02[1]);
		
		// json 对象可以嵌套 
		
		// json 嵌套 内部 嵌套了一对象  phone:{}
		var json03 = {
			 
			"name":"tom",
			"age":34,
			
			"phone":{
				"brand":"华为",
				"price":4500
			}
		}
		
		// 访问类 的属性   对象.属性 
		console.log(json03.name);
		console.log(json03.age);
		
		// 访问	嵌套的类   要获取嵌套类  通过嵌套类访问属性: 
		console.log(json03.phone.brand)

5.js中字符串和对象之间的转换

        // json 对象    和字符串之间的转换  

        // json(对象 ) ---> json字符串 
        // json01 是json 对象  
        var json01 = {"name":"丁磊","age":48};

        // js中继承了 JSON转换框架   stringify() 可以对象转成字符串 
        var jsonStr = JSON.stringify(json01);

        console.log( typeof jsonStr);
        console.log(jsonStr);

        // json字符串 ---> json 对象
        var jsonStr1 = '{"code":100,"msg":"成功"}';

        // 通过json框架 JSON  parse()把 字符串转成 json对象 
        var jsonObj = JSON.parse(jsonStr1);
        console.log(jsonObj.msg);
        console.log(jsonObj.code);
        /**
        *   1. json 对象 和 json字符串的区别 (字符串是用 "" 或者 '' 包裹 )
        *   2. 转换的时候 json字符串或者 是json对象 格式要正确 
        *   3. 字符不能直接使用属性 
        */

6.java中对象和json字符串之间的转换

    fastJson
    fastJson 的使用 
    1. 下载  fastJson jar包 
    2. 创建一个lib文件  添加 jar 
    3. 把 jar 和  java项目进行关联 

    fastJson的方法: 
    JSON 这个对象是  fastJson 提供的类 
    toJSONString() 可以把 java 对象 转成 json 字符串  String

    把 json字符串 转成  User 对象  
    parseObject()

五. bom: 浏览器对象

    window :  延时任务:  setTimeout()
              周期任务:	 setInterval() 
			  
    histroy :  封装 浏览器浏览的 url的历史记录 (了解)
    navigator:  封装浏览器 信息的对象 (了解 )
    location: 封装我们的 url的信息   location 可以实现页面跳转

六. DOM模型: (文档对象模型)

概述：DOM的全称是：Document Object Model, 即：文档对象模型，它定义了操作文档对象的接口

1.节点

概述：在DOM模型中，整个文档就是由层次不同的多个节点组成，可以说结点代表了全部内容

	     <!--
			
			根 节点就是 html 
			    html 有2 个子节点   head / body
			    
			head 是一个节点:  
			         有2 个子节点   meta / title
			         
			body   没有节点          
			
			节点关系: 
			       head body 兄弟节点 
			       html 和 head是父子节点 
		-->
		<!--
			 元素结点、文本结点和属性结点 
			 font 是元素节点你
			 文本节点    hello DOM
			 属性节点   id / color 
			
			一般说拿到某个节点指的是拿到 元素节点 
		-->
		
		nodeName:元素结点返回结点类型(即，标记名称)；属性结点返回undefined；文本节点返回"#text".
        nodeType:元素节点返回1，属性节点返回2，文本节点返回3
        nodeValue:元素节点返回null, 属性节点返回undefined, 文本结点返回文本值

2.dom操作(重点)

概述：操作节点的 添加删除 修改 属性/文本 /样式

    一. 获取节点 
        1. 直接获取节点: (重点掌握)
            1.同过id获取节点         只能获取单个节点 
            var pNode = document.getElementById("p1");
            2. 通过class 获取节点    返回的是数组 
            var arrNode = document.getElementsByClassName("box1");
            3. 通过tag(标签获取节点) 返回的是数组 
            var arrNode = document.getElementsByTagName("p");
            4. 通过name获取节点      返回的数组 
            var arrInput = document.getElementsByName("name");

        2. 间接获取节点  (了解)      
            1.获取所有的子节点 
                获取的是所有的子节点 (包括空节点 如果要进行节点操作 进行判断 )
                var childNodes = parentNode.childNodes;  
                获取所有的元素子节点 (html 元素子节点)
                var childEle = parentNode.children;

                1.lastChild
                // 如果入 字节中有null  获取的是空  
                var node1 = parentNode.lastChild;
                // 直接获取最后一个 元素节点 
                parentNode.lastElementChild;

                2.firstChild 
                // firstChild 拿到 第一个  节点 
                var node1 = parentNode.firstChild;
                console.log(node1.nodeName); // 如果是null  #text 
                // firstElementChild 拿到 第一个元素 
                var node2 = parentNode.firstElementChild; 

            2. 获取父节点 
            	var paretNode = p1Node.parentNode;

            3. 获取兄弟节点  				  
                1. 上一个兄弟
                // 如果有空格 获取的是空格节点 
                var p1Node1 = p2Node.previousSibling;

                // 如果获取的是空节点 要进行判断 不要直接获取属性值  容易出问题
                //console.log(p1Node1.getAttribute("id"));
                // 直接获取的 元素 节点 
                var p1Node2 = p2Node.previousElementSibling;

                2. 下一个兄弟  
                // 获取下一个节点 
                var p3Node1  = p2Node.nextSibling;

                var p3Node2 =p2Node.nextElementSibling;
					      		  
	    二. 可以通过节点修改属性 
            getAttribute()  获取节点 
			   // getAttribute("属性的名称")   获取属性 
				var id = pNode.getAttribute("id");
				var myClass = pNode.getAttribute("class");

            setAttribute()  设置节点属性  
				// setAttribute("属性名称",属性值)
				pNode.setAttribute("class", "box2");

		三. 可以通过节点 修改 文本显示: 
		    赋值是:设置文本内容  取值 节点.innerText; 
		    innerText  
			innerHtml 
			
			    获取文本: 
			     // innerText 只能获取文本
	            //  innerHTML 只获取 文本 (如果有html 会把标签页获取到) 
	            console.log(p1Node.innerText);
	            console.log(p1Node.innerHTML);
			    
				设置文本 
				// 直接显示文本 内容 (不能解析html)
	            //p1Node.innerText = "<span>hello span </span>";
	            // 直接显示文本 如果有html 会解析 html 
	            p1Node.innerHTML = "<h1>hello span </h1>";
	            
		四. 可以通过节点修改 元素样式 (css):  
		    1. 修改 className  setAttribute() 可以 
			2. style.样式 
			     
		        // 方式1    className 来修改 
		        // 拿到节点   
		        var divNode = document.getElementById("div");
		        // 修改 className 属性 
		        divNode.className = "box2";
		        
		        // 方式2:  setAttr() 修改class 属性  
		        divNode.setAttribute("class","box2");
		        
		        // 修改   拿到节点的style 属性 修改对应的样式 
		        // skyle.样式    css 样式把- 去除   后面的单词首字符大写  
		        //  background-color ---> backgroundColor
		        // background-color
		        // 如果 样式 值给错了 页面没有显示  程序不报错 
		        divNode.style.backgroundColor = "skyblue";	
		        divNode.style.color = "red";
		        //font-size: 18px;
		        divNode.style.fontSize = "20px"
		      
		五. 页面节点的删除和插入  
		    1.添加节点: 
			   
			    1.添加文本节点:  
				    创建一个文本节点  createTextNode 方法
					文本节点 插入到 父节点  appendChild(子节点);
					
				    // 拿到父节点 
					var divNode = document.getElementById("div");
					// 创建一个文本节点  createTextNode 方法
					var textNode = document.createTextNode("我是新添加节点");
					
					// 把文本节点 插入到 父节点  appendChild(子节点);
					divNode.appendChild(textNode);
				
				2.添加元素节点: 
				   
				    createElement() 创建 一个元素节点 
					// 元素添加 点击事件  
					btnNode.onclick = function(){}
					  
				    // 拿到父节点 
					var divNode = document.getElementById("div");
				   // 先创建文本节点 
				   var textNode = document.createTextNode("我是btn文本");
				   // 创建btn节点 (元素节点)createElement() 创建 一个元素节点 
				   var btnNode = document.createElement("button");
				   // 把文本节点 添加到 btn 节点中 
				   btnNode.appendChild(textNode);
				   
				   // 把btn 添加到  父接节点中 
				   divNode.appendChild(btnNode);
				   
				   // 节点.事件  = 函数     可以添加我们的 节点元素的事件 
				   btnNode.onclick = function(){
				   
						alert("点我干啥了....");
				   }
			
			2.删除节点:
			
			    removeChild 删除节点 
				
			    // 拿到父节点  
	            var divNode = document.getElementById("div");
	            // 拿到子节点 
	             var p2Node = document.getElementById("p2");
	            // 删除节点 
	            divNode.removeChild(p2Node);

六. js操作表单（重点）

1.获取表单

//通过id获取表单
docment.getElementById("表单的id");

2.表单的属性

action: 表单数据提交的位置
method: 表单数据提交的方法(get / post)
lenght: 表单中的有多少 标签(input/select 的标签)

3.表单的方法

onsubmit()
表单提交数据 会执行onsubmit()方法   可以在这个方法中 进行 表单校验 
可以返回一个boolean
			return  true; 表单提交数据
					false  表单不提交数据

4.js操作表单域（重点）

表单内部的元素:
	表单内只有4个元素: js操作表单元素 (设置值,获取值, 校验...)
	input  输入框
	select 下拉框
	Areatext 大文本域 
	button   按钮
    
1. 如何拿到表单域对象: 
	document.getElementById(id);

	input 的属性: 
        value  可以设置 获取 表单域的值 
        		设置 数据值 可以在 input 标签中设置  (设置后可以再次进行编辑 )
        				   可以在js代码中设置 
        name   没有这个属性 表单域数据不能退提交  
        readonly  只能读取 (input 不能编辑)
        placeholder  输入框的输入文本提示 (编辑后 提示消失)

    radio 单选框按钮:
            单选框的获取: document.getElementsByName()  (单选框有多个) 返回结果是数组 
            单选框 一定要个给 name属性 进行分组 (分组后才可以单选) name 可以提交数据 
            value 获取单选框的值  
            checked 属性   选中 (标签可以设置默认值 )  
	checkbox  多选框 (和单选框查差不多 )
			多选框的获取 :   document.getElementsByName()
			要设置name 属性  不给不能提交数据  name属性提交的数据是数组
            value 获取多选框的值
            checked 属性:   选中 ( 标签可以设置默认值 )
	file/ hidden / submit 
		hidden  看不到输入框 可以正常提交数据
        file 文件选择
        submit  提交 默认有提交文本 
2.select 下拉框:
    下拉框有 option  下拉选项 
    	option 的属性  value 提交的值, text 文本显示 
    	要给name属性提交数据 	         

    value 获取选中的值 :
    	selectedIndex  当前选中的项  

    options 获取select 下面所有的option  
        可以设置option 的 valeu 和 text属性  
    selected 可以设置默认值: 默认选中 
3. 表单域对象的  事件:
        input的 onblur失去焦点事件 
        	onblur()
        select的 onchange改变事件 
        	onchange()
4. 	表单域中的属性 和 事件的应用:
      验证一个表单 
      1. 如过 input标签输入内容为空 提示文本?
         思路: 
            1.界面写好 
            2. 获取失去焦点事件  拿输入框的内容 
            3. 判断 
            4. dom操作 (提示文本显示)

5.正则表单

    为什么使用正则? 
        正则 处理复杂的文本  

    正则能做什么? 
        字符串的 验证, 检查 替换 

    正则表达式定义? 
        描述了一个规则，通过这个规则可以匹配一类字符串。

    正则的集合: 
		
        \d  0-9 的数字      \D 非0-9的数字
        \w  A~Z,a~z,0~9,_ 中任意一个   \W 取反 (\w) 
        [abc]   配置 abc中的任意一个  
        [^abc]  abc取反 的字符
        [a-c]   匹配 a - c 中任意字符串  
        [^a-c]  取反 a-c 中字符串   
			
		次数的重复: 
          {n}  重复几次 
			a{3}  a 重复三次匹配  
          {m,n} 重复 m-n 之间的次数 
		    a{2,4}  a重复 2,3,4 的匹配 
			
		  m{m,}  至少多少次 
            a{2,} 至少2次匹配 		  
		  
		  ?  {0,1}  0 次或者一次 
		  +  {1,}   至少 1 次  
		       [a-zA-Z]+ 字母至少一次 
			   \d+       数字至少一次  
		  *  任意 次数  	   
			  *.txt  
		  
        匹配次数中的贪婪模式 匹配次数的贪婪模式
		   默认模式是 贪婪 (尽量多匹配字符串) 
		   
		   a{3,5} 贪婪模式 尽量多的配置 (如果有5个字符串 尽量匹配5个)
		   a{3,5}? 取消贪婪模式 满足匹配就可以 a匹配 3次 
		 
        边界的配置: ^ 开始    $ 结尾  | 或者 	
              
        123重复出现3次  
		123{3}   12 后面 3 出现 3次 
		通过 () 进行分组  
        (123) 是一个整体  再 出现3 次 
        (123){3}		
	    反向引用: 
        1234abc1234
        把1234 进行分组  (1234)abc\1		
		
		匹配模式: 
		   忽略大小写   
		   单行模式  
    
	java  中正则的使用  	
	    第一步: Pattern p = Pattern.compile(r); 
		第二部: Matcher m = p.matcher(str); //匹配str字符串
	    第三部: matches() 进行匹配 
	
	js 中正则的创建: 
	        // js 中使用  先要 创建正则对象 
			// 1 直接正则表单式  /正则/模式 
			// i 忽略大小写                g 全文搜素 
			var reg1 = /\d+/g;
			
			// new RegExp(正则,模式)
			var reg2 = new RegExp("\\d+","ig");
			
		  js中的方法: 
				exec(): 返回的是一个数组。该数组包含了匹配该模式的第一个子字符串
                以及该子字符串中匹配相关分组的字符串。返回子字符串 把 字符串进行拆分 
		        
				test(): 返回一个 Boolean 值，它指出在被查找的字符串中是否存在模式匹配的子字符串
				
				replace 替换  正则要给g 模式  全文搜素

6.表单验证(重点)

    1. 输入密码,输入用户名,输入手机号码 验证 我们提交成功还是失败 失败提示文本:

    思路: 
        1. 完成界面   
        2. 添加事件  获取输入框的内容 
        3. 判断是否 成功 (正则表表达式判断)
        4. 界面刷新 , 提交数据

用户注册例子：

<!DOCTYPE html>
<html>
	<head>
		<meta charset="utf-8">
		<title>用户注册</title>
	</head>
	<body>
		<h1>注册新用户</h1>
		<form action="/demo01" method="get" onsubmit="return formValidation()">
			邮&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;箱：<input type="text" placeholder="需要通过邮件激活账户" id="emailId"
			 name="email" /><span id="emailErr"></span><br>
			手&nbsp;机&nbsp;号&nbsp;码：<input type="text" placeholder="激活账户需要手机短信验证" id="phoneId" name="phone" /><span id="phoneErr"></span><br>
			登录用户名：<input type="text" placeholder="字母开头，5-16字节" id="nameId" name="name" /><span id="nameErr"></span><br>
			密&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;码：<input type="password" placeholder="字母开头 长度在6~18之间"
			 id="pswId1" name="psw1" /><span id="pswErr1"></span><br>
			确&nbsp;认&nbsp;密&nbsp;码：<input type="password" placeholder="与上述密码一致" id="pswId2" name="psw2" /><span id="pswErr2"></span><br>
			<input type="submit" />
			<input type="reset" />

		</form>
		<script src="../js/demo03.js" type="text/javascript" charset="utf-8"></script>
	</body>
</html>

function formValidation() {

	//验证邮箱  需要通过邮件激活账户
	var emailFlag = checkInputMsg("emailId", "emailErr", /^\w+([-+.]\w+)*@\w+([-.]\w+)*\.\w+([-.]\w+)*$/, "邮箱地址错误或不支持");
	//验证手机号码  激活账户需要手机短信验证
	var phoneFlag = checkInputMsg("phoneId", "phoneErr",/^(13[0-9]|14[5|7]|15[0|1|2|3|5|6|7|8|9]|18[0|1|2|3|5|6|7|8|9])\d{8}$/, "手机号码有误");
	//验证用户名 字母开头，允许5-16字节，允许字母数字下划线
	var nameFlag = checkInputMsg("nameId", "nameErr", /^[a-zA-Z][a-zA-Z0-9_]{4,15}$/, "无效验证请求");
	//验证密码  以字母开头，长度在6~18之间，只能包含字母、数字和下划线
	var pswFlag1 = checkInputMsg("pswId1", "pswErr1", /^[a-zA-Z]\w{5,17}$/, "密码输入有误");
	//确认密码
	var pswFlag2 = checkInputMsg("pswId2", "pswErr2", /^[a-zA-Z]\w{5,17}$/, "确认密码与密码不一致");

	//判断两个密码是否一致
	var pswFlag = checkpassword(pswId1,pswId2);

	console.log(emailFlag + "," + phoneFlag + "," + nameFlag + "," + pswFlag1 + "," + pswFlag2 + "," + pswFlag)
	return emailFlag && phoneFlag && nameFlag && pswFlag1 && pswFlag2 && pswFlag;

}

/**
 * 判断两个密码是否一致
 * ObjId1 密码ID
 * ObjId2 确认密码ID
 */
function checkpassword(ObjId1, ObjId2) {

	//获取第一个密码的元素节点
	var pswNode1 = document.getElementById("pswId1");
	//获取第二个密码的元素节点
	var pswNode2 = document.getElementById("pswId2");
	//获取第一个密码的值
	var context1 = pswNode1.value;
	//获取第一个密码的值
	var context2 = pswNode2.value;
	//判断两次输入密码的值是否一致
	if (context1 == context2) {
		return true;
	}
	return false;
}

/**
 * 表单验证的封装
 * ObjId  输入框Id
 * errId  输入框错误提示的ID
 * reg    需要匹配的正则表达式
 * msg    错误提示内容
 */
function checkInputMsg(ObjId, errId, reg, msg) {

	//先通过输入框Id拿到输入框元素节点
	var msgNode = document.getElementById(ObjId);
	//通过输入框错误提示的ID拿到相对的元素节点
	var errNode = document.getElementById(errId);

	//通过输入框元素节点拿到输入框的值
	var context = msgNode.value;

	//判断是否满足正则表达式
	if (!reg.test(context)) {
		//匹配不成功 提示错误
		errNode.innerText = msg;
		errNode.style.color = "red";
		return false;
	}
	return true;
}