目录
1、JS与HTML、CSS之间的关系
- HTML:网页的结构(骨)
- CSS:网页的表现(皮)
- JS:网页的行为(魂)
通俗解释为:HTML就是一只刚出生的小鸟,毛都没有长出来着,而CSS则是小鸟已经长出羽毛了,甚是好看,而JS则是小鸟已经学会翱翔,会飞了,可以动了
JavaScript 的能做的事情:
- 网页开发(更复杂的特效和用户交互)
- 网页游戏开发
- 服务器开发(node.js)
- 桌面程序开发(Electron, VSCode 就是这么来的)
- 手机 app 开发
JS运行过程
- 编写的代码是保存在文件中的, 也就是存储在硬盘(外存上).
- 双击 .html 文件浏览器(应用程序)就会读取文件, 把文件内容加载到内存中(数据流向: 硬盘 => 内存)
- 浏览器会解析用户编写的代码, 把代码翻译成二进制的, 能让计算机识别的指令(解释器的工作)
- 得到的二进制指令会被 CPU 加载并执行(数据流向: 内存 => CPU)
注:
- 浏览器分成渲染引擎 + JS 引擎.
- 渲染引擎: 解析 html + CSS, 俗称 "内核"
- JS 引擎: 也就是 JS 解释器. 典型的就是 Chrome 中内置的 V8
- JS 引擎逐行读取 JS 代码内容, 然后解析成二进制指令, 再执行.
2、JS前置知识
2.1、JS的书写形式
2.1.1、行内式
直接嵌入到HTML元素内部
例如:
<input type="button" value="按钮" onclick="alert('hello js')">
效果:
注:
- JS 中字符串常量可以使用单引号表示, 也可以 使用双引号表示.
- HTML 中推荐使用双引号, JS 中推荐使用单引号
2.1.2、内嵌式
写到script标签中
<script>
alert('hello js');
</script>
2.1.3、外部式
写在单独的.js文件中
注:
使用alert显示弹窗提示是一种很常见的交互方式,但是使用js来进行输出,使用console.log更为常见。毕竟使用弹窗了打印,毕竟比较烦,用户看了体验也很不好。
在浏览器开发者工具中,有一个控制台,在这个控制台上就能使用js的输出语句,看到输出的内容,如果出现了语法错误控制台上也会有提示。
如下:
<script>
console.log('haha');
</script>
2.2、输入输出
输入:prompt——弹出一个输入框
prompt("输入姓名:");
输出:alert——弹出一个警示对话框,输出结果
alert("hello");
在控制台打印日志(供程序员看)
3、JS语法
3.1、变量的使用
基本用法
创建变量(定义变量、变量声明、变量初始化)
var name = "小龙";
let age = 19;
var和let都是JS中创建变量的关键字,更建议使用let(var的坑比较多,这里咱们后端的程序员就不必深究了)
注:
- =的两侧建议有一个空格
- 每个语句结尾建议使用一个英文的分号(可以省略)
- 初始化的值如果是字符串,需要用单引号或者双引号引起来
- 初始化的值如果是数字,可直接赋值
使用变量
console.log(age);//读取内容
age = 30;//修改变量内容
3.2、理解动态类型
1、JS的变量类型是程序员在运行过程中才确定的(运行到的语句才可以确定类型)
let a = 10;//数字
let b = "haha";//字符串
2、随着程序运行,变量的类型也会发生改变
let a = 10;//数字
a = "haha";//字符串
3.3、基本数据类型
- number: 数字. 不区分整数和小数.
- boolean: true 真, false 假.
- string: 字符串类型.
- undefined: 只有唯一的值 undefined. 表示未定义的值.
- null: 只有唯一的值 null. 表示空值.
3.3.1、number数字类型
JS中不区分整数和浮点数,统一用“数字类型”来表示
数字进制表示
let a = 07;//八进制整数,0开头
let b = 0xa;//十六进制整数,0x开头
let c = 0b10;//二进制整数,以0b开头
特殊的数字值
- NaN,表示非数字值,一般字符串与数字进行非加法运算会出现,为什么加法不会出现,因为+也能表示字符串拼接,可以使用isNaN函数来判断计算结果是否是NaN。
- Infinity,无穷大, 大于任何数字. 表示数字已经超过了 JS 能表示的范围。
- -Infinity,负无穷大, 小于任何数字. 表示数字已经超过了 JS 能表示的范围。
var max = Number.MAX_VALUE;
// 得到 Infinity
console.log(max * 2);
// 得到 -Infinity
console.log(-max * 2);
// 得到 NaN
console.log('hehe' - 10);
3.3.2、string字符串类型
基本规则
字符串字面值需要使用引号引起来,单、双引号均可
如何解决字符串中已经包含了字符串?
let msg = "My name is "zhangsan""; // 出错
let msg = "My name is \"zhangsan\""; // 正确, 使用转义字符. \" 来表示字符串内部的引
号.
let msg = "My name is 'zhangsan'"; // 正确, 搭配使用单双引号
let msg = 'My name is "zhangsan"'; // 正确, 搭配使用单双引号
转义字符
有些字符不方便直接输入:
- \n
- \\
- \'
- \"
- \t
求长度
使用String的length属性即可(单位:字符)
let a = 'hehe';
console.log(a.length);
字符串拼接
使用+进行拼接
let a = "my name is ";
let b = "小龙";
console.log(a + b);
数字与字符串拼接
let c = "my score is ";
let d = 120;
console.log(c + d);
3.3.3、Boolean布尔类型
console.log(true + 1);
console.log(false + 1)
3.3.4、undefined未定义数据类型
一个变量没有被初始化过,结果就是undefined,是undefined类型
let a;
console.log(a);
undefined和字符串进行相加,结果进行字符串拼接
console.log(a + "10"); // undefined10
endefined和数字进行相加,结果为NaN (not a number)
console.log(a + 10);
3.3.5、null空值类型
null表示当前的变量是一个“空值”
var b = null;
console.log(b + 10); // 10
console.log(b + "10"); // null10
3.4、运算符
js的运算符与其他语言的运算符基本上一模一样,就不多说了。
但是还是有不同的部分的,主要就是比较相等的运算符。==
与!=
:表示比较两个变量的值是否相等。===
与!==
:表示比较变量的值与类型是否相等。
let a = 10;
let b = "10";
console.log(a == b);//true
console.log(a === b);//false
逻辑运算符也和其他语言有区别,区别主要在运算返回的值并不是true和false,这个值到底是什么,其实与短路效应是有关的。
- &&:表示且,比如a&&b,如果表达式a为假,则结果为a的值,如果表达式a为真,则结果为b的值。
- ||:表示或,比如c||d,如果表达式c为真,则结果为c的值,如果表达式c为假,则结果为d的值。
let x = null;
if (x == null) {
x = 0;
}
//相当于
x = x || 0;
3.5、条件语句、循环语句
条件语句、循环语句没什么好说的,和Java一样
3.6、数组
3.6.1、数组的基本操作
创建数组
//1
let arr1 = new Array();
//2
let arr2 = [];
//3
let arr3 = [1,2,3,4,5,6,7,8,9,0];
//4
let arr4 = [1,"sss","777",2.33,null,undefined];
//5
let arr5 = [12,[],[1,3,5,null,"sss"],false,true];
由于js里面的类型为弱类型,基本上什么类型的值都能赋值,所以js的数组什么都可以放,可以理解为java的Object数组,但不完全相同。
输出数组:
//基本语法:
console.log(数组名);
console.log(arr1);
console.log(arr2);
console.log(arr3);
console.log(arr4);
console.log(arr5);
let arr = [1,2,3,4,5,6,7,8,9,0];
for (let i = 0; i < arr.length; i++) {
console.log(arr[i]);
}
3.6.2、越界访问数组
js的数组是可以越界访问的,得到的结果是undefined。
let arr = [1,2,3,4,5,6,7,8,9,0];
console.log(arr[100]);
console.log(arr[-1]);
结果:
越界修改数组的值,那么此时数组的长度就会发生改变
let arr = [1,2,3,4,5,6,7,8,9,0];
arr[100] = 22;
console.log(arr);
结果:
我们发现当越界将下标为100的值修改为22时,数组长度变成了101。中间填充的值均为undefined。
但是你的下标为负整数时,数组的长度并不会发生改变,毕竟你的下标格式都不合法,但是会生成一个键值对添加到数组中,那么此时对于js中的数组,更像是对象,而数组和多出来的键值对可以理解为该对象里面的属性,同理当下标如果是字符串,浮点数等,也是相同的情况,既然是属性你也可以使用.去访问。说是数组,更像是map
let arr = [1,2,3,4,5,6,7,8,9,0];
arr[-1] = -1;
arr["hello"] = 123;
console.log(arr);
结果:
长度改小,会优先保留前面的数据,你再改回来,数据也不会回来的。
let arr = [1,2,3,4,5,6,7,8,9,0];
console.log(arr);
arr.length = 5;
console.log(arr);
arr.length = 10;
console.log(arr);
结果:
3.6.3、插入删除替换元素
可以使用push方法进行数组元素的追加,即在数组的最后面插入元素。
let arr = [];
for (let i = 0; i < 10; i++) {
arr.push(i+1);
}
console.log(arr);
我们可以使用splice
方法来对数组进行,基本语法:
array.splice(index, howmany, item1, ....., itemX);
let arr = [1,2,3,4,5,6,7,8,9,0];
console.log(arr);//删除前
arr.splice(2, 3);//表示从下标2进行删除,删除3个元素
console.log(arr);
结果:
它也可以实现元素的替换。
let arr = [1,2,3,4,5,6,7,8,9,0];
console.log(arr);//替换前
arr.splice(2, 3, 666, 777, 888);//表示从下标2进行替换,替换3个元素
console.log(arr);
结果:
运用巧妙一点,也能在某一位置插入元素。
let arr = [1,2,3,4,5,6,7,8,9,0];
console.log(arr);//插入前
arr.splice(2, 0, 666);//表示在2下标后插入一个66
console.log(arr);
结果:
当然由于js数组是可以越界的,所以也可以使用下标的方式在数组尾插元素。
let arr = [1,2,3,4,5,6,7,8,9,0];
console.log(arr);//插入前
arr[arr.length] = 66;
console.log(arr);
结果:
3.7、函数
JavaScript的函数还是挺有特点的相比于java的方法,它不用指定返回值类型,有就返回,没有就不返回,它需要使用function
关键字来表示它的身份,即函数,它的形参列表不需要返回值,它是JavaScript家族的一等公民,与变量平起平坐。
函数的定义、函数声明、函数调用:
//函数的定义、函数声明
function func(形参列表,不需要声明类型,毕竟js是弱类型的语言) {
//函数语句块
return 返回值;
}
//函数调用
函数名(实参列表);//无返回值
let varname = 函数名(实参列表);//有返回值
调用可以出现在定义之前:
hello();
hello();
function hello() {
console.log("hello");
}
hello();
hello();
结果:
由于JavaScript是弱类型语言,函数的变量类型可以随便放,所以也不需要重载,泛型。
function add(a, b) {
return a + b;
}
console.log(add(10,20));
console.log(add("10","20"));
console.log(add(1024,"hello"));
console.log(add(true,false));
console.log(add(undefined,20));
console.log(add(undefined,"20"));
结果:
其实吧,形参有那么多,你少传一点也可以,只不过没有收到传入参数值的变量默认值为undefined
,此时进行数学运算值为NaN
。
function add(a,b,c,d,e,f,g) {
return a + b + c + d + e + f + d + g;
}
console.log(add(10, 20));
console.log(add(10, 20, 30));
console.log(add(10, 20, 30, 40));
console.log(add(10, 20, 30, 40, 50));
console.log(add(10, 20, 30, 40, 50, 60));
console.log(add(10, 20, 30, 40, 50, 60, 70));
结果:
加个判断,将未初始化的值,赋值为0,就能进行计算了。
function add(a,b,c,d,e,f,g) {
// if(a === undefined) {
// a = 0;
// }
// //相当于
// a = a || 0;
a = a || 0;
b = b || 0;
c = c || 0;
d = d || 0;
e = e || 0;
f = f || 0;
g = g || 0;
return a + b + c + d + e + f + d + g;
}
console.log(add(10, 20));
console.log(add(10, 20, 30));
console.log(add(10, 20, 30, 40));
console.log(add(10, 20, 30, 40, 50));
console.log(add(10, 20, 30, 40, 50, 60));
console.log(add(10, 20, 30, 40, 50, 60, 70));
结果:
参数多了,也没什么事,前面已经成功传入的参数,会正常进行运算。
function add(a,b,c,d,e,f,g) {
// if(a === undefined) {
// a = 0;
// }
// //相当于
// a = a || 0;
a = a || 0;
b = b || 0;
c = c || 0;
d = d || 0;
e = e || 0;
f = f || 0;
g = g || 0;
return a + b + c + d + e + f + d + g;
}
console.log(add(10, 20, 30, 40, 50, 60, 70));
console.log(add(10, 20, 30, 40, 50, 60, 70, 80, 90));//参数传多了,多传的参数接收不到
结果;
函数就像普通变量一样,可以赋值给变量,然后该变量可以调用该函数,相当于C语言中的函数指针,所以js中的函数也被叫做“一等公民”。
function print(s) {
console.log(s);
}
let p = print;
p("hello");
//typeof获取类型
console.log(typeof p);
结果:
//合二为一的写法
let p = function print(s) {
console.log(s);
}
p("hello");
结果:
可以省略函数名,然后使用变量接收匿名函数。
//匿名函数赋值调用,常用
let p = function (s) {
console.log(s);
}
p("hello");
结果:
在js中,函数里面是可以定义函数的,而且可以无限的嵌套,这与java不同。
在JavaScriptES6之前,作用域只有全局作用域和函数作用域,并没有块级作用域,而在ES6之后引入了let,也有了块级作用域,定义的在大括号内部的变量在大括号外面是无法访问的。因为js中的函数可以嵌套定义,对于里层函数的变量,如果在函数本体找不到就会一级一级向上查找。
let num = 10;
function func1() {
function func2 () {
function func3 (){
console.log(num);
}
func3();
}
func2();
}
func1();
结果:
let num = 10;
function func1() {
let num = 20;
function func2 () {
let num = 30;
function func3 (){
console.log(num);
}
func3();
}
func2();
}
func1();
结果:
3.8、对象
js的对象里面的是属性是通过键值对的方式来创建的。
方式一:直接为对象添加属性来进行创建。
let 变量名 = {
//属性
键:值,
...,
//函数
键:function (){
//函数语句块
},
...,
//最后一个属性逗号可以省略
}
举例:
let animal = {
name: "小鸭子",
age: 18,
running: function (){
console.log(this.name + "会奔跑");
},
swimming:function () {
console.log(this.name + "会游泳")
}
}
console.log(animal.name);
console.log(animal.age);
animal.swimming();
animal.running();
结果:
方式二:new Object(),然后添加属性,不推荐!
let animal = new Object();
animal.name = "小鸭子";
animal.age = 18;
animal.running = function (){
console.log(animal.name + "会奔跑");
}
animal.swimming = function (){
console.log(animal.name + "会游泳");
}
console.log(animal.name);
console.log(animal.age);
animal.swimming();
animal.running();
结果:
方式三:使用this,并使用类似与java构造方法的方式创建对象。
function 构造函数名(形参列表) {
this.属性 = 值;
this.函数 = function...;
}
//创建
let obj = new 构造方法名(实参);
举例:
function animal() {
this.animal;
this.age;
this.swimming = function () {
console.log(this.name + "会游泳");
}
this.running = function() {
console.log(this.name + "会奔跑");
}
}
let ani = new animal();
ani.name = "小鸭子";
ani.age = 18;
console.log(ani.name);
console.log(ani.age);
ani.swimming();
ani.running();
结果:
下期见!!!
作为一个致力于后端开发的程序员来说,这些只是作为一个简单的了解,所以不是很全~