1.介绍JS的基本概念——day01

最新推荐文章于 2022-10-21 23:19:40 发布

小周日记

最新推荐文章于 2022-10-21 23:19:40 发布

阅读量149

点赞数 1

分类专栏： JavaScript学习文章标签： javascript

本文链接：https://blog.csdn.net/actores/article/details/115231920

版权

JavaScript学习专栏收录该内容

22 篇文章 1 订阅

订阅专栏

一、基本概念
1.JavaScript是一种专为与网页交互而设计的脚本语言，（由三个不同的部分组成）
a、ECMAScript提供核心语言功能；
b、文档对象模型（DOM），提供访问和操作网页内容的方法和接口（也就是：整个html为一个文档，DOM提供的方法和接口可以对网页进行操作）
c、浏览器对象模型（BOM），提供与浏览器交互的方法和接口。（这个是对浏览器）

2.包含在 script 元素内部的JavaScript代码将会被从上至下依次解释。拿函数来解释：解释器会解释这个函数的定义，然后将该定义保存到自己的环境中。在解释器对script元素内部的所有代码求值完毕以前，页面中的其余内容都不会被浏览器加载或者显示

二、基本概念+代码
1.三条输出语句

<!DOCTYPE html>
<html>
	<head>
		<meta charset="utf-8" />
		<title></title>
		<!--js的一个写入格式script-->
		<script type="text/javascript">
			/*1.弹出框警告框*/
			alert("这是我的第一行js代码！！");
			
			/*2.空间计算机输出指令
			document就是指浏览器当做一个文档
			调用方法write输出文字*/
			document.write("你看我出不出来~~");
			
			/*3.控制台调用方法log输出在控制台*/
			console.log("你看我在哪出来~~");
			 
			//这三条语句都叫输出语句
//1.函数
		function.sayHi(){
			alert("Hi");
		}			
		</script>
	</head>
	<body>
	</body>
</html>

2、js的编写位置

<!DOCTYPE html>
<html>
	<head>
		<meta charset="UTF-8">
		<title></title>
		
<!--第二种：层叠样式
			<script type="text/javascript"></script>-->
		
<!--第三种:外部引入文件script.js，利用浏览器的缓冲机制，可以推荐使用	
			注意：一旦引用外部的js文件，script中就不能写入其他代码，即使写入浏览器也不会显示
			如果有需要就重新再写一个不引用的script即可
		-->
		<script type="text/javascript" src="js/script.js"></script>
	</head>
	<body>
		<!--js的编写位置（3种位置）-->
		
<!--第一种：标签内联式
			1.可以将js代码编写到标签的onclick属性中
			当我们点击按钮的时候，js代码才会执行
			
			注意：这里body里面的onclick使用单引号"''"单引号被双引号嵌套
		-->
		<button onclick="alert('你点我干嘛~~');">点我一下</button>
		<!--可以将js代码写在超链接的href中，但是先声明（JavaScript）是js代码-->
		<a href="JavaScript:alert('让你点你就点啊~~~~')">你也点我一下</a>
		<!--通过js来处理一些功能，所以在这里先声明一下-->
		<a href="JavaScript:;">你也点我我也不动</a>
		
		<!--
			总结：这样虽然可以写在他们的标签中，
			但是他们属于结构和行为耦合
			（使用的时候还是得单独设置结构和行为分开，这样后期维护和独立性也必将好一点），
			不方便维护，不推荐使用
		-->
		
		<!--三种方式的复习-->
		<!--<button onclick="alert("第一次复习");"></button>-->
		<!--<script type="text/javascript"> ………… </script>-->
		<!--<script type="text/javascript" src="js文件"></script>-->
		
	</body>
</html>

3、js的基本语法理解

<!DOCTYPE html>
<html>
	<head>
		<meta charset="UTF-8">
		<title></title>
		<script type="text/javascript">
			//单行注释
			/*多行注释*/
			
			/*1.JS中严格区分大小写
			 *2.JS中语句结束必须要结束，使用分号结尾;(可以不写，浏览器帮你，但是会消耗系统资源)
			 *3.JS会忽略多个换行和空格，可以使用来进行代码美化
			 * */
			//常量(字面量)和变量
			/*1.常量(字面量：都是一些不可改变的值)
			 * 	比如：1 2 3 4 5
			 * 	字面量都是可以直接使用，但是一般都不会直接使用
			 *2.变量 变量可以用来保存常量（字面量），而且变量的值是可以任意改变的
			 * 	变量使我们更加方便，所以在开发中都是通过变量去保存一个常量的（字面量）
			 *  而很少使用字面量
			 *  变量可以使用来对数字进行描述
			 * */
			//使用方法：
			
			/*1.声明变量 var=a;
			 *2.使用js中的关键字var来声明一个变量
			 *3.为变赋值
			 * */
			var = a;//声明变量 
			a=123;//为变赋值
			a=456;//为变赋值
			
			/*第二种：声明和变量同时进行
			 var b=789；
			 */
			var b=110;
			
				
		</script>
	</head>
	<body>
	</body>
</html>

4、js的标识符以及基本语法

<!DOCTYPE html>
<html>
	<head>
		<meta charset="UTF-8">
		<title></title>
		<script type="text/javascript">
			/*
			 标识符：
			 *  在JS中所有的可以由我们自主命名的都可以称为是标识符
			 * 	例如：变量名、函数名、属性名等都属于标识符
			 * 	规则：
			 * 		字母、数字、下划线、$ ：数字不能开头
			 * 		标识符不能是ES(js)中的关键字和保留字（就是已经被用的的）
			 * 		标识符一般都采用驼峰命名法（首字母小写，后面单词开头大写helloWrold）(规范)
			 */
			/*var a = 123;
			document.write(a);*/
			
			/*
			 数据类型：指的就是常量的类型
			 * 	在JS中一共有6种数据类型
			 * 		String 字符串 = "使用双引号号"
			 * 		Number 数值
			 * 		Boolean 布尔值
			 * 		Null   空值
			 * 		Undefined 未定义
			 * 		Object   对象
			 * 
			 * 基本数据类型：String Number Boolean Null Undefined 
			 * 引用数据类型: Object 
			 * 
			 * 
			 * */
	
			/*
			 String 字符串
			 * 	- 在JS中的字符串需要使用引号引起来
			 *  - 使用双引号和单引号都可以，但是不要混着用
			 *  - 引号不能嵌套，双引号不能放双引号，单引号不能放单引号（但是双引号可以嵌套单引号：优先级的问题）
			 * 
			 * 
			 * 
			 * */
			var str1="我说今天天气真不错";
			//但是var str1="我说:"今天天气真不错" ";是实现不了的
			//所以需要转义字符，把特殊的""转换为普通的"":
			var str3="我说:\"今天天气真不错\"";		
			/*
			 \"  表示"
			 \'  表示'
			 \n  换行
			 \t  制表符(tab键)
			 \\  表示\(4个出两个  6个出三个)
			 * */
			\ 表示转义字符
			var str2 = "hello"
			console.log(str);
			//console.log("hello");字符串：输出当前结果hello
			//console.log(hello);变量 ：输出hello里面的内容
			//只要声明就可以无限次使用，不用再次声明，然后str（变量）同名会覆盖之前的
		</script>
	</head>
	<body>
	</body>
</html>

5、js的Number基本

<!DOCTYPE html>
<html>
	<head>
		<meta charset="UTF-8">
		<title></title>
		<script type="text/javascript">
			/*
			 在JS中所有的数据都是Number基本数据类型
			 * 	包括整数和浮点数(小数)
			 * 
			 *  JS中可以表示的数字的最大值
			 * 	console.log(Number.MAX_VALUE);
			 * 
			 * 	如果超过这个值就会显示Infinity 正无穷大 
			 * 	如果小过这个值就会显示-Infinity 负无穷大 
			 * */
			//数字
			var a =123;
			//字符串
			var b="123"
			/*
			 区分a和b：使用运算符typeof
			 		来检查一个变量的类型
			 语法：typeof 变量
			 检查字符串时，会返回string
			 检查数值的时，会返回number
			 * */
			//检查数据类型运算符
			console.log(typeof b);
			
			//第一，遇到无法最大值的表达式
			console.log(Number.MAX_VALUE);
			//显示 1.797669.....
			a=Number.MAX_VALUE*Number.MAX_VALUE;
			//显示Infinity 无穷大 （超过这个值就会显示无穷大）
			a=-Number.MAX_VALUE*Number.MAX_VALUE;
			//显示-Infinity 负无穷大
			a=Infinity;
			
				//第二，遇到无法算出的表达式
				b="abc"*"bcd";//无法计算
				//显示NaN
				b=NaN;
				console.log(typeof b);
				//显示Number
			
					//第三,遇到最小值
					a= Number.MIN_VALUE;
					//显示0以上的最小值：5e-324 大于0的最小值（300多个0）

					//第四，计算整数可以计算精确
					var c =123+321;
					console.log(c);
					//第五，如果使用JS进行浮点数，可以会得到一个不精确的结果（分数问题）
		</script>	
	</head>
	<body>
	</body>
</html>

6、js的Boolean布尔值

<!DOCTYPE html>
<html>
	<head>
		<meta charset="UTF-8">
		<title></title>
		<script type="text/javascript">
			
			//语言就是对现实生活的抽象
			/*
			 Boolean 布尔值
			 * 布尔值只有两个  主要用来进行逻辑判断
			 * true 
			 * 		- 表示真
			 * 
			 * false
			 * 		- 表示假
			 * */
			//例如
			var bool = true;
			console.log(bool);
			//显示true
			console.log(typeof bool);
			//显示Boolean
			
			
			/*
			 var a = null;
			 	Null 类型的值只有一个，就是null(空值)
			 * 		null这个值专门用来表示为空的对象
			 * 		使用typeof检查一个null值时候，会返回object
			 *
			 * 	Undefined 未定义
			 * 		如果var b;
			 * 		则console.log(b)显示undefined
			 * */
		</script>
	</head>
	<body>
	</body>
</html>

7、js的强制类型转换String（重点）

<!DOCTYPE html>
<html>
	<head>
		<meta charset="UTF-8">
		<title></title>
		<script type="text/javascript">
			/*
			 强制类型转换
			 * 	- 指将一个数据类型强制装换为其他的数据类型
			 *  - 类型转换主要指，将其他数据类型，转换为另外一种数据类型（方便左右匹配）
			 * 	String Number Boolean
			 */
			/*
			 	将其他的**四种数据**类型转换为String
			 		方式一：
			 			- 调用被转换数据类型的toString()方法
			 			- 该方法不会影响原变量，他会以转换的结果返回
			 			- 但是注意：null和undefined这两个值没有toString
			 			- 如果调用他们的方法会报错
			 			
			 		方式二：
			 			- 调用String()函数( 直接写函数 String();)，并且将被装换的数据类型作为参数传递给数据类型
			 			- 使用String()函数做强转类型转换时
			 				对于Number和Boolean实际上就是调用toString(); a=a.toString();
			 				但是对于null和undefined还是使用函数String(); aa=String(aa);
			 					都会直接转换为字符串类型
				 				null =转化为= "null";
				 				undefined  =转化为= "undefined"
			 */
		
		
		//例子方式一
			//调用a的toString()方法
			//调用的xxx的yyy()方法，就是xxx.yyy();
			//a.toString();
			var a=123;
			//1.将方法的执行结果赋值给b：这是因为调用某一种方法都是有结果的
				var b = a.toString();
				console.log(typeof b);
				console.log(b);
				//显示string和123————————而原来是Number和123
			
			/*
			 2.先转换为字符串再重新赋值给自己
				 a=a.toString();
				 console.log(typeof a);
				 console.log(a);//"123"
			 * */
			/*3.布尔Boolean转为字符串String	
			 *
			  	var a=true;
				a = a.toString();
				console.log(typeof a);
				console.log(a);//"true"字符串
			*/
			//4 null和5 undefined不可以使用调用
			a=null;
			//a= a.toString();报错
			a=undefined;
			//a= a.toString();报错
			
			
		//方式二：函数都可以
			/*使用String()函数来强制转换a为String类型
			 	a为参数
			 	使用函数：适用性更加广泛
			 */
			/*	var aa=123;
				aa = String(aa);
				console.log(typeof aa);
				console.log(aa);
			*/
			var aa = null;
			//var aa = undefined;
			aa = String(aa);
			console.log(typeof aa);
			console.log(aa);
			
			var bb = 123;
			bb = 123 +"";
			/*bb 从 number 变为了 string 类型*/
			
			/*
			 复习：
			 
			 *1.使用方法调用tostrig()只能用在number和Boolean，而null和undefined无法使用
			 * 
			 * 使用方式：
			 * 	var a = 123;
			 * 		a = a.toString();赋值给原变量还是新变量都可以
			 * 
			 *2.使用String()函数都能使用
			 * 
			 * 	 var a =123;
			 * 		 a = string(a);赋值给原变量还是新变量都可以
			 * */
		</script>
	</head>
	<body>
	</body>
</html>

8.js的强转类型Number（重点）

<!DOCTYPE html>
<html>
	<head>
		<meta charset="utf-8" />
		<title></title>
		<script type="text/javascript">
			//之前的字符串也是使用的 String();
			
			/*
			 将其他的四种数据类型转化Number
			 * 	  转换方式一：
			 * 	 	使用Number()函数
			 * 			转换情况：
			 * 				字符串(string) -->数字(number)
			 * 				   1.如果是纯数字的字符串，则直接转换为数字 例如:var a="123";==123
			 * 				   2.如果字符串中有非数字的内容，则为NaN。例如:var a="abc"; ==NaN
			 * 				   3.如果字符串是一个空串，或者是一个空格，则为0 。例如:var a="";==0
			 * 				布尔转— —>数字
			 * 					1.true 转为  1
			 * 					2.flase 转为 0
			 * 				Null --> 数字 == 0
			 * 				undefi -->数字 == 0
			 * 	 转换方式二:
			 * 		这种专门用来对付字符串(有时候也可以用来取整)
			 * 		- parseInt()把一个字符串转换为一个整数
			 * 		- parseFloat() 把一个字符串转换为一个浮点数
			 * */
			var a = "123";//这是字符串
			//调用Number()函数来将a转换为Number类型
			a = Number(a);//显示123/number
			
			console.log(typeof a);
			console.log(a)
			
			//布尔值==显示1和0
			a = false;
			a = Number(a);	//Null ==显示 0
		
			a = Null
			a = Number(a);//undefinded  ==显示0
			
			a = undefinded 
			a = Number(a);//undefinded  ==显示0
			
			/*方式二:对字符串有效*/
			var b = "123px";
			//var b = "123.567px"; 只显示123
			//var b = "p123.567px"; 不显示
			
			/*所以有了这一种方法*/
			b = parseInt(b);//只显示int整数
			
				//parseFloat和parseInt类似
				b = parseFloat(b);//只显示float小数，获得有效的小数
				console.log(typeof b);
				console.log(b)
			/*
			 总结:parseInt只能取整数部分（对变量值指的是字符串）
			 		可以取整
			 
				 如果对非String使用parseInt()或者parseFloat()
				 它会先将其转换为String，然后在操作
				 
			 * */
		</script>
	</head>
	<body>
	</body>
</html>

9.js的强转类型Number（重点）

<!DOCTYPE html>
<html>
	<head>
		<meta charset="UTF-8">
		<title></title>
		<script type="text/javascript">
			/*
			 将其他的数据类型转换为Boolean
			 
			 * 	- 使用Boolean()函数：指明用这个
			 * 		- 数字Number --->布尔Boolean
			 * 			- 除了0和NaN(false)，其余的都是ture
			 * 		- 字符串 --> 布尔Boolean
			 * 			- 除了空串(false)，其余都是true
			 * 		- null和undefined都会转换为false
			 * - 对象也会转换为ture
			 * 
			 * */
			
			/*
			 复习:
			 使用Boolean();函数
			 		数值————boolean：除了0和NaN都是false，其余都是true
			 * 		字符串————boolean：除了"",其余都是true
			 * 		Null和undefined都会转换为false
			 * 		对象也会转换为ture
			 * 
			 * */
			var a = 123;//ture
				a = -123;//ture
				a = 0;//flase
				a = Infinity;//ture
				a = NaN;//false
				//调用Boolean()函数来将a转换为布尔值
				a = Boolean();
				console.log(typeof a);
				console.log(a);
				
		</script>
	</head>
	<body>
	</body>
</html>

小周日记

关注

1
点赞
踩
0

收藏

觉得还不错? 一键收藏
0
评论
1.介绍JS的基本概念——day01

1.JavaScript是一种专为与网页交互而设计的脚本语言，（由三个不同的部分组成）a、ECMAScript提供核心语言功能；b、文档对象模型（DOM），提供访问和操作网页内容的方法和接口（也就是：整个html为一个文档，DOM提供的方法和接口可以对网页进行操作）c、浏览器对象模型（BOM），提供与浏览器交互的方法和接口。（这个是对浏览器）2.三条输出语句<!DOCTYPE html><html> <head> <meta charset="ut
复制链接

扫一扫

专栏目录