44-javaScript

最新推荐文章于 2022-10-31 08:05:43 发布

挣扎的您我

最新推荐文章于 2022-10-31 08:05:43 发布

阅读量196

点赞数

CC 4.0 BY-SA版权

本文链接：https://blog.youkuaiyun.com/weixin_44614066/article/details/89241394

本文全面介绍了JavaScript的基础知识，包括语言的由来、引入方式、核心语法如变量、数据类型、字符串操作、数组、运算符、选择与循环结构，以及输入输出和自定义函数的使用。适合初学者快速掌握JavaScript的基本应用。

摘要生成于 C知道，由 DeepSeek-R1 满血版支持，前往体验 >

一、javaScript介绍
Java Script(脚本) -> LiveScript -> 蹭热度 -> JavaScript Sun公司 -> Oracle公司 Java 它俩的关系就像雷锋和雷峰塔 JavaScript是一门基于对象和事件驱动的[脚本语言]（面向对象<原型prototype>的编程语言）。脚本语言：无需编译 php python… 边解释边执行可以给HTML添加交互行为

二、js的引入方式


<!DOCTYPE html>
<html>
	<head>
		<meta charset="UTF-8">
		<title></title>
	</head>
	<body>
		<!--
			CSS:
				1.行内样式表  style="width:xxpx;..."
				2.内部样式表  <style></style>
				3.外部样式表   .css文件   <link>引入到HTML中
			JS:
				1.内部脚本 <script></script>
				2.外部脚本  .js文件  <script src=""></script>
				3.行内脚本  它需要借助事件
					事件：交互行为   例如：鼠标悬浮事件、鼠标移除事件、键盘按下事件
							键盘松开事件、页面加载事件、鼠标单击事件、鼠标双击事件...
		-->
		<!-- alert() 可以在浏览器窗口弹出提示框 -->
		<!--<input type="button" value="点我啊！！！" "javascript:alert('就点你！！');" />-->
		<!--<input type="button" value="点我啊！！！" "alert('就点你！！')" />-->
		<input type="button"  value="清除缓存" "alert('清除成功！请放心使用！')" />
		
		<script src="js/index.js" type="text/javascript" charset="utf-8"></script>
	</body>
</html>
------------------------------------------------------------------------------------
另一个文件中的js文件中的一个文件,通过引入的方式来进行去另一个html 中进行引用
document.write("我是外部JS文件");

三、js核心的语法

1.变量

<!DOCTYPE html>
<html>
	<head>
		<meta charset="UTF-8">
		<title></title>
	</head>
	<body>
		
		<script type="text/javascript">
			
			/*
			 * Java：
			 * 	1.先声明再赋值
			 * 		数据类型  变量名;
			 * 		变量名 = 变量值;
			 *  2.声明并赋值
			 * 		数据类型  变量名 = 变量值;
			 */
			// JS 先声明 再  赋值
			var name;
			name = "小韩";
			
			// JS 声明并赋值
			var age = 10;
			
			// 不声明直接赋值(不推荐)
			// gender = "男"
			document.write("<strong>姓名：</strong>"+name
			              +"<br/><strong>年龄：</strong>"+age
			              +"<br/><strong>性别：</strong>"+gender);
		</script>
	</body>
</html>
-----------------------------------------------------------------------------------
2.数据类型

<!DOCTYPE html>
<html>
	<head>
		<meta charset="UTF-8">
		<title></title>
	</head>
	<body>
		<script type="text/javascript">
			
			/*
			 * Java数据类型：
			 * 		数值：byte short int long float double
			 * 		非数值：char boolean String
			 * 
			 * 		基本数据类型：byte short int long float double char boolean
			 * 		引用数据类型：数组、类(String)、接口、枚举...
			 */
			/* JS的数据类型：
			 	undefined：未定义   只声明却未赋值就是undefined
			 	null：做判断时 和 undefined是相等的
			 	number：数值类型  整数  小数
			 	boolean：布尔类型   true  false
			 	string：字符串类型   包含着''  ""
			 	object：对象类型
			 */
			
			var classId; 
			// alert(typeof classId); // undefined
			// alert(typeof null); 历史遗留问题 导致 返回object类型
			// alert(typeof 10.1); //number 
			// alert(typeof 20) // number
			// alert(typeof false); // Python：True  False
			// alert(typeof 'xxx'); string
			// alert(typeof "xxx"); string
			
			// 面向原型的面向对象
			var array = new Array();
			var str = new String();
			alert(typeof array);
		</script>
	</body>
</html>
----------------------------------------------------------------------------------
3.字符串常用操作

<!DOCTYPE html>
<html>
	<head>
		<meta charset="UTF-8">
		<title></title>
	</head>
	<body>
		
		<script type="text/javascript">
			
			var str1 = "Hello World";
			// length属性 获取字符串长度
			// Java：length();
			// alert(str1.length);
			
			// 返回指定索引位置的字符  索引从0开始
//			alert(str1.charAt(4));

			// 返回字符串中检索指定字符第一次出现的位置
//			alert(str1.indexOf("o"));
			
			// 提取字符串中两个指定的索引号之间的字符  [startIndex,endIndex)
//			alert(str1.substring(0,5));
			
			// 从某个索引开始 指定长度的子字符串
//			alert(str1.substr(0,2));
			
			// 把字符串分割为子字符串数组
			var arr = "hello_world_你好_世界".split("_");
			alert(arr[0]);
			alert(arr[1]);
			alert(arr[2]);
			alert(arr[3]);
			
		</script>
	</body>
</html>
-----------------------------------------------------------------------------
4.数组

<!DOCTYPE html>
<html>
	<head>
		<meta charset="UTF-8">
		<title></title>
	</head>
	<body>
		
		<script type="text/javascript">
			
			// 数组的定义
			/*var arr1 = new Array(3);
			arr1[0] = "视觉";
			arr1[1] = "中国";
			arr1[2] = "版权";*/
			
			/*var arr1 = new Array("视觉","中国","版权");
			
			alert(arr1[0]);
			alert(arr1[1]);
			alert(arr1[2]);*/
			
			// JSON(报文)数组
			var arr = ["视觉","中国","版权"];
			/*alert(arr[0]);
			alert(arr[1]);
			alert(arr[2]);*/
			
			alert(arr.length);
			
			var str = arr.join("~");
			alert(str);
		</script>
	</body>
</html>
--------------------------------------------------------------------------------
5.运算符号

<!DOCTYPE html>
<html>
	<head>
		<meta charset="UTF-8">
		<title></title>
	</head>
	<body>
		
		<script type="text/javascript">
			
			
			// == !=
			/*var num1 = 10;
			var num2 = 10;
			alert(num1 != num2);*/ // false
			
			// 在字符串和数值进行比较时/计算 会自动将字符串转换为数值
			var num1 = "10";
			var num2 = 10;
			// alert(num1 == num2); // true
			alert(num1 - 9); // 1
			
			// 凡是与字符串用+号拼接的 都变成了字符串
			alert(num1 + 9); // 109
			
			// Java：equals()
			/*var num1 = "10";
			var num2 = "100";
			alert(num1 == num2); // false*/
		</script>
	</body>
</html>
-----------------------------------------------------------------------------
5运算符号2

<!DOCTYPE html>
<html>
	<head>
		<meta charset="UTF-8">
		<title></title>
	</head>
	<body>
		<script type="text/javascript">
			
			var num1 = "10";
			var num2 = 10;
			var num3 = "9";
			// alert(num1 == num2); // 比较内容
			// alert(num1 === num2); // 全等：既比较内容 又比较数据类型
			alert(num1 === num3); 
		</script>
	</body>
</html>
----------------------------------------------------------------------------
6.选择结构

<!DOCTYPE html>
<html>
	<head>
		<meta charset="UTF-8">
		<title></title>
	</head>
	<body>
		
		<script type="text/javascript">
			
			/*
			 * 
			 * Java:
			 * 	基础if：
			 * 		if(){
			 * 	
			 * 		}
			 * 	互斥if：
			 * 		if(){
			 * 	
			 * 		}else{
			 * 	
			 * 		}
			 *  多重if：
			 * 		if(){
			 * 	
			 * 		}else if(){
			 * 	
			 * 		}else{
			 * 		
			 * 		}
			 *  嵌套if：
			 * 		if(){
			 * 			if(){
			 * 	
			 * 			}
			 * 		}
			 * 
			 * switch(){
			 * 	case 常量1:
			 * 		break;
			 *  ....
			 * 	default:
			 * 		break;
			 * 
			 * }
			 * 	
			 * 
			 */
			
			// 进火车站
			var hasTicket = 1; // 0表示无票  1表示有票			
			var lengthOfKnife = 8; // 刀子长度
			
			// 1.安检：刀子长度不能大于9cm
			if(lengthOfKnife <= 9){
				alert("通过安检！进站！");
				// 2.检票：有票才能乘车
				if(hasTicket == 1){
					alert("可以乘车！");
				}else{
					alert("无票不允许乘车！");
				}
			}else{
				alert("没收管制刀具，登记备案！");
			}
			
		</script>
	</body>
</html>
--------------------------------------------------------------------
7.循环结构

<!DOCTYPE html>
<html>
	<head>
		<meta charset="UTF-8">
		<title></title>
	</head>
	<body>
		
		<script type="text/javascript">
			
			/*
			 * Java：
			 * while(){
			 * 	
			 * }
			 * 
			 * do{
			 * 	
			 * }while();
			 * 
			 * for(int i = 0; i< xxx; i++){
			 * 	
			 * }
			 * 
			 * for(数据类型 变量名 : 要遍历的数组/集合){
			 * 	
			 * }
			 * 
			 */
			
			// JS  普通for循环
			var arr = ["小1","小2","小3"];
			/*for (var i = 0; i < arr.length; i++) {
				alert(arr[i]);
			}*/
			var i = 0;
			
			while(i < arr.length){
				alert(arr[i]);
				i++;
			}
		</script>
	</body>
</html>
---------------------------------------------------------------------
8.输入和输出

<!DOCTYPE html>
<html>
	<head>
		<meta charset="UTF-8">
		<title></title>
	</head>
	<body>
		<script type="text/javascript">
			
			// prompt() 可以弹出带有一个文本输入框的提示信息
			// p1：提示内容
			/*var name = prompt("请输入您的姓名：");*/
			
			// p2：文本框的默认值
			var name = prompt("请输入您的姓名：","xx");
			alert("您输入的姓名："+name);
			
		</script>
	</body>
</html>
-------------------------------------------------------------------------
8.2输入和输出

<!DOCTYPE html>
<html>
	<head>
		<meta charset="UTF-8">
		<title></title>
	</head>
	<body>
		
		<script type="text/javascript">
			
			// 四则运算 
			// +法
			// -法
			
			// 提示输入第一个整数   和  第二个整数    实现加法运算
			
			// 将字符串转换为整数  parseInt()
			/*var num1 = parseInt(prompt("请输入第一个整数：")); // 它返回的结果数据 为string类型
			var num2 = parseInt(prompt("请输入第二个整数："));
			alert(num1+" + "+num2+"的结果为："+(num1+num2));*/
			
			var num1 = prompt("请输入第一个数：") - 0;
			var num2 = prompt("请输入第二个数：") - 0;
			alert(num1+num2);
		</script>
	</body>
</html>
----------------------------------------------------------------------------
9.自定义函数和方法

<!DOCTYPE html>
<html>
	<head>
		<meta charset="UTF-8">
		<title></title>
	</head>
	<body>
		
		<!-- onblur 失去焦点事件 -->
		<!--<input type="text" id="" value="" "method3(this.value)" />-->
		<!--<input type="button" name="" id="" value="点我" "method1()" />-->
		<script type="text/javascript">
			
			/*
			 * public void 方法名(){
			 * 	
			 * }
			 * 
			 * public 返回值类型 方法名(){
			 * 	
			 * }
			 * 
			 * public void 方法名(参数列表){
			 * 	
			 * }
			 * 
			 * public 返回值类型 方法名(参数列表){
			 * 	
			 * }
			 */
			
			/*
			 * JS函数语法：
			 * 	function 方法名(参数列表){
			 * 		// 
			 * 		[return ...]
			 *  }
			 */
			
			// 无参无返
			/*function method1(){
				alert("呵呵");
			}*/
			// method1(); // 调用
			
			// 无参有返
			/*function method2(){
				alert("呵呵");
				return "蔡徐坤";
			}
			
			var name = method2();
			alert(name);*/
			
			// 有参无返
			/*function method3(var num1,var num2){
				
			}*/
			
			/*function method3(val){
				alert(val);
			}*/
			
			// method3("呵呵 纪检委来了！");
			
			// 有参有返
			function method4(val){
				return val;
			}
			
			
			var v = method4("一刀999");
			alert(v);
			
			/*
			 * python：  def:define  function
			 * 		def 方法名(参数列表):
			 * 			# 方法体
			 */
		</script>
	</body>
</html>