js其实就是javaScript,至于它的前身今世,咱在这就不多说,直接直奔主题。
javaScript
javaSctipt主要分为三部分
a 语言核心 ECMAscript 如变量 数组 函数 对象...
b DOM 文档模型对象
c BOM 浏览器模型对象
我们先来了解一下第一部分吧
首先使用js也和css样式一样,有三种使用方式。行内式,内嵌式,外链式(项目中推荐)。
常用方法和语句
在讲具体的知识之前,我们有必要先来了解一下js相关的预备知识。
prompt
弹出一个输入框,输入内容,我们也可以去设置默认的内容。
alert
弹框,同样的我们也可以去设置弹框的内容。
console.log()
控制台输入日志,便于开发及找错误的地方。
字面量
什么是字面量?字面量表示如何表达这个值,一般除了表达式,等号右边的都可以认为是字面量。
字面量分为数字字面量,字符串字面量,对象字面量,函数字面量。
- 数字字面量
console.log(123); // 0
console.log(-123); // 0
console.log(0); // 0
console.log(010);//8
console.log(0xa4);//168
console.log(12.3);//12.3
console.log(Infinity); // Infinity
console.log(-Infinity); // -Infinity
console.log(1.5e12345678998765432121235664);//Infinity
console.log(12/0);//Infinity
console.log(NaN);//NaN
console.log(0/0);//NaN
console.log("abc"*2);//NaN
首先默认输出的都是10进制,我们看第4行和第5行,都把8进制的值和16进制的值输出成10进制。
此外我们还看到了两个值,NaN,Infinity。NaN表示无法用数字来表示的数。Infinity表示无穷大。
- 字符串字面量
console.log("");
console.log("今天学了js 好激动");
console.log("12");
console.log(12);
console.log("恰\t似\n一江春水\n向东流");
console.log("a\'bc\"");
console.log("c:\\\\Users");
我们来了解一下\ 它是转义字符,从字面上来看就是转变字符原本的意义,\n 后面n本来就是一个字符,但是前面加了\就表示回车,像我们js默认把""表示用来包裹字符串,但是如果说我们需要显示",它就只是一个普普通通的",那么就只要在前加上\,就可转义输出"。
- 对象字面量/函数字面量
就是输出一个对象,和函数那么什么是对象,什么是函数,之后的文章中会做出解释。
变量
变量的定义
js中要如何去定义变量?通过var去定义变量,赋值就通过=。
var a; a = 111;
那么变量名在取名时,有没有什么注意事项呢?下面我们来讲解一下变量名的规则。
组成部分: _ $ 字母 数字
第一个字符不能为数字
区分大小写 比如 a 和 A 是不同的变量名
不能是js的关键字和保留字
var a;
var _;
var $;
var o0_00;
var a123;
var var;// 错误 因为var是js所定义的,不能使用
var ~=aa;
下面我们来看看变量的赋值
<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">
<html xmlns="http://www.w3.org/1999/xhtml" xml:lang="en">
<head>
<meta http-equiv="Content-Type" content="text/html;charset=UTF-8">
<title>Document</title>
</head>
<body>
<script type="text/javascript">
var a = 10, b = 20, c = 30;
console.log(a+b+c);//输出60
var d;
console.log(d); // 不会报错 而是undefined 表示变量定义 但没有赋值,默认会赋上underfined
console.log(e);//此处报错,e is not defined 因为没有定义e的变量
</script>
</body>
</html>
变量声明提升
变量声明提升是什么?变量怎么就被提升了?变量如何提升了?带着这些疑问我们来看看下面的代码。
<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">
<html xmlns="http://www.w3.org/1999/xhtml" xml:lang="en">
<head>
<meta http-equiv="Content-Type" content="text/html;charset=UTF-8">
<title>Document</title>
</head>
<body>
<script type="text/javascript">
console.log(a); // undefined
var a = 10;
console.log(a); // 10
</script>
</body>
</html>
它的输出就在右边的,一个是underfined,一个是10。为什么呢?为什么没有报错呢?按照代码是逐行编译,第一个应该为报错,因为没有去定义a这个变量。然后上述代码真正的执行步骤是
<script type="text/javascript">
var a;
console.log(a); // undefined
a = 10;
console.log(a); // 10
</script>
这就是变量声明提升,所有的参数都会被提前声明,因为所有未被赋值的参数默认都会赋上underfined,所有第一个输出回事underfined,第二个输出是10。
数据类型
- 基本类型:
string number boolean underfined
- 复杂数据类型:
object
前面说的NaN,Infinity也是属于number,用于判断数据类型的方法 typeof("nihao");
变量的数据类型
变量的类型有什么来决定?
变量的类型由储存的数据类型来决定,也就是说由值决定。
数据类型转换主要有两种
- 数字转字符串
数字转字符串只需要将数字+一个字符串即可,哪怕是空字符串。
console.log(typeof (23+"")); console.log(typeof (23+"10"));
- 字符串转数字
有三种方法可以将字符串转变为数字。Number();parseInt();parseFloat();
三者的区别就是parseInt();是将字符串转为整型,parseFloat();是将字符中转为浮点型,Number();也是将字符串转为数据,不过整型的转整型,浮点型的就转成浮点型。
接下来我们来看看转换时的一些注意事项。
console.log(parseInt("100")); // 100
console.log(parseInt("-100")); // 100
console.log(parseInt("100.99")); // 100
console.log(parseInt("100xixixi")); // 100
console.log(parseInt("xixixi100")); // NaN
console.log(parseInt("abcdee")); // NaN
console.log(parseInt("中文")); // NaN
console.log(parseInt("NaN")); // NaN
console.log(parseInt("Infinity")); // NaN
console.log(parseInt("010FFF")); // 10没写第二个参数进制时,默认按十进制解析
console.log(parseInt("10",8));此时的10表示8进制,去转成10进制的数字
可以总结一下几点:1.可以看到纯中文转数字得到的是NaN。2.若前面是数字后面是字符串转数字,则会将前面的数字转成功。3.若前面是字符串后面是数字,则转成NaN。
console.log(parseFloat("456.78")); // 数字456.78
console.log(parseFloat("456.78.89")); // 数字456.78
console.log(parseFloat(".7889aaaa")); // 数字0.7889
console.log(parseFloat(".78e3")); // 数字780
console.log(parseFloat(".78e3a")); // 数字780
console.log(parseFloat("a.78e3")); // NaN
console.log(parseFloat("aahhh")); // NaN
同样的和上述总结一样。
prompt之前说了,是弹出一个输入框,我们可以获取到输入的值,不过获取来的是一个字符串,此时我们就需要将字符串转变为数字。
<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">
<html xmlns="http://www.w3.org/1999/xhtml" xml:lang="en">
<head>
<meta http-equiv="Content-Type" content="text/html;charset=UTF-8">
<title>Document</title>
</head>
<body>
<script type="text/javascript">
var age = parseInt(prompt("请你输入你的年龄",18));
age = age + 1; //
console.log(age); //
</script>
</body>
</html>
运算符
数学运算符
数字运算符主要有+ - * / %(取模运算符)。
console.log("2"-1); // 1 在运算时,会将纯数字的字符串转为数字console.log("4aahh"*4); // NaN
console.log(4*""); // 0 空字符串隐式转换为0
console.log(NaN+3);// NaN
console.log(undefined+4); // NaN
console.log(false-10); // -10 false--->0
console.log(Infinity-23); //NaN
console.log(Infinity+23); //NaN
以上是一些特殊的使用场景。
比较运算符
比较运算符主要有:> < >= <= == === != !==
==和===的区别就是前者是值相同,后者是值和类型都要相同。
console.log(8>7); // true
console.log(8<10); // true
console.log(8==7); // false
console.log(8>=7); // true
console.log(8<=7); // false
console.log(8===7); // false
console.log(8!=7); // true
console.log(8!==7); // true
console.log(1=="1"); //true == 只要两个值内容一样即可
console.log(1==="1"); //false === 全等于 两个值内容一样并且类型也要一样
console.log(1!="1"); //false != 对==的否定
console.log(1!=="1"); //true !== 对===的否定
console.log(0==""); // true “”会转义成0
console.log(NaN == undefined); // false
console.log(0 == null); // false
console.log(NaN==NaN);// false
console.log(Infinity==Infinity);// true
console.log(Infinity===Infinity);
以上是一些常见的和特殊的使用场景。
逻辑运算符
逻辑运算符主要有:&& || !
&&就是于运算符,两个都为真则为真,一假或都假则为假。
true&&true true
true&&false false
false&&true false
false&&false false
||就是或云算法,一真都真则为真,都假则为假
true&&true true
true&&false true
false&&true true
false&&false false
!表示非运算法,取反即可。
接下来我们看一些例子吧,当有非boolean的类型的值去做比较时,结果又是怎么样的。
console.log(34&&null); // null
console.log(34&null); // null
console.log(-10&&null); // null
console.log(0&&null); // 0
console.log(0&null); // 0
console.log("welcome"&&true); // true
console.log("welcome"||true); // welcome
var a = 3,b =4;
console.log(a||b); //3
a = 0;
console.log(a&&b); // 0
1.我们可以看到非0的数字和字符串表示的是true。
2.&&若前面的条件为true,则会输出后面的条件的结果。
3.||若前面的条件为true,则会输出前面条件的结果。
4.&& ||表示短路运算符 ,& |表示非短路运算符,有什么区别呢短路运算符更加安全,就拿&&来说若前面的条件是false则后面的条件就不执行,&就不一样前后两个条件都回去执行。
赋值运算符
赋值运算符主要有 =,+=, -=, *= ,/= ,++ ,--
我们主要来了解+= 和 ++的相关知识点,其他的可类推。
如a++;表示a = a+1; b+=1; b = b+1;但两者在使用时,到底有什么区别呢?
<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">
<html xmlns="http://www.w3.org/1999/xhtml" xml:lang="en">
<head>
<meta http-equiv="Content-Type" content="text/html;charset=UTF-8">
<title>Document</title>
</head>
<body>
<script type="text/javascript">
var a = 2, b;
b = ++a; //a = a+1; b = a;
console.log(a);//3
console.log(b); //3
var A = 2,B;
B = A++;// b = a; a = a+1;
console.log(A);//3
console.log(B)//2
</script>
</body>
</html>
在使用中就有区别了,大家可以看看后面的注释以及结果,给你个眼神自行体会哈。
三目运算符
xx==xx?xx:xx 是这样的表达形式
如var a = 2;var b=a==1?0:1;
最后的b的结果会是0,为什么呢 b的取值依据是a是否等于1,若a等于1则b=0,若不等于则a=1
运算的先后顺序
++ -- ! >数学运算符>比较运算符>逻辑运算符>赋值运算符
下面附上一个demo来验证一下吧
<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">
<html xmlns="http://www.w3.org/1999/xhtml" xml:lang="en">
<head>
<meta http-equiv="Content-Type" content="text/html;charset=UTF-8">
<title>Document</title>
</head>
<body>
<script type="text/javascript">
var a = 4;
var b= 1*(2+4)&&++a||5>6&&7<8||!6;
console.log(a+" "+b); // 20
</script>
</body>
</html>
我们来化解一下b的运算过程吧
b = 1*(2+4)&&++a||5>6&&7<8||!6; 因为要先算++ -- !
b = 1*(2+4)&&5||5>6&&7<8||false; 接着再算数字运算符
b = 6&&5||5>6&&7<8||false; 再算比较运算符
b = 6&&5||false&&true||false;再算逻辑运算符,&&的优先级高于||
b = 5||false||false;
b = 5;