JavaScript入门

Posted keep250

tags:

篇首语:本文由小常识网(cha138.com)小编为大家整理,主要介绍了JavaScript入门相关的知识,希望对你有一定的参考价值。

javascript入门

JavaScript是什么

首先,JavaScript里面的Java是因为JavaScript的创造者在Sun公司工作,本来的LiveScript改名为JavaScript是一个双赢决策。JavaScript是一种运行在客户端(在用户设备运行,不运行在服务器)的脚本语言(高级编程语言),是目前世界上最流行的语言之一。脚本语言不需要编译,运行过程中由js解释器(js引擎)逐行来进行解释并执行,按代码从上到下逐步解释执行。目前也可以基于Node.js技术进行服务器端编程。

快速扫盲开胃JavaScript视频

本文的大部分内容都来自于这个视频中的知识点总结:较全的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的作用

  1. 表单动态校验(密码强度检测)(JS产生最初的目的)
  2. 网页特效
  3. 服务端开发(Node.js:前端后端通吃)
  4. 桌面程序(Electron)
  5. App(Cordova)
  6. 控制硬件-物联网(Ruff)
  7. 游戏开发(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是newline的意思
斜杠
单引号
双引号
tab缩进
 空格,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的能力。初学者不要觉得调试代码麻烦就不去调试,知识点花点功夫肯定学的会,但代码调试不去练的话永远学不会。

以上是关于JavaScript入门的主要内容,如果未能解决你的问题,请参考以下文章

JavaScript基础——JavaScript入门

JavaScript入门JavaScript专题1

JavaScript教程-从入门到精通

JavaScript学习基础篇第1篇: JavaScript 入门

JavaScript入门

JavaScript 入门