JavaScript基础教程-优快云博客

本文链接：https://blog.youkuaiyun.com/csdn_nevermore/article/details/128434093

1、JavaScript

JavaScript负责页面中的的行为。

它是一门运行在浏览器端的脚本语言。

2、JS的HelloWorld

格式：

<scropt type="text/javascript">

</script>

alert(““）
document.write（“”）
console.log()

<script>
        alert("这是第一行JS代码"); /* 控制浏览器弹出一个警告框 */
        document.write("一行内容"); /* 让计算机在页面中输出一个内容 */ /* document.write()可以向body中输出一个内容 */
        console.log("猜猜我在哪里？"); /* console.log()向控制台输出一个内容 */
        /* 多条指令从上向下执行 */
    </script>

在这里插入图片描述

3、JS编写位置

<body>
        <!--可以将js代码编写到标签的onclick属性中。
        当我们点击按钮时,js代码才会执行
        虽然可以写在标签的属性中，但是他们属于结构与行为耦合，不方便维护，不推荐使用 -->
        <button onclick="alert('你点我干嘛?!');">点我一下</button>
        <!-- 可以将js代码写在超链接的href属性中，这样当点击超链接时，会执行js代码 -->
        <a href="javascript:alert('让你点你就点!!'); ">你也点我一下</a>
        <a href="javascript:;">你也点我一下</a>
</body>

不推荐使用

4、JS基础语法

引入外部js文件：

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

/* 
	多行注释
	JS注释
	多行注释，注释中内容不会被执行，但是可以在源代码中查看 
*/
//单行注释（只对后面有作用）

1、JS中严格区分大小写
2、JS中每一条语句以分号结尾
（若不加分号，浏览器会自动添加，但是会消耗一些系统资源）
3、JS中会忽略多个空格和换行，可以利用空格和换行对代码进行格式化

5、字面量和变量

字面量
都是不可变的值（如：1，2，3，4）
字面量都是可以直接使用，但是一般不会直接使用字面量。

变量
可以用来保存字面量，而且变量的值是可以任意改变的变量更加方便我们使用，所以在开发中都是通过变量去保存一个字面量，而很少直接使用字面量。

声明变量
在JS中使用var关键字来声明一个变量

var a；

6、标识符

在JS中所有的可以由我们自主命名的都可以称为是标识符。
例如:变量名、函数名、属性名都属于标识符。
命名一个标识符时需要遵守如下的规则:
1.标识符中可以含有字母、数字、_、$。
2.标识符不能以数字开头
3.标识符不能是ES中的关键字或保留字
4.标识符一般都采用驼峰命名法（首字母小写，每个单词开头大写，其余小写）
JS底层保存标识符时实际上是采用的Unicode编码，所以理论上讲，所有的utf-8中含有的内容都可以作为标识符。在这里插入图片描述

7、字符串

数据类型指的是字面量的类型。
在JS中一共有六种数据类型。
String字符串
Number教值
Boolean布尔值
Null空值
Undefined未定义
object对象

其中String Number Boolean Null Undefined属于基本数据类型，而Object属于引用数据类型。

1.String 字符串

JS中的字符串需要使用引号引起来双引号或单引号都行
在字符串中使用\作为转义字符

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

str =“我说:\"今天天气真不错!\"";

使用typeof运算符检查字符串时，会返回"string"

2.Number 数值

JS中所有的整数和浮点数都是Number类型

最大能表示的值：Number.MAX_VALUE= 1.7976931348623157e+308
如果使用Number表示的数字超过最大值则输出显示 Infinity（无穷的）
特殊的数字：能赋值给变量
Infinity 正无穷 a = Infinity ,能赋值
-Infinity 负无穷
NaN 非法数字（Not A Number）
其他进制的数字的表示：
0b 开头表示二进制，但是不是所有的浏览器都支持
0 开头表示八进制
0x 开头表示十六进制

使用typeof检查一个Number类型的数据时，会返回"number"
（包括NaN 和 Infinity）

3.Boolean 布尔值

布尔值主要用来进行逻辑判断，布尔值只有两个
true 逻辑的真
false 逻辑的假
使用typeof检查一个布尔值时，会返回"boolean"

4.Null 空值

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

5.Undefined 未定义

如果声明一个变量但是没有为变量赋值此时变量的值就是undefined
该类型的值只有一个 undefined
使用typeof检查一个Undefined类型的值时，会返回"undefined"

8、强制类型转换

指将一个教据类型强制转换为其他的数据类型
类型转换主要指,将其他的数据类型，转换为
String Number Boolean

（一）将其他的数据类型转换为String

方式一:
– 调用被转换数据类型的toString()方法
– 该方法不会影响到原变量,它会将转换的结果返回
– 但是注意:null和undefined这两个值没有ToString()方法，如果调用他们的方法,会报错

//调用a的ToString()方法
//调用xxx的yyy()方法,就是xxx,yyy ()
a.ToString();

a= true;
a=a .tostring();
a= null;
a=a .tostring();
a= undefine;
a=a .tostring();

console.log(typeof a);
console.log(a);

方式二:
– 调用String()函数,并将被转换的数据作为参数传递给函数
– 使用String()函数做强制类型转换时，对于Number和Boolean实际上就是调用的tostring()方法但是对于null和undefined.就不会调用toString()方法 (它会将null直接转换为"null",将undefined直接转换为“undefined)

//调用String()函数，来将a转换为字符串
a = string(a);

console.log(typeof a);
console.log(a);

（二）将其他的数据类型转换为Number

转换方式一:
– 使用Number()函数
– 字符串–>数字
1.如果是纯数字的字符串,则直接将其转换为数字
2.如果字符串中有非数字的内容，则转换为NaN
3.如果字符串是一个空串或者是一个全是空格的字符
– 布尔 -->数字
ture 转成 1
false转成 0
– Null -->数字 (0)
– Undefined–>数字 (NAN)

转换方式二:
--这种方式专门用来对付字符串
– parseInt()把一个字符串转换为一个整教
– parseFloat()把一个字符串转换为一个浮点数

var a = "123"

///调用Number()函数来将a转换为Number类型
a = Number(a);

a = ture;
a = Number(a);

a = null;
a = Number(a);

a = undefined;
a = Number(a);

a = "123px";
//调用parseInt()函数将a转换为Number
//parseInt()可以将一个字符串中的有效的整数内容去出来,然后转换为Number
a = parseInt(a);

//parseFloat()作用和parseInt()类似,不同的是它可以获得有效的小数
a = "123.456px";
a = parseFloat(a);

//如果对非String使用parseiInt()或parseFloat()它会先将其转换为String，然后在操作
a = true;
a = parseInt(a);

console.log(typeof a);
console.log(a);

其他进制数字

var a = 123;
/*
*在js中，如果需要表示16进制的数字，则需要以0x开头
*        如果需要表示8进制的数字，则需要以0开头
*        如果需要表示2进制的数字，则需要以0b开头
*            但不是所有浏览器都支持
*/
a = 0x10；
a = 0xff
a = 0xCafe

//向"070"这种字符串，有些浏览器会当成8进制解析，有些会当成10进制解析
a = "070";
//可以在parseInt()中传递一个第二个参数,来指定数字的进制
a = parseInt(a,10);

console.log(a);
console.log(typeof a);

（三）将其他的数据类型转换为Boolean

方式一：
– 使用Boolean()函数
– 数字—>布尔
– 除了8和NaN，其余的都是true
– 字符串—>布尔
– 除了空串,其余的都是true
– null和undefined都会转换为false

方式二(隐式类型转换):
– 为任意的数据类型做两次非运算,即可将其转换为布尔值-例子:

var a = "hello";  
a = !!a; //true

9、算术运算符

运算符也叫操作符
通过运算符可以对一个或多个值进行运算,并获取运算结果
比如: typeof就是运算符,可以来获得一个值的类型
它会将该值的类型以字符串的形式返回
number string boolean undefined object
算术运算符
当对非Number类型的值进行送算时，会将这些值转换为Number然后在运算
任何值和NaN做运算都得NaN
+ 对两个值进行加法运算并返回结果
- 对两个值进行减法运算并返回结果
* 对两个值进行乘法运算并返回结果
/ 对两个值进行除法运算并返回结果
% 对两个值进行取余运算并返回结果
注：除了加法以外，对非Number类型的值进行运算时，都会先转换为Number然后在做运算
而做加法运算时，如果是两个字符串进行相加，则会做拼串操作，将两个字符连接为一个字符串。
任何值和字符串做加法，都会先转换为字符串，然后再拼串

10、一元运算符

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

11、自增和自减

自增++
– 通过自增可以使变量在自身的基础上增加 1
– 对于一个变量自增之后，原变量的值会立刻自增 1
– 自增分成两种：后++（a++）和前++（++a）
无论是a++还是++a，都会立即使原变量的值自增1，不同的是a++和++a的值不同
a++的值等于原变量的值(自增前的值)
++a的值等于原变量新值(自增后的值)
自减- -
– 通过自减可以使变量在自身的基础上减1
– 自减分成两种:后–(a–)和前–(–a)
无论是a–还是–a都会立即使原变量的值自减1
不同的是a–和–a的值不同
a–是变量的原值(自减前的值)
--a是变量的新值(自减以后的)

var a = 1;
//使a自增1
//a++;
//++a;
//console.log(a++);
//console.log("a++ = " + ++a);
console.log("a++ = " + a++);
console.log("a = "+a);

var c = 10;
//第一次c++，是在10的基础上自增 
console.log(c++);

//第二次c++，是在11的基础上自增c++;
c++;

12、逻辑运算符

!
非运算可以对一个布尔值进行取反，true变false false边true
当对非布尔值使用!时，会先将其转换为布尔值然后再取反
我们可以利用!来将其他的数据类型转换为布尔值

&&
&&可以对符号两侧的值进行与运算
只有两端的值都为true时，才会返回true。只要有一个false就会返回false。
与是一个短路的与，如果第一个值是false，则不再检查第二个值
对于非布尔值，它会将其转换为布尔值然后做运算，并返回原值
规则：
1.如果第一个值为false，则返回第一个值
2.如果第一个值为true，则返回第二个值

||
||可以对符号两侧的值进行或运算
只有两端都是false时，才会返回false。只要有一个true，就会返回true。
或是一个短路的或，如果第一个值是true，则不再检查第二个值
对于非布尔值，它会将其转换为布尔值然后做运算，并返回原值
规则：
1.如果第一个值为true，则返回第一个值
2.如果第一个值为false，则返回第二个值

13、赋值运算符

=
可以将符号右侧的值赋值给左侧变量
+=

a += 5 相当于 a = a+5    
var str = "hello";  str += "world";

a -= 5  相当于 a = a-5

a *= 5 相当于 a = a*5

a /= 5 相当于 a = a/5

a %= 5 相当于 a = a%5

14、关系运算符

关系运算符用来比较两个值之间的大小关系的
>
>=
<
<=
关系运算符的规则和数学中一致，用来比较两个值之间的关系，
如果关系成立则返回true，关系不成立则返回false。
如果比较的两个值是非数值，会将其转换为Number然后再比较。
如果比较的两个值都是字符串，此时会比较字符串的Unicode编码，而不会转换为Number。

15、Unicode编码表

    <title>Document</title>
    <script type="text/javascript">
        /* 在字符串中使用转义字符输入Unicode编码
        \u四位编码 */
        console.log("lu2620");
    </script>
</head>
<body>
    <!--在网页中使用Unicode编码
        &#编码;这里的编码需要的是10进制
    -->
    <h1 style="font-size: 208px; ">&#9760;</h1>   
</body>
</html>

16、相等运算符

相等，判断左右两个值是否相等，如果相等返回true，如果不等返回false
相等会自动对两个值进行类型转换，如果对不同的类型进行比较，会将其转换为相同的类型然后再比较，转换后相等它也会返回true，null == undifined

!=
不等，判断左右两个值是否不等，如果不等则返回true，如果相等则返回false
不等也会做自动的类型转换。

===
全等，判断左右两个值是否全等，它和相等类似，只不过它不会进行自动的类型转换，
如果两个值的类型不同，则直接返回false

!==
不全等，和不等类似，但是它不会进行自动的类型转换，如果两个值的类型不同，它会直接返回true

特殊的值：
null和undefined
由于undefined衍生自null，所以null == undefined 会返回true。
但是 null === undefined 会返回false。
NaN
NaN不与任何值相等，报告它自身 NaN == NaN //false

判断一个值是否是NaN
使用isNaN()函数

17、三元运算符

语法：条件表达式?语句1:语句2;
执行流程：
先对条件表达式求值判断，
如果判断结果为true，则执行语句1，并返回执行结果
如果判断结果为false，则执行语句2，并返回执行结果

优先级：
和数学中一样，JS中的运算符也是具有优先级的，
比如先乘除后加减先与后或
具体的优先级可以参考优先级的表格，在表格中越靠上的优先级越高，
优先级越高的越优先计算，优先级相同的，从左往右计算。
优先级不需要记忆，如果越到拿不准的，使用()来改变优先级。

//false?alert("语句1") :alert("语句2");
var a = 30;
var b =20;
l > b ? alert("a大"):alert("b大");
//a > b ? alert( "a大" ) : alert("b大");

//获取a和b中的最大值
var max = a > b ?a : b;
//获取a b c 中的大值
max = max > c ? max : c;
//这种写法不推荐使用，不方便阅读