《Day03》呕心沥血彻夜鏖战总结的JS知识点以及面试题

第三讲JavaScript入门

一、JavaScript基本介绍

(一)JavaScript简介

JavaScript(简称“JS”) 是一种具有函数优先的轻量级,解释型或即时编译型的高级[编程语言。虽然它是作为开发[Web]页面的脚本语言而出名的,但是它也被用到了很多非浏览器环境中,JavaScript 基于原型编程、多范式的动态脚本语言,并且支持面向对象、命令式和声明式(如函数式编程)风格。

特点:

1 函数优先

​ 2 即时编译(解释性语言)

​ 3 面向对象

用途:网页验证,动态特效,可以动态的操作html标签,可以动态的操作css样式

历史版本:ES5/ES6 主要学习ES5

(二)JavaScript组成

《Day03》呕心沥血彻夜鏖战总结的JS知识点以及面试题

1:基础语法部分 ESMAScript

2:DOM对象 document object model 文档对象模型

3:BOM对象 Browers Object model 浏览器对象模型

(三)JavaScript引入方式

css的引入方式:行内,内嵌,外链

1、行内式

将JS的代码写在html元素中

<input type="button" onclick="alert('我是弹出框')" value="点击" />

2、内嵌式:

语法:将js代码的代码写在script标签中,

<script type="text/javascript">
    function show(){
    alert("我是内嵌式");
}
			
</script>

注意:script标签可以写在html页面的任何位置,一般是放在整个html的后面

3、外链式

1:创建一个js文件

《Day03》呕心沥血彻夜鏖战总结的JS知识点以及面试题

2:在html中引入外部的js文件

function show2(){
	alert("我是外链式");
}

注意:一个HTML页面可以引入多个js文件
注意:当html页面中既有内嵌式也有外链式,使用就近原则
注意:外链式的script标签之间不能写js代码

小结:

行内式,比较适合,功能单一,代码简单的元素
内嵌式:适合当前页面,不同元素具有相同特效的js代码
外链式:适合不同页面,具有相同特显的元素(符合代码分离原则)

二、ECMAScript

ECMAScript主要是Javascript的一部分,主要包含了js的基础语法

变量,常量,运算符,数据类型,if语句,循环,数组,基础对象,函数,事件

1、变量

java变量

int a = 10; 初始化一个变量 (先声明,后赋值)


js变量

var 变量名= 值;
var a = 10;


注意:

  1. 声明变量的时候,尽量不要同名,否则前面的变量不能使用了。

  2. js的变量,是没有数据类型的,所以js是一门弱类型语言,当给变量赋值之后,才会知道变量的类型

<!DOCTYPE html>
<html>
	<head>
		<meta charset="utf-8">
		<title></title>
		<script type="text/javascript">
			//声明变量
			var a;
			//变量赋值
			a = 10;
			a = 10.5;
			var a = "abc";
			//使用变量
			alert(a);
		</script>
		
	</head>
	<body>
	</body>
</html>

2、数据类型

js数据类型分为两大类:基本数据类型 引用数据类型

基本数据类型:

数字型,字符串,布尔类型,null类型,未定义类型 undefined

//1:声明变量   测试变量的数据类型  typeof
var a;       //undefined  未定义
a = 10.1;   //number  数字型
a = true;   //boolean  布尔类型  true/false
a = "abc";  //string  字符串
a = null;    //null 型(Object下的null值)

测试变量的数据类型 使用 typeof 变量

alert(typeof 变量)

引用数据类型:

object, 数组,function

3、运算符

1、赋值运算符:= += -= *= /=

//1:赋值运算符
var a = 10;
a+=10;  //a = a+10;
a-=10;

2、算术运算符:+ - * / % ++ –

+有两种用法 1:算数运算符 2:字符串拼接

//1:赋值运算符
// var a = 10;
// a+=10;  //a = a+10;
// a-=10;

// a+=1;

// a = (int)a+1;
// a = a+1;
//算数运算符  
//var a = 10;
//var b = 0;
//alert(a%b);   //3.3333333333333335  近似值
//Infinity  正无穷   (数字类型)   -Infinity  负无穷 (数字类型) 
//NaN  not a number  数字类型 
//alert(typeof (10%0));

var a = 1;
//1     3     3    5     5
alert((a++)+(++a)+(a++)+(++a)+(a++));
			
//17

3、关系运算符(比较运算符):> < >= <= == === !=

==和===的区别
==在js中表示等值比较,和类型无关
===在js中称为恒等  类似java中equals
先比较类型,如果类型不一样,直接返回false
如果类型一致,再比较值,如果值相等,返回true,否则返回false

注意:js中1表示true,0表示false

4、条件运算符: ? : var flag = a>b ? true : false ; 三目或者三元运算符

var a = 100,b = 200,c = 300;
var max = (a>b?a:b)>c?(a>b?a:b):c;
			

5:逻辑运算符 && || ! & |

面试题:&&和&的区别

&&称之为短路与:第一个表达式为fasle,后面的表达式无须运算,结果为fasle,只有表达式都为true,结果才为true

&:每个表达式都需运算,最终的结果和&&的结果是一样的,&的结果是0或者1,&&的结果是true或者false

&&的效率较高

&可以用在用户页面验证

面试题:|| 和 |的区别

|| 表示短路或,只要第一个表达式为true,后面的表达式无需运算,最终为true

| 第一个表达式为true,继续执行后面的表达式,直到最后一个

4、分支结构

1)if结构 true或者false 或者1和0 都可以作为条件

var age = 20;
var a;
    if(a=1){
    alert("我是成年人")
}

注意:赋值语句也可以作为if的条件判断

2)if…else…结构 if(条件){语句;} else {语句;}

var age = 20;
var a;
if(a=1){
	alert("我是成年人")
}else{
	alert("未成年")
}

3)多重if结构 if(条件1){语句1;}else if(条件2){语句2;} else if(条件n){语句n}…else{语句;}

计算人体的BMI值

//计算人体的BMI
//计算公式为:BMI=体重(千克)除以身高(米)的平方。
var h = 1.75;
var w = 70;
var bmi = w/(h*h);
	alert(bmi);
if(bmi<18.5){
	alert("偏瘦");	
}else if(bmi<24){
	alert("正常");	
}else if(bmi<35){
	alert("肥胖");	
}else{
	alert("该减肥了...");		
}
			

4)switch:

var a = 3;
switch(a){
    case 1:alert(11111);break;
    case 2:alert(22222);break;
    case 3:alert(33333);break;
    case 4:alert(44444);break;
    default:alert(55555);break;
}

注意:如果条件是范围判断,推荐使用if结构,如果条件是常量,推荐使用switch

注意:Java中switch结构中常量值是:byte,short,int,String(jdk1.7新特性),char,枚举(jdk1.5后新特性)

5、循环结构

三种循环

while循环

语法

1 初始变量

while(2 范围判断){

​ 3:循环体

4:变量步进

}

1-100的累加和

var i = 1;
var sum = 0;
	循环
while(i<=100){
	sum+=i;
	i++;
}

do{ }while( );

1 初始变量

do{

3:循环体

4:变量步进

}while(2 范围判断);


for循环

语法

for(1初始变量;2 范围判断;3 步进){

​ 循环体…

}

99乘法表

for(var i=1;i<=9;i++){
	for(var j=1;j<=i;j++){
        document.write(j+"*"+i+"="+(i*j)+"&nbsp;&nbsp;");
     }
    document.write("<br>");
}

forEach循环

使用规律:当不知道循环次数的时候,使用while循环,反之使用for循环

面试题:do while和while的区别

do while先执行,后判断 至少会执行1次 1-n

while 先判断,后执行 0-n

6、数组

//1:数组的声明
//java int[] arr = new int[3];
//初始化一个数组 动态初始化:先声明长度,再确定元素的个数
var arr = new Array();
//赋值
arr[0] = 10;
arr[1] = "abc";
arr[2] = true;
arr[3] = 10.5;

//静态初始化
var arr2 = [10,20,30,40,50];
alert(arr2);

注意:js的数组,没有下标越界,而且可以添加任意类型的元素

循环的操作:添加,删除,修改,查询,遍历排序,判断

遍历

//遍历数组1
for(var i = 0;i<arr2.length;i++){
    //  document.write(arr2[i]+" ");
}
//for in 循环
for(var i in arr2){
    document.write(arr2[i]+" ");
}

冒泡排序

var arr = [90,20,-88,66,200,33,45];
			

//冒泡排序
for(var j=0;j<arr.length;j++){
    var flag;
    for(var i = 0;i<arr.length-j-1;i++){
        if(arr[i]>arr[i+1]){
            flag = arr[i];
            arr[i] = arr[i+1];
            arr[i+1] = flag;
        }
    }	
}

//sort写法
arr.sort(function(c,d){return c-d});

7、函数

函数是具有特定功能的代码块,通过事件的触发来调用,类似于java中方法。

语法:

function 函数名(参数){

函数体;

}

//js的函数的声明   
function  show(i,j){

   return i+j;
}

var sum = show(10,20);

注意:js的函数的形参无需声明类型,直接西形参名

注意:js函数的形参和实参的个数不一致

注意:js的函数名不要和关键字重名

注意:声明在函数中变量称为局部变量,范围在函数体中,声明在函数外的变量称为全局变量,作用范围每个方法都可以使用

8、事件和事件绑定

什么事件?

HTML4.0之后新增的特性。通过浏览器页面中元素的一系列触发调用指定的一段JavaScript脚本。

js事件汇总:

《Day03》呕心沥血彻夜鏖战总结的JS知识点以及面试题

事件绑定:

1)直接在标签中绑定

 <input type="button" onclick="show();" value="标签绑定"/>
 //直接在标签中绑定 
  function show(){
     alert("我是点击事件");
 }    

2)在js脚本中获取要绑定事件的对象,通过代码绑定

 <input type="button" id="btn"  value="动态绑定"/>
  //获取button对象
     var btn = document.getElementById("btn");
//动态绑定js事件,调用函数
// btn.onclick = function(){
// 	alert("我是动态点击事件");
// }

btn.onclick = show2;
function show2(){
    alert("我是动态点击事件");
}
//直接调用函数了
btn.onclick = show2();
function show2(){
    alert("我是动态点击事件");
}   
js常用事件:

  1. 焦点事件:输入框

onfocus:获得焦点事件

onblur:失去焦点事件

<input type="text" id="txt" onblur="showText()" onfocus="clearText()" value="我是文本框" />
    
function clearText(){
		var txt =  document.getElementById("txt"); 
		txt.value = "";
	 }
function showText(){
    var txt =  document.getElementById("txt");
    txt.value = "我是文本框"; 
}

  1. 键盘事件

onkeydown:键盘按下时

onkeyup:键盘释放时


  1. 鼠标事件

onclick

ondblclick

onmouseover

onmouseout/onmouseleave

<input type="button" onm ousedown="alert('鼠标按下事件')" value="鼠标按下事件"/>
<input type="button" onm ouseup="alert('鼠标弹起事件')" value="鼠标弹起事件"/>
<input type="button" onm ouseover="alert('鼠标悬停事件')" value="鼠标悬停事件"/>
<input type="button" onm ouseout="alert('鼠标移开事件')" value="鼠标移开事件"/>
<input type="button" onm ouseover="alert('鼠标悬停事件')" onm ouseout="alert('鼠标移开事件')" value="鼠标移开事件"/>
<input type="button" ondblclick="alert('鼠标双击事件')" value="鼠标双击事件"/>
		
		

  1. 下拉列表改变事件

onchange 下拉列表框中内容的改变事件

<!DOCTYPE html>
<html>
	<head>
		<meta charset="utf-8">
		<title></title>
	</head>
	<body>
		
		<select id = "per" onchange="changePerson()">
			<option value="">--请选择人物--</option>
			<option value="马保国">马保国</option>
			<option value="拜登">拜登</option>
			<option value="特朗普">特朗普</option>
			<option value="马化腾">马化腾</option>
		</select>
	</body>
</html>
<script type="text/javascript">
	 function changePerson(){
		var per = document.getElementById("per").value; 
		if("马保国" === per){
		   document.body.style.background = "url(img/mbg.jpg)";	
		}else if("拜登" === per){
			document.body.style.background = "url(img/bd.jpg)";	
		}else if("特朗普" === per){
			document.body.style.background = "url(img/tlp.jpg)";	
		}else if("马化腾" === per){
			document.body.style.background = "url(img/mht.jpg)";
		}else{
			document.body.style.background = "white";
		}
		document.body.style.backgroundSize = "cover";
	 }
</script>

三、DOM模型

(一)DOM简介

​ HTML DOM是HTML Document Object Model(文档对象模型)的缩写,HTML DOM则是专门适用于HTML/XHTML的文档对象模型。熟悉软件开发的人员可以将HTML DOM理解为网页的API。它将网页中的各个元素都看作一个个对象,从而使网页中的元素也可以被计算机语言获取或者编辑。 Javascript就可以利用HTML DOM动态地修改网页

(二)查找元素

1、document.getElementById(“Id”) 通过id属性的值获取元素

function show(){
		  //通过id获取dom对象
		  var txt = document.getElementById("txt");
		  //document.write 会将之前的页面覆盖
		  //document.write(txt.value);
		  alert(txt.value);
 }

注意:id必须唯一,如果有重名的,获取第一个元素对象

2、document.getElementsByName(“name”)通过name属性值获取元素

function show2(){
    //通过name获取dom对象
    var txt = document.getElementsByName("txt");
    //document.write 会将之前的页面覆盖
    //document.write(txt.value);
    for(var i=0;i<txt.length;i++){
        alert(txt[i].value);  
    }

 }

注意:name属性获取的是一个nodeList,是一个数组对象,可以通过循环分别获取每个元素

3、document.getElementsByClassName(“class”)通过class属性值获取元素

 function show3(){
		  //通过classname获取dom对象
		  var txt = document.getElementsByClassName("txt")
		  for(var i=0;i<txt.length;i++){
			 alert(txt[i].value);  
		  }
	  		 
	  }

注意:className属性获取的是一个nodeList,是一个数组对象,可以通过循环分别获取每个元素

4、document.getElementsByTagName(“标签名”)通过标签名获取元素

function show4(){
		  //通过TagName获取dom对象
		  var txt = document.getElementsByTagName("input");
		  for(var i=0;i<txt.length;i++){
			 alert(txt[i].value);  
		  }
		 
 }

注意:TagName属性获取的是一个nodeList,是一个数组对象,可以通过循环分别获取每个元素

注意:最常用的是id获取

1、表单验证

需求:当单击登录按钮时,对页面中的账号和密码进行非空验证,如果没有填写内容,给出错误消息提示。

<!DOCTYPE html>
<html>
  <head>
  	<meta charset="utf-8">
  	<title></title>
  </head>
  <body>
  	<form action="success.html" method="get">
  		<p>
  			用户名 :<input type="text" onblur="checkName()" id = "txt" />
  		</p>
  		<p>
  			密码 :<input type="password" onblur="checkPwd()" id = "pwd" />
  		</p>
  		<p>
  			<input type="submit" onclick="return checkAll();" value="登录" />
  		</p>
  	</form>
  </body>
</html>
<script type="text/javascript">
    function checkName(){
  	  //1:获取用户名
  	 var txt =  document.getElementById("txt").value;
  	 if(""==txt || null ==txt){
  		alert("用户名不能为空");
  		return false;
  	 }else{
  		 return true;
  	 }
    }
    
    function checkPwd(){
    		  //1:获取用户名
    		 var pwd =  document.getElementById("pwd").value;
    		 if(pwd.length<6 || pwd.length>18){
    			alert("密码长度在6-18之间");
  			return false;
  		}else{
  			return true;
  		}
    }
    function checkAll(){
  	  if(checkName()&checkPwd()){
  		  return true;
  	  }else {
  		 return false; 
  	  }
    }
</script>

2、全选全不选

需求:根据全选按钮的状态改变下面子项复选框的状态。

<!DOCTYPE html>
<html>
	<head>
		<meta charset="utf-8">
		<title></title>
	</head>
	<body>
		 <input type="checkbox" onclick="changeALll()" id="ckall" />全选<br>
		 <input type="checkbox" name="hobby" onclick="removeCk()" />抽烟<br>
		 <input type="checkbox" name="hobby" onclick="removeCk()" />喝酒<br>
		 <input type="checkbox" name="hobby" onclick="removeCk()" />烫头<br>
	</body>
</html>
<script type="text/javascript">
	function changeALll(){
		//获取全选的状态
		var flag = document.getElementById("ckall").checked;
		var ck = document.getElementsByName("hobby");
		for(var i = 0;i<ck.length;i++){
			ck[i].checked = flag;
		}
	}
	
	//全不选
	function removeCk(){
		var ck = document.getElementsByName("hobby");
		var flag;
		for(var i = 0;i<ck.length;i++){
			
			flag = ck[i].checked;
			if(!flag){
				break;
			}
		}
		var ckall = document.getElementById("ckall");
		ckall.checked = flag;
		
	}
</script>

(三)修改元素

1 修改元素的文本信息

2 修改元素的样式

需求:单击按钮改变div的样式(背景色,边框,大小)

3 升级表单验证

需求:将表单验证时的错误提示消息显示在对象文本框的后面。

上一篇:day03


下一篇:Day03