1.1、ECMAScript 的三种具体表现
ECMAScript 有三种具体的表现,分别是:
- JavaScript,是浏览器的具体实现。
- Nodejs,是服务端的实现。
- ActionScript,是 flash 中的实现。
1.2、ECMAScript 表述的内容
ECMAScript 描述的内容包括:语法、类型、语句、关键字、保留字、运算符、基于对象的语言。
1.3、ECMAScript 语言版本发展历程
ECMAScript 语言版本的发展历程,具体如下表所示:
版本号 | 发布时间 | 新增内容 |
---|---|---|
ECMAScript3 | 1999 年 | 正则表达式、switch、do-while、try-cache 等 |
ECMAScript5 | 2009 年 | 严格模式、get()、set()、JSON 解析等 |
ECMAScript6 | 2015 年 | let 和 const、扩展运算符、箭头函数 |
二、JavaScript 简介
2.1、JavaScript 的发展历程
- JavaScript 因互联网而生,紧跟浏览器的发展而发展。
- JavaScript 诞生于 1995 年,当时 JavaScript 的主要目的是:处理以前由服务端负责的一些校验操作,可以把这些操作在浏览器端完成,从而提高效率。
- 恰逢 Sun 公司 Java 问世,两家公司强强联合,Netscape 公司希望借助 Java 语言的声势,Sun 公司则将自己的影响力扩展到浏览器。
- JavaScript 是一种在网络浏览器上运行的编程语言,这种语言我们称之为脚本语言。
- JavaScript 语言可以添加到使用 HTML 和 CSS 构建的网站中,在页面加载时会自动执行,并在实现各种页面动态效果、交互方面发挥重要的作用。
2.2、ECMAScript 在 JavaScript 中的位置
JavaScript 分成三个部分,具体如下图所示:
- ECMAScript:是核心标准,JavaScript 是它的一个具体实现。
- DOM:文档对象模型,一套操作页面元素的 API。
- BOM:浏览器对象模型,一套操作浏览器功能的 API。
2.3、JavaScript 语言特点
JavaScript 脚本语言具备以下五种特点:
- 解释性:JavaScript 是一种解释语言,源代码不需要进行编译,直接在浏览器上运行时被解释。
- 跨平台:JavaScript 依赖于浏览器本身,与操作环境无关。
- 弱类型:JavaScript 定义变量不需要明确类型,表现灵活。
- 事件驱动:JavaScript 可以直接对用户或客户输入做出响应,无需经过 Web 服务程序。
- 基于对象:JavaScript 是一种基于对象的语言,能运用自己已经创建了的对象。
2.4、JavaScript 和 Java 语言的区分
相信也有很多小伙伴疑惑,JavaScript 和 Java 名字相近,二者有何不同?不同主要表现在以下四点:
- Java 语言需要编译,Java 属于编译型语言,而 JavaScript 是运行时由解释器直接执行,JavaScript 属于解释性语言。
- Java 是强类型语言,JavaScript 是弱类型语言。
- JavaScript 语言的函数是独立的数据类型。
- JavaScript 的面向对象是基于原型实现的,Java 的面向对象是基于类实现的。
2.5、JavaScript 的应用领域
JavaScript 的应用领域分布很广,覆盖方方面面,具体如下图所示:
三、JavaScript 的命名规范及注释
3.1、JavaScript 的命名规范
在 JavaScript 中可以自主命名的都可以称之为标识符,例如:JavaScript 变量名、JavaScript 函数名、JavaScript 属性名。
JavaScript 命名一个标识符需要遵守以下规则:
- 标识符可以包含字母、数字、下划线(_)、美元符号($)。
- 标识符首字母不能以数字开头,用字母、下划线(_)、美元符号($)开头都可以。
- 标识符不能是 ES 中的关键字或是保留字。
标识符一般都采用驼峰命名法:首字母小写,每个单词的开头字母大写,其余字母小写,具体如下图所示:
3.2、JavaScript 的注释
JavaScript 的注释分为三种,分别是单行注释、多行注释和函数和方法注释。
单行注释的基本形式如下:
//单行注释
多行注释的基本形式如下:
/\*
\*多行注释
\*多行注释
\*/
函数和方法注释的基本形式如下:
/\*\*
\*函数说明
\*
\*\*/
四、JavaScript 变量定义的四种方式
JavaScript 变量定义的语法,定义的基本形式如下:
关键词 变量名 = 变量值;
JavaScript 变量定义有四种基本方式,分别是省略关键词、使用 var 关键词、使用 let 关键词和使用 const 关键词,下面我们一一介绍。
4.1、省略关键词
在 JavaScript 中省略关键词,定义的为全局变量,任何位置定义,在任何位置都是可以访问的,但是不建议使用,定义的基本形式如下:
num = 10;
4.2、使用 var 关键词
在 JavaScript 中使用 var 关键词,无块级作用域,定义在块级作用域中的变量,外界也可以访问,定义的基本形式如下:
var num = 10;
4.3、使用 let 关键词
在 JavaScript 中使用 let 关键词,有块级作用域,定义在块级作用域中的变量,外界无法访问,定义的基本形式如下:
let num = 10;
4.4、使用 const 关键词
在 JavaScript 中使用 const 关键词,有块级作用域,定义在块级作用域中的变量,外界无法访问,且变量的值不能再被二次修改,所以为常量,定义的基本形式如下:
const num = 10;
五、JavaScript 的三种引入方式
5.1、定义在 script 标签内
通过定义在 script 标签内来实现 JavaScript 引入,基本形式如下:
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="utf-8">
<meta name="viewport" content="width=device-width, initial-scale=1">
<title>bailucool</title>
<script type="text/javascript">
alert("欢迎学习 JavaScript");
</script>
</head>
<body>
</body>
</html>
打开页面 JavaScript 自动加载,实现效果具体如下图所示:
5.2、定义在 HTML 标签内
通过定义在 HTML 标签内来实现 JavaScript 引入,基本形式如下:
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="utf-8">
<meta name="viewport" content="width=device-width, initial-scale=1">
<title>bailucool</title>
</head>
<body>
<button onclick="alert('欢迎学习 JavaScript')">点击</button>
</body>
</html>
通过点击页面按钮的形式实现 JavaScript 的弹窗,实现效果如下图所示:
5.3、在页面中引入外部 JavaScript 文件
我们先在外部定义一个 JavaScript 文件,名为 bailucool.js,基本形式如下:
function init() {
alert("欢迎学习 JavaScript");
}
接着我们在名为 BailuTest.html 的页面引入 bailucool.js 文件,基本形式如下:
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="utf-8">
<meta name="viewport" content="width=device-width, initial-scale=1">
<title>bailucool</title>
<script type="text/javascript" src="bailucool.js"></script>
</head>
<body onload="init()">
</body>
</html>
打开页面 JavaScript 自动加载,实现效果具体如下图所示:
六、JavaScript 浏览器工作台环境
在 Chrome 或者 Firefox 等现代浏览器中均内置了工作台环境,在 Chrome 或者 Firefox,我们打开开发者工具栏即可进行编程(快捷键:Ctrl+Shift+I),我们使用上文提到的 let 关键词进行演示,具体如下图所示:
七、JavaScript 本地开发工具推荐
在这里为大家推荐三款比较好用的 JavaScript 本地开发工具,需要的同学可以根据自身情况进行选择,详细信息具体如下表所示:
IDE 名称 | 工具简介 |
---|---|
Visual Studio Code | 微软开发的 IDE,支持 TypeScript。它提供了代码补全,语法高亮,支持 Git 命令等等,还有非常多的插件。 |
WebStorm | JetBrains 公司发布的收费编辑器,支持多种框架和 CSS 语言,包括前端、后端、移动端以及桌面应用。 |
HBuilder | 数字天堂推出的一款支持 HTML5 的 Web 开发 IDE。 |
八、神器安利——华为云 CloudIDE
8.1、华为云 CloudIDE 产品介绍
CloudIDE 是面向云原生的轻量级 WebIDE,通过浏览器访问即可实现云端开发环境获取、代码编写、编译调试、运行预览、访问代码仓库、命令行执行等能力,同时支持丰富的插件扩展,具体如下图所示:
产品地址:https://www.huaweicloud.com/product/cloudide.html
8.2、华为云 CloudIDE 产品优势
在实际的开发应用场景方面,作为开发者,相信大家都深有体会,传统本地开发 IDE,开发者受限于本地开发环境,很难实现基于线上代码引用、服务调试的移动开发能力。CloudIDE 以 Web 方式获取开发环境,助你轻松跨过线上线下协同开发难关,具体如下图所示:
其所具备的产品优势有:
- 按需获取:计算资源和存储资源可以灵活配置,一键式选定语言以及支持技术栈,开发环境分秒可得。
学习笔记
主要内容包括html,css,html5,css3,JavaScript,正则表达式,函数,BOM,DOM,jQuery,AJAX,vue等等
开源分享:【大厂前端面试题解析+核心总结学习笔记+真实项目实战+最新讲解视频】
HTML/CSS
**HTML:**HTML基本结构,标签属性,事件属性,文本标签,多媒体标签,列表 / 表格 / 表单标签,其他语义化标签,网页结构,模块划分
**CSS:**CSS代码语法,CSS 放置位置,CSS的继承,选择器的种类/优先级,背景样式,字体样式,文本属性,基本样式,样式重置,盒模型样式,浮动float,定位position,浏览器默认样式
HTML5 /CSS3
**HTML5:**HTML5 的优势,HTML5 废弃元素,HTML5 新增元素,HTML5 表单相关元素和属性
**CSS3:**CSS3 新增选择器,CSS3 新增属性,新增变形动画属性,3D变形属性,CSS3 的过渡属性,CSS3 的动画属性,CSS3 新增多列属性,CSS3新增单位,弹性盒模型
JavaScript
**JavaScript:**JavaScript基础,JavaScript数据类型,算术运算,强制转换,赋值运算,关系运算,逻辑运算,三元运算,分支循环,switch,while,do-while,for,break,continue,数组,数组方法,二维数组,字符串
93729784)]
HTML5 /CSS3
**HTML5:**HTML5 的优势,HTML5 废弃元素,HTML5 新增元素,HTML5 表单相关元素和属性
**CSS3:**CSS3 新增选择器,CSS3 新增属性,新增变形动画属性,3D变形属性,CSS3 的过渡属性,CSS3 的动画属性,CSS3 新增多列属性,CSS3新增单位,弹性盒模型
[外链图片转存中…(img-VEFFsYIg-1714293729785)]
JavaScript
**JavaScript:**JavaScript基础,JavaScript数据类型,算术运算,强制转换,赋值运算,关系运算,逻辑运算,三元运算,分支循环,switch,while,do-while,for,break,continue,数组,数组方法,二维数组,字符串