五、javascript基础

最新推荐文章于 2024-08-28 22:48:13 发布
最新推荐文章于 2024-08-28 22:48:13 发布
阅读量8.5k 收藏 1
点赞数
文章标签： 测试工具 html css
版权声明：本文为博主原创文章，遵循 CC 4.0 BY-SA 版权协议，转载请附上原文出处链接和本声明。
本文链接：https://blog.csdn.net/come_bn/article/details/121567971
版权

一、js基础语法：

在html中写js代码要写在整个html标签后面，用script标签，alert（）；作用是弹出对话框；

代码示例：

<script type="text/javascript">
// alert作用是弹出对话框，所有的js代码也要使用英文状态下的符号，小括号中可以使用英文单引号或双引号来包裹文字
	alert("呵呵，看我弹出来了");
</script>

二、js找元素、标签、标记：

document代表页面文档；getElementById这种写代码的形式叫做驼峰命名法，使用id来获取页面中的元素、标签、标记；

代码示例：

<html>
	<head>
		<meta charset="utf-8">
		<title></title>
	</head>
	<body>
		<div id="div1">div1</div>
		<div id="div2">div2</div>
	</body>
</html>
<script type="text/javascript">
// document代表页面文档；getElementById这种写代码的形式叫做驼峰命名法，使用id来获取页面中的元素、标签、标记
	document.getElementById('div1')
</script>

三、js实体化三属性：

用js来设置盒子的宽、高、背景色

代码示例：

<script type="text/javascript">
// 想要设置谁，就必须先找到他，使用英文状态下的.来进行连接，最后的数值和前面的属性使用=连接，=前后使用空格只是为了美观，可有可无
	document.getElementById('div2').style.width='200px';
	document.getElementById('div2').style.height='200px';
	document.getElementById('div2').style.background='red';
</script>

四、js变量简化代码：

用var声明变量；

变量起名字时候注意事项：可以使用中文但是不推荐，也可以使用_和$符号，命名不可以使用数字开头；不允许使用js已经占用了的单词（保留字）；

代码示例：

<script type="text/javascript">
	// document.getElementById('div2').style.width='200px';
	// document.getElementById('div2').style.height='200px';
	// document.getElementById('div2').style.background='red';
// var是声明变量；变量就是给数据请了一个代言人，今后只要出现变量名就代表等号之后的这堆代码
	var dyr = document.getElementById('div2').style;
	// 变量起名字时候注意事项：可以使用中文但是不推荐，也可以使用_和$符号，命名不可以使用数字开头；不允许使用js已经占用了的单词（保留字）；
	dyr.width='200px';
	dyr.height='200px';
	dyr.background='red';
</script>

五、js事件：

    事件：在什么情况下做了什么事情
    事件三要素：事件源.事件类型=匿名函数里面写的就是要执行的事情

    先找到页面中的id元素后习惯性的把它保存在一个变量中方便后续的使用；

代码示例：

<html>
	<head>
		<meta charset="utf-8">
		<title></title>
		<style type="text/css">
			div{width: 100px; height: 100px; background: #FFC0CB;}
		</style>
	</head>
	<body>
		<div id="box"></div>
		<input type="button" value="变宽" id="btn_w">
		<input type="button" value="变高" id="btn_h">
		<input type="button" value="变色" id="btn_c">
	</body>
</html>
<script type="text/javascript">
	// 事件：在什么情况下做了什么事情
	// 事件三要素：事件源.事件类型=匿名函数里面写的就是要执行的事情
	// 先找到页面中的id元素后习惯性的把它保存在一个变量中方便后续的使用；
	var box = document.getElementById('box');
	var btn_w = document.getElementById('btn_w');
	var btn_h = document.getElementById('btn_h');
	var btn_c = document.getElementById('btn_c');
	// 以下是变宽代码
	btn_w.onclick = function(){
		// 这里写点击后要执行哪些命令 
		box.style.width = "200px";
	}
	// 以下是变高代码
	btn_h.onclick = function(){
		box.style.height = "200px";
	}
	// 以下是变色代码
	btn_c.onclick = function(){
		box.style.background = "red";
	}
</script>

六、找页面标签的其他方法：
可以用类名，标签名和name属性来获取元素；其中 getElementsByClassName是找页面中class的方法，必须在后面添加[数字],数字从0开始计数； getElementsByTagName是用标签名获取元素，也要加[数字]；getElementsByName是用name属性的值来找元素，也需要加[数字]，name的值可以重复出现。

代码示例：

	<body>
		<div class="div1">有类名</div>
		<div class="div1" name="hz">有类名</div>
		<div>什么都没有</div>
		<div name="hz">有name</div>
	</body>
</html>
<script type="text/javascript">
	// getElementsByClassName是找页面中class的方法，必须在后面添加[数字],数字从0开始计数
	document.getElementsByClassName('div1')[0].onclick = function(){
		alert();
	} 
	// getElementsByTagName是用标签名获取元素，也要加[数字]
	document.getElementsByTagName('div')[2].onclick = function(){
		alert();
	}
	// getElementsByName是用name属性的值来找元素，也需要加[数字]，name的值可以重复出现；
	document.getElementsByName('hz')[1].onclick = function(){
		alert();
	}
</script>

七、js其他事件：

当点击div执行弹出对话框操作时：onclick代表单击事件；ondblclick代表双击事件；  onmouseover代表鼠标移入事件；onmouseout 代表鼠标移出事件。

代码示例：

	<body>
		<div id="div1">单击</div>
		<div id="div2">双击</div>
		<div id="div3">鼠标移入</div>
		<div id="div4">双击移出</div>
		<!-- 需要js控制的时候再添加class或者id来找到此元素即可 -->
		<div id="div5">我没效果</div>
	</body>
</html>
<script type="text/javascript">
	//点击div执行弹出对话框操作；
	var div1 = document.getElementById('div1');
	div1.onclick = function(){
		alert('单击事件被捕获');
	}
	var div2 = document.getElementById('div2');
	// ondblclick代表双击事件
	div2.ondblclick = function(){
		alert('双击事件被捕获');
	}
	var div3 = document.getElementById('div3');
	// onmouseover代表鼠标移入事件；
	div3.onmouseover = function(){
		alert('鼠标移入事件被捕获');
	}
	var div4 = document.getElementById('div4');
	// onmouseout 代表鼠标移出事件
	div4.onmouseout = function(){
		alert('鼠标移出事件被捕获');
	}
</script>

八、js书写位置：

js书写位置有三种：外链、行内、内嵌；

html中写js代码是行内js，html的标签属性值要使用双引号，里面的js代码要使用单引号 ；行内js强烈不推荐使用，因为没有实现代码的分离效果，语法修改不方便 ；

 强烈推荐使用外链js，因为实现了代码的分离，修改会很方便；
外链js和内嵌js，先写的就先执行，后写的后执行  ；
代码示例：

<html>
	<head>
		<meta charset="utf-8">
		<title></title>
	</head>
	<body>
		<!-- html中写js代码是行内js，html的标签属性值要使用双引号，里面的js代码要使用单引号 ；行内js强烈不推荐使用，因为没有实现代码的分离效果，语法修改不方便 -->
		<div onclick="alert('点我弹出，我是行内js')">点我呀</div>
	</body>
</html>
<!--  强烈推荐使用外链js，因为实现了代码的分离，修改会很方便-->
<!-- 外链js和内嵌js，先写的就先执行，后写的后执行  -->
<script type="text/javascript">
	// 内嵌js
	alert("我是内嵌js");
</script>
<!-- 外链js -->
<script type="text/javascript" src="js.js"> 
	// 一旦有src属性引入别的js文件了，这里的代码都会失效；
	alert("我还弹出吗～no");
</script>

九、js代码搬家：

将js代码写在head中，用window.onload；

window.onload 代表所有窗口全部执行完毕；当页面的所有html内容都加载完毕后才执行此处的代码；

代码示例：

	<head>
		<meta charset="utf-8">
		<title></title>
		<style type="text/css">
			div{width: 100px; height: 100px; background: red;}
		</style>
		<script type="text/javascript">
		// window.onload 代表所有窗口全部执行完毕；当页面的所有html内容都加载完毕后才执行此处的代码；
		window.onload = function(){
			var box = document.getElementById('box');
			box.onclick = function(){
				alert('点击成功');
			}
		}
		</script>
	</head>
	<body>
		<div id="box"></div>
	</body>

十、动态添加、删除

innerHTML作用是设置标签的中间内容；

代码示例：

	<head>
		<meta charset="utf-8">
		<title></title>
		<style type="text/css">
			div{width: 200px; height: 200px; background: #FFC0CB;}
		</style>
		<script type="text/javascript">
			window.onclick = function(){
				var box = document.getElementById('box');
				var btn_add = document.getElementById('btn_add');
				var btn_del = document.getElementById('btn_del');
				btn_add.onclick = function(){
					// 点击后设置div中的html显示文字
					box.innerHTML = '点击后此处文字才会被innerHTML设置成功';
				}
				// 点击删除按钮实现让文字清空效果
				btn_del.onclick = function(){
					box.innerHTML = '';
				}
				// innerHTML作用是设置标签的中间内容
			}
		</script>
	</head>
	<body>
		<div id="box"></div>
		<input type="button" value="添加" id="btn_add"/>
		<input type="button" value="删除" id="btn_del"/>
	</body>

十一、自定义函数语法：

函数、方法的定义：function 名字(){自己的js程序};  如果想要执行这个函数中的js代码程序，必须要写函数名()才能执行函数中的命令；

代码示例：

	<head>
		<meta charset="utf-8">
		<title></title>
		<script type="text/javascript">
			window.onload = function(){
				hi();
				hi();
				// 自定义函数的作用就是简化代码，实现重复性代码的简单调用
				// 函数、方法的定义：function 名字(){自己的js程序}
				// 如果想要执行这个函数中的js代码程序，必须要写函数名()才能执行函数中的命令；
				// 函数（方法）的定义，js程序会优先执行；函数必须调用才可以执行其中的js代码：名字()；
				function hi(){
					alert('弹出');
				}
				// hi();
				// hi();
			}
		</script>
	</head>

十二、xml基础知识：

xml文件代表传输数据

新建一个xml文件，里面的标签全部是双标签，有大小写区分；

代码示例：

<!-- xml文件代表传输数据 -->
<ren>
	<shengao>180</shengao>
	<nianling>18</nianling>
	<tizhong>
		120
		<pang>一般</pang>
	</tizhong>
</ren>

叶宁夏昕
关注
JavaScript教程
aliyun3的博客
04-10 2170
1.javascript简介 JavaScript 最初由网景公司开发的一种脚本语言，被大量地应用于网页中，用以实现网页和浏览者的动态交互。目前几乎所有的浏览器都可以很好地支持 JavaScript。由于 JavaScript 可以及时响应浏览者的操作，控制页面的行为表现，提高用户体验，因而已经成为前端开发人员必须掌握的语言之一。 JavaScript 是为满足制作动态网页的需要而诞生的一种编程语言，在 HTML 基础上，使用 JavaScript 可以开发交互式（网页）Web。JavaScript 的
HTML中调用JavaScript的几种情况和规范写法
a998lg的博客
01-24 1724
比较简单，基础。 一、引用外部文件中的js脚本 script type="text/javascript" src="ext.js">script> 也可以象下面这样写，language不是必要的，但是推荐上面的写法 script language="javascript" type="text/javascript" src="ext.js">script>
js中＜script＞ 标签中type值及其含义
最新发布
HGX-DJK
08-28 1310
不同的 type 值适用于不同的场景和需求。type=“module” 和 type=“text/javascript” 是目前最常用的用于 JavaScript 的类型。而像 application/json 和 application/ld+json 则用于特定类型的数据嵌入，text/x-template 常用于前端模板引擎中。模块可以导入和导出其他模块，并且默认以严格模式（strict mode）执行。使用模块时，浏览器会对每个模块进行独立的处理，可以避免全局命名冲突。
深入理解：js标签中的type=“text/JavaScript“，表示什么意思
weixin_48033662的博客
07-25 3290
一·案例代码如下： <script type="text/javascript"> function onchangeFun() { //注意函数名不能与已经存在的关键字相同，否则会出错！ alert("男神已经改变!") } </script> 二·type=“text/javascript”，表示什么意思？ 表示将< script>< /script>之间的文本内容，在浏览器
JavaScript之script标签属性讲解
copple的专栏
05-10 6865
定义了6个属性： 1、async  表示立即下载该脚本，但不妨碍页面中的其他操作(比如：下载其他资源或等待加载其他脚本)，只对外部文件有效。 2、charset 属性与 src 属性一起使用，告诉浏览器用来编码这个 javascript 程序的字符集。它的值是任何一个 ISO 标准字符集编码的名称。由于大多数浏览器会忽略它的值，因此这个属性很少有人用。 3、defer 表示脚本可以延迟到
前端基础（11）：html/JSP语法（7）：<script>标签的用法与解释
Diligence is the mother of success.
02-11 2082
前端基础（11）：html/JSP语法（7）：<script>标签的用法与解释
JavaScript基础第06天笔记.md
01-03
# JavaScript基础第06天笔记知识点详解 ## 1. 内置对象 ### 1.1 内置对象概述 在JavaScript中，对象被分为三种类型：自定义对象、内置对象以及浏览器对象。前两者属于ECMAScript的基础部分，而浏览器对象则是...
javascript基础语法
03-31
### JavaScript基础语法详解 #### 一、JavaScript简介 JavaScript是一种广泛使用的编程语言，主要用于Web开发。ECMAScript标准定义了JavaScript的核心语法。 ##### 1.1 JavaScript书写位置 JavaScript可以在HTML...
JavaScript基础知识整理
02-26
JavaScript中有五种创建对象的方式，包括基于已有对象扩展、工厂方式、构造函数方式、原型（prototype）方式和动态原型方式。内置对象如Global、Math、Date等是预定义的，可以直接使用，而用户可以自定义对象来满足...
Javascript基础知识整理.doc
11-27
Javascript基础知识整理 JavaScript是一种高级的、动态的、弱类型的编程语言，主要用于客户端脚本编程。它可以在浏览器中执行，实现网页的交互性和动态效果。本文将对JavaScript的基础知识进行整理和总结，包括脚本...
JavaScript基础笔记.md
06-23
### JavaScript基础知识点详解 #### 一、JavaScript简介 **JavaScript**是一种主要运行在客户端的脚本语言，它不需要经过编译就能直接由浏览器解析执行。这使得JavaScript成为了现代Web开发中不可或缺的一部分，...
JavaScript详解
yinuo_chao的博客
02-20 1278
JavaScript详解视频 前后端必备技能！点击跳转JavaScript详解(07:24:54) 与万物的和谐自由，也是与自己的和解自由，更是同宇宙的合一自由。 超链接 点击跳转JavaScript教程 点击跳转廖雪峰的官方网站 点击跳转jQuery 文档工具站cuishifeng 点击跳转jQuery官网 点击跳转cdn jQuery P1 聊聊JavaScript这个东西 概述 JavaScript是一门世界上最流行的脚本语言 Java、JavaScript 10天~ 一个合格的后端人员
javascript随机选择颜色
12-07 652
代码如下 <!DOCTYPE html><html><head lang="en"> <meta charset="UTF-8"> <title>选择颜色</title> <style type="text/css"> #color{font-family: "微软雅黑"...
script标签type属性详解
weixin_45912061的博客
03-26 7262
1、（这是我们常用的）省略或 JavaScript MIME 类型：这表明脚本是 JavaScript。 HTML5 规范敦促作者省略该属性，而不是提供多余的 MIME 类型。在早期的浏览器中，这标识了嵌入或导入（通过 src 属性）代码的脚本语言。 JavaScript MIME 类型在规范中列出。 一些常用的值： text/javascript （默认） text/ecmascript application/ecmascript application/javascript text/vbscript
type=“text/javascript“的作用
summerriver1的博客
12-01 665
type="text/javascript"的作用
script标签4种的四种用法，你知道几种？
weixin_44384265的博客
11-24 8696
本文主要是基于《HTML标准》4.12节讲解script元素，主要的内容是script标签的4种用法：js传统脚本、js模块脚本、importmap、数据块。
script 标签 ＜script type=“module“＞
ikkkp的博客
09-21 4541
一开始都是社区, 前端圈的大佬们自己实现模块化, 比如seajs, nodejs使用的CommonJS规范, 以及异步模块定义 AMD,官方的ES6 Module, 同时ES6 Module也是我们目前前端工程化开发中运用最广泛的模块化规范。在script标签中写js代码，或者使用src引入js文件时，默认不能使用module形式，即不能使用import导入文件，但是我们可以再script标签上加上type=module属性来改变方式。
关于script标签的type属性
岂曰无衣
09-24 5910
type属性定义script元素包含或src引用的脚本语言。 属性的值为MIME类型; 支持的MIME类型包括text/javascript, text/ecmascript, application/javascript, 和application/ecmascript。 如果没有定义这个属性，脚本会被视作JavaScript。 如果MIME类型不是JavaScript类型（上述支持的类型），则该元素所包含的内容会被当作数据块而不会被浏览器执行，也不会显示在页面上，但是可以在另一个script里.
javascript
ychhaha的博客
03-14 1226
constructor(x, y) { // 构造函数this.x = x;// 成员变量this.y = y;init() {// 成员变量可以在任意的成员函数中定义toString() { // 成员函数。
JavaScript基础入门教程
"这是一份JavaScript基础教程，旨在为初学者提供JavaScript的入门知识，但不涉及动态网页的高级技术，如动态定位、动画或事件处理。教程采用参考教程的形式，既具有结构性，也具备教学性质。教程适用于已经了解HTML...
评论
添加红包

请填写红包祝福语或标题

个

红包个数最小为10个

元

红包金额最低5元

当前余额3.43元 前往充值 >
需支付：10.00元
成就一亿技术人!
领取后你会自动成为博主和红包主的粉丝 规则
hope_wisdom
发出的红包
实付元
使用余额支付
点击重新获取
扫码支付
钱包余额 0

抵扣说明：

1.余额是钱包充值的虚拟货币，按照1:1的比例进行支付金额的抵扣。
2.余额无法直接购买下载，可以购买VIP、付费专栏及课程。

余额充值