【HTML】使用Javascript制作网页

news2024/11/27 14:41:53

1、Javascript的语法规则

  • JavaScript程序按照在HTML文件中出现的顺序逐行执行。
  • JavaScript严格区分字母大小写。
  • 在JavaScript中，每行结尾的分号可有可无。
  • JavaScript中主要包括两种注释：单行注释和多行注释。单行注释使用双斜线“//”作为注释标签，多行注释是以“/”标签开始，以“/”标签结束。

2、Javascript的关键字

在这里插入图片描述

3、JavaScript的引入方式

3.1、行内式

是将JavaScript代码作为HTML标签的属性值使用。

//单击“test”时，弹出一个警告框提示“Happy”。
<a href="javascript:alert('Happy');"> test </a>		

//单击网页中的一个按钮时，就会触发按钮的单击事件。
<input type="button" οnclick="alert('Happy'); " value="test" >

3.2、嵌入式

在HTML中运用< script>标签及其相关属性可以嵌入JavaScript脚本代码。

<head>
<script type="text/javascript">
     // 此处为JavaScript代码
</script>
</head>

3.3、外链式

是将所有的JavaScript代码放在一个或多个以.js为扩展名的外部JavaScript文件中，通过< src >标签将这些JavaScript文件链接到HTML文档中。利于后期修改和维护，减轻文件体积、加快页面加载速度。

4、JavaScript的方法

4.1、alert()方法

alert()用于弹出一个警告框，确保用户可以看到某些提示信息。利用alert()可以很方便的输出一个结果，因此alert()经常用于测试程序。

window.alert(提示信息);
或
alert(提示信息);

4.2、prompt()方法

prompt()方法用于弹出一个提示框，可以显示和提示用户输入信息。

window.prompt(提示信息);
或
prompt(提示信息);

5、DOM

在这里插入图片描述
根据节点层级关系的不同，可以把节点分为根节点、父节点、子节点和兄弟节点。
根节点：位于节点树的最顶层，每个节点树有一个根节点。
父节点：某个节点的上一级节点，统称为父节点。
子节点：某个节点的下一级节点，统称为子节点。
兄弟节点：具有相同父节点的两个节点，被称为兄弟节点。

6、对象

属性：用来描述对象特性的数据，即若干变量。
方法：用来操作对象的若干动作，即若干函数。
在JavaScript中有若干对象，这里我们介绍网页制作中最常用的document对象。document表示文档对象，包含了大量的属性和方法，代表整个HTML文档。每一个载入浏览器的HTML文档都会成为document对象，只有通过document对象，才能获取某个HTML文档中的对象。

6.1、Date对象

Date对象主要提供获取和设置日期与时间的方法。
1.不带参数
2.创建一个指定日期的Date对象
3.创建一个指定时间的Date对象
在这里插入图片描述

7、访问节点

要想控制某个节点，我们首先要查找到这个节点，这个查找过程就是访问节点。下面列举了访问节点的常用方法。
在这里插入图片描述

//想要访问id名为“box”的节点
document.getElementById('box')

8、设置节点样式

style对象可以用来设置节点的样式，通过style对象可以动态调用节点的内嵌样式，从而获得所需要的的效果。

对象.style.属性='属性值';

style对象的属性和CSS的样式属性用法基本相似，但部分属性的拼写不同。

#test{width:200px;}         //CSS样式设置宽度
#test{background-color:#000;}          //CSS样式设置背景颜色
test.style.width='200px'; //style对象属性设置宽度
test.style.backgroundColor='#000';     //style对象属性设置背景颜色

9、变量

当一个数据需要多次使用时，可以利用变量将数据保存起来。变量就是指程序中一个已经命名的存储单元，它的主要作用就是为数据操作提供存放信息的容器。

9.1、变量的命名

  1. 必须以字母或下划线开头，中间可以是数字、字母或下划线。
  2. 变量名不能包含空格、加、减等符号。
  3. 不能使用JavaScript中的关键字作为变量名，如var int。
  4. JavaScript的变量名严格区分大小写，如UserName与username代表两个不同的变量。

9.2、变量的声明

var 变量名;

var sales;
var hits, hot, NEWS;
var room_101, room102;
var $name, $age;

var unit, room;         			     // 声明变量
var unit = 3;               			// 为变量赋值
var room = 1001;           	 		// 为变量赋值
var fname = 'Tom', age = 12; 	    // 声明变量的同时赋值

在声明变量时，我们也可以省略var关键字，通过赋值的方式声明变量，这种方式称为“隐式声明变量”。

10、函数

10.1、函数的定义

在JavaScript中，函数使用关键字function来定义。

<script type="text/javascript">
	function 函数名 ([参数1,参数2,……])｛
	    函数体
	｝
</script>

function：在声明函数时必须使用的关键字
函数名：创建函数的名称，函数名是唯一的。
参数：外界传递给函数的值，它是可选的，当有多个参数时，各参数用“，”分隔。
函数体：函数定义的主体，专门用于实现特定的功能。

10.2、函数的调用

函数的调用非常简单，只需引用函数名，并传入相应的参数即可。

函数名称(参数1,参数2,……)

10.3、作用域

函数中的变量需要先定义后使用，但这并不意味着定义变量后就可以随时使用。变量需要在它的作用范围内才可以被使用，这个作用范围称为变量的作用域。
全局变量：定义在所有函数之外，作用于整个程序的变量 。
局部变量：定义在函数体之内，作用于函数体的变量。

11、事件和事件的调用

事件是指可以被JavaScript侦测到的交互行为，例如在网页中滑动、点击鼠标，滚动屏幕，敲击键盘等。当发生事件以后，可以利用JavaScript编程来执行一些特定的代码，从而实现网页的交互效果。

11.1、鼠标事件

是指通过鼠标动作触发的事件
在这里插入图片描述

11.2、键盘事件

是指通过键盘动作触发的事件，常用于检查用户向页面输入的内容。
在这里插入图片描述

11.3、表单事件

是指通过表单触发的事件。
在这里插入图片描述

11.4、页面事件

是指通过页面触发的事件。
在这里插入图片描述

12、数据类型

12.1、数值型

数字（number）是最基本的数据类型。JavaScript和其他程序设计语言（如C和Java）的不同之处在于它并不区分整型数值和浮点型数值。

整型数据：123
十六进制：0x5C
八进制：023
浮点型数据：3.11（即小数）

12.2、字符串型

字符串(string)是由Unicode字符、数字、标点符号等组成的序列，它是JavaScript用来表示文本的数据类型。

'name="myname"‘
"You can call me'Tom'!"

12.3、布尔型

数值型数据类型和字符串型数据类型的值有无穷多个，但布尔型数据类型只有两个值，分别由“true”和“false”表示。

12.4、空型

空型（Null）用于表示一个不存在的或无效的对象与地址，它的取值只有一个null。并且由于JavaScript对大小写字母书写要求严格，因此变量的值只有是小写的null时才表示空型。

12.5、未定义型

未定义型（Undefined）用于声明的变量还未被初始化时，变量的默认值为undefined。与null不同的是，undefined表示没有为变量设置值，而null则表示变量（对象或地址）不存在或无效。

12.6、数据类型的转换

12.6.1、隐式类型转换

是指程序运行时，系统会根据当前的需要，自动将数据从一种类型转换为另一种类型。

<script type="text/jscript">
	var age=prompt("请输入年龄:","0");//输入年龄数值
	if(age<=0)//判断输入的年龄值是否小于0，age转换为数值型
	{
		alert("您输入的年龄不合法");
	}
	else{
		alert("您的年龄为"+age+"岁");
	}
</script>

12.6.2、显式类型转换

显式类型转换和隐式类型转换相对，此转换过程需要手动转换到目标类型。

<script type="text/jscript">
	var age=prompt("请输入年龄:","0");//输入年龄数值
	if(age<=0)//判断输入的年龄值是否小于0，age转换为数值型
	{
		alert("您输入的年龄不合法");
	}
	else{
		alert("您的年龄为"+age+"岁");
	}
</script>

12.7、数组

在JavaScript中，使用内置对象类Array可以创建数组对象。

12.7.1、数组的定义

var arrayname=new Array(); 
var arrayname=new Array(n);  
var arrayname=new Array(元素1,元素2,元素3,...);  

//“new Array()”创建数组
var arr1 = new Array();      // 空数组 
var arr2 = new Array('苹果', '橘子', '香蕉', '桃子');  // 含有4个元素 
// 使用“[]”字面量（字面量指固定值的表示方法，例如数字、字符串）来创建数组 
var arr1 = [];       // 空数组
var arr2 = ['苹果', '橘子', '香蕉', '桃子'];   // 含有4个元素

12.7.1、数组的访问

在数组中，每个元素都有索引（或称为下标），数组中的元素使用索引来进行访问。数组中的索引是一个数字，从 0 开始。

var arr = ['苹果', '橘子', '香蕉', '桃子'];
document.writeln(arr[0]);  // 输出结果：苹果 
document.writeln(arr[1]);  // 输出结果：橘子 
document.writeln(arr[2]);  // 输出结果：香蕉 
document.writeln(arr[3]);  // 输出结果：桃子 
document.writeln(arr[4]);  // 输出结果：undefined

在实际开发中，经常需要对数组进行遍历，也就是将数组中的元素全部访问一遍，这时 可以利用 for 循环来实现，在 for 循环中让索引从 0 开始自增。

var arr = [80, 75, 69, 95, 92, 88, 76]; 
var sum = 0; 
for (var i = 0; i < 7; i++) { 
sum += arr[i];    // 累加求和 
} 
var avg = sum / 7;   // 计算平均分 
console.log(avg.toFixed(2));  // 输出结果：82.14

13、运算符

是程序执行特定算术或逻辑操作的符号，用于执行程序代码运算。JavaScript中的运算符主要包括算数运算符、比较运算符、赋值运算符、逻辑运算符和条件运算符五种。

13.1、算术运算符

在这里插入图片描述

13.2、比较运算符

在这里插入图片描述

13.3、赋值运算符

在这里插入图片描述

13.4、逻辑运算符

在这里插入图片描述

13.5、条件运算符

是JavaScript中的一种特殊的三目运算符，其语法格式如下：

操作数？结果1：结果2

13.5、优先级

在这里插入图片描述

14、条件语句

就是对语句中不同条件的值进行判断，进而根据不同的条件执行不同的语句。条件语句主要有两类：一类是if判断语句；另一类是switch多分支语句。

14.1、if语句

if（执行条件1）{
执行语句1   
}
else if（执行条件2）{
执行语句2
}
else if（执行条件3）{
执行语句3
}
......

14.2、switch 语句

switch (表达式){
	case 目标值1:
		执行语句1
		break;
	case 目标值2:
		执行语句2
		break;
	．．．．．．
	case 目标值n:
		执行语句n
		break;
	default:
		执行语句n+1
		break;
}

15、循环控制语句

15.1、While循环语句

while(循环条件){
循环体语句;
}

15.2、do…While循环语句

do {
循环体语句;
} while(循环条件);

15.3、for循环语句

for（① ; ② ; ③）{
	④
}
第一步，执行①
第二步，执行②，如果判断结果为true，执行第三步，如果判断结果为false，执行第五步
第三步，执行④
第四步，执行③，然后重复执行第二步
第五步，退出循环

用①表示初始化表达式、②表示循环条件、③表示操作表达式、④表示循环体，通过序号来具体分析for循环的执行流程。

16、跳转语句

用于实现循环执行过程中程序流程的跳转，在JavaScript中，跳转语句包括break语句和continue语句。

16.1、break语句

16.2、continue语句

17、BOM

（Browser Object Model）是浏览器对象模型，它提供了一系列对象用于与浏览器窗口进行交互。

17.1、window（窗口）

在这里插入图片描述

17.2、screen（屏幕）

在这里插入图片描述

//获取屏幕分辨率
var width = screen.width;
var height = screen.height;
//判断屏幕分辨率
if(width<800 || height<600){
	alert("您的屏幕分辨率不足800*600，不适合浏览本页面");
}

17.3、location（地址）

在这里插入图片描述

16.7、history（历史）

在这里插入图片描述

本文来自互联网用户投稿，该文观点仅代表作者本人，不代表本站立场。本站仅提供信息存储空间服务，不拥有所有权，不承担相关法律责任。如若转载，请注明出处：http://www.coloradmin.cn/o/2062821.html

如若内容造成侵权/违法违规/事实不符，请联系多彩编程网进行投诉反馈，一经查实，立即删除！

相关文章

AI绘画商业实战，深入剖析Stable Diffusion 服装模特精准换装脱Y，AI虚拟模特变现教程

AI绘画商业实战，深入剖析Stable Diffusion 服装模特精准换装脱Y，AI虚拟模特变现教程

大家好&#xff0c;我是灵魂画师向阳 在之前的文章中&#xff0c;我们已经深入讲解了SD与ControlNet基础知识和原理。接下来我们将结合这一堆基础工具法宝组合使用&#xff0c;完成一些有意义的AIGC商业实战案例分享。 本文是来自一位粉丝的现实需求案例&#xff1a;电商服装…
阅读更多...
人在上海ip显示在安徽怎么回事？怎么办

人在上海ip显示在安徽怎么回事？怎么办

在这个信息爆炸的时代&#xff0c;网络已成为我们生活中不可或缺的一部分。无论是工作、学习还是娱乐&#xff0c;网络都以其独特的魅力渗透进我们生活的每一个角落。然而&#xff0c;随着网络技术的不断发展&#xff0c;一些看似不可思议的现象也逐渐浮出水面。比如&#xff0…
阅读更多...
海思SD3403/SS928V100开发（16）Tsensor驱动开发

海思SD3403/SS928V100开发（16）Tsensor驱动开发

1. 前言 由于需要检测SD3403芯片内部实时温度，需要开发Tsensor传感器驱动和应用 查看手册发现SD3403内部有三个Tsensor传感器 可以参考之前我写的35系列平台Tsensor驱动开发记录 海思35系列平台Tsensor驱动开发（1）驱动编写_t sensor-CSDN博客 海思35系列平台Tsensor驱动…
阅读更多...
什么是埋点测试，app埋点测试怎么做？

什么是埋点测试，app埋点测试怎么做？

前言 埋点测试是指在应用程序或网站中预设检查点&#xff0c;收集程序运行时的数据&#xff0c;以便于后续对程序进行性能分析或故障排查。埋点测试通常用于监控和追踪用户在软件产品中的行为&#xff0c;以收集有关用户体验、功能使用情况和潜在问题的数据。这些数据对于软件…
阅读更多...
哪些ai取名网站免费？盘点4大好用的ai取名字自动生成器

哪些ai取名网站免费？盘点4大好用的ai取名字自动生成器

在忙碌而喧嚣的都市生活中&#xff0c;越来越多人选择养宠物作为自己的精神寄托。当你决定迎接一只新生命回家时&#xff0c;除了准备好食物等必需品外&#xff0c;更重要的是给它起一个既好听又有意义的名字。 然而&#xff0c;有时候想出一个合适的名字并不容易&#xff0c;…
阅读更多...
中电金信：稳定运行超百天！业内首个100%全栈国产化手机银行上线

中电金信：稳定运行超百天！业内首个100%全栈国产化手机银行上线

日前&#xff0c;国内首个全栈国产化手机银行-华润银行新一代手机银行已经正式投产超百天&#xff0c;系统运行稳定&#xff0c;性能显著提升&#xff0c;客户体验明显改善&#xff0c;达成了“新理念、新体验、新技术、新底座”的建设目标&#xff0c;整体水平处于行业中上游。…
阅读更多...
对射式光电开关应用

对射式光电开关应用

图 5-38a所示是自动启停扶梯的示意图。扶梯入口安装一个对射式光电开关&#xff0c;当有人走到扶梯口要上扶梯时&#xff0c;挡住了光电开关发光部分所发出的光&#xff0c;使得受光部分无法接收到光信号&#xff0c;由此控制扶梯启动&#xff0c;延时一段时间后&#xff0c;扶…
阅读更多...
ubuntu上cmake3.30.2的安装

ubuntu上cmake3.30.2的安装

引言 安装下载安装包将安装包从windows拷贝到ubuntu解压进入解压后的文件夹执行boostrap编译CMake安装CMake查看是否安装成功 目前的ubuntu系统是20.04.4&#xff0c;用命令行安装了cmake的版本是3.16的&#xff0c;由于项目需要升级cmake到cmake3.22之上&#xff0c;使用命令行…
阅读更多...
揭秘led台灯对眼睛好不好？护眼台灯真的护眼吗？台灯要这样选！

揭秘led台灯对眼睛好不好？护眼台灯真的护眼吗？台灯要这样选！

在当今数字化时代&#xff0c;长时间面对电脑屏幕和各种电子设备已成为日常生活的一部分&#xff0c;这对我们的视力构成了前所未见的挑战。目前中国的近视情况十分严峻&#xff0c;尤其在青少年群体中表现得更为突出。因此&#xff0c;科学用眼、合理安排用眼时间和增加户外活…
阅读更多...
新手起步：探索AWS新账户的服务器部署能力与限制

新手起步：探索AWS新账户的服务器部署能力与限制

对于刚刚注册Amazon Web Services (AWS)账户的用户来说&#xff0c;一个常见的疑问是&#xff1a;我能立即开始部署服务器吗&#xff1f;这个问题的答案是肯定的&#xff0c;但同时也需要注意一些重要的细节。我们九河云将深入探讨新注册的AWS账户在服务器部署方面的能力和注意…
阅读更多...
AI大模型应用开发实战-Agent应用对话情感优化

AI大模型应用开发实战-Agent应用对话情感优化

1 使用prompt设计agent性格与行为 添加系统 prompt&#xff1a; 代码语言&#xff1a;python 代码运行次数&#xff1a;0 复制 Cloud Studio 代码运行 self.SYSTEMPL """你是一个非常厉害的算命先生&#xff0c;你叫JavaEdge人称Edge大师。以下是你的个人…
阅读更多...
数据库MySQL多表设计、查询

数据库MySQL多表设计、查询

目录 1.概述 2.一对多 3.一对一 4.多对多 5.多表查询 5.1内连接 5.2外连接 5.3子查询 1.概述 项目开发中,在进行数据库表结构设计时&#xff0c;会根据业务需求及业务模块之间的关系&#xff0c;分析并设计表结构&#xff0c;由于业务之间相互关联&#xff0c;所以各个…
阅读更多...
信息集成系统：打造智慧化的数字化平台

信息集成系统：打造智慧化的数字化平台

在现代社会中&#xff0c;信息集成系统已经成为不可或缺的一部分。它们不仅可以帮助企业管理各种数据和资源&#xff0c;还可以提供更高效的工作流程和更好的用户体验。本文将介绍信息集成系统的定义、优势、应用以及最新的技术趋势。 什么是信息集成系统&#xff1f;它是一种集…
阅读更多...
2024年【甘肃省安全员C证】考试题及甘肃省安全员C证考试总结

2024年【甘肃省安全员C证】考试题及甘肃省安全员C证考试总结

题库来源&#xff1a;安全生产模拟考试一点通公众号小程序 甘肃省安全员C证考试题考前必练&#xff01;安全生产模拟考试一点通每个月更新甘肃省安全员C证考试总结题目及答案&#xff01;多做几遍&#xff0c;其实通过甘肃省安全员C证模拟试题很简单。 1、【多选题】《安全生产…
阅读更多...
统信UOS系统访问windows共享目录

统信UOS系统访问windows共享目录

问题背景 当我们使用UOS系统的时候&#xff0c;想要访问windows系统的一些资料并将其拷贝下来使用的话&#xff0c;应该怎么操作呢&#xff1f;这个需求是可以实现的&#xff0c;统信UOS系统是基于Linux系统开发的&#xff0c;Linux系统和windows系统之间可以通过SMB协议来共享…
阅读更多...
C++重要语法一图概括(复习用)

C++重要语法一图概括(复习用)

0.思维导图 1.传值返回和引用返回 1.1传值返回 传值返回所返回的是当前对象的拷⻉ 1.2引用返回 引⽤返回返回的是对象本身, 返回对象是⼀个局部变量,出了作⽤域便会 被销毁, 所以不可使⽤引⽤返回 出了作⽤域,引⽤对象还在,才可以引⽤返回 所以说如果⼀个变量⽣命周期只在…
阅读更多...
嵌入式面试八股文（四）·同步和互斥、同步和异步、同步阻塞和同步非阻塞、异步阻塞和异步非阻塞的详细分析

嵌入式面试八股文（四）·同步和互斥、同步和异步、同步阻塞和同步非阻塞、异步阻塞和异步非阻塞的详细分析

目录 1. 同步和互斥 1.1 同步 1.2 互斥 1.3 总结 2. 同步和异步 2.1 同步 2.2 异步 3. 阻塞和非阻塞 3.1 阻塞 3.2 非阻塞 4. 同步阻塞和同步非阻塞 4.1 同步阻塞 4.2 同步非阻塞 4.3 同步阻塞和同步非阻塞的区别 5. 异步阻塞和异步非阻塞 5.1 …
阅读更多...
基于微信小程序的学生宿舍管理系统设计与实现

基于微信小程序的学生宿舍管理系统设计与实现

宿舍管理 | 学生宿舍 | 学生宿舍管理 | 学生宿舍管理小程序 博主介绍&#xff1a;✌️大家好&#xff01;我是Coder-coco&#xff0c;一名专注以理论为基础、实战为主的技术博主&#xff0c;本人在Java毕业设计领域有多年的经验&#xff0c;陆续会更新更多优质的Java实战项目&a…
阅读更多...
使用html2canvas将网页导出为图片

使用html2canvas将网页导出为图片

1. 安装html2canvas npm install html2canvas或者 pnpm install html2canvas2. 简单使用案例 ref&#xff1a;Vue 3 的 ref 用来引用 DOM 元素。我们通过 exportContent 引用需要导出的 DOM 元素。 html2canvas&#xff1a;html2canvas 库会将指定的 DOM 元素渲染为画布&…
阅读更多...
C++发送邮件：如何稳定实现邮件发送功能？

C++发送邮件：如何稳定实现邮件发送功能？

C发送邮件安全性探讨&#xff01;C编程中发送邮件的技巧&#xff1f; 邮件发送功能是许多应用程序的重要组成部分&#xff0c;无论是用于通知用户&#xff0c;还是用于自动化报告。AokSend将探讨如何在C环境中稳定地实现邮件发送功能&#xff0c;确保邮件能够可靠地到达收件人…
阅读更多...
推荐文章
最新文章

Copyright @ 2022~2023