JavaScript入门
JavaScript入门
JavaScript是什么
首先,JavaScript里面的Java是因为JavaScript的创造者在Sun公司工作,本来的LiveScript改名为JavaScript是一个双赢决策。JavaScript是一种运行在客户端(在用户设备运行,不运行在服务器)的脚本语言(高级编程语言),是目前世界上最流行的语言之一。脚本语言不需要编译,运行过程中由js解释器(js引擎)逐行来进行解释并执行,按代码从上到下逐步解释执行。目前也可以基于Node.js技术进行服务器端编程。
本文的大部分内容都来自于这个视频中的知识点总结:较全的JavaScript视频教程-黑马程序员
HTML/CSS/JS的关系
- HTML/CSS标记语言——描述类语言
- HTML决定网页结构和内容(决定看到什么),相当于人的身体
- CSS决定网页呈献给用户的模样(决定好不好看),相当于给人穿衣服和化妆
- JS脚本语言——编程类语言
- JS实现业务逻辑和页面控制(决定功能),相当于人的各种动作
- JavaScript的组成包括EVMAScript(JavaScript语法)、DOM(页面文档对象模型)、BOM(浏览器对象模型)
浏览器执行JS简介
浏览器分为两部分:渲染引擎和JS引擎
- 渲染引擎:用来解析HTML和CSS,俗称内核,比如chrome浏览器的blink,老版本的webkit
- JS引擎:也称为JS解释器。用来读取网页中的JavaScript代码,对其处理后运行,比如chrome浏览器的V8(号称目前最快的JS引擎)
浏览器本省并不会执行JS代码,而是通过内置JavaScript引擎(解释器)来执行JS代码。JS引擎执行代码时逐行解释每一句源码(转换为机器语言),然后由计算机去执行,所以JavaScript语言归为脚本语言,会逐行解释执行。
JavaScript的作用
- 表单动态校验(密码强度检测)(JS产生最初的目的)
- 网页特效
- 服务端开发(Node.js:前端后端通吃)
- 桌面程序(Electron)
- App(Cordova)
- 控制硬件-物联网(Ruff)
- 游戏开发(cocos2d-js)
JavaScript输入输出语句
为了方便信息的输入输出,JS中提供了一些输入输出语句,其常用的语句如下:
方法 | 说明 | 归属 |
---|---|---|
alert(msg) | 浏览器弹出警示框,展示给用户 | 浏览器 |
console.log(msg) | 浏览器控制台打印输出信息,控制台输出,给程序员用 | 浏览器 |
prompt(info) | 浏览器弹出输入框,用户可输入 | 浏览器 |
变量
变量的本质:变量是程序在内存中申请的一块用来存放数据的空间。
申明变量:var是一个JS关键字,用来申明变量(variable变量的意思)。使用该关键字申明变量后,计算机会自动为变量分配内存空间,不需要程序员管。
申明一个变量并赋值,称为变量的初始化。(比如:var age = 18; //声明变量的同时赋值为18)
声明变量特殊情况:
情况 | 说明 | 结果 |
---|---|---|
var age; console.log(age); | 只声明,不赋值 | undefined |
console.log(age); | 不声明,不赋值,直接使用 | 报错 |
age = 10; console.log(age); | 不声明,只赋值 | 10 |
变量命名规范:
- 由字母(A-Z,a-z)、数字(0-9)下划线(_)、美元符号($)组成。
- 严格区分大小写。
- 不能以数字开头。
- 不能是关键字、保留字。
- 变量名必须有意义。
- 遵守驼峰命名法,首字母小写,后面单词的首字母需要大写。
数据类型
在计算机中,不同的数据所需占用的存储空间是不同的,为了便于把数据分成所需内存大小不同的数据,充分利用存储空间,于是定义了不同的数据类型。JavaScript是一种弱类型或者说动态语言。这意味着不用提前声明变量的类型,在运行过程中,类型会被自动确定。
在代码运行时,变量的数据类型是由JS引擎根据 = 右边变量值的数据类型来判断的,运行完毕之后,变量就确定了数据类型。JavaScript拥有动态类型,同时也意味着相同的变量可用作不同的类型。
JS把数据类型分为两类:
- 简单数据类型(Number,String,Boolean,Undefined,Null)
- 复杂数据类型(object)
简单数据类型在内存中会存在栈里面,复杂数据类型在内存中会存在堆里面。
数据类型 | 说明 | 默认值 |
---|---|---|
Number | 数字型,包含整型值和浮点型值,如21、0.21。Number数字型,只要在前面加0就会自动标识为8进制,数字前面加0x表示十六进制。Number.MAX_VALUE可表示数字中的最大值,Number.MIN_VALUE表示最小值。infinity表示无穷大,大于任何数;-infinity表示无穷小,小于任何数值;NaN,Not a number,表示非数。isNan()这个方法可以返回一个值验证一个值是否是非数字,如果是数字则返回false,不是数字返回true。 | 0 |
Boolean | 布尔值类型,如true、false,当它们和数字型相加时等价于1和0 | false |
String | 字符串型,如“张三”。注意在js里面,字符串都带引号,可以是双引号“”,也可以是单引号''。JS可以用单引号嵌套双引号或者用双引号嵌套单引号(外双内单或外单内双)。字符串中存在一些转移字符,但是这些字符要写到引号里面。字符串是由若干字符组成的,这些字符的数量就是字符串的长度。通过字符串的length属性可以获取整个字符串的长度。使用+号时,数值相加,字符相连。 | “” |
Undefined | var a; 声明了变量a但是没有给值,此时a = undefined。Undefined型和String型相加出来的是String型,和Number型相加出来的是NaN。 | undefined |
Null | var a = null; 声明了变量a为空值 | null |
在String中,存在一些转义符,可以在String串中起到转义作用而不会直接输出渲染,它们以\开头,常用的转义符及说明如下:
转义符 | 解释说明 |
---|---|
\n | 转行符,n是newline的意思 |
\ | 斜杠\ |
\’ | 单引号 |
\“ | 双引号 |
\t | tab缩进 |
\b | 空格,b是blank的意思 |
注:typerof 可以检测变量的类型。
关于数据类型转换,我们通常会实现3种方式的转换:
转换为字符串类型
方式 | 说明 | 案例 |
---|---|---|
toString() | 转成字符串 | var num = 1; alert(num.toString()); |
String()强制转换 | 转成字符串 | var num = 1; alert(String(num)); |
加号拼接字符串 | 和字符串拼接的结果都是字符串 | var num = 1; alert(num + "我是字符串"); |
转换为数字型(重点)
方式 | 说明 | 案例 |
---|---|---|
parseInt(string)函数 | 将string类型转成整数数字型 | parseInt('78') |
parseFloat(string)函数 | 将string类型转成浮点数数值型 | parseFloat('78.21') |
Number()强制转换函数 | 将string类型转换为数值型 | Number('12') |
js隐式转换(- * /) | 利用算术运算隐式转换为数值型 | '12' - 0 |
转换为布尔型
方式 | 说明 | 案例 |
---|---|---|
Boolean()函数 | 其他类型转换成布尔值 | Boolean('true'); |
代表空、否定的值会被转换为false,如"、0、NaN、null、undefined,其余值都会被转换为true。
运算符
运算符包括:算数运算符(浮点数运算会有误差,尽量避免直接运算浮点数)、递增和递减运算符、比较运算符(注意JS有全等的概念:=,要求两侧的值和数据类型都相等,双等符号只要求两边的值相等)、逻辑运算符(&&、||)、赋值运算符(=、+=、-、%=、*=...)。还需要知道运算符的优先级,表单如下:
优先级 | 运算符 | 顺序 |
---|---|---|
1 | 小括号 | () |
2 | 一元运算符 | ++ -- ! |
3 | 算数运算符 | 先* / % 后 + - |
4 | 关系运算符 | > >= < <= |
5 | 相等运算符 | == != === !== |
6 | 逻辑运算符 | 先 && 后 || |
7 | 赋值运算符 | = |
8 | 逗号运算符 | , |
流程控制
if else、switch、for、while、do-while、continue、三元表达式 ? :
断点调试
断点调试可以帮我们观察程序的运行过程。断点调试是指自己在程序的某一行设置一个断点,调试时,程序运行到这一行就会停住,然后你可以一步一步往下调试,调试过程中可以看各个变量当前的值,出错的话,调试到出错的代码行即显示错误,停下。
浏览器中按F12——>sources——>找到需要调试的文件——>在程序的某一行设置断点
Watch:监视,通过watch可以监视变量的值得变化,非常常用。
F11:程序单步执行,让程序一行一行的执行,这个时候,观察watch中变量的值得变化。
代码调试的能力非常重要,只有学会了代码调试,才能学会自己解决bug的能力。初学者不要觉得调试代码麻烦就不去调试,知识点花点功夫肯定学的会,但代码调试不去练的话永远学不会。
数组
创建方式:var arr = [],可以在数组中混合存放任意数据类型的数据。arr.length可以获取数组长度。
新增数组长度可以通过:arr.length = 长度,或者直接arr[5]赋值就可以扩容到下标为5的位置。
函数
在