JavaScript基础学习笔记

JavaScript基础学习笔记

1. javascript的两种引入方式

方式一：内嵌式

		<script type="text/javascript">
			alert("今天天气真好")
		</script>

方式二：引入式

		<!-- 	src引入路径,charset设置字符集 -->
		<script type="text/javascript" src="js/hjs01.js" charset="UTF-8">
		</script>

两种方式不可以混合使用

---

2. javascript变量的使用

变量的声明：

var 变量名 =  初始值；

变量的使用：

• js中的变量名是可以重复的，但是重复的变量名值会覆盖
• js中的变量是区分大小写
• js中的变量是区分大小写
• js中的双引号和单引号表示的含义是一样的，都代表字符串

数据的类型

• number(数字类型)
• string（字符串类型）
• boolean(布尔类型)
• object(对象类型)

特殊的数据类型

• undefined（未定义的） 原因：只是声明了变量，没有赋值
• NaN（not a number ）不是一个数字 原因：把一个字符串（例如：123a）强转为数字类型造成
• null ：对象赋值为空

		<script type="text/javascript">
			var a=1; //number
			var b=1.2;//number
			var c='hjs';//string
			var d="胡俊升";//string
			var e=new Date();//object
			var f=true;//boolean
			var g = Number(d);//NaN Not a Number
			var h;//undefined
			var i=null;//null 类型：
			alert(typeof i);
		</script>

---

3.javaScript中的运算符

算数运算符

 \+ - * / % ++ -- 三木运算

逻辑运算符

 \+ - * / % ++ -- 三木运算

连接运算符

+

特殊运算符

==（等值符）:比较的时候先比较类型，类型一致比较内筒,类型不一致统一的转化成number，然后在比较内容
===（等同符）：比较的时候先比较类型，类型不一致直接返回false，类型一致在比较内用，内用一致返回true，不一致返回false

案例：

	<script type="text/javascript">
			var a = 12;
			var b;
			b=10;
			var c = true;
			var d="js"
			alert(a+b);
			alert(d+c);
			alert(c+d);
			alert(a+c);//13
			var s1  = 1;
			var s2  = "1";
			var s3 = true;
			var s4 = "true";
			alert(s1 == s2); //true
			alert(s1 == s3); //true
			alert(s1 == s4); //false
			alert(s2 == s3);  //true
			alert(s2 == s4); //false
			alert(s3 == s4);  //false
			alert(s1 === s2); //true
			alert(s1 === s3); //true
			alert(s1 === s4); //false
			alert(s2 === s3);  //true
			alert(s2 === s4); //false
			alert(s3 === s4);  //false
		</script>

---

4.javaScript控制语句

判断语句

语法：
if(){}
if(){}else{}
if(){}else if(){}else{}
<script type="text/javascript">
			var a = 10;
			if(a>10){
				alter("进来了");
			}else{
				alert("没进来");
			}
		</script>

当if(a),a的值是false,0,null,undefined,NaN时，执行else

循环语句

while(){}
do{}while(){}
for()

<script type="text/javascript">
	  //for循环执行九九乘法表
			for(var i=1;i<=9;i++){
				for(var j=1;j<=i;j++){
					document.write(i+"*"+j+"="+i*j+"&nbsp;&nbsp;&nbsp;");
				}
				document.write("<br />");
			}
	</script>

注意：js中for循环中的变量不是局部的变量是全局的， 在js中for循环不是一个函数

---

5.JavaScript函数的使用

javascript函数的三种声明方式

<script type="text/javascript">
			//方式一:
			function demo1(){
				alert("函数定义1");
			}
			demo1();
  
			//方式二
			var demo2 =  function(){
				alert("函数定义2");
			}
			demo2();
  
			//方式三
			var demo3 = new Function("alert('函数定义3')");
			demo3();
		</script>

js中函数本身也是一个对象

函数中参数的传递

js中形参的个数和实参的个数可以不一致
js中没有方法的重载 ，重名的方法只会覆盖

		<script type="text/javascript">
			function demo1(a,b,c){
				alert(a+"---"+b+"---"+c);
			}
			
			function demo1(a,b){
				alert(a+"---"+b)
			}
			demo1(1,2,3);//1---2
			demo1(1);//1---undefined
			
		</script>

函数的返回值

没有定义方法的返回值默认返回 undefined

		<script type="text/javascript">
			function demo(){
				alert("测试函数的返回值方法");
				return 1;
			}
			var a = demo();
			alert(a);//若没有返回值：undefined
		</script>

函数的执行符

<script type="text/javascript">
			function demo(yy){
				alert(yy);
				/*
				 * 输出结果
				 function(){
					alert("hjs")
					}
				 */
				
				alert(yy());//hjs undefined 
				}
			var a = function(){
				alert("hjs")
			}
			demo(a);
		</script>

()：函数的执行符，若输出方法名不带执行符则输出的是函数的整个声明和函数体

---

6.JavaScript的数组的使用

数组的声明

<script type="text/javascript">
			var arr1 = new Array();
			var arr2 = new Array(5);
			var arr3 = new Array(1,1.2,true,'张三',new Date());
			var arr4 = [1,1.2,false,'hjs',new Date()];
	</script>

数组的使用

js中数组的下标可以是不连续的，如果不连续默认补充empty（）

<script type="text/javascript">
			function demo(){
				var arr = [];
				arr[0] = "1";
				arr[1] = true;
				arr[2] = new Date();
				arr[6] = 11;
				console.log(arr);
			}
			demo();
		</script>

数组的扩容与缩小

只需要修改数组的length即可，扩容自动补空，缩小自动裁剪

<script type="text/javascript">
			function demo() {
				var arr = [1, 1.2, false, 'hjs'];
				console.log("前:" + arr);
				arr.length = 10;
				console.log("扩容后：" + arr);
				arr.length = 2;
				console.log("缩小后:" + arr)
			}
			demo();
		</script>

数组的遍历

<script type="text/javascript">
			function demo(){
				var arr = [1,1.2,false,new Date(),'张三'];
				for(var i=0;i<arr.length;i++){
					console.log(arr[i]);
				}
			}
			function demo(){
				var arr = [1,1.2,false,new Date(),'张三'];
				for(var i in arr){
					//console.log(i); 输出的是下标
					console.log(arr[i]);
				}
			}
			demo();
		</script>

注意：增强for循环的i代表的是下标不是具体的数组中的元素

数组中常用的方法

• pop():删除数组的最后一个元素，并返回该元素。

• push():将新元素添加到数组的末尾，并返回新的长度。

• shift():删除数组的第一个元素，并返回该元素。

• unshift():将新元素添加到数组的开头，并返回新的长度。

• splice()从数组中添加/删除元素。

<script type="text/javascript">
			var arr = [1,1.2,true,new Date()];
			console.log("前："+arr);
			//删除最后一个元素并返回这个元素pop
			var a = arr.pop();
			console.log(a);
			console.log("pop后："+arr);
			//将新元素添加到末尾，并返回新的长度
			var a = arr.push("张三");
			console.log(a)
			console.log("push后"+arr);
  		arr.splice(2,1,'hjs','ywj');
			console.log("splice后"+arr);
		</script>

---

7.javascript的常用对象

Date对象：

		<script type="text/javascript">
			var date = new Date();
			console.log(date.getYear());//121
			console.log(date.getFullYear());//得到具体的年
			console.log(date.getMonth());//11 0-11
			console.log(date.getDay());//周六 星期几
			console.log(date.getDate());//具体的几号
			console.log(date.getHours());
			console.log(date.getMinutes());
			console.log(date.getSeconds());
		</script>

数学对象

<script type="text/javascript">
			function demo(){
				//获取一个0-1的随机整数
				console.log(Math.random());
				//向上取整
				console.log(Math.ceil(4.1));
				//向下取整
				console.log(Math.floor(5.9));
				//四舍五入
				console.log(Math.round(3.5));
				//获取一个四位数的随机整数
				console.log(Math.floor(Math.random()*9000+1000));
			}
			demo();
		</script>

字符串对象

<script type="text/javascript">
			function demo(){
				var str = "星-期-六";
				//"期-六 从下标为2的字符串输出"
				console.log(str.substr(2));
				//"期-六 substr(index,size)"
				console.log(str.substr(2,3));
				//"期-六 从下标为2的字符串输出"
				console.log(str.substring(2));
				//期 str.substring(startindex,endindex)
				console.log(str.substring(2,3));
				//字符串分割 --返回值是一个数组
				console.log(str.split('-'));
			}
			demo();
		</script>

Global全局对象

• eval():计算javascript字符串,并把他作为脚本来执行

• Number():把对象的值转换为数字

• isNaN():检查某个值是否为数字

<script type="text/javascript">
			function demo(){
				var str = "alert(1+2)";
				//*把字符串转换成可以执行的js代码
				eval(str);//执行alert(1+2)
				var str = "123";
				//检查某个值是否是数字。
				alert(isNaN(str));
				alert(Number(str));
			}
			demo();
		</script>

---

8.Javascript中event事件

      事件：时间是可以被javascript侦测到的行为，也是满足某些条件就可以触发的指定函数

常用事件：

• onclick:单击时间
• ondblclick:双击事件
• onmouseover:鼠标进入触发事件
• Onmouseout:鼠标移出触发事件
• Onmousemove:鼠标移动时间
• Onblur:失去焦点触发事件
• Onfocus:得到焦点触发事件
• onchange:内容改变触发事件
• onload：页面加载完成触发事件

		<script type="text/javascript">
			function demo1(){
				console.log("demo1");
			}
			function demo2(){
				console.log("demo2");
			}
			function demo3(){
				console.log("demo3");
			}
			function demo4(){
				alert("内容已经加载");
			}
		</script>	
		<body onload="demo4()">
		<button onclick="demo1()">单击事件</button>
		<button ondblclick="demo2()">双击事件</button>
		<input type="text" onkeydown="demo1()" onkeyup="demo2()"/>
		<div style="background: aqua;width: 300px; height: 200px;"onmouseover="demo1()" onmouseout="demo2()" onmousemove="demo3()">
		</div>
		<input type ="text" onblur="demo1()" onfocus="demo2()" />
		<select onchange="demo1()">
			<option>---请选择---</option>
			<option>北京</option>
			<option>天津</option>
			<option>上海</option>
			<option>南京</option>
		</select>
	</body>

事件结合对象的使用:

onclick,ondblclick一般都会结合按钮使
onkeydown,onkeyup,onblur,onfocus一般结合文本框使用
但是onblur,onfocus绝对不会结合按钮使用
onmouseover,onmouseout：一般结合div等块元素
onchange：结合下拉框和文本框使用

---

9.JavaScript中的BOM对象

什么是BOM

• BOM是Browser Object Model的简写，即浏览器对象模型。

• BOM由一系列对象组成，是访问、控制、修改浏览器的属性的方法

• BOM没有统一的标准(每种客户端都可以自定标准)。

• BOM的顶层是window对象

window对象的三种弹框方式

<script type="text/javascript">
			function demo1(){
				//方式一：只有确定按钮的弹框
				window.alert("你好!");
				//方式二:显示带有一段消息以及确认按钮和取消按钮的对话框。
				var a = window.confirm("是否删除");
				window.alert(a);
				//方式三：显示可提示用户输入的对话框。
				var a = window.prompt("请输入昵称:","例如:张三");
				window.alert(a);
			}
		</script>

BOM中的定时器

setInterval:每间隔一段时间执行一次-调用多次
setTimeout:过指定的时间调用方法-执行一次

		<script type="text/javascript">
			function demo2(){
				var date = new Date();
				var time = date.toLocaleString();
				document.getElementById("lsp").innerHTML = time;
			}
      //每间隔指定时间执行一次
			window.setInterval("demo2()",1000);
      //指定时间后执行一次
			window.setTimeout("demo2()",2000);
      function stopTime(){
				//清除定时器
				window.clearInterval(t);
			}
		</script>

BOM的close和open方法

		<script type="text/javascript">		
			function openWindow(){
				window.open("http://www.bjsxt.com");
			}
			function closeWindow(){
				window.close();
			}
		</script>

BOM的Location对象

<script type="text/javascript">
			function demo1() {
				//host:设置或返回主机名和当前 URL 的端口号。127.0.0.1:8020
				console.log(window.location.host);
				//hostname:设置或返回当前 URL 的主机名。127.0.0.1
				console.log(window.location.hostname);
				//port:设置或返回当前 URL 的端口号。8020
				console.log(window.location.port);
				//protocol:设置或返回当前 URL 的协议。http:
				console.log(window.location.protocol);
				//href:设置或返回完整的 URL。
				console.log(window.location.href);

				//跳转页面
				//在当前页面打开
				window.location.href = "http://www.bjsxt.com";//重点
				//在新页面打开
				window.open("http://www.baidu.com");
				//重新加载当前文档。
				window.location.reload();
			}
		</script>

BOM中的History对象

<script type="text/javascript">
			function demo1(){
				//url地址中历史记录的数量
				console.log(window.history.length);
				//url地址中历史记录的前一个
				window.history.back();
				//url地址中历史记录的后一个
				window.history.forward();
				//正数:后一个 负数：前一个  0
				window.history.go(1);
			}
		</script>

BOM中的Screen对象

<script type="text/javascript">
			function demo1(){
				var a =window.screen.height;
				var b = window.screen.width;
				console.log("高："+a+",宽："+b);
			}
		</script>

BOM中的Navigator

		<script type="text/javascript">
			function demo1(){
				//返回由客户机发送服务器的 user-agent 头部的值。
				console.log(window.navigator.userAgent);
			}
		</script>

---

10.JavaScript中的DOM对象

DOM直接获取元素对象

• getElementById():通过ID名称获得节点元素对象-单个对象
• getElementsByTagName():通过标签名称获取元素对象-多个对象
• getElementsByClassName():通过class名称获取元素对象-多个对象
• getElementsByName():通过name属性或得元素对象–多个对象,但是不是所有的标签都具有name属性获得元素对象，所以这种获得方式不是太多

<script type="text/javascript">
			function demo1() {
				//通过id名称获取元素对象
				var sp = document.getElementById("sp1");
				console.log(sp);
			}

			function demo2() {
				//通过标签名称获取元素对象
				var sps = document.getElementsByTagName("span");
				console.log(sps);
				console.log(sps[2]);
			}
			
			function demo3(){
				//通过类名获取元素对象
				var sps = document.getElementsByClassName("sp");
				console.log(sps);
			}
			
			function demo4(){
				//通过name属性获取元素对象
				var sps = document.getElementsByName("zs");
				console.log(sps);
			}
		</script>

DOM间接获取元素对象

• childNodes:获取指定标签的所有子元素，text（空白）文本也是一个节点
• parentNode:获取父节点
• previousSibling：获取上一个元素，text
• previousElementSibling：获取上一个元素标签
• nextSibling：获取下一个元素text
• nextElementSibling:获取下一个元素标签

<script type="text/javascript">
			function demo1(){
				//获取div对象
				var div1 = document.getElementById("div1");
				//获取div对象下面的所有的子标签（空白文本也属于节点）
				var ch = div1.childNodes;
				console.log(ch);
			}
			function demo2(){
				var sp = document.getElementById("sp1");
				//获取当前节点的父节点标签
				var p1 = sp.parentNode;
				console.log(p1);
			}
			function demo3(){
				var sp = document.getElementById("sp1");
				//获取当前标签的下一个标签(text)
				var n1 = sp.nextSibling;
				var n2 = sp.nextElementSibling;
				console.log(n2);
				var n3 = sp.previousElementSibling;
				console.log(n3);
			}
		</script>

DOM操作节点的属性

1.获取元素对象：var id = document.getElementById（id）

2.获取对象的属性:id.属性,然后就可以操作了

<script type="text/javascript">
			function demo1() {
				//获取元素对象
				var id1 = document.getElementById("text1");
				//输出元素属性
				console.log("type:" + id1.type);
				console.log("alt:" + id1.alt);
				console.log("value:" + id1.value);
				console.log("id:" + id1.id);
				id1.type="button";
				id1.value="我变成可以点的按钮了";				
			}
			function demo2(){
				alert("123");
			}
		</script>

DOM操作元素内容

• 单标签获得值得时候使用value属性

• 双标签获得时候使用的是innerHTML 或者innerText

• 双标签的特殊情况(value)

  Select textare：取值的时候使用value属性

  ​ 赋值的时候使用innerHTML或者innerTest即可

<script type="text/javascript">
			function demo1(){
				var div1 = document.getElementById("div1");
				//获取元素的文本内容
				console.log(div1.innerText);
				//获取元素的HTML标签+文本
				console.log(div1.innerHTML);
//				div1.innerText = "<i>我们不一样</i>";
				div1.innerHTML = "<i>我们不一样</i>";
			}
		</script>

DOM操作元素样式

		<script type="text/javascript">
			function demo1(){
				//获取元素对象
				var c1 = document.getElementById("div1");
				//获取css样式
				//注意：在获取css样式的时候，这个css样式必须是行内式的方式才可以
				console.log(c1.style.width+"=="+c1.style.height+"=="+c1.style.backgroundColor);
				//操作css的样式方式一：
				//c1.style.width="300px";
				//c1.style.height="300px";	
				//c1.style.backgroundColor="darkmagenta";
				//操作css的样式方式二:通过增加class属性的方式操作css---如果这个css样式在多个地方重复使用
				c1.className="c1";
			}

小案例

<!DOCTYPE html>
<html>
	<head>
		<meta charset="UTF-8">
		<title></title>
		<style type="text/css">
			#div1{
				padding: 30px;
				width:300px;
				height: 300px;
				background-color: aqua;
				margin: 100px auto;
			}
			button{
				display: inline-block;
				width: 70px;
				height: 30px;
				border-radius: 30px;
				margin-left: 60px;
				margin-top:70px ;
				background-color: aliceblue;
			}
		</style>
		<script type="text/javascript">
			function demo2(){
				var div1 = document.getElementById("div1");
				div1.style.marginLeft = Math.random()*1000+"px";
				div1.style.marginTop = Math.random()*500+"px";
				
			}
			function demo1(){
				document.getElementById("div1").style.display="none";
				document.body.style.backgroundImage="url(img/box.jpg)";
			}
		</script>
	</head>
	<body>
		<div id="div1">
			<h3 align="center">你是不是傻？</h3>
			<button onclick="demo1()">是</button>
			<button onmouseover="demo2()">不是</button>
		</div>
	</body>
</html>

DOM操作元素节点

操作元素节点对象的方法：

• 创建节点对象：

   var p=document.createElement("p");
  

• 如何追加到指定节点对象中

    p.appendChild(inp);
    document.body.insertBefore(p,p1);	
  

• 移除子节点：

   p.removeChild(inp);    
  

• 直接移除该节点

    p.remove();
  

案例：

<!DOCTYPE html>
<html>
	<head>
		<meta charset="utf-8">
		<title></title>
		<script type="text/javascript">
			function insert(){
				//创建节点对象
				var p=document.createElement("p");
				p.innerHTML="照片:"
				//创建input标签对象	
				var inp=document.createElement("input");
				//给指定的对象赋予属性
				inp.type="file";
				var inp2=document.createElement("input");
				inp2.type="button";
				inp2.value="删除";
				//给指定的对象赋予事件
				inp2.onclick=function(){		
				//删除节点对象  移除子节点对象
				/*p.removeChild(inp);
				p.removeChild(inp2);	
				document.body.removeChild(p);*/				
				//直接删除p标签对象
				p.remove();					
				}
				//获得body对象
				//在现有元素之后追加节点对象
				/*document.body.appendChild(p);*/
				//获得p标签对象
				var p1=document.getElementById("p_1");
				//在现有元素对象之前增加新的节点对象
				document.body.insertBefore(p,p1);
				p.appendChild(inp);
				p.appendChild(inp2);
			}
		</script>
	</head>
	<body>	
		<p>
			姓名:<input type="" name="" id="" value="" />
		</p>
		<p>
			照片:<input type="file" name="" id="" value="" />
			<input type="button" name="" id="" value="添加" onclick="insert()"/>
		</p>
		<p id="p_1">
			<input type="button" name="" id="" value="提交" />
			<input type="button" name="" id="" value="清空" />
		</p>
		
	</body>
</html>

JavaScript 表单验证

• readonly和disabled

    共同点：都是导致内容不可以更改
    区别：readonly：中的内容是可以提交的
    disabled：数据是不可以提交的,不可以在被操作
  

• 表单的提交方式

	οnsubmit="return sub()"
	<input type="submit" name="" id="" value="提交" />

案例：

<!DOCTYPE html>
<html>
	<head>
		<meta charset="UTF-8">
		<title></title>
		<script type="text/javascript">
			function checkName(){
				var userName = document.getElementById("uname");
				var sp = document.getElementById("uname_span");
				if(userName.value == null || userName.value==""){
					sp.innerText="× 用户名不能为空";
					sp.style.color="red";
					return false;
				}else{
					sp.innerText="√ 用户名合法";
					sp.style.color="green";
					return true;
				}
			}
			
			function checkPWD(){
				var pwd = document.getElementById("pwd");
				var pwdsp = document.getElementById("pwd_span");
				if(pwd.value == null || pwd.value==""){
					pwdsp.innerText = "× 密码不能为空";
					pwdsp.style.color="red";
					return false;
				}else{
					pwdsp.innerText="√ 密码合法";
					pwdsp.style.color="green";
					return true;
				}
			}
			
			function zong(){
			return checkName() && checkPWD();
				}
		</script>
	</head>
	<body>
		<!--如果方法返回值是true可以提交表单，如果是false表单就不提交-->
		<form action="操作节点元素对象.html" onsubmit=" return zong()">
			<p>
				用户名:
				<input type="text" onblur="checkName()" name="uname" id="uname" value=""/>
				<span id="uname_span">
					
				</span>
			</p>
			<p>
				密码：
				<input type="password" onblur="checkPWD()" name="pwd" id="pwd" value="" />
				<span id="pwd_span">
					
				</span>
			</p>
			<p>
				<input type="submit" value="登录" />
			</p>
		</form>

	</body>
</html>

---

案例：简易计算器

<!DOCTYPE html>
<html>

	<head>
		<meta charset="UTF-8">
		<title>简易计算器</title>
		<style type="text/css">
			div {
				width: 110px;
				height: 132px;
				border: 1px solid black;
				padding: 5px;
				margin: 10px auto;
			}
			
			.text {
				width: 95px;
			}
		</style>
		<script type="text/javascript">
			function demo(th){
				//th就是当前点击的button对象
				var t1 = document.getElementById("text1");
				if(th.innerText=="C"){
					t1.value = "";
				}else if(th.innerText=="="){
					t1.value = eval(t1.value);
				}else{
					t1.value+=th.innerText;
				}
			}
		</script>
	</head>

	<body>
		<div>
			<input type="text" id="text1" class="text" />
			<table>
				<tr>
					<td><button onclick="demo(this)">7</button></td>
					<td><button onclick="demo(this)">8</button></td>
					<td><button onclick="demo(this)">9</button></td>
					<td><button onclick="demo(this)">/</button></td>
				</tr>
				<tr>
					<td><button onclick="demo(this)">4</button></td>
					<td><button onclick="demo(this)">5</button></td>
					<td><button onclick="demo(this)">6</button></td>
					<td><button onclick="demo(this)">*</button></td>
				</tr>
				<tr>
					<td><button onclick="demo(this)">1</button></td>
					<td><button onclick="demo(this)">2</button></td>
					<td><button onclick="demo(this)">3</button></td>
					<td><button onclick="demo(this)">-</button></td>
				</tr>
				<tr>
					<td><button onclick="demo(this)">0</button></td>
					<td><button onclick="demo(this)">C</button></td>
					<td><button onclick="demo(this)">+</button></td>
					<td><button onclick="demo(this)">=</button></td>
				</tr>
			</table>
		</div>
	</body>

</html>