JS入门必备
JS全称:javascript,是一门编程语言,也是一名前端工程师必须掌握的核心技术。主要运行环境:浏览器。
JS由三个部分组成:
1)ECMAScript:其中ECMA指欧洲计算机制造商协会,ECMAScript是标准,仍在不停更新:ES3 ES5 ES6
ES7 ES8... 规定了JS的基本语法;
2)BOM:brower object model 浏览器对象模型,使用js操作浏览器;
3)DOM:document object model 文档对象模型,使用js操作文档。
JS能干的活:
1)给web页面提供交互;
2)开发网站;
3)开发app;
4)开发小程序;
5)开发游戏;
6)作后端——node.js;
7)嵌入式;
8)区块链;
……
JS的三种写法:
1)行内写法:直接写在标签中,作为开始标签的属性;
<button onclick="console.log(888)">点我</button>
2)内部写法:写在script标签中,通常放在代码最后面,可以写多个;
<script>
var a = 110;
console.log(a)
</script>
3)外部写法:另建一个JS文件,将JS代码写在JS文件中,通过script标签引入,需要注意的是一旦我们
引入了script标签,这个标签中就不能再写JS代码了,写了也不会执行。
<script src="./out.js"></script>
JS中输出数据的常用方式:
1)alert() 弹出一个警告框
2)document.write("xxxx") 向页面中写入xxxx(淘汰了)
3)console.log("xxx") 控制台中输出xxx
<script>
alert("xxxx")
document.write("hello js")
console.log("hello 控制台")
</script>
JS基本语法:
1)JS对大小写敏感,var a = 1; 与 var A = 1;是不一样的;
2)JS中会忽略空白符,如空格、换行、tab等;
3)语句后的分号可加可不加,建议加上;
4)JS中的注释有两种,// 是单行注释,快捷键:ctrl+/,/* */是多行注释,快捷键:shift+alt+a;
5)标识符与关键字:var a = 110; 其中var是关键字,a为标识符;
……
JS变量:
1)JS中的变量是用于存储数据的容器,由变量名+变量值组成。
变量名:容器的别名,对这个别名的操作就是对这个容器的操作;
变量值:容器中存储的数据,对容器的操作就是对数据的操作。
2)变量的声明:
var a = 110; 变量名是a。变量值是110。一般在脚本的开头就声明好所有变量。一条语句可以声明多个变量
,中间用逗号隔开:
var a = 1,b = 2,c = 3; //等同于下面的声明
var a = 1;
var b = 2;
var c = 3;
①单独声明变量:一次只声明一个变量
var name = "wangcai"; var age = 100;
②重复声明:JS比较灵活 允许重复声明 写代码时尽量避免
var name = "xx"; var name = "yy";
③遗漏声明:声明一个变量时没有使用var、let、const等关键字
name = "wangcai";
tip:
声明变量的关键字:var、let、const
声明变量使用let
声明常量使用const
尽量不要用var
let、const
共同点:
①声明的变量不会提升;
②配合 {} 可以形成块级作用域;
③声明的变量不会挂载到GO上;
④不能重复声明;
注意const在声明常量时,必须赋值,但不能重复赋值。
3)变量可分为全局变量和局部变量:类似于普通话和方言,分界点
是函数。写在函数外部的为全局变量,写在函数内部的为局部变量。
全局变量在函数内外都可以访问到。而局部变量只能在函数内部访问到。
JS运算符:
1)算数运算符:用于对数字进行算数运算。
加:+ 减:- 乘:* 除:/ 系数:% 递加:++ 递减:-- 。
2)赋值运算符:用于给JS变量赋值。
x = y:将y赋给x;
x += y 将x+y赋给x;
x -= y 将x-y赋给x;
x *= y 将x*y赋给x;
x /= y 将x/y赋给x;
x %= y 将x%y赋给x;
3)比较运算符:
==:等于;
===:等值且等型;
!=:不相等;
!==:值不等或者型不等;
>:大于;
<:小于;
>=:大于或等于;
<=:小于或等于;
?:三元运算符 var character = (age<18)?(true)"太年轻": (false)"够成熟";
4)逻辑运算符:
&&:与;||:或;!:非。
5)类型运算符:
typeof:返回变量的类型;
JS数据类型:
为了更合理地利用内存空间,需要针对不同类型的数据分配不同的内存空间。
1)基本数据类型:
①数值(number):JS中只有一种数值类型,包括整数和小数;number可以通过不同进制表示,123十进制
、0123八进制、0x123十六进制,不要对小数进行运算,对于超大或者超小的数值可以用科学计数法来表示:
123e5(12300000)、123e-5(0.00123) NAN不是数字。
②字符串(string):需要用 "" '' 包起来,注意同一引号不要嵌套使用(可以外单内双或外双内单),
可以通过下标来获取某个字符,默认从0开始;
③布尔值(boolean):只有true和false两个值,注意大小写,true和TRUE是不一样的;
④undefiend:未定义的变量,当一个变量没有赋值时,它的值就是undefiend;
⑤null:空值。
2)引用数据类型:
对象(object):函数(function)和数组(array)。
typeof 运算符可以查看一个数据的数据类型。
JS中数据类型转化:
1)隐式类型转化:无声无息就自己进行了类型转化,如123 + abc
最后的值是字符串"123abc"。
2) 强制类型转化:需要我们手动地书写代码去转化类型。
Number 试图把一个非number的数据转化成number;
String 试图把一个非string的数据转化成string;
Boolean 试图把一个非boolean的数据转化成boolean;
parseInt 试图把一个数据转成整数;
parseFloat 试图把一个数据转成小数(浮点数);
tip:
任何的编程语言中,只有三种结构:
顺序结构 由上至下执行代码
选择结构 条件语句 达到某个条件后,再去执行代码
循环结构 循环语句 把某片代码执行多次
条件语句:在JS中提供了四类条件语句:
if
语句
if...else
语句
if...else if...else
语句
switch
语句
循环语句:
for
循环
while
循环
do..while
循环
跳转语句:
break:
中断,停止
在条件语句中,switch
中break
也表示终止后面的case
。
在循环语句中,表示直接跳出for
循环。或理解与终止for
循环。
continue:
继续
在循环语句中,结束本次循环,继续后面的循环。
return:
一般在函数中使用。
函数:函数在JS中是一等公民。
1)定义:
数学中函数的定义:函数的近代定义是给定一个数集A,假设其中的元素为x,对A 中的元素x施加对应法则
f,记作f(x),得到另一数集B,假设B中的元素为y, 则y与x之间的等量关系可以用y=f(x)表示,函数概
念含有三个要素:定义域 A、值域C和对应法则f。
编程语言中函数的定义:函数在JS中引用数据类型,本质是一个对象,给函数f传 递一个数据,函数f返回一
个数据。
2)前面已接触过的函数有:
alert("xxx"); alert函数在JS内部已封装好,作为开发者直接调用就OK了。
parseInt(3.14); 返回3, parseInt函数也是封装好的,直接调用。
parseFloat("3.14abc"); 返回3.14, parseFloat函数也是封装好的,直接调用。
console.log() log("xxx")是函数
...
在JS中本身已经封装好了很多的函数,可直接调用。
3)函数的作用:
①代码重用
②组织代码,把某片代码当作是功能块
自己封装函数:
①函数就是一片代码段;
②引用数据类型:本质是对象object,其中有两个比较特殊,一个是函数数据类型function,一个是数组数
据类型array;
③函数也是一种数据类型,也叫函数数据类型;
④自己封装函数有两种方式,一种是函数声明,一种是函数表达式;
⑤使用typeof查看一个数据是否是函数类型;
⑥函数数据类型的对应的值也是有无数个。
4)函数声明:
声明语句:声明变量 声明函数
function 可以声明函数:
function distance(a,b){}
distance表示函数名,a,b用来接收外面传递数据 a,b叫形参。
5)函数参数:函数调用的过程就是实参向形参赋值的过程。
形式参数,简称形参,定义函数时()里面的写的参数。如下:
function f(a, b){};
实际参数:简称实参,在调用函数时()里面的写的参数。如下:
f(1, 2);
函数调用:
只声明一个函数,没有调用,相当于没有写,函数必须调用才能执行函数体中的代码。函数名+() 如:f();
6)函数的返回值:
return作用:
1)终止程序 在return 语句后面的写的代码就不再执行了
2)把reutrn后面的数据返回 返回到函数调用处 在哪个地方调用了函数,那么返回值就返回到什么地方,
如果函数没有返回值,默认返回undefined。函数内部只能有一个reutrn语句,在第1个ruturn语句后面的代
码不会执行。
7)函数表达式:
var f = function(){}
把一个函数类型的数据赋值给一个变量,整体就是一个函数表达式;
函数表达式不会提升。
JS代码段:
一个script标签就是一个代码段。JS代码在执行时,是一个代码段一个代码段地执行。
JS代码执行:
JS代码在执行时可以分为两个过程:预编译阶段和代码执行阶段。
1)预编译:进行变量和函数的提升;需要注意的是变量的提升只提升变量名,不会提升变量值,而函数的提升
则是整个函数声明以及函数定义;
2)代码执行:由上至下一行一行的执行。
代码执行过程中的一些概念:
ECStack EC(G) VO EC(f) AO GO
ECStack :执行上下文栈;
EC(G) :全局执行上下文 存储全局的加var 加function的数据存储在VO中;
VO :变量对象 存储的全局的加var 或 加function;
EC(f) :函数执行上下文 存储局部的加var 或 加funciton的局部数据;
AO :活动对象 存储局部的加var 或 加function的局部数据;
GO: 全局对象:默认情况下,里面就存储了很多东西。
全局的数据,加Var的全局数据,加functon的全局数据,不加var的变量都会存储到GO中。