【JavaWeb】前端三剑客—JavaScript基础知识

目录

一、JavaScript 是什么

JavaScript (简称 JS)

JavaScript 和 HTML 和 CSS 之间的关系

JavaScript 运行过程

二、前置知识

第一个程序

JavaScript 的书写形式

行内式

内嵌式

外部式

输入输出

三、语法概览

变量的使用

基本数据类型

number 数字类型

string 字符串类型

boolean 布尔类型

undefined 未定义数据类型

四、数组

创建数组

获取数组元素

新增数组元素

删除数组中的元素

五、函数

语法格式

函数表达式

作用域链

---

一、JavaScript 是什么

JavaScript (简称 JS)

是世界上最流行的编程语言之一

是一个脚本语言, 通过解释器运行

主要在客户端(浏览器)上运行, 现在也可以基于 node.js 在服务器端运行.

JavaScript 和 HTML 和 CSS 之间的关系

HTML: 网页的结构(骨)

CSS: 网页的表现(皮)

JavaScript: 网页的行为(魂)

JavaScript 运行过程

编写的代码是保存在文件中的, 也就是存储在硬盘(外存上).

双击 .html 文件浏览器(应用程序)就会读取文件, 把文件内容加载到内存中(数据流向: 硬盘 => 内存)

浏览器会解析用户编写的代码, 把代码翻译成二进制的, 能让计算机识别的指令(解释器的工作) 得到

的二进制指令会被 CPU加载并执行(数据流向: 内存 => CPU)

JavaScript 的组成

ECMAScript(简称 ES): JavaScript 语法

DOM: 页面文档对象模型, 对页面中的元素进行操作

BOM: 浏览器对象模型, 对浏览器窗口进行操作

二、前置知识

第一个程序

JavaScript 的书写形式

行内式

内嵌式

外部式

alert("jjjjj");

 

输入输出

输入: prompt

弹出一个输入框

输出: alert

输出: console.log

三、语法概览

变量的使用

var name = 'zhangsan';
var age = 20;

使用变量

console.log(age); // 读取变量内容
age = 30;         // 修改变量内容

理解动态类型

var a = 10;     // 数字
var b = "hehe"; // 字符串

随着程序运行, 变量的类型可能会发生改变

var a = 10;    // 数字
a = "hehe";    // 字符串

基本数据类型

number 数字类型

var a = 07;      // 八进制整数, 以 0 开头
var b = 0xa;     // 十六进制整数, 以 0x 开头
var c = 0b10;    // 二进制整数, 以 0b 开头

一个八进制数字对应三个二进制数字

一个十六进制数字对应四个二进制数字. (两个十六进制数字就是一个字节

特殊的数字值

nfinity: 无穷大, 大于任何数字. 表示数字已经超过了 JS 能表示的范围. -Infinity: 负无穷大, 小于任何数字. 表示数字已经超过了 JS 能表示的范围. NaN: 表示当前的结果不是一个数字.

string 字符串类型

var a = "haha";
var b = 'hehe';
var c = hehe;    // 运行出错

var msg = "My name is "zhangsan"";    // 出错
var msg = "My name is \"zhangsan\"";  // 正确, 使用转义字符. \" 来表示字符串内部的引
号. 
var msg = "My name is 'zhangsan'";    // 正确, 搭配使用单双引号
var msg = 'My name is "zhangsan"';    // 正确, 搭配使用单双引号

boolean 布尔类型

console.log(true + 1);
console.log(false + 1)

undefined 未定义数据类型

四、数组

创建数组

获取数组元素

新增数组元素

删除数组中的元素

五、函数

语法格式

// 创建函数/函数声明/函数定义
function 函数名(形参列表) {
    函数体
    return 返回值;
}
// 函数调用
函数名(实参列表)           // 不考虑返回值
返回值 = 函数名(实参列表)   // 考虑返回值

函数表达式

作用域链

函数可以定义在函数内部 内层函数可以访问外层函数的局部变量.

执行 console.log(num) 的时候, 会现在 test2 的局部作用域中查找 num. 如果没找到, 则继续去 test1 中 查找. 如果还没找到, 就去全局作用域查找.