行业门户型网站域名交易中心
目录
- 引言
- 一、JavaScript 的书写形式
- 1.1行内式
- 1.2 内嵌式
- 1.3 外部式
- 二、输入输出
- 2.1 输入: prompt
- 2.2 输出: alert
- 2.3 输出: console.log
- 三、语法概览
- 3.1 变量的使用
- 3.2 基本数据类型
- 四、运算符
- 4.1相等运算符
- 4.2 逻辑运算符
- 五、数组
- 5.1 创建数组
- 5.2 获取数组元素
- 5.3 获取数组长度
- 5.4 使用 push 进行追加元素
- 5.5 删除数组中的元素.
- 六、函数
- 6.1 语法格式
- 6.2 函数表达式
- 6.3 关于参数个数
- 6.4 作用域
- 七、对象
- 7.1 使用 字面量 创建对象 [常用]
- 7.2 使用 new Object 创建对象
- 7.3 使用构造函数创建对象
- JavaScript 的对象和 Java 的对象的区别
引言
JavaScript (简称 JS)
- 是世界上最流行的编程语言之一;
- 是一个脚本语言, 通过解释器运行;
- 主要在客户端(浏览器)上运行, 现在也可以基于
node.js在服务器端运行;
Node.js这是一个js的运行平台.(对标的是浏览器)浏览器是运行在客户的.Node.js既可以运行在客户端,也可以运行在服务器上(单独的执行程序).就可以给js赋予客户端开发/服务器开发的能力.
JavaScript 的能做的事情:
- 网页开发(更复杂的特效和用户交互)
- 网页游戏开发
- 服务器开发(node.js)
- 桌面程序开发(Electron, VSCode 就是这么来的)
- 手机 app 开发
JavaScript 之父 布兰登 * 艾奇 (Brendan Eich)
JavaScript 和 HTML 和 CSS 之间的关系:
- HTML: 网页的结构(骨)
- CSS: 网页的表现(皮)
- JavaScript: 网页的行为(魂)
JavaScript 运行过程:
- 编写的代码是保存在文件中的, 也就是存储在硬盘(外存上).
- 双击
.html文件浏览器(应用程序)就会读取文件, 把文件内容加载到内存中(数据流向:硬盘 => 内存) - 浏览器会解析用户编写的代码, 把代码翻译成二进制的, 能让计算机识别的指令(解释器的工作)
- 得到的二进制指令会被 CPU 加载并执行(数据流向:
内存 => CPU)
浏览器分成渲染引擎 + JS 引擎.
渲染引擎: 解析html + CSS, 俗称 “内核”;
JS 引擎: 也就是JS 解释器. 典型的就是Chrome中内置的V8;
JS 引擎逐行读取 JS 代码内容, 然后解析成二进制指令, 再执行
JavaScript 的组成:
ECMAScript(简称 ES): JavaScript 语法;
DOM: 页面文档对象模型, 对页面中的元素进行操作;浏览器提供的一组，操作页面元素的API；
BOM: 浏览器对象模型, 对浏览器窗口进行操作;浏览器提供的一组，操作浏览器窗口的API；
但是要想完成更复杂的任务, 完成和浏览器以及页面的交互, 那么就需要 DOM API 和 BOM API.这主要指在浏览器端运行的 JS. 如果是运行在服务端的 JS , 则需要使用 node.js 的 API,就不太需要关注 DOM 和 BOM.
一、JavaScript 的书写形式
JavaScript 代码可以嵌入到 HTML 的 script 标签中.
1.1行内式
直接嵌入到 html 元素内部：
<input type="button" value="点我一下" οnclick="alert('haha')">
注意, JS 中字符串常量可以使用单引号表示, 也可以 使用双引号表示.
HTML 中推荐使用双引号, JS 中推荐使用单引号
1.2 内嵌式
写到 script 标签中:
<script>alert("haha");
</script>
1.3 外部式
写到单独的 .js 文件中:
然后到另一个文件中对其进行引用：
<script src="app.js">
关于注释：
- JS的注释
// - HTML的注释：
<!-- --> - CSS的注释：
/* */
二、输入输出
2.1 输入: prompt
弹出一个输入框：
prompt("请输入名字：");
2.2 输出: alert
弹出一个警示对话框, 输出结果：
alert("hello");
2.3 输出: console.log
在控制台打印一个日志(供程序员看)：
// 向控制台输出日志
console.log("这是一条日志");
三、语法概览
3.1 变量的使用
定义一个变量:
var变量名=初始值;
// 创建变量let num = 10;//创建一个名为num的，数字类型的变量var s = 'hello';//创建了一个名字为s的，字符串类型的变量.var arr = [];//创建了一个名字为arr的，数组类型的变量.
现在更倾向于使用let来代替var .var是旧版本(早期的设计),有很多地方其实是违背直觉.
使用变量:读取+修改：
在变量的修改的时候,有个小问题：如果本来num是一个数字类型,在赋值的时候可以给它赋一个数字类型,也可以赋一个字符串类型,也可以赋任意类型，这个时候num变量的类型,也就随之发生改变了。
num = 20;//变量的类型可以在运行的过程中随着赋值的改变而发生改变---‘动态类型’num = 'hello';console.log(num)
变量的类型可以在运行的过程中随着赋值的改变而发生改变，称为“动态类型”。(Python,PHP,Ruby…)
像Java这样的语言,不支持这种运行时类型发生改变.这种行为,称为"静态类型"。（C，C++,Java,Go,Rust…）
3.2 基本数据类型
JS 中内置的几种类型：
number: 数字. 不区分整数和小数.
var a = 07; // 八进制整数, 以 0 开头
var b = 0xa; // 十六进制整数, 以 0x 开头
var c = 0b10; // 二进制整数, 以 0b 开头
一个八进制数字对应三个二进制数字,一个十六进制数字对应四个二进制数字. (两个十六进制数字就是一个字节).
特殊的数字值:
Infinity: 无穷大, 大于任何数字. 表示数字已经超过了 JS 能表示的范围.-Infinity: 负无穷大, 小于任何数字. 表示数字已经超过了 JS 能表示的范围.NaN: 表示当前的结果不是一个数字.
var max = Number.MAX_VALUE;
// 得到 Infinity
console.log(max * 2);
// 得到 -Infinity
console.log(-max * 2);
// 得到 NaN
console.log('hehe' - 10);
//和Java类似,如果把字符串和数字相加，那么就会得到一个“字符串拼接”的效果.
console.log('hehe' - 10);//hehe10
可以使用 isNaN 函数判定是不是一个非数字:
console.log(isNaN(10)); // false
console.log(isNaN('hehe' - 10)); // true
boolean: true 真, false 假.
Boolean 参与运算时当做 1 和 0 来看待：
console.log(true + 1);//2
console.log(false + 1)//1
这样的操作其实是不科学的. 实际开发中不应该这么写.
string: 字符串类型.
如果字符串里本身就包含了引号,这个时候就可以通过单双引号灵活搭配的形式,来避免使用转义字符:
let s1 = "my name is 'zhang'";console.log(s1);let s2 = 'my "name" is zhang ';console.log(s2);let s3 = "My name is \"zhangsan\"";console.log(s3);
有些字符不方便直接输入, 于是要通过一些特殊方式来表示:
\n
\\
\&