JavaScript

第一章 JavaScript简介

1.1、JavaScript的起源

JavaScript诞生于1995年,它的出现主要是用于处理网页中的前端验证。所谓的前端验证,就是指检查用户输入的内容是否符合一定的规则。比如:用户名的长度,密码的长度,邮箱的格式等。但是,有的同学可能会有疑问,这些验证,后端不也可以进行验证吗?确实,后端程序的确可以进行这些验证,但你要清楚,在1995年那个年代,网速是非常慢的,向后端发送一个请求,浏览器很久才能得到响应,那这无疑是一种非常不好的用户体验。

1.2、JavaScript的组成

   1.3、JavaScript的特点  

解释型语言

JavaScript是一门解释型语言,所谓解释型值语言是指不需要被编译为机器码在执行,而是直接执行。由于少了编译这一步骤,所以解释型语言开发起来尤为轻松,但是解释型语言运行较慢也是它的劣势。不过解释型语言中使用了JIT技术,使得运行速度得以改善。

动态语言

JavaScript是一门动态语言,所谓的动态语言可以暂时理解为在语言中的一切内容都是不确定的。比如一个变量,这一时刻是个整型,下一时刻可能会变成字符串了。当然这个问题我们以后再谈。不过在补充一句动态语言相比静态语言性能上要差一些,不过由于JavaScript中应用的JIT技术,所以JavaScript可能是运行速度最快的动态语言了。

类似于 C 和 Java 的语法结构

JavaScript的语法结构与C和Java很像,向for、if、while等语句和Java的基本上是一模一样的。所以有过C和Java基础的同学学习起来会轻松很多。不过JavaScript和与Java的关系也仅仅是看起来像而已。

基于原型的面向对象

JavaScript是一门面向对象的语言。啥是对象?下次聊。

Java也是一门面向对象的语言,但是与Java不同JavaScript是基于原型的面向对象。啥是原型?下次聊。

严格区分大小写

JavaScript是严格区分大小写的,也就是abc和Abc会被解析器认为是两个不同的

1.4、JavaScript的使用

1.4.1、标签引用

在HTML中在script标签中就可以编写JavaScript代码

<script>
    alert("Hello,World!");
</script>

1.4.2、文件引用


在一个单独的js文件中也可以编写JavaScript代码,然后在HTML文件中使用script标签进行引用,以下是一个简单演示。

main.html

<script src="main.js"></script>

main.js

alert("Hello,World!");

1.5、JavaScript的输出
1.5.1、页面输出
如何使用JavaScript向页面输出一句话,请参考以下代码。

<script>
    document.write("Hello,World!");
</script>


1.5.2、控制台输出
如何使用JavaScript向控制台输出一句话,请参考以下代码。

注意:页面按F12弹出控制台

<script>
    console.log("输出一条日志");//最常用
    console.info("输出一条信息");
    console.warn("输出一条警告");
    console.error("输出一条错误");
</script>

 


1.5.3、弹出窗口输出
如何使用JavaScript向弹出窗口输出一句话,请参考以下代码。

<script>
    alert("Hello,World!");
</script>


1.6、JavaScript的注释
注释中的内容不会被解析器解析执行,但是会在源码中显示,我们一般会使用注释对程序中的内容进行解释。

JS中的注释和Java的的一致,分为两种:

单行注释:// 注释内容
多行注释:/* 注释内容 */
1.6.1、单行注释
<script>
    // 这是注释内容
    console.log("Hello,World!");
</script>


1.6.2、多行注释
<script>
    /**
     * 这是注释内容
     */
    console.log("Hello,World!");
</script>

第二章 JavaScript基础语法
2.1、标识符

所谓标识符,就是指给变量、函数、属性或函数的参数起名字。

标识符可以是按照下列格式规则组合起来的一或多个字符:

第一个字符必须是一个字母、下划线( _ )或一个美元符号( $ )。
其它字符可以是字母、下划线、美元符号或数字。
按照惯例,ECMAScript 标识符采用驼峰命名法。
标识符不能是关键字和保留字符。

2.2、字面量和变量
2.2.1、字面量

字面量实际上就是一些固定的值,比如:1、2 、3、true、false、null、NaN、“hello”,字面量都是不可以改变的,由于字面量不是很方便使用,所以在JavaScript中很少直接使用字面量,使用的而是变量。

2.2.2、变量
变量的作用是给某一个值或对象标注名称。比如我们的程序中有一个值123,这个值我们是需要反复使用的,这个时候 我们最好将123这个值赋值给一个变量,然后通过变量去使用123这个值。

变量的声明: 使用var关键字声明一个变量。

var a;

变量的赋值: 使用=为变量赋值。

a = 123;

声明和赋值同时进行:

var a = 123;

2.3、数据类型
2.3.1、类型分

数据类型决定了一个数据的特征,比如:123和”123”,直观上看这两个数据都是123,但实际上前者是一个数字,而后者是一个字符串。

对于不同的数据类型我们在进行操作时会有很大的不同。

JavaScript中一共有5种基本数据类型:

字符串型(String)
数值型(Number)
布尔型(Boolean)
undefined型(Undefined)
null型(Null)
这5种之外的类型都称为Object,所以总的来看JavaScript中共有六种数据类型。

 

2.3.2、typeof运算符

使用typeof操作符可以用来检查一个变量的数据类型。

示例代码:

console.log(typeof 123);
console.log(typeof "Hello,World!");
console.log(typeof true);
console.log(typeof undefined);
console.log(typeof null);

2.3.3、String

String用于表示一个字符序列,即字符串。字符串需要使用 单引号 或 双引号 括起来。

转义字符:

image-20201013085608008

2.3.4、Number
Number 类型用来表示整数和浮点数,最常用的功能就是用来表示10进制的整数和浮点数。

Number表示的数字大小是有限的,如果超过了这个范围,则会返回 ±Infinity。

最大值:+1.7976931348623157e+308
最小值:-1.7976931348623157e+308
0以上的最小值:5e-324
特殊的数字:

Infinity:正无穷
-Infinity:负无穷
NaN:非法数字(Not A Number)
其它的进制:

二进制:0b 开头表示二进制,但是,并不是所有的浏览器都支持
八进制:0 开头表示八进制
十六进制:0x 开头表示十六进制

2.3.5、Boolean

布尔型也被称为逻辑值类型或者真假值类型。

布尔型只能够取真(true)和假(false)两种数值。除此以外, 其它的值都不被支持。

2.3.6、Undefined

Undefined 类型只有一个值,即特殊的 undefined。

在使用 var 声明变量但未对其加以初始化时,这个变量的值就是 undefined。

2.3.7、Null

Null 类型是第二个只有一个值的数据类型,这个特殊的值是 null。

undefined值实际上是由null值衍生出来的,所以如果比较undefined和null是否相等,会返回true。

2.4、强制类型转换

强制类型转换指将一个数据类型强制转换为其它的数据类型。一般是指,将其它的数据类型转换为String、Number、Boolean。

2.4.1、转换为String类型

将其它数值转换为字符串有三种方式:toString()、String()、 拼串。

2.4.2、转换为Number类型
有三个函数可以把非数值转换为数值:Number()、parseInt() 和parseFloat()。Number()可以用来转换任意类型的数据,而后两者只能用于转换字符串。parseInt()只会将字符串转换为整数,而parseFloat()可以将字符串转换为浮点数。

2.4.3、转换为Boolean类型
将其它的数据类型转换为Boolean,只能使用Boolean()函数。

使用Boolean()函数
数字 —> 布尔
除了0和NaN,其余的都是true
字符串 —> 布尔
除了空串,其余的都是true
null和undefined都会转换为false
对象也会转换为true

2.5、运算符

运算符也叫操作符,通过运算符可以对一个或多个值进行运算并获取运算结果。

比如:typeof就是运算符,可以来获得一个值的类型,它会将该值的类型以字符串的形式返回(number string boolean undefined object)

2.5.1、算术运算符

算术运算符用于表达式计算。

2.5.2、关系运算符

关系运算符在逻辑语句中使用,以测定变量或值是否相等。

2.5.3、赋值运算符

赋值运算符用于给 JavaScript 变量赋值。

2.5.4、逻辑运算符

逻辑运算符用于测定变量或值之间的逻辑。

2.5.5、比较运算符

比较运算符用来比较两个值是否相等,如果相等会返回true,否则返回false。

.5.6、条件运算符

JavaScript 还包含了基于某些条件对变量进行赋值的条件运算符。

JavaScript 还包含了基于某些条件对变量进行赋值的条件运算符。

语法:variablename=(condition)?value1:value2;

举例:result=(age<18)?"年龄太小":"年龄合适";

执行流程:如果condition为true,则执行语句1,并返回执行结果,如果为false,则执行语句2,并返回执行结果。

2.5.7、逗号运算符

使用逗号可以在一条语句中执行多次操作。

比如:var num1=1, num2=2, num3=3;

使用逗号运算符分隔的语句会从左到右顺 序依次执行。

2.6、运算符优先级

运算符优先级由上到下依次减小,对于同级运算符,采用从左向右依次执行的方法。

2.7、代码块
2.7.1、语句
前边我所说表达式和运算符等内容可以理解成是我们一 门语言中的单词,短语。而语句(statement)就是我们这个语言中一句一句完 整的话了。语句是一个程序的基本单位,JavaScript的程序就是由一条一条语句构成的,每一条语句使用;结尾。

JavaScript中的语句默认是由上至下顺序执行的,但是我们也可以通过一些流程控制语句来控制语句的执行顺序。

2.7.2、代码块
代码块是在大括号 {} 中所写的语句,以此将多条语句的集合视为一条语句来使用。

2.8、条件语句

条件语句是通过判断指定表达式的值来决定执行还是跳过某些语句,最基本的条件语句:

var age = 16;
if (age < 18) {
    console.log("未成年");
}
  • if…else
  • switch…case
  • 2.8.1、if…else

  • if…else语句是一种最基本的控制语句,它让JavaScript可以有条件的执行语句。

  • 第一种形式:

    if(expression)
        statement
    
2.8.2、switch…case

switch…case是另一种流程控制语句。

switch语句更适用于多条分支使用同一条语句的情况。

2.9、循环语句

循环语句和条件语句一样,也是基本的控制语句,只要满足一定的条件将会一直执行,最基本的循环语句:

  • while
  • do…while
  • for
2.9.1、while

while语句是一个最基本的循环语句,while语句也被称为while循环。

语法格式:

while(条件表达式){
    语句...
}

2.9.2、do…while
do…while和while非常类似,只不过它会在循环的尾部而不是顶部检查表达式的值,因此,do…while循环会至少执行一次。相比于while,do…while的使用情况并不 是很多。

语法格式:

do{
    语句...
}while(条件表达式);

2.9.3、for
for语句也是循环控制语句,我们也称它为for循环。大部分循环都会有一个计数器用以控制循环执行的次数, 计数器的三个关键操作是初始化、检测和更新。for语句 就将这三步操作明确为了语法的一部分。

语法格式:

for(初始化表达式 ; 条件表达式 ; 更新表达式){
    语句...
}

2.9.4、跳转控制
  • break:结束最近的一次循环,可以在循环和switch语句中使用。
  • continue:结束本次循环,执行下一次循环,只能在循环中使用。

  • 42
    点赞
  • 49
    收藏
    觉得还不错? 一键收藏
  • 0
    评论
评论
添加红包

请填写红包祝福语或标题

红包个数最小为10个

红包金额最低5元

当前余额3.43前往充值 >
需支付:10.00
成就一亿技术人!
领取后你会自动成为博主和红包主的粉丝 规则
hope_wisdom
发出的红包
实付
使用余额支付
点击重新获取
扫码支付
钱包余额 0

抵扣说明:

1.余额是钱包充值的虚拟货币,按照1:1的比例进行支付金额的抵扣。
2.余额无法直接购买下载,可以购买VIP、付费专栏及课程。

余额充值