web本质(三)

最新推荐文章于 2023-02-13 23:10:45 发布

VIP文章 weixin_35688430

最新推荐文章于 2023-02-13 23:10:45 发布

阅读量189

点赞数

分类专栏： DevOps

本文链接：https://blog.csdn.net/weixin_35688430/article/details/116237155

版权

JavaScript基础

1、JavaScript是什么

JavaScript（下文我们会用简称JS来代替）是脚本编程语言，JS语言开发的文件是以.js为后缀，通过在html文件中引入该js文件来控制html代码的交互功能以及前台数据处理的业务逻辑（js语言代码也可以直接写在html文件中），采用的ECMAScript语法，属于编程语言。

ECMAScript目前普遍使用的存在ES5与ES6两个版本，我们也会基于这两个版本来介绍JS这么应用的学习

2、JavaScript如何学习

学习方向：从JS代码书写位置、JS基础语法、JS选择器和JS页面操作四部分进行学习

学习目的：完成页面标签与用户的人机交互及前台数据处理的业务逻辑

3、JS代码书写位置

JS属于脚本(可以以代码片段的方式内嵌到其他语言中)编程语言，可以内嵌到html代码中，但是可以根据实际情况书写在不同的位置，放在不同位置有不同的专业叫法，可以分为行间式、内联式和外联式三种。

3-1 行间式

JS代码书写在标签的事件全局属性中，采用的是JS编程语言的语法

Copy<!-- 关键代码 -->
<!-- 给div标签添加点击事件的交互逻辑：弹出文本提示框 -->
<div onclick="alert('点击我完成页面交互')">点我</div>

3-2 内联式

JS代码书写在script标签中，script标签可以出现在页面中的任意位置，建议放在body标签的最后(html代码是自上而下进行解析加载，放在body标签的最下方，会保证页面所有标签都加载完毕，html再去加载js文件，那么js脚步文件就会更好的控制页面标签的人机交互了)，采用的是JS编程语言的语法

Copy<!-- 关键代码 -->
<!-- 页面被加载打开时，就会触发事件的交互逻辑：弹出文本提示框 -->
<body>
    <!-- body标签中的所有子标签位置 -->
    
    <!-- script标签出现在body标签的最下方 -->
    <script>
    	alert('该页面被加载！')
    </script>
</body>

3-3 外联式

JS代码书在外部js文件中，在html页面中用script标签引入js文件（建议在body标签最下方引入，理由同上）

js文件夹下的my.js

Copyalert('外联式js文件弹出框')

Copy<!-- 关键代码 -->
<!-- 页面被加载打开时，就会触发事件的交互逻辑：弹出文本提示框 -->
<body>
    <!-- body标签中的所有子标签位置 -->
    
    <!-- script标签出现在body标签的最下方 -->
    <script src="js/my.js">
    	/* 不要在此写JS代码，原因是用来引入外部js文件的script标签，标签内部书写的JS代码不在起作用 */
    </script>
</body>

Copy<!-- 关键代码 -->
<!-- 页面被加载打开时，就会触发事件的交互逻辑：弹出文本提示框 -->
<body>
    <!-- body标签中的所有子标签位置 -->
    
    <!-- script标签出现在body标签的最下方 -->
    <script src="js/my.js">
    	/* 不要在此写JS代码，原因是用来引入外部js文件的script标签，标签内部书写的JS代码不在起作用 */
    </script>
</body>

4、总结

行间式控制交互最直接，但是交互逻辑多了直接导致页面可读性变差，且交互逻辑相同的标签样式也需要各自设置，复用性差，不建议使用；

内联式可以同时为多个标签提供交互逻辑（课程后面会详细介绍），学习阶段代码量不大的情况下，也不需要分文件处理的，这时候建议使用内联式；

外联式是分文件管理不同的页面存在的相同与不同的数据处理的业务逻辑与人机交互，可以极大提高开发效率，项目开发时一定要采用外联式来处理JS代码。

通过上面的介绍，大家很清楚JS是一门脚本编程语言，那么我们一定先要了解一下这门编程语言的基础语法，才可以慢慢的展开学。

JavaScript基本数据类型

1、变量的定义

JS中定义变量，不同于Python，我们需要像Python定义函数那样，也需要用特定的关键词来定义变量：

ES5语法，我们采用var关键词定义变量，并且没有常量的概念

ES6语法，我们采用let关键词定义变量，用const关键词定义常量

注：我们不需要像Python那样切换解释器版本来区别到底该书写什么版本语法的代码，在一个JS文件中我们可以同时书写两种语法的JS代码，浏览器都可以自动帮我们解析并运行。

Copy// ES5定义变量：var是关键词、num是变量名、=为赋值符、10为变量值、;为JS语言语句的结束标识符
var num = 10;

// ES6定义变量
let count = 100;

const PI = 3.14;

2、变量的命名规范

Copy/*
1. 由字母，数字，_，$组成，不能以数字开头（可以包含中文字符）
2. 区分大小写
3. 不能出现关键字及保留字
*/


abstract	arguments	boolean	break	byte
case	catch	char	class*	const
continue	debugger	default	delete	do
double	else	enum*	eval	export*
extends*	false	final	finally	float
for	function	goto	if	implements
import*	in	instanceof	int	interface
let	long	native	new	null
package	private	protected	public	return
short	static	super*	switch	synchronized
this	throw	throws	transient	true
try	typeof	var	void	volatile
while	with	yield

3、基本数据类型

JS语言中基本数据类型分值类型与引用类型两部分。

3-1 值类型

Copy// 数字类型：number
var num = 10;
const PI = 3.14;
console.log(typeof(num), num);  // 结果：number  10

// 字符串类型：string
var s1 = "双引号可以表示字符串";
var s2 = '单引号可以表示字符串';
console.log(typeof(s1), s1);  // 结果：string  双引号可以表示字符串

// 布尔类型：boolean
var b1 = true;
var b2 = false;
console.log(typeof(b1), b1);  // 结果：string  双引号可以表示字符串

// 未定义类型：undefined
var u1;
var u2 = undefined;
console.log(typeof(u1), u1);  // 结果：undefined  undefined

3-2 引用类型

Copy// 函数类型：function
function fn1() {
   }
var fn2 = function() {
   };
console.log(typeof(fn1), fn1);  // 结果：function  ƒ fn1() {}

// 对象类型：object
var obj1 = {
   }
console.log(typeof(obj1), obj1);</

最低0.47元/天解锁文章

weixin_35688430

关注

0
点赞
踩
1

收藏

觉得还不错? 一键收藏
0
评论
web本质(三)

JavaScript基础1、JavaScript是什么JavaScript（下文我们会用简称JS来代替）是脚本编程语言，JS语言开发的文件是以.js为后缀，通过在html文件中引入该js文件来控制html代码的交互功能以及前台数据处理的业务逻辑（js语言代码也可以直接写在html文件中），采用的ECMAScript语法，属于编程语言。ECMAScript目前普遍使用的存在ES5与ES6两个版本，我们也会基于这两个版本来介绍JS这么应用的学习2、JavaScript如何学习学习方向：从JS代码书写位
复制链接

扫一扫