HTML---JavaScript基础

北 染 星 辰2024-01-07 17:43

目录

本章目标

一.JavaScript基础

概述

特点

[JavaScript 基本机构](#JavaScript 基本机构)

语法

网页中引用JavaScript的方式

[二. JavaScript核心语法](#二. JavaScript核心语法)

变量

​编辑

数据类型

数组

运算符号

控制语句

[​编辑 常用的输出/输入](#编辑 常用的输出/输入)

常用的系统函数

自定义函数

变量作用域

练习

本章目标

  • 掌握JavaScript的组成
  • 掌握JavaScript的基本语法
  • 会定义和使用函数
  • 会使用工具进行代码调试

一.JavaScript基础

概述

JavaScript是一种基于对象和事件驱动的脚本语言，用于在网页上实现交互和动态效果。它是一种客户端脚本语言，意味着它运行在用户的计算机上，而不是在服务器上。JavaScript可以与HTML和CSS配合使用，使网页更加动态和丰富。

特点

  • 向HTML页面中添加交互行为
  • 脚本语言，语法和JAVA类似
  • 解释性语言，边执行边解释

JavaScript 基本机构

语法

调用对象

语法：

对象.方法名();

案例

html 复制代码 
<!DOCTYPE html>
<html>
	<head>
		<meta charset="utf-8">
		<title></title>
		<script type="text/javascript">
            //对象.方法名();JavaScript调用方法的语法
            document.write("<h1>哈哈哈</h1>")
			document.write("这是JS基础！");
		</script>
	</head>
	<body>
	</body>
</html>

document.write("这是JS基础！");代表：调用对象(当前文件)，执行方法(写入)"这是JS基础！"语句，因此上述代码等价于在当前html文件写<body>中写入语句。

执行方法同样会执行标签，效果如下图。

网页中引用JavaScript的方式

二. JavaScript核心语法

变量

JavaScript中的变量可以存储不同类型的值，包括数字、字符串、布尔值、对象等。变量的值可以根据需要随时更改。

当我们用到某个数据时，可以将该数据存入变量中再引用该变量，无需重复写入该数据。

案例

html 复制代码 
<script type="text/javascript">
			//申明一个变量(名字自定义)
			var username = "JS基础";
			document.write("哈哈哈：" +username+"<br/>");//<br/>换行符
            //变量的重新赋值
			var username = "JavaScript基础";
			var index1 = "哈哈哈";
			document.write(index1+"："+username);
</Script>

数据类型

typeof运算符

案例：

html 复制代码 
<!DOCTYPE html>
<html>
	<head>
		<meta charset="utf-8">
		<title></title>
		<script type="text/javascript">
			document.write("<h2>对变量或值调用typeof运算符返回值：</h2>");
			var width,height = 10,name = "rose";
			var date = new Date(); //创建了一个Date类型的对象 并将对象在内存中的引用地址 赋给了变量date
			var flag = (11>22);
			var x = null;
			document.write("变量width的数据类型是===>"+typeof(width)+"<br/>");
			document.write("变量height的数据类型是===>"+typeof(height)+"<br/>");
			document.write("变量name的数据类型是===>"+typeof(name)+"<br/>");
			document.write("变量date的数据类型是===>"+typeof(date)+"<br/>");
			document.write("变量flag的数据类型是===>"+typeof(flag)+"<br/>");
			document.write("变量x的数据类型是===>"+typeof(x)+"<br/>");			
		</script>
	</head>
	<body>
	</body>
</html>

String数据类型

在JavaScript中，string（字符串）类型用于存储和操作文本数据。

案例 1：

string.length:返回对应字符串的长度。

html 复制代码 
<script type="text/javascript">
				var message ="白日依山尽，黄河入海流，欲穷千里目，更上一层楼";
				  x = message.length; //length属性返回的是字符串的长度
				document.write("x的值是："+x);
</script>

案例2：

string.charAt(index):返回指定位置的字符 注：计算机从0开始计数

html 复制代码 
<script type="text/javascript">
				var message ="白日依山尽，黄河入海流，欲穷千里目，更上一层楼";
				var y = message.charAt(3);
				document.write("y的值是==>"+x);
</script>

案例3

indexOf(str, index)：查找指定的字符串在字符中首次出现的位置。

html 复制代码 
<script type="text/javascript">
				var message ="白日依山尽，黄河入海流，欲穷千里目，更上一层楼";
				var z = message.indexOf("河");//返回指定字符串在目标第一次出现的位置
				document.write("z第一次出现的位置："+z);
</script>

案例4

substring(index1, index2):f返回区间 [index1,index2) 之间的字符

html 复制代码 
<script type="text/javascript">
				var message ="白日依山尽，黄河入海流，欲穷千里目，更上一层楼";
				var submessage = message.substring(0, 3);
				document.write("submessage的值是："+submessage+"<br/>");
				var submessage = message.substring(3);
				document.write("submessage的值是："+submessage);
</script>

案例5

split(str)将字符串分割为字符串数组

html 复制代码 
<script type="text/javascript">
			var message = "白日依山尽，黄河入海流，欲穷千里目，更上一层楼";
			var mlist = message.split("，");//以逗号为分隔符，将文本分割为字符串组
			for(var i in mlist){document.write("mlist["+i+"]："+mlist[i]+"<br/>");}
</script>

boolean数据类型

html 复制代码 
<script type="text/javascript">
			var flag=(10>100)
			document.write("flag是："+flag+"<br/>")
</Script>

数组

++案例：++

html 复制代码 
<script type="text/javascript">
			//var 数组名称 = new Array(长度)
			var ilist = new Array(8);//数组的创建
			ilist[0] = 15; //数组的赋值
			ilist[1] = 20;
			//数组的遍历
			document.write("ilist[0]的值是："+ilist[0]+"<br/>");
			document.write("ilist[1]的值是："+ilist[1]+"<br/>");
			document.write("剩余未赋值的数组的数据类型是："+typeof(ilist[2])+"<br/>");

			var fruit = new Array("apple", "orange", "peach", "banana");
			document.write(fruit[1]);
</script>

运算符号

++算数运算符案例：++

html 复制代码 
<script type="text/javascript">
		var x = 10;
		var y = 20;
		var z = x + y;
		var Z1 = x * y;
		var Z2 = x / y;
		var Z3 = x % 3;//取余数
		document.write("z的值是："+z+"<br/>");
		document.write("Z1的值是："+Z1+"<br/>");
		document.write("Z2的值是："+Z2+"<br/>");
		document.write("Z3的值是："+Z3+"<br/>")
		var a = 100;
		a++;
		document.write("a的值是："+a+"<br/>");;
		var b = 100;
		b--;
		document.write("b的值是："+b);	
</script>

++赋值运算符案例++

赋值运算符:将符号右边的值，赋给左边的变量。

html 复制代码 
<script type="text/javascript">
		var z = 10 ;
		z += 6;//在Z原有值上追加6
		document.write("z的值是："+z+"<br/>");
		z-=10;//在Z原有值上追减10
		document.write("Z的值是："+z+"<br/>");
</script>

逻辑运算符案例

与运算符(&&):两者都要满足条件 或运算符(||):其中之一满足条件即可。

html 复制代码 
<script type="text/javascript">
		var a = 5;
		var b = 10;
		if (a > 0 && b > 0)
		document.write("a和b都大于0"+"<br/>");
		var x = 5;
		var y = 10;
		if (x > 6|| y > 6);
		document.write("x或y大于6");
</script>

控制语句

++顺序运行结构案例++

html 复制代码 
<script type="text/javascript">
		document.write("这是顺序运行语句1"+"<br/>");
		document.write("这是顺序运行语句2"+"<br/>");
		document.write("这是顺序运行语句3");
</script>

++选择语法结构++：

语法：

html 复制代码 
if(条件){条件为真的时候执行代码...}
html 复制代码 
if(条件){条件为真的时候执行代码...}
else{条件为假时执行代码}
html 复制代码 
if(条件1){条件1满足执行此处代码}
else if(条件2){条件1不满足执行此处代码}
else if(条件3){条件2不满足执行此处代码}
html 复制代码 
switch(数值){case 值1:{break;} case 值2:{break;}...befault:{break;}}

案例

html 复制代码 
<script type="text/javascript">
		var a = 10;
		if(a>5){
			document.write("条件为真");
		}

        var b = 20;
		if(b>20){document.write("b的值大于20"+"<br/>");}
		else{document.write("b的值不大于20");}

        var c = 30;
		if(c<20){document.write("c的值小于20");}
		else if(c<25){document.write("c的值小于25");}
		else if(c>25){document.write("c的值大于25");}
		
        var num = 2;
		switch(num){
			case 1:{document.write("num的值和switch中case 1相同，num值为1"); break;}
			case 2:{document.write("num的值和switch中case 2相同，num值为2"); break;}
			default:{document.write("num的值和switch中case的值都不同"); break;}
		}
</script>

++循环结构++

语法

html 复制代码 
while(条件){条件为真，则循环执行此处代码}

for(var 初始值;范围限定;自增情况){达到范围之前，循环执行此处代码}

for(var 数值 in 数组){如果条件中的数值在条件中的数组中，则执行此处代码}

案例

html 复制代码 
<script type="text/javascript">
			document.write("下面是while循环案例"+"<br/>");
			var a = 1;
			while(a<=3){document.write(a+"<br/>");a++;}

			document.write("下面是for循环案例"+"<br/>")
			for(b=4;b<=6;b++){document.write(b+"<br/>");}

            document.write("下面是使用for in语句遍历数组的案例"+"<br/>")
			var fruit=["apple","orange","peach","banana"];
			for(var i in fruit){document.write("数组"+i+"的元素是："+fruit[i]+"<br/>");}
</script>

++循环中断结构++

语法

html 复制代码 
break：循环到此结束，不继续执行下面的循环

continue：跳过此循环，继续执行下面的循环

案例

html 复制代码 
<script type="text/javascript">
			var i = 0;
			for(i=0;i<=6;i++){
			if(i==3){document.write("continuet跳过的元素是"+i+"<br/>");continue;}
			if(i==5){document.write("break在元素等于"+i+"时终止循环"+"<br/>");break;}
			 document.write("这个数字是："+i+"<br/>")
			 }
</script>

常用的输出/输入

语法

html 复制代码 
alert("提示信息");

prompt("提示信息","输入框的默认颜色")；

alert 语法：用于写入窗口提示信息。

prompt语法：可以使从窗口提示栏输入框将内容写入网页中。

html 复制代码 
<script type="text/javascript">
			alert("此处显示窗口提示信息");
			var message=prompt("请在输入框中输入内容");
			document.write("输入的内容是"+message);
</script>

常用的系统函数

从浏览器输入框中输入的所有内容数据类型都是文本类型，如86也是文本类型并非数值类型

因此需要通过系统函数进行数据类型的转换。

使用浏览器文本框进行四则运算案例

html 复制代码 
<script type="text/javascript">
			var num1 = prompt("输入第一个数字");
			var num2 = prompt("输入运算符号");
			var num3 = prompt("输入第二个数字")
			var innum1 = parseInt(num1);
			var innum2 = parseInt(num3);
			switch(num2){
				case "+":{alert(num1+"+"+num3+"="+(innum1+innum2));break;}
				case "-":{alert(num1+"-"+num3+"="+(innum1-innum2));break;}
				case "*":{alert(num1+"*"+num3+"="+(innum1*innum2));break;}
				case "/":{alert(num1+"/"+num3+"="+(innum1/innum2));break;}
				default:{document.write("输入的符号错误！！！");break;}
			}
</script>

自定义函数

注：自定义函数的函数名不能和内置函数名重合，否则无法生效。
使用以下函数可通过对应操作调用函数 。

html 复制代码 
<!DOCTYPE html>
<html>
	<head>
		<meta charset="utf-8">
		<title></title>
		<script type="text/javascript">
			function fun1(){
				
				var num1 = prompt("输入第一个数字");
				var num2 = prompt("输入运算符号");
				var num3 = prompt("输入第二个数字")
				var innum1 = parseInt(num1);
				var innum2 = parseInt(num3);
				switch(num2){
					case "+":{alert(num1+"+"+num3+"="+(innum1+innum2));break;}
					case "-":{alert(num1+"-"+num3+"="+(innum1-innum2));break;}
					case "*":{alert(num1+"*"+num3+"="+(innum1*innum2));break;}
					case "/":{alert(num1+"/"+num3+"="+(innum1/innum2));break;}
					default:{document.write("输入的符号错误！！！");break;}
				}
			}
			function fun2(uname){alert(uname+"大讲堂开始了");fun1();}
		</script>
	</head>
	<body>
		<p>下面是无参数的自定义函数案例</p>
		<input type="button" value="点我进入四则运算器" onclick="fun1()"/><br/>
		<p>下面是有参数的自定义函数案例</p>
		<input type="button" value="点我进入第二个方法" onclick="fun2('此处的元素将被赋值给uname')"/>
	</body>
</html>

变量作用域

在JavaScript中，变量的作用域指的是变量的可访问性和可见性的范围。

|-------|------------------------------------------|
| 全局作用域 | 在任何函数外部定义的变量具有全局作用域，这意味着它们可以在代码中的任何位置访问。 |
| 局部作用域 | 函数内部定义的变量具有函数作用域，这意味着它们只能在函数内部访问。 |
| 块级作用域 | 在块级作用域内定义的变量只在该块级作用域内可见，外部无法访问。 |
[变量作用域]

html 复制代码 
<!DOCTYPE html>
<html>
	<head>
		<meta charset="utf-8">
		<title></title>
		<script type="text/javascript">
			var i = 20;//这是全局变量
			function first(){
				var i = 5 ;//这是局部变量
				for (var j = 0;j<i;j++){document.write("&nbsp;&nbsp;&nbsp;&nbsp;"+j);}
			}
			function second(){
				var t = prompt("输入一个数字");
				if(t>i){document.write(t);}
				else{document.write(i);first();}
			}
		</script>
	</head>
	<body onload="second()"><!--onload="second()":主体加载则立即触发second函数-->
		
	</body>
</html>

练习

相关推荐
masa01030 分钟前
JavaScript--JavaScript基础
开发语言·javascript
让开，我要吃人了2 小时前
HarmonyOS开发实战（5.0）实现二楼上划进入首页效果详解
前端·华为·程序员·移动开发·harmonyos·鸿蒙·鸿蒙系统
everyStudy4 小时前
前端五种排序
前端·算法·排序算法
甜兒.5 小时前
鸿蒙小技巧
前端·华为·typescript·harmonyos
她似晚风般温柔7897 小时前
Uniapp + Vue3 + Vite +Uview + Pinia 分商家实现购物车功能（最新附源码保姆级）
开发语言·javascript·uni-app
Jiaberrr8 小时前
前端实战：使用JS和Canvas实现运算图形验证码（uniapp、微信小程序同样可用)
前端·javascript·vue.js·微信小程序·uni-app
everyStudy8 小时前
JS中判断字符串中是否包含指定字符
开发语言·前端·javascript
城南云小白8 小时前
web基础+http协议+httpd详细配置
前端·网络协议·http
前端小趴菜、8 小时前
Web Worker 简单使用
前端
web_learning_3219 小时前
信息收集常用指令
前端·搜索引擎
热门推荐
01软件工程从理论到实践客观题汇总(头歌第一章至第八章)02RAG 实践- Ollama+RagFlow 部署本地知识库032024年高教社杯数学建模国赛C题超详细解题思路分析04【halcon】halcon字符识别——OCR05组基轨迹建模 GBTM的介绍与实现（Stata 或 R）06【2024数模国赛赛题思路公开】国赛B题思路丨附可运行代码丨无偿自提072024年网络安全比赛--系统渗透测试（超详细）08苍穹外卖面试总结09【2024高教社杯全国大学生数学建模竞赛】B题 生产过程中的决策问题——解题思路 代码 论文10分享几个惊艳的 Three.js 个人站点