Web05--JavaScript基础1

发布时间：2024年01月22日

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>

注意事项

<script>标签可以写在任意位置，推荐写在<body>的尾部。浏览器在执行时，是从下往下依次执行！

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>

注意：

  1. script标签不能自闭合
  2. 如果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>
文章来源:https://blog.csdn.net/weixin_46612641/article/details/135715218
本文来自互联网用户投稿，该文观点仅代表作者本人，不代表本站立场。本站仅提供信息存储空间服务，不拥有所有权，不承担相关法律责任。
最新文章