JavaWeb 初识JS

栀栀栀

已于 2024-06-22 21:35:21 修改

阅读量860

点赞数 7

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

于 2024-03-23 15:06:36 首次发布

本文链接：https://blog.csdn.net/yesyesyes_yes/article/details/136922039

版权

本文详细介绍了JavaScript的基础知识，包括内部脚本的使用、外部脚本引入、语法特性（如变量、数据类型、运算符、流程控制、函数、对象、JSON以及BOM和DOM的交互）、事件监听和绑定等，适合初学者学习。

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

js引用方式

内部脚本

将js代码定义在HTML页面中

JavaScript代码必须位于<script></script>标签之间

在HTML文档中，可以在任意地方，放置任意数量的<script>

一般会把脚本置于<body>元素的底部，可以改善显示速度

外部脚本

将js代码定义在外部js文件中，然后引入到HTML页面中

外部js文件中，只包含JS代码，不包含<script>标签

<script>标签不能自闭合

演示

<!DOCTYPE html>
<html>
	<head>
		<meta charset="utf-8" />
		<title></title>
	</head>
	<body>
		<script>
			alert('Hello')
		</script>
		<script>
			alert('Hello')
		</script>
		<script>
			alert('Hello')
		</script>
		<script src="js/new_file.js"></script>
	</body>
</html>

alert('nihao')

js基础语法

书写语法

区分大小写

每行结尾分号可有可无

注释：单行（//）、多行（/* */）

大括号表示代码块

输出语句

<!DOCTYPE html>
<html>
	<head>
		<meta charset="utf-8" />
		<title></title>
	</head>
	<body>
		<script>
			alert('Hello')
		</script>
		<script>
			document.write("nihao")
		</script>
		<script>
			console.log("nihaoa")
		</script>
	</body>
</html>

变量

Javascript中用var关键字来声明变量

Javascript是一本弱类型语言，变量可以存放不同的类型

变量名需要遵循如下规则：

可以是任何字母、数字、下划线或美元符号

数字不能开头

建议驼峰命名

演示

<!DOCTYPE html>
<html>
	<head>
		<meta charset="utf-8" />
		<title></title>
	</head>
	<body>
		<script>
            //var定义的相当于全局变量
            //可重复定义，覆盖掉
			var a=10;
			a='嗨';
			alert(a);
		</script>
	</body>
</html>

<!DOCTYPE html>
<html>
	<head>
		<meta charset="utf-8" />
		<title></title>
	</head>
	<body>
		<script>
			{
				//不重复
				//局部
				let x=1;
				alert(x)
			}
		</script>
	</body>
</html>

<!DOCTYPE html>
<html>
	<head>
		<meta charset="utf-8" />
		<title></title>
	</head>
	<body>
		<script>
			//const常量
			const pi=3.14;
			pi=3.15;
			alert(pi);
		</script>
	</body>
</html>
//由控制台得知有报错，因为常量无法修改

数据类型、运算符、流程控制语句

数据类型

Javascript中分为：原始类型和引用类型

原始类型：number、string、boolean、null、undefined

通过typeof运算符可以获取类型

<!DOCTYPE html>
<html>
	<head>
		<meta charset="utf-8" />
		<title></title>
	</head>
	<body>
		<script>
			alert(typeof 3);
			alert(typeof 'A');
			alert(typeof true);
			alert(typeof null);
			var a;
			alert(typeof a);
		</script>
	</body>
</html>

运算符

算数、赋值、比较、逻辑、三元

<!DOCTYPE html>
<html>
	<head>
		<meta charset="utf-8" />
		<title></title>
	</head>
	<body>
		<script>
			//全等运算符
			//==会进行类型转换，而===不会
			var a=10;
			alert(a=='10');
			alert(a==='10');
			alert(a===10);
		</script>
	</body>
</html>

<!DOCTYPE html>
<html>
	<head>
		<meta charset="utf-8" />
		<title></title>
	</head>
	<body>
		<script>
			alert(parseInt("12"));
			alert(parseInt("12$2"));
			alert(parseInt("A1"));
		</script>
	</body>
</html>

流程控制语句

if...else...

switch

for

while

do...while...

js函数

通过function关键字定义。

弱类型语言，形参不需要类型

返回值页不需要定义类型，之间使用return即可

<!DOCTYPE html>
<html>
	<head>
		<meta charset="utf-8" />
		<title></title>
	</head>
	<body>
		<script>
			//1.
			function add(a,b){
				return a+b;
			}
			
			var r=add(10,10)
			alert(r);
			
			//2.
			var add=function(a,b){
				return a+b;
			}
			
			var r=add(10,10)
			alert(r);
			
		</script>
	</body>
</html>

js对象

Array

用于定义数组

长度可变、类型可变

//定义
1.var arr=new Array(1,2,3);
2.var arr=[1,2,3]

//访问
arr[10]="hello";

length

forEach()//遍历

push()//末尾加

spice()//删除

String

//创建
1.var str=new String("hello");
2.var str="Hello";

length

charAt()//获取

indexof()//检索位置

trim()//去除左右两侧空格

substring()//截取

JSON

自定义对象

<!DOCTYPE html>
<html>
	<head>
		<meta charset="utf-8" />
		<title></title>
	</head>
	<body>
		<script>
			//自定义对象
			var user={
				name:"李四",
				age:10,
				eat:function(){
					alert("吃");
				}
			}
		</script>
	</body>
</html>

JSON

<!DOCTYPE html>
<html>
	<head>
		<meta charset="utf-8" />
		<title></title>
	</head>
	<body>
		<script>
			//自定义JSON
			var jsonstr='{"name":"Tom","age"=10,"addr"=["北京","上海"]}';
			//转化JS对象
			//1.JSON字符串转换为JS对象
			var obj=JSON.parse(jsonstr);
			alert(obj.name);
			
			//2.JS对象转换为JSON字符串
			alert(JSON.stringify(obj));
		</script>
	</body>
</html>

BOM

浏览器对象模型，允许Javascript与浏览器对话，Javascript将浏览器的各个组成部分封装为对象。

组成：

Window：浏览器窗口对象

Navigator：浏览器对象

Screen：屏幕对象

History：历史记录对象

Location：地址栏对象

Window

属性：history、location、navigator

方法：alert()、confirm()、setinterval()、setTimeout()

Location

属性：href

DOM

文档对象模型。

将标记语言的各个组成部分封装为对应的对象：

Document 整个文本对象

Element 元素对象

Attribute 属性对象

Text 文本对象

Comment 注释对象

JavaScript通过DOM，就能对HTML进行操作：

改变HTML元素的内容

改变HTML元素的样式

对HTML DOM事件做出反应

添加和删除HTML元素

<!DOCTYPE html>
<html>
	<head>
		<meta charset="utf-8" />
		<title></title>
	</head>
	<body>
		<div id="cl">hello</div>
		<div class="cls">hello</div>
		
		<input type="checkbox" name="hobby">电影
		<input type="checkbox" name="hobby">旅游
		<input type="checkbox" name="hobby">游戏
	</body>
	<script>
		//获取Element元素对象
		//1.
		var i=document.getElementById('cl');
		alert(i);
		
		//2.
		var divs=document.getElementsByTagName('div');
		for(let i=0;i<divs.length;i++){
			alert(divs[i]);
		}
		
		//3.
		var s=document.getElementsByName("hobby");
		for (let i = 0; i < s.length; i++) {
			alert(s[i]);
		}
		
		//4.
		var a=document.getElementsByClassName("cls");
		for (let i = 0; i < a.length; i++) {
			alert(a[i]);
		}
	</script>
</html>

js事件监听

事件绑定

1.通过HTML标签中的事件属性进行绑定

2.通过DOM元素属性绑定

<!DOCTYPE html>
<html>
	<head>
		<meta charset="utf-8" />
		<title></title>
	</head>
	<body>
		<input type="button" id="btn1" value="事件绑定1" onclick="on()">
		<input type="button" id="btn2" value="事件绑定2">
		
	</body>
	<script>
		function on(){
			alert("按钮1被点击了");
		}
		
		document.getElementById("btn2").onclick=function(){
			alert("按钮2被绑定了");
		}
	</script>
</html>

常见事件

事件名	说明
onclick	鼠标单击事件
onblur	元素失去焦点
onfocus	元素获得焦点
onload	某个页面或图像被完全加载
onsubmit	当表单提交时触发该事件
onkeydown	某个键盘的键被按下
onmouseover	鼠标被移到某元素之上
onmouseout	鼠标从某元素移开