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

2020-11-25 21:00:58 阅读：186 来源： 互联网

标签：function 知识点面试题 txt Day03 js alert var document

第三讲JavaScript入门

一、JavaScript基本介绍

（一）JavaScript简介

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

特点：

1 函数优先

2 即时编译（解释性语言）

3 面向对象

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

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

（二）JavaScript组成

在这里插入图片描述

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文件

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;

注意：

声明变量的时候，尽量不要同名，否则前面的变量不能使用了。
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事件汇总：

$[外链图片转存失败,源站可能有防盗链机制,建议将图片保存下来直接上传(img-OyhLja6g-1606307783921)(file:///C:\Users\41431\AppData\Local\Temp\ksohtml15976\wps15.jpg)]$

事件绑定：

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常用事件:

焦点事件：输入框

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 = "我是文本框"; 
}

键盘事件

onkeydown:键盘按下时

onkeyup：键盘释放时

鼠标事件

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="鼠标双击事件"/>

下拉列表改变事件

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 升级表单验证

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

标签：function,知识点,面试题,txt,Day03,js,alert,var,document
来源： https://blog.csdn.net/HZMMC/article/details/110143617

本站声明： 1. iCode9 技术分享网（下文简称本站）提供的所有内容，仅供技术学习、探讨和分享；
2. 关于本站的所有留言、评论、转载及引用，纯属内容发起人的个人观点，与本站观点和立场无关；
3. 关于本站的所有言论和文字，纯属内容发起人的个人观点，与本站观点和立场无关；
4. 本站文章均是网友提供，不完全保证技术分享内容的完整性、准确性、时效性、风险性和版权归属；如您发现该文章侵犯了您的权益，可联系我们第一时间进行删除；
5. 本站为非盈利性的个人网站，所有内容不会用来进行牟利，也不会利用任何形式的广告来间接获益，纯粹是为了广大技术爱好者提供技术内容和技术思想的分享性交流网站。

ICode9