JavaScript的基础使用
# JavaScript的开篇
# 💕1. 前言
# 1.1 解释型和编译型语言
计算机不能直接理解任何除机器语言以外的语言,所以必须要把程序员所写的程序语言翻译成机器语言才能执行程序,程序语言翻译成机器语言的工具,被称为翻译器
- 翻译器翻译的方式:
- 编译
- 解释
两种方式之间的区别在于翻译的时间点不同
- 编译器是
在代码执行之前进行编译
,生成中间代码文件 - 解释器是
在运行时进行及时解释
,并立即执行(当编译器以解释方式运行的时候,也称为解释器)
# 🐼2. JS基础
# 2.1 概述
HTML / CSS / JS关系
HTML 决定网页结构和内容
CSS 决定于网页呈现给用户的模样
标记、描述类语言
JS 实现业务逻辑和页面控制(决定功能),相当于人的各种动作
脚本、编程类语言
# 2.2 浏览器执行JS简介
浏览器分为两部分,渲染引擎和JS引擎
渲染引擎
:用来解析HTML于CSS,俗称内核。比如chrome浏览器的blink,老版本的webkitJS引擎
:也称JS解释器,用来读取网页中的JavaScript代码,对其处理后运行,比如chrome浏览器v8
浏览器本身并不会执行JS代码,而是通过内置JavaScript引擎(解释器)来执行JS代码。JS引擎执行代码时逐行解释每一句源码(转换为机器语言),然后由计算机去执行,所有JavaScript语言归为脚本语言,会逐行解释执行
# 2.3 JavaScript历史
- 布兰登·艾奇
- 在1995年利用10天完成JavaScript设计
- 网景公司最初命名为LiveScript,后来与Sun合作之后改名为JavaScript
# 2.4 JavaScript是什么
- JavaScript是世界上最流行的语言之一,是一种运行在客服端的脚本语言(Script是脚本的意思)
- 脚本语言:不需要编译、运行过程中由js解释器(js引擎)逐行进行解释并执行
- 现在也可以基于Node.js技术进行服务器端编译
# 2.5 JavaScript作用
- 表单动态校验(密码强度检测)
--JS产生最初的目的 - 网页特效
- 服务端开发(Node.js)
- 桌面程序(Electron)
- App(Cordova)
- 控制硬件-物联网(Ruff)
- 游戏开发(cocos2d-js)
# 2.6 标识符
开发人员为变量、属性、函数、参数取的名字
标识符不能是关键字或保留字
# 2.7 关键字
JS本身已经使用了的字,不能再用它们充当变量名,方法名
# 2.8 保留字
实际上就是预留的"关键字",意思是现在虽然不能是关键字。但未来可能会被称为关键字,同样不能使用它们当变量名或方法名
# 💊3. JS组成
- ECMAScript -- JavaScript语法
- DOM -- 页面文档对象模型
- BOM -- 浏览器对象模型
# 3.1 ECMAScript
ECMAScript
是由ECMA国际(源欧洲计算机制造商协会)进行标准化的一门编程语言,这种语言在万维网上应用广泛,往往被称为JavaScript(网景公司)或JScript(微软公司),但实际上后两者是ECMAcript语言的实际和扩展
ECMAScript规定了JS的编程语言和基础核心知识,是所有浏览器厂商共同遵守的一套JS语法工业标准
# 3.2 DOM文件对象模型
文件对象模型(Document Object Model,简称DOM)
,是W3C组织推荐的处理可扩展标记语言的标准编程接口。
通过DOM提供的接口可以对页面上的各种元素进行操作(大小、位置、颜色等)
# 3.3 BOM浏览器对象模型
BOM(Browser Object Model,简称BOM)
,是指浏览器对象模型,它提供了独立的内容的、可以与浏览器窗口进行互动的对象结构,通过BOM可以操作浏览器窗口,比如弹窗框、控制浏览器跳转、获取分辨率等
# 📮4. JS的三种引入方式
行内式、内嵌式和外部式
# 4.1 行内式
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<title>Title</title>
</head>
<body>
<!--行内式的JS-->
<input type="button" value="钟文慧" onclick="alert('八嘎亚哭')">
</body>
</html>
- 可以将单行或少量JS代码写在HTML标签的事件属性中(以on开头的属性),如:
onclick
- 注意单双引号的使用:在
HTML
中推荐使用双引号
,JS中推荐使用单引号
- 可读性差,在
html
中编写JS
大量代码时,不方便阅读 - 引号易错,引号多层嵌套匹配时,非常容易混淆
- 特殊情况下使用
# 4.2 内嵌式
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<title>Title</title>
<!--内嵌式的JS-->
<script>
alert('阿尼亚')
</script>
</head>
<body>
</body>
</html>
- 可以将多行JS代码写入到
<script>
标签中 - 内嵌JS式学习时最常用的方式
# 4.3 外部式
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<title>Title</title>
<!--外部式的JS-->
<script src="js/myjs.js"></script>
</head>
<body>
</body>
</html>
- 利用HTML页面代码结构,把大段JS代码独立到HTML页面之外,即美观,也方便文件级别的复用
- 引用外部JS文件的script标签中间不可以写代码
- 适合于JS代码量比较大的情况
# 🎨5. JS注释
# 5.1 单行ctrl + /
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<title>Title</title>
<script>
// 单行注释
</script>
</head>
<body>
</body>
</html>
# 5.2 多行shift + alt + a
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<title>Title</title>
<script>
/*
多行注释
*/
</script>
</head>
<body>
</body>
</html>
# 🎧6. JS输入输出语句
常用的输入输出语句
方法 | 说明 | 归属 |
---|---|---|
alert(msg) | 浏览器弹出警告框 | 浏览器 |
console.log(msg) | 浏览器控制台打印输出信息 | 浏览器 |
prompt(info) | 浏览器弹出输入框,用户可以输入 | 浏览器 |
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<title>Title</title>
<script>
// 输入框
prompt('请输入你的年龄')
// 警示框
alert('计算的结果是')
// 控制台输出(程序员测试)
console.log('我是程序员')
</script>
</head>
<body>
</body>
</html>