（JS,DOM）2020.11.11

最新推荐文章于 2021-02-02 17:43:39 发布

码媛世界第一号

最新推荐文章于 2021-02-02 17:43:39 发布

阅读量114

点赞数 1

分类专栏： Java第二阶段笔记集文章标签： js javascript

本文链接：https://blog.csdn.net/hxc2u/article/details/109658416

版权

本文介绍了JavaScript的基础，包括JavaScript的作用、组成和引入方式，详细讲解了JavaScript的语法、数组、循环结构、函数以及事件绑定。此外，还深入探讨了DOM模型，如何查找和修改页面元素，提供了代码示例进行说明。

摘要由CSDN通过智能技术生成

JavaScript基本介绍

JavaScript简介

概述:JavaScript是一门基于对象的客户端脚本语言。也是一门直译型的语言。广泛应用于web开发。可以镶嵌在html内部给网页增添动态效果。
　基于对象:对象不能被继承、功能无法扩展。
　直译型:写好的js代码不会被编译、直接由浏览器引擎解释运行

JavaScript作用

1、js可以镶嵌在html内部为网页增加动态效果
2、js可以操作html DOM
3、js进行表单校验
4、js可以获取浏览器的相关资源 BOM

JavaScript组成

在这里插入图片描述
ECMAScript:js的核心语法、数据类型、变量、分支语句、循环、函数、事件…
DOM: 文档对象模型
BOM: 浏览器对象模型

JavaScript引入方式

alert(内容) 以警告框的形式弹出内容
console.log(内容) 在浏览器控制台打印内容
document.write(内容)在浏览器页面中打印内容

行内式

### 内嵌式 ### 外链式 # ECMAScript ## JavaScript基础语法 ### 变量 **概述：内存中的一块区域、在一定范围内可以发生更改的值** ### 数据类型 java格式数据类型标识符 = 初始化值 int a =10; js var 标识符=初始化值 var a =10 var b=”hello” java强类型的语言、js是一门弱类型的语言强:语法要求严格弱:语法要求松散基本类型 number 可以表示整数可以表示小数 string 字符串类型 boolean 布尔值 true false null 将值的引用给了null undefined 创建了变量但是没有赋予值、默认就是undefined、underfined是从null派生而来的。因此我们使用==进行比较的使用结果是true 引用数据类型函数、数组... ### 运算符算术运算符：+ - * / % ++ -- 等。赋值运算符：= += -= *= /= %= 等。比较运算符：=\= === > < >= <= != 等。逻辑运算符：&& || ! 条件（三元）运算符：? 以上所有运算符的使用与java类似。 ### 分支结构（1）if选择结构：(多用于区间判断) 单分支：if(条件){代码块;}

双分支：if(条件){代码块1;}else{代码块2;}

多分支：if(条件1){代码块1;}else if(条件2){代码块2;}…else{代码块n;}

（2）switch分支结构：(适合做等值判断)
switch(表达式){
case 常量值1：
语句1；
break;
case 常量值2：
语句2；
break;
…
default:
语句n;
break;
}
java中switch 在JDK1.5的时候引入了枚举类型 1.7引入了字符串的支持不支持 long类型

数组

静态初始化

一维数组
格式 var 标识符 = [值1,值2,值3] var arr =[1,2,3] 在这里插入图片描述
二维数组
每一个元素值都是一个一维数组
格式 var 标识符 =[数组1,数组2,数组3] var arr =[[1,2],[2,3],[3,4,5]]

动态初始化

一维数组
格式 var 标识符 = new Array(长度)
var brr = new Array(3)
brr[0]=1 brr[1]=2 brr[2]=3
在这里插入图片描述
二维数组
格式 var 标识符 = new Array(3) var brr1= new Array(3)
brr1[0] = [1,2]
brr1[1] = [3,4]
brr1[2] = [5,6]

循环结构

for循环

格式
for(初始化变量;判断条件;步进表达式){
循环体
}
执行流程
初始化值–>判断条件–>循环体–>步进表达式–>判断条件–>循环体–>步进表达式…
应用场景明确循环次数或者明确范围时候使用

while循环

格式
while(布尔表达式){
循环体
}
应用场景:不知道要循环多少次的时候使用

do while循环

格式
do{
循环体
}while(布尔表达式)
特点:无论条件是否成立、都会先执行一次循环体、再进行条件判断

JavaScript函数

语法格式：
function 函数名(参数){
函数体；
}

无参无返回值函数

public void show(){
java做法
}
function show(){
js 做法
}

有参无返回值函数

public void getSum(int a,int b){
java 做法
}
function getSum(a,b){
js做法
}

无参有返回值函数

public int getSum(){
java做法
return 10;
}
function getSum(){
js 做法
return 10;
}

有参有返回值的调用

public int getMax(int a,int b){
java做法
return a;
}
public void getMax(String a,int b){

}
function getMax(a,b){
js做法
return a;
}

方法调用

show()
getSum(10,20)
var a =getSum()
var max =getMax(10,20)

java方法重载

在同一类中方法名相同、方法的参数类型不同、顺序不同、个数不同构成重载与返回值无关
js中不支持方法重载、但是我们可以模拟方法重载的效果
模拟重载

<!DOCTYPE html>
<html>
	<head>
		<meta charset="UTF-8">
		<title></title>
	</head>
	<body>
		<script>
			/*
				 arguments:存放参数的数组
			 * */
			function show(a,b,c){
    
				
				if(arguments.length==1){
    
					console.log(arguments[0])
				}else if(arguments.length==2){
    
					console.log(arguments[0]+arguments[1])
				}else if(arguments.length==3){
    
					console.log(arguments[0]+arguments[1]+arguments[2])
				}
			}
			show(1)
			show(1,2)
			show(1,2,3)
		</script>
		
	</body>
</html>

JavaScript事件及事件绑定

什么是事件
HTML 4.0 的新特性之一是有能力使 HTML 事件触发浏览器中的动作（action），比如当用户点击某个 HTML 元素时启动一段 JavaScript。事件就是在网页中可以通过一系列的触发来执行指定的脚本代码。
事件和函数密不可分、在html触发了某种事件就会执行函数、函数里面就是你对该事件的响应行为

事件汇总

打开w3c点击javaScript找到 javaScript对象—>找到event
在这里插入图片描述

事件绑定

onclick 点击事件

动态绑定
在这里插入图片描述

静态绑定

常用事件

焦点事件

失去焦点事件 onblur
获取焦点事件onfocus

最低0.47元/天解锁文章

码媛世界第一号

关注

1
点赞
踩
0

收藏

觉得还不错? 一键收藏
0
评论
（JS,DOM）2020.11.11

目录一级目录二级目录三级目录JavaScript基本介绍JavaScript简介JavaScript作用JavaScript组成JavaScript引入方式行内式一级目录二级目录三级目录JavaScript基本介绍JavaScript简介概述:JavaScript是一门基于对象的客户端脚本语言。也是一门直译型的语言。广泛应用于web开发。可以镶嵌在html内部给网页增添动态效果。　基于对象:对象不能被继承、功能无法扩展。　直译型:写好的js代码不会被编译、直接由浏览器引擎解释运行JavaS
复制链接

扫一扫