1.什么是JavaScript
1.1 对JavaScript的解释
1.2 JavaScript的组成
1.3 JavaScript的使用场景
2.JavaScript基本语法
JavaScript都能写在哪儿
<!--1.行内JS-->
<button onclick="alert('点我干嘛?');">点我</button>
<a href="javascript:alert('你点疼我了！！');">点我</a>
<!--2.引入外部的js-->
<script src="js/index.js"></script>
<!--3.页内JS-->
<script>
window.onload = function () {
alert('点我干嘛?');
}
</script>
复制代码JavaScript基本语法
// 1. 弹窗
alert("itlike.com");
// 2. 窗口输出
console.log("itlike.com");
console.log("撩课学院");
console.warn("这是一个警告!");
console.error("这是一个错误!")
// 3. 可以向body中输出一个内容
document.write("Hello World!");
// 4. 在网页中弹出输入框，一般用于接收用户输入的信息
var aa= prompt("XXXHello, World！");
alert(aa)//显示的是输入的内容
// 5. 在网页中弹出提示框，显示信息，该方法一般与if判断语句结合使用
window.confirm("Hello，JavaScript！");
// 6.注释
/*
多行注释
多行注释
多行注释
*/
// 单行注释、
// 7. 字面量
字面量表示如何表达这个值，一般除去表达式，给变量赋值时，等号右边都可以认为是字面量
字面量分为数字的字面量、字符串字面量(string literal )、数组字面量(array literal)和对象字面量(object literal)，
另外还有函数字面量(function literal)。
示例：
var test="hello world!";
"hello world!"就是字符串字面量，test是变量名。
// 8. 变量
什么是变量:变量是用于存储信息的"容器"。
就像代数那样
x=5
y=6
z=x+y
在代数中，我们使用字母（比如 x）来保存值（比如 5）。
通过上面的表达式 z=x+y，我们能够计算出 z 的值为 11。
在 JavaScript 中，这些字母被称为变量。
变量写法:
1 声明变量
var a;
var name;
var intro;
var age;
2 给变量赋值
a = 10;
name = "张三";
intro = "爱学习，爱钻研!";
age = 25;
3. 也可以在声明时赋值
var a = 10;
var name = "张三";
var intro = "爱学习，爱钻研!";
var age = 25;
注意：变量可以由字母、数字、 $ 和 _组成
变量必须以字母开头
变量也能以 $ 和 _ 符号开头（不过我们不推荐这么做）
变量名称对大小写敏感（y 和 Y 是不同的变量）
变量不能是关键字或者保留字
//9 数据类型:
1. 定义
数据类型指的就是字面量的类型,程序在运行过程中会产生各种各样的临时数据,
为了方便数据的运算和操作, JavaScript对这些数据进行了分类, 提供了丰富的数据类型；
2.分类
js中有六种数据类型，包括五种基本数据类型（Number,String,Boolean,Undefined,Null）,
和一种复杂数据类型（Object）。
3. typeof 操作符
由于js中的变量是松散类型的，所以它提供了一种检测当前变量的数据类型的方法，也就是typeof关键字.
typeof 123 //Number
typeof 'abc' //String
typeof true //Boolean
typeof undefined //Undefined
typeof null //Object
typeof { } //Object
typeof [ ] //Object
typeof console.log() //Function
null类型进行typeof操作符后，结果是object，原因在于，null类型被当做一个空对象引用。
4. 数据类型的转化：tostring的用法
【1】undefined和null没有toString()方法
undefined.toString();//错误
null.toString();//错误
【2】布尔型数据true和false返回对应的'true'和'false'
true.toString();//'true'
false.toString();//'false'
Boolean.toString();//"function Boolean() { [native code] }"
【3】字符串类型原值返回
'1'.toString();//'1'
''.toString();//''
'abc'.toString();//'abc'
String.toString();//"function String() { [native code] }"
【4】数值类型的情况较复杂
Number.toString();//"function Number() { [native code] }"
1、正浮点数及NaN、Infinity加引号返回
1.23.toString();//'1.23'
NaN.toString();//'NaN'
Infinity.toString();//'Infinity' 注：Infinity表示无穷大，是number类型，-Infinity表示无穷小，
可以通过isFinite(val)判断当前数字是否是无穷大，函数返回true表示不是无穷大，返回false表示是无穷大。
2、负浮点数或加'+'号的正浮点数直接跟上.toString()，相当于先运行toString()方法，再添加正负号，转换为数字
+1.23.toString();//1.23
typeof +1.23.toString();//'number'
-1.23.toString();//-1.23
typeof -1.23.toString();//'number'
3、整数直接跟上.toString()形式，会报错，提示无效标记，因为整数后的点会被识别为小数点
0.toString();//Uncaught SyntaxError: Invalid or unexpected token
因此，为了避免以上无效及报错的情况，数字在使用toString()方法时，加括号可解决
(0).toString();//'0'
(-0).toString();//'0'
(+1.2).toString();//'1.2'
(-1.2).toString();//'-1.2'
(NaN).toString();//'NaN'
此外，数字类型的toString()方法可以接收表示转换基数(radix)的可选参数，如果不指定此参数，转换规则将是基于十进制。
同样，也可以将数字转换为其他进制数(范围在2-36)
var n = 17;
n.toString();//'17'
n.toString(2);//'10001'
n.toString(8);//'21'
n.toString(10);//'17'
n.toString(12);//'15'
n.toString(16);//'11'
【5】对象Object类型及自定义对象类型加括号返回[object Object]
{}.toString();//报错，Unexpected token .
({}).toString();//[object Object]
({a:123}).toString();//[object Object]
Object.toString();//"function Object() { [native code] }"
function Person(){
this.name = 'test';
}
var person1 = new Person();
person1.toString();//"[object Object]"
类型识别
常常使用Object.prototype.toString()来进行类型识别，返回代表该对象的[object 数据类型]字符串表示
[注意]Object.prototype.toString()可以识别标准类型及内置对象类型，但不能识别自定义类型
console.log(Object.prototype.toString.call("jerry"));//[object String]
console.log(Object.prototype.toString.call(12));//[object Number]
console.log(Object.prototype.toString.call(true));//[object Boolean]
console.log(Object.prototype.toString.call(undefined));//[object Undefined]
console.log(Object.prototype.toString.call(null));//[object Null]
console.log(Object.prototype.toString.call({name: "jerry"}));//[object Object]
console.log(Object.prototype.toString.call(function(){}));//[object Function]
console.log(Object.prototype.toString.call([]));//[object Array]
console.log(Object.prototype.toString.call(new Date));//[object Date]
console.log(Object.prototype.toString.call(/\d/));//[object RegExp]
function Person(){};
console.log(Object.prototype.toString.call(new Person));//[object Object]
封装成函数形式
function type(obj){
return Object.prototype.toString.call(obj).slice(8,-1).toLowerCase();
}
console.log(type("jerry"));//"string"
console.log(type(12));//"number"
console.log(type(true));//"boolean"
console.log(type(undefined));//"undefined"
console.log(type(null));//"null"
console.log(type({name: "jerry"}));//"object"
console.log(type(function(){}));//"function"
console.log(type([]));//"array"
console.log(type(new Date));//"date"
console.log(type(/\d/));//"regexp"
function Person(){};
console.log(type(new Person));//"object"
除了类型识别之外，还可以进行其他识别，如识别arguments或DOM元素
(function(){
console.log(Object.prototype.toString.call(arguments));//[object Arguments]
})()
console.log(Object.prototype.toString.call(document));//[object HTMLDocument]
【6】函数Function类型返回函数代码
当我们对一个自定义函数调用toString()方法时，可以得到该函数的源代码；如果对内置函数使用toString()方法时
，会得到一个'[native code]'字符串。因此，可以使用toString()方法来区分自定义函数和内置函数
function test(){
alert(1);//test
}
test.toString();/*"function test(){
alert(1);//test
}"*/
Function.toString();//"function Function() { [native code] }"
【7】数组Array类型返回由数组中每个值的字符串形式拼接而成的一个以逗号分隔的字符串
[].toString();//''
[1].toString();//'1'
[1,2,3,4].toString();//'1,2,3,4'
Array.toString();//"function Array() { [native code] }"
【8】时间Date类型返回表示当前时区的时间的字符串表示
(new Date()).toString();//"Sun Jun 05 2016 10:04:53 GMT+0800 (中国标准时间)"
Date.toString();//"function Date() { [native code] }"
【9】正则表达式RegExp类型返回正则表达式字面量的字符串表示
/ab/i.toString();//'/ab/i'
/mom( and dad( and baby)?)?/gi.toString();//'mom( and dad( and baby)?)?/gi'
RegExp.toString();//"function RegExp() { [native code] }"
【10】错误Error类型
Error.toString();//"function Error() { [native code] }"
RangeError.toString();//"function RangeError() { [native code] }"
ReferenceError.toString();//"function ReferenceError() { [native code] }"
SyntaxError.toString();//"function SyntaxError() { [native code] }"
TypeError.toString();//"function TypeError() { [native code] }"
URIError.toString();//"function URIError() { [native code] }"
注：String（）和toString（）方法都是将其它类型的变量转换为字符串的方法。但两者存在一定的区别：
x.toString(): 无法转换null和undefined。
5. 数据类型的转化：Number的用法
Number方法是将其他的数据类型转换为Number
1.如果是纯数字的字符串，则直接将其转换为数字
2.如果字符串中有非数字的内容（包括空格），则转换为NaN
3.如果字符串是一个空串或者是一个全是空格的字符串，则转换为0
4.如果参数是 Date 对象，Number() 返回从 1970 年 1 月 1 日至今的毫秒数。
var test1= new Boolean(true);
var test2= new Boolean(false);
var test3= new Date();
var test4= new String("999");
var test5= new String("999 888");
document.write(Number(test1)+ "<br />");//1
document.write(Number(test2)+ "<br />");//0
document.write(Number(test3)+ "<br />");//1256657776588
document.write(Number(test4)+ "<br />");//999
document.write(Number(test5)+ "<br />");//NaN
6. 数据类型的转化：Boolean(value)的用法
将其他的数据类型转换为Boolean
var str = ' ';
var num = NaN;
var str1 = null;
var str2 = undefined;
console.log(Boolean(str)); // true
console.log(Boolean(num)); // true
console.log(Boolean(str1));//false
console.log(Boolean(str2));//false
注：如果省略 value 参数，或者设置为 0、-0、null、""、false、undefined 或 NaN，则该对象设置为 false。否则设置为 true
7.parseInt(string, radix)的用法
parseInt(string, radix) 函数可解析一个字符串，并返回一个整数
string 必需。要被解析的字符串。
radix 可选。表示要解析的数字的基数。该值介于 2 ~ 36 之间。
如果省略该参数或其值为 0，则数字将以 10 为基础来解析。如果它以 “0x” 或 “0X” 开头，将以 16 为基数。
如果该参数小于 2 或者大于 36，则 parseInt() 将返回 NaN。
parseInt("10"); //返回 10
parseInt("19",10); //返回 19 (10+9)
parseInt("11",2); //返回 3 (2+1)
parseInt("17",8); //返回 15 (8+7)
parseInt("1f",16); //返回 31 (16+15)
parseInt("010"); //未定：返回 10 或 8
注：1.只有字符串中的第一个数字会被返回。
2.开头和结尾的空格是允许的。
3.如果字符串的第一个字符不能被转换为数字，那么 parseFloat() 会返回 NaN。
8.parseFloat(string)的用法
parseFloat() 函数可解析一个字符串，并返回一个浮点数
document.write(parseFloat("10"))
document.write(parseFloat("10.00"))
document.write(parseFloat("10.33"))
document.write(parseFloat("34 45 66"))
document.write(parseFloat(" 60 "))
document.write(parseFloat("40 years"))
document.write(parseFloat("He was 40"))
注：和上边parseInt一样。
9.js中进制的写法以及用法
主要包含 二进制 十进制 八进制 十六进制
var num = 10823;//10进制
var num1 = 0x9ac;//16进制（以0x开头）
var num2 = 0b0101;//2进制（以0b开头）
var num3 = 0o127;//8进制（以0o开头）
10.算术运算符
非Number类型的值进行运算时，会将这些值转换为Number然后在运算
var res = true + 100;
console.log(res); // 10
var res1 = true + false;
console.log(res1); // 1
var res2 = null + 10;
console.log(res2); // 10
var res3 = undefined + 10;
console.log(res3); // NaN
任何值和NaN做运算都得NaN
var res5 = 10 + NaN;
console.log(res5);//NaN
特殊：如果数字和字符串 相加 会被默认成拼接字符串
var result = 10 + "123";
console.log(result); // 10123
result = 1 + "true";
console.log(result); // 1true
如果在一个变量前加上加减运算符，相当于在内部调用了Number()函数
var bool = true;
var res = +bool;
console.log(res); // 1
var str = "123";
res = +str;
console.log(res); // 123
var str2 = "123abc"; // Number() NaN
res = +str2;
console.log(res); // NaN
var temp = undefined;
res = +temp;
console.log(res); // 0
自加与自减的运算
var num = 1;
num++; // 等价于 num = num + 1;
console.log(num); // 2
num = 1;
++num;
console.log(num); // 2
num = 1;
num--; // 等价于 num = num - 1;
console.log(num); // 0
num = 1;
--num;
console.log(num); // 0
++a与a++的区别
var a = 20;
var b = 30;
var res = (a++) + (b++);
console.log(res); // 50 a++的形式先进行算术运算，然后自加
console.log(a); // 21
console.log(b); // 31
var a = 20;
var b = 30;
var res = (a--) + (b--);
console.log(res); // 50 a--的形式先进行算术运算，然后自减
console.log(a); // 19
console.log(b); // 29
var a = 20;
var b = 30;
var res = (++a) + (++b);
console.log(res); // 52 ++a的形式先进行算术运算，然后自加
console.log(a); // 21
console.log(b); // 31
var a = 20;
var b = 30;
var res = (--a) + (b--);
console.log(res); // 49 --a的形式先进行算术运算，然后自减
console.log(a); // 19
console.log(b); // 29
与（&&），或（||），非（!）的用法
1.与（&&）的用法
如果两个值都是true则返回true,否则返回false
var result = 10 < 5 && 100 < 200;
console.log(result);//false
如果第一个值为true,才会去检查第二个值，否则，则不会再去检查第二个值
10 < 3 && alert("我来了！！")//此时，检查到第一个值为false,则不会再执行第二个
var result = "123" && "abc";
console.log(result); // "abc"
result = "123" && 0;
console.log(result); // 0
result = null && 0;
console.log(result); // null
2.或（||）的用法
var a = 0;
var b = 0;
var c = 30;
var res = a || b || c;
console.log(res);//0 如果第一个值为false,则会继续检查后边的值，如果为true，则不会再检查后边的值
3.非（!）的用法
var num = 10;
var res = !num; // 先将10转换为true, 然后再取反
console.log(res); // false
关于NaN和isNaN
NaN：not a number 不是个 数字 的 数字类型。NaN属于数据类型中的数据
<script>
var a = Number('abc');
// alert( a ); // NaN
// NaN：not a number 不是个 数字 的 数字类型。结果说明：NaN属于数据类型中的数据
// alert( typeof (a) ); // number
// 一旦写程序中出现：NaN 肯定进行了非法的运算操作
// alert( '200px' - 100 );
// NaN 是 false
if( a ){
// alert( '真' );
}else{
// alert( '假' );
}
//结果说明：NaN在布尔值中是false
var abc = [];
// alert( abc === abc ); true
alert( a === a ); // false
// 结果说明：NaN 与自己都不相等！！
</script>
从上面的分析中得出几个NaN的特点：
1、NaN属于数据类型中的数据；
2、NaN在布尔值中是false；
3、NaN 与自己不相等。
isNaN：Is not a number 是不是不是一个数字（不是数字）
isNaN(); 是一个方法，它的特点是：
1、可以判断某些值是不是数字
2、不喜欢数字、讨厌数字
<script>
alert( isNaN('250') );//返回的结果就是false
//isNaN在解析的过程中能解析出来的自行解析若是不能解析的字符串或者其他类型
都会“交给” Number()来处理解析，所以就会出现下面的解析过程
// Number() '250' => 250 => false
</script>
三目运算符
// 弹第一个
10 > 9 ? alert("语句1") : alert("语句2");
// 弹第二个
false ? alert("语句1") : alert("语句2");
复制代码
1万+
被折叠的 条评论
为什么被折叠?
到【灌水乐园】发言
