【HTML】使用Javascript制作网页

干货日记

于 2024-08-22 10:47:09 发布

阅读量1k

点赞数 20

分类专栏： HTML 文章标签： html javascript 前端

本文链接：https://blog.csdn.net/weixin_51649465/article/details/141411846

版权

HTML 专栏收录该内容

7 篇文章 0 订阅

订阅专栏

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、变量的命名

必须以字母或下划线开头，中间可以是数字、字母或下划线。
变量名不能包含空格、加、减等符号。
不能使用JavaScript中的关键字作为变量名，如var int。
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]);  // 输出结果：undeﬁned

在实际开发中，经常需要对数组进行遍历，也就是将数组中的元素全部访问一遍，这时可以利用 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（历史）

在这里插入图片描述

干货日记

关注

20
点赞
踩
7

收藏

觉得还不错? 一键收藏
0
评论
【HTML】使用Javascript制作网页

在JavaScript中，函数使用关键字function来定义。function 函数名 ([参数1,参数2,……])｛函数体</script>function：在声明函数时必须使用的关键字函数名：创建函数的名称，函数名是唯一的。参数：外界传递给函数的值，它是可选的，当有多个参数时，各参数用“，”分隔。函数体：函数定义的主体，专门用于实现特定的功能。未定义型（Undefined）用于声明的变量还未被初始化时，变量的默认值为undefined。
复制链接

扫一扫

专栏目录