JavaScript学习路径

Javascript基础
- JS特点
- 使用
- JS编写位置
- JS基本语法
- 字面量和变量
- 标识符
- 数据类型
- - String字符串
  - Number
  - 布尔值
  - Null和Undefined
- 强制类型转换
- - String
  - Number
  - 其他进制的数字
  - 布尔值
- 算数运算符
- 一元运算符
- 自增和自减
- 逻辑运算符
- - 非布尔值的与或运算
- 赋值运算符
- 关系运算符
- - Unicode编码
  - 相等运算符
- 条件运算符（三元运算符）

Javascript基础

JS特点

–解释型语言
–类似于C和Java的语法结构
–动态语言
–基于原型的面向对象

使用

引用

<script type="text/javascript"></script>

alert()
下面我们使用alert()写一个警告框
js一般放于head标签内
代码如下

<!DOCTYPE html>
<html lang="en">
<head><meta charset="UTF-8"><meta http-equiv="X-UA-Compatible" content="IE=edge"><meta name="viewport" content="width=device-width, initial-scale=1.0"><title>Document</title><script type="text/javascript">alert("这是第一行js代码")</script>
</head>
<body></body>
</html>

运行效果如下

document.write()
下面我们使用document.write()

<!DOCTYPE html>
<html lang="en">
<head><meta charset="UTF-8"><meta http-equiv="X-UA-Compatible" content="IE=edge"><meta name="viewport" content="width=device-width, initial-scale=1.0"><title>Document</title><script type="text/javascript">![请添加图片描述](https://img-blog.csdnimg.cn/15e641135f7244d48cdfda70bba239dd.gif)</script>
</head>
<body></body>
</html>

效果如下

我们的body内是没有内容的，则这个document.write是写入body内的
console.log()
下面我们使用console.log向控制台输入

<!DOCTYPE html>
<html lang="en">
<head><meta charset="UTF-8"><meta http-equiv="X-UA-Compatible" content="IE=edge"><meta name="viewport" content="width=device-width, initial-scale=1.0"><title>Document</title><script type="text/javascript">console.log("在哪里出现")</script>
</head>
<body></body>
</html>

效果

我们可以看到这里页面中是没有数据的，那么这个输出到哪里的呢？

我们发现它出现在开发者控制台的控制台中
如果我们将上面三个放在同一个页面会怎么样呢
这里就不放代码，直接看效果了

我们可以看到这些是按顺序进行的。
上面的三个都是输出语句

JS编写位置

我们可以将js代码编写到标签的onclick属性中

下面我们使用js来编写一个点击事件
这里放关键代码

<body><button onclick="alert('已点击');">点我一下</button>
</body>

下面我们来看看效果

只有当我们点击按钮时才会触发js代码，这是由于我们的onclick属性决定的。

下面我们将js代码写入超链接的herf中
如此，点击超链接时会执行js代码

<body><a href="javascript:alert('已点击');">点击</a>
</body>

下面我们看看效果

上面的种种，虽然js可以写在标签的属性内，但是题目属于结构与行为耦合，不方便维护，所以这里不推荐使用。
那么我们写在哪里呢？
开始时我们将js写在script标签内的。同样我们可以将js写在一个单独的文件中，引入来使用
由script标签引入
和css引入方式类似，我们在head内使用

<script src=""></script>

这样就实现了js的引入，这里就不过多说明了。
将JS写入到外部文件夹中可以在不同页面中同时引用，也可以利用到浏览器的缓存机制，这是很推荐的使用方式
Tips：script标签一旦用于引入外部文件了，就不能在编写代码了，即使编写了，浏览器也会忽略。如果需要那直接可以创建一个新的script标签
例如

<script src=""></script>
<script>***</script>

第一行是引入外部js文件，所以我们另起一个来运行

JS基本语法

JS注释

/*
~~
*/

这是多行注释，和CSS差不多，注释内容不会运行，但是可以在源码中查看

//单行注释

这是单行注释，只对其后的有作用
1.JS中严格区分大小写
2.JS中每一条语句以分号（;）结尾
但是如果我们不加分号，浏览器会自动添加，但是会消耗一些系统资源，而且有时候浏览器会错加分号，所以开发中分号必须写
*3.JS中会忽略多个空格和换行，所以我们可以利用空格和换行对代码进行格式化

字面量和变量

字面量：一些不可以改变的值
例如：1、2、3之类
字面量是可以直接使用的，但是我们一般都不会直接使用字面量
变量：变量可以用来保存字面量，而且变量的值是可以任意改变的
变量更加方便我们使用，所以在开发中都是通过变量去保存一个字面量，而且我们很少直接使用字面量。也可以通过变量来描述字面量

声明变量
那么我们怎么声明变量呢？
我们使用var关键字来声明一个变量

var a;
a=123;
a=45678;console.log(a);

上面内容是写入到script标签内的，我们看看运行效果

我们可以看到控制台输出了第二次赋值的a。
我们可以将声明和赋值同时进行

var b = 789;
var c = 975;

标识符

标识符：所有可以由我们自主命名的都可以称为标识符。
例如：变量名、函数名、属性名都属于标识符。
命名一个标识符时需要遵守如下的规则
1.标识符中可以含有字母、数字、_、$
2.标识符不能以数字开头
3.标识符不能是ES中的关键字或者保留字
4.标识符一般都采用驼峰命名法：首字母小写，每个单词的开头字母大写，其余字母小写

数据类型

数据类型值得就是字面量的类型
在JS中一共有六种数据类型
String字符串
Number数值
Boolean布尔值
Null空值
Undefined未定义
Object对象
其中String Number Boolean Null Undefined属于基本数据类型，而Object属于引用数据类型

String字符串

在JS中字符串要引号引起来
使用双引号或单引号都可以，但是不能混着用
引号不能嵌套：双引号不能放双引号，单引号不能放单引号

var str = "hello";

在字符串中我们可以使用\作为转义字符，当表示一些特殊符号时可以使用\转义

var str = "我说：\"今天天气真不错！\"";

\"表示"
\'表示'
\n表示换行
\t表示制表符
\\表示\

Number

在JS中所有的数值都是Number类型，包括整数和浮点数（小数）
其中

var a = "123";
var b = 123;

上面两个不是同一个东西，a为字符串123，b为数字。
那么我们如何检查这类现象呢？
我们使用typeof检查
语法

typeof 变量
typeof a

但是这样是无法输出结果的，所以我们都使用控制台输出

console.log(typeof a);

这样我们就可以在控制台看到类型。

JS中我们可以表示的数字的最大值为

Number.MAX_VALUE

我们来看看值为多少

上面为我们JS的最大值输出结果
如果我们使用最大值平方，那么他会输出Infinity表示无穷
使用typeof检查Infinity同样会返回Number
如果我们计算如下

a = "abc" * "bcd";
console.log(a);

他会输出什么呢？
结果为NAN
NAN是一个特殊的数字，表示Not A Number不是一个数字
如果a=NAN那么检查会输出什么呢
他也会输出number。
既然有最大值，那么就会有最小值，这个最小值不是负的最大值而是另外一种
我们令a = Number.MIN_VALUE;
这里输出结果为5e-324他依然为正数，所以这不是一般我们所理解的最小值，而是零以上的最小值。

布尔值

布尔值只有两个，主要用来做逻辑判断
true表示真
false表示假
使用typeof检查布尔值还会返回boolean

Null和Undefined

Null类型的值只有一个，就是null
null这个值专门用来表示一个为空的对象
使用typeof检查一个null值会返回object

Undefined类型值只有一个，就是undefined
当声明一个变量，但是不给变量赋值时，它的值就是undefined
使用typeof检查一个undefined时也会返回一个undefined

强制类型转换

String

强制类型转换：将一个数据类型强制转换为其他的数据类型，类型转换主要指，将其他的数据类型转换为String、Number、Boolean
那么我们怎么将其他数据类型转为String呢？
法一：
调用被转换数据类型的toString()方法，这个方法不会影响到原变量
举例

var a = 123;
var b = a.toString();console.log(typeof b);
console.log(b);

输出结果如图

这里我们可以看到数据类型成功转换，
那么我i吗如果不想另创新值，我们可以直接使用a = a.toString();来转换，效果是一样的
Tips：null和undefined是没有toString()方法，如果调用则会报错
法二：
调用String()函数并将被转换的数据作为参数传递给函数。

a = 123
a = String(a);

输出结果是和法一相同的
但是这种方法可使null和undefined转换为字符串

Number

调用Number()函数将值转换为Number类型
如果我们被转换的为字母之类的呢，转换后输出值为NaN
str–>数字
如果是纯数字的字符串，则直接将其转换为数字
如果字符串内含有非数字的内容，则转为NaN
如果字符串是一个空串或者是一个全是空格字符则转换为0
布尔–>数字
true转为1
false转为0
null–>数字 0
undefined–>数字NaN
法二
这种专门对付字符串
parseInt()把一个字符串转换为一个整数
parseFloat()把一个字符串转换为一个浮点数
parseInt()可以将一个字符串中有效整数内容取出来
同样parseFloat()他获得有效小数例如123.236.21则会筛出123.236会忽略后面.21因为他不是有效小数

其他进制的数字

如果需要16进制数字，则需以0x开头
eg：a = 0x10;则输出结果为16
如果a =0xff则输出255
如果需要以8进制数字则以0开头
如果表示2进制数字则以0b开头，但是不是所有的浏览器都是支持的
像070之类的字符串，有些浏览器会当成8进制数转换有些会以10进制转换那么我们怎么解决呢

a = "070"
a = parseInt(a,10); //10表示10进制

可以在parseInt()中传递一个第二参数，来指定数字的进制

布尔值

将其他数据类型转换为Boolean使用Boolean()函数
数字

var a=123
a = Boolean(a);
console.log(a);

输出结果为true，而a赋值为-123输出还是true；
输入Infinity输出依然为true而赋值为0则输出false；
综上我们知道非零为true及除了0和NaN其余都是true
字符串
除了空串其余都为true
null和undefined都会转换为false

算数运算符

运算符也叫操作符，通过运算符我们可以对一个或多个值进行运算，并获取运算结果。
例如：typeof就是运算符，可以获得一个值的类型，他会将该值的类型以字符串的形式返回。
算数运算符：

+       可以将两个值进行加法运算并将结果返回，如果对两个字符串进行加法运算，则会做拼串操作，任何值和字符串做加法运算，都会先转换为字符串，然后再和字符串做拼串操作
-
*
/
%取余

由上面加法的转换字符串操作，我们可以利用，只需要为任意的数据类型＋一个""即可将其转换为字符串，这是一种隐式类型转换
Tips：除了加法会将其余数据类型转换为字符串，其余都是转换为数字类型

一元运算符

一元运算符只需要一个操作数，例如typeof()、+正号（不会对数字产生任何影响）、-负号（可以对数字进行负号的取反），对于非数字类型的值他会先转换为数字类型然后再计算，可以对一个其他类型数据使用+，来将其转换为number，他的原理和Number()函数是一样的

自增和自减

自增为++
通过自增可以使变量在自身基础上加1
对于一个变量自增后，原变量的值会立即自增1
无论是a++还是++a都会立即使原变量值自增1
不同的是a++和++a的值不同
a++的值等于原变量的值（自增前的值）
++a的值等于原变量的新值（自增后的值）
自减为–
和自增几乎一样这里就不赘述了

逻辑运算符

！非
&&与
||或

！
如果计算

a =!a;

那么输出结果为false
所谓非运算符就是对一个布尔值进行取反操作
true变false，false变true
如果对一个布尔值去两次反，它不会变化
如果对非布尔值运算，则会将其转换为布尔值然后取反。
所以我们可以为任意数据类型取两次反，来将其转换为布尔值原理和Boolean()一样
&&
&&可以对符号两侧值进行运算并返回结果
运算规则：
两个值中只要由一个值为false就返回false
只有两个值都为true才返回true
JS中的与属于短路与，如果第一个值为false则不会看第二个值
||
||可以对符号两侧的值进行或运算并返回结果
运算规则：
两个值中只要有一个true就返回true
如果两个值都为false才返回false
JS中的或属于短路的或
如果第一个值为true则不会检查第二个值

非布尔值的与或运算

&&和||对非布尔值运算
会先将其转换为布尔值，然后运算
&&
如果第一个值为true则必然返回第二个值
如果第一个值为false则直接返回第一个值
||
如果第一个值为true则直接返回第一个值
如果第一个值为false则返回第二个值

赋值运算符

=可以将符号右侧的值赋值给左侧的变量
+=
a +=5等价于 a = a + 5
-=
a-=5等价于a = a - 5
*=
a*=5等价于a=a*5
/=
a/=5等价于a=a/5
%=
a%=5等价于a=a%5

关系运算符

通过关系运算符可以比较两个值之间的大小关系
如果关系成立他会返回true，如果关系不成立则额返回false

>
判断符号左侧值是否大于右侧值
如果关系成立他会返回true，如果关系不成立则额返回false
>=
判断符号左侧的值是否大于或等于右侧的值
<
<=

注意的是
比较两个字符串时，比较的时字符串的字符编码，比较字符编码时时一位一位进行比较的
如果两位一样，则比较下一位，所以借用他来对英文排序。
比较中文是没有意义的
如果比较的两个字符串型数字，可能得到不可预期的结果
Tips：比较两个字符串型数字时，一定要转型

Unicode编码

在字符串中使用转义字符输入Unicode编码
\u四位编码

console.log("\u2620");

在网页中使用Unicode编码
&#编码；这里使用的编码需要10进制

相等运算符

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

==
相等运算
当使用==来比较两个值时，如果值类型不同，则会自动进行类型转换，将其转换为相同的类型然后再比较
不相等
不相等用来判断两个值是否不相等，如果不相等返回true，否则返回false
使用！=来做不相等运算
不相等也会对变量进行自动类型转换，如果转换后相等它也会返回false

===
全等
用来判断两个值是否全等，他和相等类似，不同的时它不会做自动类型转换
如果两个值类型不同直接返回false

！==
不全等
用来判断两个值是否不全等，和不等类似，不同的时它不会做自动类型转换
如果两个值类型不同直接返回true

undefined衍生自null所以这两个值做相等判断时，会返回true
NaN不和任何值相等，包括他自己
可以通过isNaN()来判断一个值是否为NaN

条件运算符（三元运算符）

语法：
条件表达式？语句1：语句2；
执行流程：
条件运算符在执行时，首先对条件表达式进行求值
如果该值为true则执行语句1并返回结果
如果该值为false则执行语句2并返回结果
如果条件表达式求值结果是一个非布尔值，会将其转换为布尔值然后运算

JavaScript学习第一周相关推荐

201671010140. 2016-2017-2 《Java程序设计》java学习第一周
java学习第一周本周是新学期的开端,也是新的学习进程的开端,第一次接触java这门课程,首先书本的厚度就给我一种无形的压力,这注定了,这门课程不会是轻松的,同时一种全新的学习方 ...
JavaScript学习第一课（一）
JavaScript学习第一课(一) 学习内容一.什么是JavaScript 二.如何引用JavaScript 三.JavaScript使用时注意的事项四.JavaScript中的保留字与关键字 ...
《Javascript入门学习全集》 Javascript学习第一季（7）
Javascript学习第一季(7) 上篇文章我们讲了用dom方式创建节点,复制节点,插入节点. 今天我们将讲删除节点,替换节点,查找节点等. 直接从方法说起: <!--[if !su ...
掉进悬崖的小白，捡到python基础秘籍，学习第一周——语法基础，小游戏，无脑循环
掉进悬崖的小白,捡到python基础秘籍,学习第一周--语法基础,小游戏,无脑循环人生苦短,我用python 语言的种类: 语言的发展: 什么是python 搭建 Python开发环境: 集成开发环 ...
Datacamp 学习第一周
Datacamp 学习第一周总结 Intro to Python for Data Science 列表 numpy package 字典 pandas comparision operators l ...
我的JAVA学习第一周知识总结，个人感受小结
JAVA学习第一周 1,了解三种开发模型 2,建包.建类的规范格式 3,了解不同数据类型 4,JAVA环境搭建 5,JVM.JRE.JDK是什么 6,if/else if语句的使用 7,各个语句swi ...
前端学习第一周-计算机基础，html标签的介绍，其中包括列表，表格以及表单的使用
前端学习第一周-HTML基础文章目录前端学习第一周-HTML基础前言 DAY 1 计算机组成计算机网络 DAY 2 vscode快捷方式 HTML骨架 DAY 3 HTML属性 HTML标签 ...
python学习第一周总结
python学习第一周总结一.Markdown语法 Markdown是一种轻量级标记语言,排版语法简洁,它使用易读易写的纯文本格式编写文档,可与HTML混编,可导出 HTML.PDF 以及本身的 . ...
Java学习第一周总结
201711671227<Java程序设计>第一周学习总结教材学习内容总结主要学习了如何下载及安装Java,如何调试环境变量,系统变量等,其次更为重要的是掌握了使用Java来编译运行程 ...

JavaScript学习第一周

JavaScript学习路径

Javascript基础

JS特点

使用

JS编写位置

JS基本语法

字面量和变量

标识符

数据类型

String字符串

Number

布尔值

Null和Undefined

强制类型转换

String

Number

其他进制的数字

布尔值

算数运算符

一元运算符

自增和自减

逻辑运算符

非布尔值的与或运算

赋值运算符

关系运算符

Unicode编码

相等运算符

条件运算符（三元运算符）

JavaScript学习第一周相关推荐

最新文章

热门文章

JavaScript学习 第一周

JavaScript学习路径

Javascript基础

JS特点

使用

JS编写位置

JS基本语法

字面量和变量

标识符

数据类型

String字符串

Number

布尔值

Null和Undefined

强制类型转换

String

Number

其他进制的数字

布尔值

算数运算符

一元运算符

自增和自减

逻辑运算符

非布尔值的与或运算

赋值运算符

关系运算符

Unicode编码

相等运算符

条件运算符（三元运算符）

JavaScript学习 第一周相关推荐

最新文章

热门文章

JavaScript学习第一周

JavaScript学习第一周相关推荐