JS的三种书写方式
- 行内式 通过事件写在html标签内部,作为标签的一个属性使用
- 内嵌式
<script type="text/javascript"></script>
- 外链式
<script src=''></script>
注 : 外部引用脚本时,script标签中不要写任何内容,写了也不执行!
如何输出?
- alert() : 以警告框的方式输出,缺点是会阻止后面语句的执行。
如果括号中是数字就不须要加引号
如果是其它非数字数据要加引号(不区分单引号或双引号),在JS中只要加上引号就叫做字符串。引号嵌套时要注意不能交叉使用引号 ' "" ' " '' "JS语言中,所有的标点符号都是英文半角状态
- document.write() : 在页面中输出,缺点是会影响现有布局。 实现页面中的部分是文档区document write : 写
- console.log() : 在控制台中输出,会输出对象的详细信息。 console 控制台
JS中的换行
- 页面中
<br>
- 非页面中
\n : 换行
\t : 横向跳格(一次八个空格)
\ : 转义符,将具有特殊含义的符号转成普通字符
JS中的注释
- 单行注释
//注释内容
- 多行注释
/*注释内容、多行注释、段落注释、块注释*/
JS中的数据类型
- 基本数据类型
- Number (数字类型) 3 3.3 -4
- String (字符串) '' ""
- Boolean (布尔) true false
- null (表示空的对象)
- undefined (未定义)
- 复合数据类型
- Object (对象)
JS中的命名规则
- 只能包含(字母、数字、下划线、$)
- 不能以数字开头
- 不能是关键字或保留字
- 要语义化
- 驼峰命名
- 大驼峰 : HowAreYou 常用于 类名或构造函数名
- 小驼峰 : howAreYou 常用于 函数名 how_are_you 常用于 变量名
- 匈牙利命名法
- 整数 int i_num 以i开头的变量存储整数
- 小数 float f_num 以f开头的变量存储小数
- 字符 char ch 以c开头的变量存储一个字符
- 字符串 String str 以s开头的变量存储一个字符串
- 布尔 Boolean bool 以b或bo开头的变量存储布尔变量
- 对象 Object o_div 以o开头的变量存储对象
- 数组 array arr 以arr开头的变量存储数组
- 函数 function fn 以fn开头的变量存储函数
JS 变量
用于在内存中开辟空间,这个空间中存储数据,且随着程序的运行,空间中的数据会发生变化,所以称为变量。
- 声明变量
- 显式声明 : var 变量名,变量名,变量名;
- 隐式声明 : 变量名 = 值;
- 给变量赋值
- 初始化变量: 在声明变量的同时给它赋值。
- 先声明变量,再赋值。
- 注意:
- 一个变量名只能存储一个值
- 当再次给一个变量赋值的时候,前面一次的值就没有了
- 变量名称区分大小写(
JS
严区分大小写)
JS 运算符
自增自减运算符 ++ --
规则:从左到右,如果遇到 变量 ++ 先取出变量中的值参与其它运算,再自加1。 如果遇到 ++ 变量,直接取加1后的值参与运算。
//声明一个变量 // var i = 3; // 3 4 // // i ++; // ++ i; // console.log(i); //4 // var i = 3; // // 3 4 // console.log(i ++); //3 // console.log(i); //4 // var i = 3; // // 4 // console.log(++ i); //4 // console.log(i); //4 // var i = 3; // // 4 4 5 5 4 // var j = ++ i + i ++ + i --; // // 4 + 4 + 5 // console.log(i,j); //4 13 var i = 3; // 3 4 5 5 6 var j = i ++ + ++i + i ++; // 3 + 5 + 5 j = 13,i = 6 // 7 13 14 7 6 var k = ++i + j ++ + i --; // 7 + 13 + 7 k = 27 j = 14 i = 6 console.log(i,j,k); //6
算术运算符
* (乘) /(除) %(模) -(减)
规则:
- Numbber类型,直接运算
Number与String类型运算,先将String类型转为Number类型,如果是纯数字字符串,则转为数字,直接运算。如果不是纯数字字符串,则转为NaN,与NaN计算的结果,都是NaN
true(1) false(0) null(0) undefined(NaN)
console.log(2 * 3); //6 console.log(2 * '3'); //6 console.log('2' * '3'); //6 console.log(2 * '3a'); //NaN (Not a Number) console.log(2 * true); //2 console.log(2 * false); //0 console.log(2 * null); //0 console.log(2 * undefined); //NaN console.log(10 / 2); //5 console.log(10 / '2'); //5 console.log(10 / '2a'); //NaN console.log(true / 2); //0.5 console.log(false / 2); //0 console.log(2 / null); //Infinity 无穷 console.log(0 / 0); //NaN console.log(2 / undefined); //NaN console.log(5 % 2); //1 console.log(5 % 5); //0 console.log(5 % '2'); //1 console.log(5 % '2a'); //NaN console.log(5 % true); //0 console.log(5 % false); //NaN console.log(2 % 5); //2 console.log(3 % 5); //3 console.log(5 - 3); //2 console.log(5 - '2'); //3 console.log(5 - '2a'); //NaN console.log(5 - true); //4 console.log(5 - false); //5 console.log(5 - null); //5 console.log(5 - undefined); //NaN
- (加) 规则:
- 如果+号两边有字符串,则将两个数据连接成新的字符串。
- true(1) false(0) null(0) undefined(NaN)
关系运算符
> (大于) <(小于) >= (大于或等于) <= (小于或等于)
规则:
- Number类型之间比较,直接比较类型之间比较,直接比较
- String类型之间比较,从左到右依次比较字符,直到比出结果。
- Number与String类型之间比较,先将String转为Number,再比较
- true(1) false(0) null(0) undefined(NaN)
- 任何值与NaN比较,结果都为false
=大于或等于只要满足> 或者满足 = 中的一项, 就是true
- 两个字母之间比较的是编码值(是数字)ASCLL
console.log(3 > 2); //true console.log(1 >= '1'); //true Number与string之间比较,现将字符串转为数字,在比较 console.log(0 >= 'false') //false console.log(0 <= false); //true 在比较的时候,false自动转为0进行比较 在比较的时候,true自动转为1进行比较 console.log(0 >= null); //true console.log('100' > '2') //false string之间比较,从左到右依次比较一个字符 console.log(2 > NaN); //false
== (等于) != (不等于) === (恒等于) !== (不恒等)
区别: == 和 != : 只比较结果,不比较类型。 === 和 !== : 先比较类型,如果类型相同,再比较结果。
console.log(2 == '2'); //true '1'自动转换为1 console.log(2 === '2'); //false 先比较类型 ,Number 1 string 1 类型不同 console.log(2 != '2'); //false 转换为1 相等 1.如果类型相同,结果也相同,则为true. 2.如果类型不相同﹐结果为false 3.如果类型相同,结果不相同,结果为false console.log(2 !== '2'); //true 先比较类型,Number 1 string 1 类型不同 ,不恒等 // !== 1.如果类型不相同,结果为true 2.如果类型相同,结果不相同,为true 3.如果类型相同,结果也相同,为false 面试题 //切记:切记:切记: //null在判断相等关系时,不再做类型转换 console.log(null == 0); //false null(空)不占用内存空间o常量占空间不相等 console.log(null == false); //false null(空)不占用内存空间o常量占空间不相等 console.log(null == ''); //false null(空)false 0 空间 console.log(null == undefined); //true null(空)undefined(空)都为空,所以是true console.log(null === undefined); //false null(object) undefined(undefined) object不等于undefined false console.log(NaN === NaN); //false NaN不等于任何值,包含自己
逻辑运算符 (false/0/''/null/undefined/NaN 天然为假值)
- ! : 非
规则: 非真即假、非假即真
console.log(!0); //true 0天然为假 !不是假的,结果为true console.log(!false); //true false !不是假的, 结果为true console.log(!''); //true ''天然为假 !不是假的,结果为true console.log(!null); //true null 天然为假 !不是假的,结果为true console.log(!undefined); //true 天然为假 !不是假的,结果为true console.log(!NaN); //true 天然为假 !不是假的,结果为true console.log(!' '); //false 空格为真 ,!不是真,即为假 console.log(!8); //false 8是真,!不是真,即为假 console.log(!-8); //false -8是真,!不是真,即为假 console.log(!!8); //true 8是真,!不是真,即为假,双重否定表肯定,即为真
- && : 与
规则 逻辑与&& and 两侧都为true 结果为true 只要一侧为false 结果就为 false 如果&&左边表达式的值为true时,返回右边表达式的值。 如果&&左边表达式的值为false时,发生短路,返回左边表达式的值。
var i = 3; var j = !i >= 0 && (i = 4); console.log(i,j); //4 4 var k = 3; // 3%5=3 3-3=0 为假 返回上一级 var m = k % 5 - 3 && (k = 4); console.log(k,m); //3 0 var a = 3; // 3-(12/2=0)=3 为真 var b = 3 - 3 * 4 % 2 && (a = 4); console.log(a,b); //4 4
- || : 或
规则 逻辑与|| or 两侧都为false 结果为false 只要一侧为true 结果就为 true 如果||左边表达式的值为true时,发生短路,返回左边表达式的值。 如果||左边表达式的值为false时,返回右边表达式的值。
var i = 3; var j = i - i % 4 || (i = 4); console.log(i,j); //4 4 var k = 3; var m = 3 - 3 % 2 || ( k = 4); console.log(k,m); //3 2 练习: // 1. number 等于或大于 90,但小于 100 number>=90 && number < 100 // 2. ch 不是字符 q 也不是字符 k ch!= 'q' && ch != 'k' // 3. number 界于 1 到 9 之间(包括 1 不包括 9),但是不等于 5 1<= number && number < 9 && number !=5 // 4. number 不在 1 到 9 之间 number <1 || number > 9 // 5. 判断这个字符是空格,是数字,是字母 ch === ' ' || ch >= '0' && ch <= '9'|| ch >= 'a' && ch <= 'z' || ch >= -'A' && ch <= 'z' // 6. 有 3 个整数 a,b,c,判断谁最大,列出所有可能 a > b && a > c b > a && b > c c > a && c > b // 7. 判断 year 表示的某一年是否为闰年,用逻辑表达式表示。 // 闰年的条件是符合下面二者之一: // 1) 能被 4 整除但不能被 100 整除 // 2) 能被 400 整除 // 被4整除 不能被100整除 能被 400整除 // 余数0 但是0为假,所以得让0变为true 0===0 !0 // 余数不为0,不为0的数天然为true 如:如果余数为1 天然为true 1 !== 0 year % 4 === 0 && year % 100 !== 0 || year % 400=== 0! !(year % 4)&& year % 100 || !(year % 400)
<!-- =:赋值号给变量中存储数据用的,将值存储在一个空间内 ==:判断相等关系(只判断结果是否相等〉 ===:判断相等关系(先判断类型是否相同,类型相同的情况下,再判断结果是否相等) -->
赋值运算符
- 简单赋值 =
赋值号左边,只能变量 赋值号右边,可以常量、变量、表达式。
- 复合算术赋值 += -= *= /= %=
规则:先取运算符左边变量中的值 与 右边表达式的值 进行相应的 算术运算,最后将运算的结果再赋值给左边的变量。
特殊运算符
- new : 用于创建对象 new 类名()
var i = 3; //Number var o_num = new Number(3); // typeof :用于检测数据类型 console.log(typeof i,typeof o_num); //'number' 'object' var o_bool = new Boolean(); var o_str = new String(); var obj = new Object();
typeof : 用于检测数据类型
console.log(typeof 3); //'number' console.log(typeof '3'); //'string' console.log(typeof true); //'boolean' console.log(typeof null); //'object' 不是对象的对象。 console.log(typeof undefined); //'undefined' 基本数据类型的数据为空 console.log(typeof NaN); //'number' 不是数字的数字 console.log(typeof typeof false);//'string' // typeof 检测时遇到typeof 字符串必须等到后面数值才反馈 所以反馈出带引号的数值 'number' 所以为string
数据类型的转换
- 自动类型转换
- 强制类型转换
- parseInt('字符串',2~36进制范围) : 将字符串中开头有效的数字部分转为整数。
当省略第二个参数或第二个参数为0时,表示十进制。 当第二个参数是< 2 || > 36时,结果为NaN 如果第二个参数是2~36中的范围时,判断第一个参数是否符合第二个参数的进制范围,如果符合,则正常转为整数,如果不符合进制范围,则直接返回NaN
// 进制 : 满几进一 // 十进制:0-9 // 八进制:0-7 // 二进制:0-1 // 十六进制:0-9 a b c d e f console.log(parseInt('1.2.3')); //1 console.log(parseInt('3 42')); //3 console.log(parseInt(' 3')); //3 console.log(parseInt('')); //NaN console.log(parseInt('a23')); //NaN console.log(parseInt('2',0)); //2 // 如果parseint的第二个参数省略或为0是,默认十进制 // 第二个参数是限制第一个参数的进制范围 console.log(parseInt('2',1)); //NaN // 如果第二个参数不在2-36中,直接返回NaND的结果 console.log(parseInt('2',37)); //NaN // 如果第一个不符合第二个参数的进制范围,直接返回NaN console.log(parseInt('2',2)); //NaN console.log(parseInt('2',3)); //2
parseFloat('字符串') : 将字符串中开头有效的数字部分转为小数。
console.log(parseFloat('1.2.3.5')); //1.2 console.log(parseFloat('2 34')); //2 console.log(parseFloat('')); //NaN console.log(parseFloat('a2.3')); //NaN
Number('字符串') : 将纯有效数字字符串转为数字。
console.log(Number('1.2.3')); //NaN console.log(Number('2 34')); //NaN console.log(Number('')); //0 ''表示假false console.log(Number('a23')); //NaN console.log(Number('')); //0 ''表示假false console. log(parseInt('')); //NaN console. log (parseFloat('')); //NaN
运算符的优先级
!(非) ++(递增) -- (递减) new(创建对象) typeof(测试类型) +(正号) -(负号)
*(乘) /(除) %(模)
+(加) -(减)
>(大于) <(小于) >=(大于或等于) <=(小于或等于)
== (等于) !=(不等于) === (恒等) !== (不恒等)
&& (与)
11 (或)
?: (三元运算符)