前端（day03）JS

最新推荐文章于 2024-11-02 19:19:35 发布

五八个

最新推荐文章于 2024-11-02 19:19:35 发布

阅读量291

点赞数

文章标签： javascript 前端开发语言

本文链接：https://blog.csdn.net/qq_44840708/article/details/122363576

版权

概念：

全称JavaScript，区分大小写，是一种弱类型，基于对象和事件驱动的脚本语言，实现浏览器用户和后台服务器进行交互

基于对象：它不仅可以创建对象,也能使用现有的对象。JS没有类的概念，也没有编译的过程。是一边解释一边执行。

事件驱动：在JS中，大部分情况下都是通过事件触发驱动函数执行的，从而实现特定的功能。（比如点击div将内容替换为时间、当鼠标滑过元素，元素就有翻转的动态。）

*事件：指的是网页中的元素，比如：鼠标点击事件

*事件源：指网页中的元素，比如：标签，文本

*事件和事件源绑定：指的是事件和网页的元素绑定

*驱动：调用js代码

脚本语言：在网络前端开发环境下，用于嵌入在客户端浏览器中的一段小程序。

组成：

JavaScript=ECMA基本语法+DOM+BOM

*ECMA基本语法：指的类型的定义，变量的定义，语句的定义等

*DOM：（Document Object Model））文档对象模型，当网页被加载时，浏览器会创建页面的文档对象模型

*BOM：（Browser Object Model）浏览器对象模型

特点和优势

特点：

(1)JS是一门直译式的语言，直接执行的就是源代码.

是一边解释一边执行，没有编译的过程（不像Java需要提前编译为class文件再运行）.

(2)JS是一门弱类型的语言,没有严格的数据类型.分为行内JS，内部JS，外部JS

优势：

(1)良好的交互性

(2)一定的安全性(JS被强制的要求,不能访问浏览器以外的东西,只能访问浏览器和浏览器内部的资源)

(3)跨平台性(Java语言具有跨平台性,是因为有虚拟机)

单击时弹框

<div onclick="alert('欢迎来到JS')">我是div</div>

双击时弹框

<div ondblclick="alert('欢迎来到JS')">我是div</div>

鼠标进入、移出时弹框

<div onmouseenter="alert('欢迎来到')">我是div</div>

类型

基本类型包括:number、string、boolean、null、undefined

引用类型：Number、String、Boolean、Null、Undefined

==和===

alert(1=='1') ;//true,比较值
alert(1==='1');//false，比较类型和值

常量和变量：

<!DOCTYPE html>
<html>
	<head>
		<meta charset="utf-8">
		<title></title>
	</head>
	<body>
		<script type="text/javascript">
			var a=10;
			const c=10;
			document.write("常量为："+c)
			document.write("<hr/>");
			function test1(){
				let b=20
				document.write("全局变量为："+a);
				document.write("<hr/>");
				document.write("test1中的局部变量："+b);
				document.write("<hr/>");
			}
			
			function test2(){
				document.write("test2方法中的全局变量："+a)
			}
			test1();
			test2();
		</script>
	</body>
</html>

let和var：都可以定义变量，但是var没有作用区域，let规定了作用域

函数：

匿名函数：

var 方法名称 = function (方法的参数）{方法体}

<!DOCTYPE html>
<html>
	<head>
		<meta charset="utf-8">
		<title></title>
	</head>
	<body>
		<script type="text/javascript">
			var test1=function(a,b){
				document.write(a+b)
			}
			test1(1,2);
		</script>
	</body>
</html>

普通函数：

function 方法名称（方法的参数）{方法体}

<!DOCTYPE html>
<html>
	<head>
		<meta charset="utf-8">
		<title></title>
	</head>
	<body>
		<script type="text/javascript">
			function addsum(a,b){
				var sum=a+b;
				document.write("和为"+sum);
			}
			addsum(1,11);
		</script>
	</body>
</html>

数组：js中数组的长度是不能确定的

静态创建数组：

<!DOCTYPE html>
<html>
	<head>
		<meta charset="utf-8">
		<title></title>
	</head>
	<body>
		<script type="text/javascript">
			var arr1=["a",1,true];
			var arr2=new Array("a","b","c");
			document.write(arr1+"<hr/>")
			document.write(arr1.length+"<hr/>");
			document.write(arr1[0]);
		</script>
	</body>
</html>

动态创建数组：

<!DOCTYPE html>
<html>
	<head>
		<meta charset="utf-8">
		<title></title>
	</head>
	<body>
		<script type="text/javascript">
			var arr=new Array(3);
			arr[0]="AAA";
			arr[1]="BBB";
			arr[2]="CCC";
			arr[3]="AAA";
			document.write(arr);
		</script>
	</body>
</html>