Web05--JavaScript基础1

憨憨浩浩

于 2024-01-22 15:37:27 发布

阅读量1k

点赞数 23

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

本文链接：https://blog.csdn.net/weixin_46612641/article/details/135715218

版权

Web 专栏收录该内容

11 篇文章 0 订阅

订阅专栏

1、JavaScript概述

1.1 JavaScript简介

一门客户端脚本语言，运行在客户端浏览器中的。每一个浏览器都有JavaScript的解析引擎，不需要编译，直接就可以被浏览器解析执行了

1.2 JavaScript的发展史

起源：上世纪末1995年时，Netscape（网景）公司推出Navigator浏览器。发布后用的人不多，这咋整啊？这家公司就想了一个好方案，不仅在浏览器实现静态HTML，还想要有动态效果，比如：在前端处理表单验证。
动手：有目标就去做，网景公司大牛多，Brendan Eich（布兰登·艾奇）据说就用了10天就把JavaScript搞了出来，刚出来时叫LiveScript，为了蹭蹭当红明星Java热度，就改成JavaScript了（瞬间就火了），事实上他们两没啥关系。
竞争：看到网景公司有了js，微软感觉不行啊，我的IE要被干掉啊，同时也感到js的前途无量，于是参考JavaScript弄了个名为JScript浏览器脚本语言。
标准： Netscape和微软竞争出现的js导致版本的不一致，随着业界的担心，JavaScript的标准化被提上议事日程。ECMA（欧洲计算机制造商协会）组织就去干这事，最后在1997年弄出了ECMAScript作为标准。这里ECMAscript和JavaScript可以看做表达的同一个东西。

1.3 JavaScript的功能

可以来增强用户和html页面的交互过程，可以来控制html元素，让页面有一些动态的效果，增强用户的体验。

1.4 JavaScript特点

js源码不需要编译，浏览器可以直接解释运行
js是弱类型语言，js变量声明不需要指明类型

1.5 JavaScript组成

组成部分	作用
ECMA Script	构成了JS核心的语法基础
BOM	Browser Object Model 浏览器对象模型，用来操作浏览器上的对象
DOM	Document Object Model 文档对象模型，用来操作网页中的元素（标签）

2、JavaScript基础语法

2.1 JS引入方式

2.1.1 内部引入

定义script标签，标签体内容就是js代码

<!DOCTYPE html>
<html>
	<head>
		<meta charset="utf-8">
		<title>JS引入方式</title>
		<script>
			// 内部引入
			alert("hello");
		</script>
	</head>
	<body>
		hello world
	</body>
</html>

注意事项

2.1.2 外部引入

定义<script>，通过src属性引入外部的js文件

demo.js

alert("hello world");

<!DOCTYPE html>
<html>
	<head>
		<meta charset="utf-8">
		<title>JS引入方式</title>
		<!-- 外部引入 -->
		<script src="./js/demo.js"></script>
	</head>
	<body>
		hello world
	</body>
</html>

注意：

script标签不能自闭合
如果script标签使用src属性，那么浏览器将不会解析此标签体的js代码

2.2 JS三种输出方式

<!DOCTYPE html>
<html>
	<head>
		<meta charset="utf-8">
		<title>JS输出方式</title>
	</head>
	<body>
		
		
		<script>
			// 弹框输出
			alert("hello");
			
			// 控制台输出
			console.log("hello world");
			
			// 页面输出
			document.write("hello");
		</script>
	</body>
</html>

2.3 JS注释

<!DOCTYPE html>
<html>
	<head>
		<meta charset="utf-8">
		<title>JS输出方式</title>
	</head>
	<body>
		
		
		<script>
			// 弹框输出  --这是单行注释
			alert("hello");
			
			/* 控制台输出  --这是多行注释 */
			console.log("hello world");
			
			// 页面输出
			document.write("hello");
		</script>
	</body>
</html>

2.4 JS变量声明

java是强类型语言，注重变量的定义，所以在定义变量时都需要指定数据类型。

js是弱类型语言，不注重变量的定义，所以在定义变量时不需要指定数据类型。

<!DOCTYPE html>
<html>
	<head>
		<meta charset="utf-8">
		<title>变量和常量</title>
	</head>
	<body>
		<script>
			// 声明变量
			var a = 1;
			var b = "12";
			console.log(a);
			console.log(b);
			
			let c = 1;
			let d = "12";
			console.log(c);
			console.log(d);
			
			/* 
			 var与let的区别
			 使用 var 声明的变量可以重复声明，使用 let 声明的变量不可以
			 var 相当于局部变量，let 相当于全局变量
			 */
			
			
			// 声明常量
			const PI = 3.14;
			console.log(PI)
		</script>
	</body>
</html>

2.5 JS数据类型

js与java一样，数据类型分为基本数据类型(原始数据类型) 和引用数据类型

属性	描述
number	数字类型,不区别整数和小数
string	字符串类型，不区别单双串
boolean	true/false
object	对象(function、null)
undefined	未定义

类型判断

typeof 判断数据类型

语法： typeof 变量

<!DOCTYPE html>
<html>
	<head>
		<meta charset="utf-8">
		<title>数据类型</title>
	</head>
	<body>
		
		<script>
			
			// 数值型--number
			var num = 11;
			console.log(typeof num);
			
			// 字符串型--string
			var str = "hello";
			console.log(typeof str);
			
			// 布尔类型--boolean
			var bl = true;
			console.log(typeof bl);
			
			// 对象型--object
			var date = new Date();
			console.log(typeof date);

			// 空类型
			
			// 未定义类型--undefined
			var mess;
			console.log(typeof mess);
			
		</script>
		
	</body>
</html>

2.6 字符串与数字转换

<!DOCTYPE html>
<html>
	<head>
		<meta charset="utf-8">
		<title>类型转换</title>
	</head>
	<body>
		<script>
			
			// string --> number
			var str = "1123";
			console.log( typeof str)
			var a = Number(str);
			console.log(typeof a);
			
			// number --> string
			var num = 12;
			console.log( typeof num)
			var s = String(num);
			console.log(typeof s);
			
		</script>
	</body>
</html>

2.7 JS运算符

JavaScript中的运算符和大多数编程语言中的运算符都接近，只有个别运算符因其灵活性而带来了些许不同

运算符	说明
算数运算符	+、 - 、*、 / 、% 、 ++ 、 --
赋值运算符	= 、+= 、-= 、 *= 、 /= 、 %=
比较运算符	> 、 >= 、 < 、 <= 、 == 、 ===(全等于,仅js) 、 !=
逻辑运算符	&& 、 \|\| 、 !、&、\|
三元运算符	关系表达式 ? 值1 : 值2;

2.7.1 算数运算符

在js中数值可与字符串进行数学运算，底层实现隐式转换。

<!DOCTYPE html>
<html>
	<head>
		<meta charset="utf-8">
		<title>算术运算符</title>
	</head>
	<body>
		<script>
			/* 
			 JS算术运算符的注意点
			 1.JS中减法运算会得出小数
			 2.纯数值的字符串可以参与运算，但是加法运算是字符串拼接
			 3.非纯数值的字符串与数字参与非加法运算得出NAN(Not A Number)
			 4.boolean类型可以参与运算
			 */

			var str = "11";
			var num = 22;
			
			console.log(str + num);
			console.log(str - num);
			console.log(str * num);
			console.log(str / num);
			
			var s = "hello";
			console.log(s - num);
			
			var bl1 = true;		// 1
			var bl2 = false;	// 0
			console.log(bl1 + num);
			console.log(bl2 + num);
		</script>
	</body>
</html>

2.7.2 比较运算符

<!DOCTYPE html>
<html>
	<head>
		<meta charset="utf-8">
		<title>比较运算符</title>
	</head>
	<body>
		<script>
			
			/* 
			 == 与 === 的区别
			 
			 == : 只比较内容是否相同  根本不比较数据类型 
			 ===：全等于。在比较之前，先判断类型，如果类型不一样，则直接返回false
			 */
			
			var str = "111";
			var num = 111;
			
			console.log(str == num);
			console.log(str === num);
			
		</script>
	</body>
</html>

2.7.3 逻辑运算符

<!DOCTYPE html>
<html>
	<head>
		<meta charset="utf-8">
		<title>逻辑运算符</title>
	</head>
	<body>
		
		<script>
			var a = 20;
			var b = 50;
			var c = 30;
			
			console.log(a>b && b>c);
			console.log(a>b || b>c);
			console.log(!(a>b));
			
			console.log(a>b & b>c);
			console.log(a>b | b>c);
		</script>
	</body>
</html>

2.7.4 三元运算符

<!DOCTYPE html>
<html>
	<head>
		<meta charset="utf-8">
		<title>三元运算符</title>
	</head>
	<body>
		
		<script>
			
			/* 
			 在js中表达式不必满足boolean
			 如果满足的 非0 ，非null， 非undefined 为true
			 如果满足的 是0 ，是null , 是undefined 为false
			 */
			var a = 3;
			var b = 4;
			
			console.log((a>b)?a:b);
			
			console.log((c = 1)?a:b);
			console.log((c = 0)?a:b);
		</script>
	</body>
</html>