JavaScript交互式网页设计笔记

睡前要喝豆奶粉

已于 2023-04-21 21:34:03 修改

阅读量1.9k

点赞数 2

分类专栏： JavaScript 前端文章标签： javascript 前端开发语言

于 2022-12-12 12:43:37 首次发布

本文链接：https://blog.csdn.net/yinghanhanhan/article/details/128047747

版权

本文详细介绍了JavaScript的基本语法，包括脚本位置、变量、数据类型、运算符和流程控制语句。深入讲解了函数的定义、调用、参数、返回值以及匿名函数。此外，还探讨了JavaScript事件、浏览器对象模型（BOM）和文档对象模型（DOM）的操作，如window对象、history对象、location对象、screen对象和navigator对象。通过示例展示了如何查找和修改HTML元素，以及动态添加和删除节点。

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

一、JavaScript基本语法

1.简介

JavaScript诞生于1995年，主要是进行用户输入的合法性验证

Web脚本语言轻型的、解释性的浏览器内

2.执行原理

当客户端向服务器请求某个页面时，服务器端将整个页面包含JavaScript的脚本代码作为响应内容，发送到客户端的机器，客户端浏览器根据收到的网页内容从上往下逐行读取并解释其中的HTML或脚本代码

从服务器端下载到客户端，在客户端执行，不占用服务器端的CPU等资源，分担了服务器的任务，间接提升了Web服务器的性能

3.JavaScript脚本代码的位置

3.1HTML文件混合方式

在网页的<script></script>标签对中直接编写脚本程序代码

<body>

        <script type="text/javascript">

//页面输出

                document.write("hello，world");

//日志输出——控制台

                 console.log("hello,world2");

//弹窗

                alert("hello,world3");

</script>

</body>

3.2JS文件引用方式

将脚本程序代码编写在一个单独的JavaScript文件中，然后在网页中引用

可在<head>内、<body>内、<body>外

<script type="text/javascript" src="js/Demo1.js"></script>

注意：

带有src属性的<script>标签。不应该在<script>标签对之间包含任何额外的JavaScript代码。如包含了嵌入的代码，则只会执行外部脚本文件，而嵌入的代码会被忽略

3.3HTML代码嵌入方式

将脚本程序代码作为某个HTML页面元素的事件属性值或超链接href属性值

<a href="javascript:document.write('hello，world4');">入门js</a>

4.变量

JavaScript的变量采用弱类型的形式，即声明变量时不必确定类型，而是在使用或赋值时自动确定其数据类型

var声明的变量没有块作用域，有函数作用域
let有块作用域

方式一：

var message1;

message1="你们好呀";

方式二：

var message2="今天又是元气满满的一天呀";

声明变量规则：

a：第一个字符必须是一个字母、下划线、或美元符号

b：其他字符可以是字母、下划线、美元符号、或数字

c：区分大小写

d：不能与关键字同名，如while、for、if等

变量的运算使用

var x=2;
var y=6;
var z=x+y;
//字符串拼接  空格有效
alert("x:"+x+",y:"+y+"     x+y="+z);
//占位符
alert(`x:${x},y:${y},x+y=${z}`);

5.数据类型

5.1typeof操作符

由于JavaScript是弱类型的，因此需要一种手段来检测给定变量的数据类型

var w;
console.log(typeof w);

string：用单引号或双引号来声明的字符串

undefined：未初始化的变量及未声明的变量

number：整数或浮点数

object：JavaScript中的对象、数组或null

boolean：true或false

5.2undefined

对未初始化的变量及未声明的变量使用typeof运算符均会返回undefined

5.3null

null是空类型，表示一个变量已经有值，但值为空对象，使用typeof检测时会返回object

5.4boolean

boolean是布尔类型，也称真假类型。这个类型有两个标准值：true和false。布尔值用来表示一个逻辑表达式的结果，通常用作判断处理

5.5number

整数和小数都是number

5.6string

字符串类型，是程序中使用最广泛的一种类型。字符串是使用单引号或双引号引起来的若干字符

6.运算符

JavaScript中的运算符
类型	运算符
算术运算符	+ - * / % ++ --
赋值运算符	=
比较运算符	> < >= <= == !=
逻辑运算符	&& \|\| !

7.JavaScript注释

7.1单行注释

//这是单行注释

7.2多行注释

/*这是多行注释*/

8.JavaScript流程控制语句——顺序结构和选择结构

8.1顺序结构

按先后顺序依次执行，最基本的结构

8.2选择结构

8.2.1if语句单分支语句

if(条件表达式){

语句或语句块

}

var w;
if (typeof w == undefined) {
	console.log("w的数据类型是未定义");
}

8.2.2if双分支语句

if(条件表达式){

语句或语句块1

}else{

语句或语句块2

}

var y=3.5;
var xx;
if (x > 0) {
	xx = y;
} else {
	xx = -y;
}
console.log(xx);

8.2.3if多分支语句

if(条件表达式1){

语句或语句块1

}else if(条件表达式2){

语句或语句块2

}else{

语句或语句块3

}

var time = new Date();
var hour = time.getHours();
if (hour <= 11) {
	console.log("早上好");
} else if (hour <= 18) {
	console.log("下午好");
} else {
	console.log("晚上好");
}

8.2.4switch语句

switch(表达式){

case 取值1:语句或语句块1;

break;

case 取值2:语句或语句块2;

break;

case 取值3:语句或语句块3;

break;

default:语句或语句块n+1;

break;

}

var time = new Date();
var week = time.getDay();
switch (week) {
    case 1:
    case 2:
    case 3:
	case 4:	
	case 5:
	case 6:
		document.write("今天是" + week + "还是要努力工作啊");
		break;
	default:
		document.write("今天是星期天好好休息一下吧");
		break;
}

9.JavaScript流程控制语句——循环结构

9.1while循环

while(条件表达式){

语句或语句块

}

<!-- while循环 摄氏温度每次增加20度 所对应的华氏温度 10条 摄氏温度小于250度-->
<table border="1" width="100%">
	<tr align="center">
		<td>摄氏温度</td>
		<td>华氏温度</td>
	</tr>
	<script type="text/javascript">
		var f;
		var c=0;
		var count=1;
		while(count<=10 && c<=250){
			//转换
			f=c*9/5.0+32;
			document.write("<tr align='center'><td>"+c+"</td><td>"+f+"</td></tr>");
			c=c+20;
			count++;
		}
	</script>
</table>

9.2do-while循环语句

do{

语句或语句块

}while(条件表达式);

9.3for循环语句

for(初始化表达式;循环条件表达式;循环后的操作表达式){

语句或语句块

}

<!-- for循环 -->
<table border="1" width="100%">
	<tr align="center">
		<td>摄氏温度</td>
		<td>华氏温度</td>
	</tr>
	<script type="text/javascript">
		var ff;//华氏温度
		for(var cc=0,count1=1;count1<=10&&cc<=250;cc=cc+20,count1++){
			ff=cc*9/5.0+32;
			document.write("<tr align='center'><td>"+cc+"</td><td>"+ff+"</td></tr>");
		}
	</script>
</table>

9.4break语句和continue语句

break退出循环结构

continue结束本次循环，进入下次循环

二、JavaScript函数与事件

1.JavaScript自定义函数

1.1函数的定义

<script type="text/javascript">

function 函数名(形式参数1,形式参数2,...) {

语句

}

</script>

定义函数需遵守的规则：

a：使用function关键字，function后是函数名，函数不必说明返回值的类型

b：函数的命名规则与变量名的命名规则相同

c：函数名后的（），可以包含若干参数，也可以选择不带任何参数

d：最后是一对{}，包含具体实现特定功能的若干语句

1.2函数的调用

函数名（参数值）

<script type="text/javascript">
    function getArea(width,height) {
        var result=width * height;
        document.write("面积是："+area);
    }
</script>
<h1>
	长方形的长等于4，宽等于3，面积等于
	<script type="text/javascript">
		getArea(3,4);
	</script>
</h1>

1.3函数的参数

参数声明不需要关键字var，但参数的命名与变量命名规则相同

JavaScript中函数的参数具有以下特殊性:

a：函数声明了参数，调用时也可以不传递参数，这在其他编程语言中是会出现编译错误的

b：不管函数声明时有多少个参数，调用函数时可以传递若干个参数值给函数，并且实际传递的参数值还可以在函数内部获得

<script type="text/javascript">
    function getTotal() {
    var count;
    var sum = 0;
    count = arguments.length;
    for (var i = 0; i < count; i++) {
        sum = sum + arguments[i];
    }
    document.write(`总人数${count}，总工资为${sum}`);
    }
</script>
<h2>
    A公司:
    <script type="text/javascript">
        getTotal(3000, 2000, 3500, 6000);
    </script>
</h2>
		
<h2>
    B公司:
    <script type="text/javascript">
        getTotal(8000, 7000, 6500, 5000);
    </script>
</h2>

注:函数参数的长度：length是arguments对象的属性，表示函数被调用时实际传递的参数个数

1.4函数的返回值

return 返回值;

var result=函数(参数); 调用时

<script type="text/javascript">
    function getArea(width,height) {
        var result=width * height;
        return result;
    }
</script>
<h1>
	长方形的长等于4，宽等于3，面积等于
	<script type="text/javascript">
		var area=getArea(3,4);
        document.write(area);
	</script>
</h1>

1.5匿名函数

匿名函数就是没有名字的函数，也称为拉姆达函数，时一种使用JavaScript函数的强大方式。

匿名函数作参数：通常把匿名函数作为函数的参数传递，这种情况在jQuery中非常普遍

方式一：

<script type="text/javascript">
    function (width,height){
    }

</script>

<h1>
	长方形的长等于4，宽等于3，面积等于
    <script type="text/javascript">
        (function (width, height) {
            document.write( width * height);
    })(3,4);
</script>
</h1>

方式二：

<script type="text/javascript">
    var area=function (width,height){
         document.write( width * height);
    }
</script>

<h1>
	长方形的长等于4，宽等于3，面积等于
    <script type="text/javascript">
        area(3,4);
    </script>
</h1>

1.6变量的作用域

全局变量是在函数体外声明的，可以在任何地方包括函数的内部使用。

局部变量是在函数体内声明的，只能在函数体内使用，局部变量随着函数的结束而消失。

如果全局变量和局部变量出现重名的情况，局部变量优先，即无论局部变量的值怎么改变，全局变量的值不会受到影响

2.JavaScript系统函数

2.1parseInt()函数

将字符串转换为整数

例：150cast——150

cast——NaN

6——6

6.56——6

<script type="text/javascript">
    document.write(parseInt("234.6abc"));
</script>

2.2parseFloat()函数

返回的是一个浮点数

例：route66.5——NaN

8.5dog——8.5

6——6

.6——0.6

<script type="text/javascript">
    document.write(parseFloat("234.6abc.99"));
</script>
234.6

2.3isNaN()函数

判断参数是不是数字。如果不是数字，返回true，否则返回false

例:1234——false

wh——true

<script type="text/javascript">
    function rs () {
        var num1=document.getElementById("op1").value;
        var num2=document.getElementById("op2").value;
        if(num1.trim() !=