一、JavaScript入门
JavaScript负责页面中的的行为。它是一门运行在浏览器端的脚本语言。
1、JS的编写的位置
1.可以编写到标签的指定属性中
<button onclick="alert('hello');">我是按钮</button>
<a href="javascript:alert('aaa');">超链接</a>2.可以编写到script标签中
<script type="text/javascript">
//编写js代码
</script>3.可以将代码编写到外部的js文件中，然后通过标签将其引入
<script type="text/javascript" src="文件路径"></script>输出语句
alert("要输出的内容"); 该语句会在浏览器窗口中弹出一个警告框
document.write("要输出的内容"); 该内容将会被写到body标签中，并在页面中显示
console.log("要输出的内容"); 该内容会被写到开发者工具的控制台中
基本的语法
注释
单行注释
//注释内容
多行注释
/*
注释内容
*/
JS严格区分大小写
JS中每条语句以分号(;)结尾
JS中会自动忽略多个空格和换行，所以我们可以利用空格和换行对代码进行格式化。
字面量和变量
字面量
字面量实际上就是一些固定的值，比如 1 2 3 4 true false null NaN "hello"
字面量都是不可以改变的。
由于字面量不是很方便使用，所以在JS中很少直接使用字面量
变量
变量可以用来保存字面量，并且可以保存任意的字面量
一般都是通过变量来使用字面量，而不直接使用字面量，而且也可以通过变量来对字面量进行一个描述
声明变量
使用var关键字来声明一个变量
var a;
var b;
var c;
为变量赋值
a = 1;
b = 2;
c = 3;
声明和赋值同时进行 *****
var d = 456;
var e = 789;
标识符
在JS中所有的可以自主命名的内容，都可以认为是一个标识符，是标识符就应该遵守标识符的规范。
比如：变量名、函数名、属性名
规范：
1.标识符中可以含有字母、数字、_、$
2.标识符不能以数字开头
3.标识符不能是JS中的关键字和保留字
4.标识符一般采用驼峰命名法
xxxYyyZzz
<!DOCTYPE html>
<html>
<head>
<meta charset="UTF-8">
<title></title>
<!--JS代码需要编写到script标签中-->
<script type="text/javascript">
/*
* 控制浏览器弹出一个警告框
* alert("哥，你真帅啊！！");
*/
/*
* 让计算机在页面中输出一个内容
* document.write()可以向body中输出一个内容
* document.write("看我出不出来~~~");
*/
/*
* 向控制台输出一个内容
* console.log()的作用是向控制台输出一个内容
* console.log("你猜我在哪出来呢？");
*/
alert("哥，你真帅啊！！");
document.write("看我出不出来~~~");
console.log("你猜我在哪出来呢？");
</script>
</head>
<body>
</body>
</html>
二、JavaScript数据类型
JS中一共分成六种数据类型
String 字符串
Number 数值
Boolean 布尔值
Null 空值
Undefined 未定义
Object 对象
其中基本数据类型有
String 字符串
JS中的字符串需要使用引号引起来双引号或单引号都行
在字符串中使用\作为转义字符
\' ==> '
\" ==> "
\n ==> 换行
\t ==> 制表符
\\ ==> \
使用typeof运算符检查字符串时，会返回"string"
Number 数值
JS中所有的整数和浮点数都是Number类型
特殊的数字
Infinity 正无穷
-Infinity 负无穷
NaN 非法数字（Not A Number）
其他进制的数字的表示：
0b 开头表示二进制，但是不是所有的浏览器都支持
0 开头表示八进制
0x 开头表示十六进制
使用typeof检查一个Number类型的数据时，会返回"number"
（包括NaN 和 Infinity）
Boolean 布尔值
布尔值主要用来进行逻辑判断，布尔值只有两个
true 逻辑的真
false 逻辑的假
使用typeof检查一个布尔值时，会返回"boolean"
Null 空值
空值专门用来表示为空的对象，Null类型的值只有一个
null
使用typeof检查一个Null类型的值时会返回"object"
Undefined 未定义
如果声明一个变量但是没有为变量赋值此时变量的值就是undefined
该类型的值只有一个 undefined
使用typeof检查一个Undefined类型的值时，会返回"undefined"
引用数据类型
Object 对象
类型转换
类型转换就是指将其他的数据类型，转换为String Number 或 Boolean
转换为String
方式一（强制类型转换）：
调用被转换数据的toString()方法
例子：
var a = 123;
a = a.toString();
注意：这个方法不适用于null和undefined
由于这两个类型的数据中没有方法，所以调用toString()时会报错
方式二（强制类型转换）：
调用String()函数
例子：
var a = 123;
a = String(a);
原理：对于Number Boolean String都会调用他们的toString()方法来将其转换为字符串，
对于null值，直接转换为字符串"null"。对于undefined直接转换为字符串"undefined"
方式三（隐式的类型转换）:
为任意的数据类型 +""
例子：
var a = true;
a = a + "";
原理：和String()函数一样
转换为Number
方式一（强制类型转换）：
调用Number()函数
例子：
var s = "123";
s = Number(s);
转换的情况：
1.字符串 --> 数字
如果字符串是一个合法的数字，则直接转换为对应的数字
如果字符串是一个非法的数字，则转换为NaN
如果是一个空串或纯空格的字符串，则转换为0
2.布尔值 --> 数字
true转换为1
false转换为0
3.空值 --> 数字
null转换为0
4.未定义 --> 数字
undefined 转换为NaN
方式二（强制类型转换）：
调用parseInt()或parseFloat()
这两个函数专门用来将一个字符串转换为数字的
parseInt()
可以将一个字符串中的有效的整数位提取出来，并转换为Number
例子：
var a = "123.456px";
a = parseInt(a); //123
如果需要可以在parseInt()中指定一个第二个参数，来指定进制
parseFloat()
可以将一个字符串中的有效的小数位提取出来，并转换为Number
例子：
var a = "123.456px";
a = parseFloat(a); //123.456
方式三（隐式的类型转换）：
使用一元的+来进行隐式的类型转换
例子：
var a = "123";
a = +a;
原理：和Number()函数一样
转换为布尔值
方式一（强制类型转换）：
使用Boolean()函数
例子：
var s = "false";
s = Boolean(s); //true
转换的情况
字符串 --> 布尔
除了空串其余全是true
数值 --> 布尔
除了0和NaN其余的全是true
null、undefined ---> 布尔
- 都是false
对象 ---> 布尔
- 都是true
方式二（隐式类型转换）：
为任意的数据类型做两次非运算，即可将其转换为布尔值
例子：
var a = "hello";
a = !!a; //true
运算符
运算符也称为操作符
通过运算符可以对一个或多个值进行运算或操作
typeof运算符
用来检查一个变量的数据类型
语法：typeof 变量
它会返回一个用于描述类型的字符串作为结果
算数运算符
+ 对两个值进行加法运算并返回结果
- 对两个值进行减法运算并返回结果
* 对两个值进行乘法运算并返回结果
/ 对两个值进行除法运算并返回结果
% 对两个值进行取余运算并返回结果
除了加法以外，对非Number类型的值进行运算时，都会先转换为Number然后在做运算。
而做加法运算时，如果是两个字符串进行相加，则会做拼串操作，将两个字符连接为一个字符串。
任何值和字符串做加法，都会先转换为字符串，然后再拼串
一元运算符
一元运算符只需要一个操作数
一元的+
就是正号，不会对值产生任何影响，但是可以将一个非数字转换为数字
例子：
var a = true;
a = +a;
一元的-
就是负号，可以对一个数字进行符号位取反
例子：
var a = 10;
a = -a;
自增
自增可以使变量在原值的基础上自增1
自增使用 ++
自增可以使用 前++（++a）后++(a++)
无论是++a 还是 a++都会立即使原变量自增1
不同的是++a和a++的值是不同的，
++a的值是变量的新值（自增后的值）
a++的值是变量的原值（自增前的值）
自减
自减可以使变量在原值的基础上自减1
自减使用 --
自减可以使用 前--（--a）后--(a--)
无论是--a 还是 a--都会立即使原变量自减1
不同的是--a和a--的值是不同的，
--a的值是变量的新值（自减后的值）
a--的值是变量的原值（自减前的值）
01.数据类型.html
<!DOCTYPE html>
<html>
<head>
<meta charset="utf-8" />
<title></title>
<script type="text/javascript">
/*
* 数据类型指的就是字面量的类型
* 在JS中一共有六种数据类型
* String 字符串
* Number 数值
* Boolean 布尔值
* Null 空值
* Undefined 未定义
* Object 对象
*
* 其中String Number Boolean Null Undefined属于基本数据类型
* 而Object属于引用数据类型
*/
/*
* String字符串
* - 在JS中字符串需要使用引号引起来
* - 使用双引号或单引号都可以，但是不要混着用
* - 引号不能嵌套，双引号不能放双引号，单引号不能放单引号
*/
var str = 'hello';
str = '我说:"今天天气真不错！"';
/*
在字符串中我们可以使用\作为转义字符，
当表示一些特殊符号时可以使用\进行转义
\" 表示 "
\' 表示 '
\n 表示换行
\t 制表符
\\ 表示\
* */
str = "我说:\"今天\t天气真不错！\"";
str = "\\\\\\";
//输出字面量 字符串str
//alert("str");
//输出变量str
//alert(str);
var str2 = "hello";
str2 = "你好";
str2 = 3;
//alert("hello，你好");
//console.log("我就是不出来~~~");
</script>
</head>
<body>
</body>
</html>
02.Number.html
<!DOCTYPE html>
<html>
<head>
<meta charset="UTF-8">
<title></title>
<script type="text/javascript">
/*
* 在JS中所有的数值都是Number类型，
* 包括整数和浮点数（小数）
*
* JS中可以表示的数字的最大值
* Number.MAX_VALUE
* 1.7976931348623157e+308
*
* Number.MIN_VALUE 大于0的最小值
* 5e-324
*
* 如果使用Number表示的数字超过了最大值，则会返回一个
* Infinity 表示正无穷
* -Infinity 表示负无穷
* 使用typeof检查Infinity也会返回number
* NaN 是一个特殊的数字，表示Not A Number
* 使用typeof检查一个NaN也会返回number
*/
//数字123
var a = 123;
//字符串123
var b = "123";
/*
可以使用一个运算符 typeof
来检查一个变量的类型
语法：typeof 变量
检查字符串时，会返回string
检查数值时，会返回number
* */
//console.log(typeof b);
a = -Number.MAX_VALUE * Number.MAX_VALUE;
a = "abc" * "bcd";
a = NaN;
//console.log(typeof a);
a = Number.MIN_VALUE;
//console.log(a);
/*
* 在JS中整数的运算基本可以保证精确
*/
var c = 1865789 + 7654321;
/*
* 如果使用JS进行浮点运算，可能得到一个不精确的结果
* 所以千万不要使用JS进行对精确度要求比较高的运算
*/
var c = 0.1 + 0.2;
console.log(c);
</script>
</head>
<body>
</body>
</html>
03.Boolean.html
<!DOCTYPE html>
<html>
<head>
<meta charset="UTF-8">
<title></title>
<script type="text/javascript">
/*
* Boolean 布尔值
* 布尔值只有两个，主要用来做逻辑判断
* true
* - 表示真
* false
* - 表示假
*
* 使用typeof检查一个布尔值时，会返回boolean
*/
var bool = false;
console.log(typeof bool);
console.log(bool);
</script>
</head>
<body>
</body>
</html>
04.Null和Undefined.html
<!DOCTYPE html>
<html>
<head>
<meta charset="UTF-8">
<title></title>
<script type="text/javascript">
/*
* Null（空值）类型的值只有一个，就是null
* null这个值专门用来表示一个为空的对象
* 使用typeof检查一个null值时，会返回object
*
* Undefined（未定义）类型的值只有一个，就undefind
* 当声明一个变量，但是并不给变量赋值时，它的值就是undefined
* 使用typeof检查一个undefined时也会返回undefined
*/
var a = null;
var b = undefined;
console.log(typeof b);
</script>
</head>
<body>
</body>
</html>
05.强制类型转换.html
<!DOCTYPE html>
<html>
<head>
<meta charset="UTF-8">
<title></title>
<script type="text/javascript">
/*
* 强制类型转换
* - 指将一个数据类型强制转换为其他的数据类型
* - 类型转换主要指，将其他的数据类型，转换为
* String Number Boolean
*
*/
/*
* 将其他的数据类型转换为String
* 方式一：
* - 调用被转换数据类型的toString()方法
* - 该方法不会影响到原变量，它会将转换的结果返回
* - 但是注意：null和undefined这两个值没有toString()方法，
* 如果调用他们的方法，会报错
*
* 方式二：
* - 调用String()函数，并将被转换的数据作为参数传递给函数
* - 使用String()函数做强制类型转换时，
* 对于Number和Boolean实际上就是调用的toString()方法
* 但是对于null和undefined，就不会调用toString()方法
* 它会将 null 直接转换为 "null"
* 将 undefined 直接转换为 "undefined"
*
*/
var a = 123;
//调用a的toString()方法
//调用xxx的yyy()方法，就是xxx.yyy()
a = a.toString();
a = true;
a = a.toString();
a = null;
//a = a.toString(); //报错
a = undefined;
//a = a.toString(); //报错
a = 123;
//调用String()函数，来将a转换为字符串
a = String(a);
a = null;
a = String(a);
a = undefined;
a = String(a);
console.log(typeof a);
console.log(a);
</script>
</head>
<body>
</body>
</html>
06.转换为Number.html
<!DOCTYPE html>
<html>
<head>
<meta charset="UTF-8">
<title></title>
<script type="text/javascript">
/*
* 将其他的数据类型转换为Number
* 转换方式一：
* 使用Number()函数
* - 字符串 --> 数字
* 1.如果是纯数字的字符串，则直接将其转换为数字
* 2.如果字符串中有非数字的内容，则转换为NaN
* 3.如果字符串是一个空串或者是一个全是空格的字符串，则转换为0
* - 布尔 --> 数字
* true 转成 1
* false 转成 0
*
* - null --> 数字 0
*
* - undefined --> 数字 NaN
*
* 转换方式二：
* - 这种方式专门用来对付字符串
* - parseInt() 把一个字符串转换为一个整数
* - parseFloat() 把一个字符串转换为一个浮点数
*/
var a = "123";
//调用Number()函数来将a转换为Number类型
a = Number(a);
a = false;
a = Number(a);
a = null;
a = Number(a);
a = undefined;
a = Number(a);
a = "123567a567px";
//调用parseInt()函数将a转换为Number
/*
* parseInt()可以将一个字符串中的有效的整数内容去出来，
* 然后转换为Number
*/
a = parseInt(a);
/*
* parseFloat()作用和parseInt()类似，不同的是它可以获得有效的小数
*/
a = "123.456.789px";
a = parseFloat(a);
/*
* 如果对非String使用parseInt()或parseFloat()
* 它会先将其转换为String然后在操作
*/
a = true;
a = parseInt(a);
a = 198.23;
a = parseInt(a);
console.log(typeof a);
console.log(a);
</script>
</head>
<body>
</body>
</html>
07.其他的进制的数字.html
<!DOCTYPE html>
<html>
<head>
<meta charset="UTF-8">
<title></title>
<script type="text/javascript">
var a = 123;
/*
* 在js中，如果需要表示16进制的数字，则需要以0x开头
* 如果需要表示8进制的数字，则需要以0开头
* 如果要要表示2进制的数字，则需要以0b开头
* 但是不是所有的浏览器都支持
*
*/
//十六进制
a = 0x10;
a = 0xff;
a = 0xCafe;
//八进制数字
a = 070;
//二进制数字
//a = 0b10;
//向"070"这种字符串，有些浏览器会当成8进制解析，有些会当成10进制解析
a = "070";
//可以在parseInt()中传递一个第二个参数，来指定数字的进制
a = parseInt(a,10);
console.log(typeof a);
console.log(a);
</script>
</head>
<body>
</body>
</html>
08.转换为Boolean.html
<!DOCTYPE html>
<html>
<head>
<meta charset="UTF-8">
<title></title>
<script type="text/javascript">
/*
* 将其他的数据类型转换为Boolean
* - 使用Boolean()函数
* - 数字 ---> 布尔
* - 除了0和NaN，其余的都是true
*
* - 字符串 ---> 布尔
* - 除了空串，其余的都是true
*
* - null和undefined都会转换为false
*
* - 对象也会转换为true
*
*/
var a = 123; //true
a = -123; //true
a = 0; //false
a = Infinity; //true
a = NaN; //false
//调用Boolean()函数来将a转换为布尔值
a = Boolean(a);
a = " ";
a = Boolean(a);
a = null; //false
a = Boolean(a);
a = undefined; //false
a = Boolean(a);
console.log(typeof a);
console.log(a);
</script>
</head>
<body>
</body>
</html>
09.运算符.html
<!DOCTYPE html>
<html>
<head>
<meta charset="UTF-8">
<title></title>
<script type="text/javascript">
/*
* 运算符也叫操作符
* 通过运算符可以对一个或多个值进行运算,并获取运算结果
* 比如：typeof就是运算符，可以来获得一个值的类型
* 它会将该值的类型以字符串的形式返回
* number string boolean undefined object
*
* 算数运算符
* 当对非Number类型的值进行运算时，会将这些值转换为Number然后在运算
* 任何值和NaN做运算都得NaN
*
* +
* +可以对两个值进行加法运算，并将结果返回
* 如果对两个字符串进行加法运算，则会做拼串
* 会将两个字符串拼接为一个字符串，并返回
* 任何的值和字符串做加法运算，都会先转换为字符串，然后再和字符串做拼串的操作
* -
* - 可以对两个值进行减法运算，并将结果返回
*
* *
* * 可以对两个值进行乘法运算
* /
* / 可以对两个值进行除法运算
* %
* % 取模运算（取余数）
*/
var a = 123;
var result = typeof a;
//console.log(typeof result);
result = a + 1;
result = 456 + 789;
result = true + 1;
result = true + false;
result = 2 + null;
result = 2 + NaN;
result = "你好" + "大帅哥";
var str = "锄禾日当午，" +
"汗滴禾下土，" +
"谁知盘中餐，" +
"粒粒皆辛苦";
result = 123 + "1";
result = true + "hello";
//任何值和字符串相加都会转换为字符串，并做拼串操作
/*
* 我们可以利用这一特点，来将一个任意的数据类型转换为String
* 我们只需要为任意的数据类型 + 一个 "" 即可将其转换为String
* 这是一种隐式的类型转换，由浏览器自动完成，实际上它也是调用String()函数
*/
var c = 123;
c = c + "";
//c = null;
//c = c + "";
//console.log(result);
//console.log(typeof c);
//console.log("c = "+c);
result = 1 + 2 + "3"; //33
result = "1" + 2 + 3; //123
result = 100 - 5;
result = 100 - true;
result = 100 - "1";
result = 2 * 2;
result = 2 * "8";
result = 2 * undefined;
result = 2 * null;
result = 4 / 2;
result = 3 / 2;
/*
* 任何值做- * /运算时都会自动转换为Number
* 我们可以利用这一特点做隐式的类型转换
* 可以通过为一个值 -0 *1 /1来将其转换为Number
* 原理和Number()函数一样，使用起来更加简单
*/
var d = "123";
//console.log("result = "+result);
d = d - 0;
/*console.log(typeof d);
console.log(d);*/
result = 9 % 3;
result = 9 % 4;
result = 9 % 5;
console.log("result = "+result);
</script>
</head>
<body>
</body>
</html>
10.一元运算符.html
<!DOCTYPE html>
<html>
<head>
<meta charset="UTF-8">
<title></title>
<script type="text/javascript">
/*
* 一元运算符，只需要一个操作数
* + 正号
* - 正号不会对数字产生任何影响
* - 负号
* - 负号可以对数字进行负号的取反
*
* - 对于非Number类型的值，
* 它会将先转换为Number，然后在运算
* 可以对一个其他的数据类型使用+,来将其转换为number
* 它的原理和Number()函数一样
*/
var a = 123;
a = -a;
a = true;
a = "18";
a = +a;
/*console.log("a = "+a);
console.log(typeof a);*/
var result = 1 + +"2" + 3;
console.log("result = "+result);
</script>
</head>
<body>
</body>
</html>
11.自增和自减.html
<!DOCTYPE html>
<html>
<head>
<meta charset="UTF-8">
<title></title>
<script type="text/javascript">
/*
* 自增 ++
* - 通过自增可以使变量在自身的基础上增加1
* - 对于一个变量自增以后，原变量的值会立即自增1
* - 自增分成两种：后++(a++) 和 前++(++a)
* 无论是a++ 还是 ++a，都会立即使原变量的值自增1
* 不同的是a++ 和 ++a的值不同
* a++的值等于原变量的值（自增前的值）
* ++a的值等于新值 （自增后的值）
*
* 自减 --
* - 通过自减可以使变量在自身的基础上减1
* - 自减分成两种：后--(a--) 和 前--(--a)
* 无论是a-- 还是 --a 都会立即使原变量的值自减1
* 不同的是a-- 和 --a的值不同
* a-- 是变量的原值 （自减前的值）
* --a 是变量的新值 （自减以后的值）
*
*
*/
var num = 10;
//num--;
//--num;
//console.log(num--);
console.log(--num);
console.log("num = "+num);
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++;
var d = 20;
//console.log(++d);//21
//console.log(++d);//22
//20 + 22 + 22
//var result = d++ + ++d + d ;
//d = 20
d = d++;
/*
* var e = d++;
* d = e;
*/
//console.log("d = "+d);
</script>
</head>
<body>
</body>
</html>
3317
被折叠的 条评论
为什么被折叠?
到【灌水乐园】发言
