1.js中的进制使用
<!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;
console.log(a);
//八进制
a = 070;
//二进制;很多浏览器不支持
//a = 0b6;
//把进制转换为具体数字
//向"070" 这一种字符串,有些浏览器 会当成8进制或者10进制转换
//所以需要使用一种方式来指定转换
var c ="070";//原来是字符串
c = parseInt(c,10);//c 转换为10进制:这里有两个参数(变量,进制)
console.log(typeof c);
console.log(c);
/*复习:
16进制:0x开头
8进制:0开头
2进制:0b开头
但是不是所有的浏览器都支持
*
* */
</script>
</head>
<body>
</body>
</html>
2.JS的操作运算符
<!DOCTYPE html>
<html>
<head>
<meta charset="UTF-8">
<title></title>
<script type="text/javascript">
/*
运算符也叫操作符
* 通过运算符可以对一个或多个值进行运算
* 比如:typeof就是运算符,可以来获得一个值的类型
* 它会将该值的类型以字符串的形式返回
* number string boolean null undefined object
*
* 算术运算符(不会对原变量产生影响)
* 当对非Number类型的值进行运算的时候,会将这些值转换为Number,再运算
* 任何值和NaN进行运算都得NaN
* +
* + 可以对两个值进行加法运算,并将结果返回
* 如果对两个字符串进行加法运算,则会作出拼接字符串
* 会对两个字符串拼接为一个字符串,并返回
* 任何的值和字符串做加法运算,都会先装换为字符串,然后拼接 var str=123+"1" 显示=1231
* -
*
* *
*
* /
*
* %
* 取模(取余运算)
* sum = 9 % 3 ; 余0
* sum = 9 % 4 ; 余1(等于2.....余1)
*
*
* */
var a =123;
//运算符都会返回一个结果
//拆开、、综合
var result = typeof a;//同等 = console.log(typeof a);
console.log(result);//同等 = console.log(typeof a);
/*
* a 类型是 number; result类型是string
*/
/*算术运算符*/
//1.
var b = 123;
var result = b+1;
console.log(b);//b显示123
console.log(result);//result=124;这是运算符作为一个结果返回给result变量的
//2.如果你真的想改变b的值就重新赋值给她自己b
b = b+1;
console.log(b);//b显示124
/*特殊计算 var只需要写一个*/
var b = 123;
var result = true+1;//显示2=1+1
var result = true+false;//显示1=1+0
var result = 2+null;//显示2=2+0
/*比较特殊的NaN*/
var result = 2+NaN;//显示0=2+0
var result = "123"+"456"//显示=123456 这里是连接字符串(拼接;拼串)
// result = "你好!"+"大帅哥" 显示=你好!大帅哥(拼接了)
var str ="锄禾日当午,"+"汗滴禾下土"+"谁知盘中餐"+"粒粒皆辛苦";//连接使用+连接字符串
var str1 = true + "hello";//显示truehello
/*规律隐式一*/
/*
我们可以利用这一特点,来将一个任意的数据类型转换为String
* 我们只需要为任意的数据类型 + 一个 "" 即可将其转换为String
*
* 这是一种隐式的类型转换,由浏览器自动完成,实际上也是调用的String函数实现
* 为指定说明就使用,称为隐式
* */
//经常用这一种
var c =123;
c = c+"";//typeof 显示c是string,c=123
//同等与 c = String(c);
/*输出表示:和java类似*/
console.log("c=" +c);//显示“c=123”
//练习:从左往右慢慢计算
sum = 1 + 2 + "3";//显示33
sum = "1" + 2 + 3;//显示123====1 - 12 -123逐渐变为字符串
//减法:
sum = 100 - "1";//显示99
//乘法:
sum = 100 *"2";//显示200
sum = 2*undefined;//显示NaN
sum = 2*null;//显示0
/*规律隐式二*/
/*总结:除了字符串和+加法:
* 其余(减 乘 除)后面字符串都会变成number进行运算
* 我们可以利用这一特点做隐式的类型转换
* 可以通过为一个值 -0 *1 /1 来将其转换为Number
* 原理和Number()函数一样,但是要简单一点
*
* */
//字符串隐式转换number
var dd = "123";//显示string
dd = dd - 0;//dd变为了number:因为任何的number和所有的都会变成number类型
</script>
</head>
<body>
</body>
</html>
3.一元运算符
<!DOCTYPE html>
<html>
<head>
<meta charset="UTF-8">
<title></title>
<script type="text/javascript">
/*
一元运算符,只需一个操作数
* + 正号
* 对数值无影响
* - 负号
* 可以取反
* 对于非number类型的值
* 它会先转换为Number ,然后在运算
* 可以对其他一个数据类型使用+,将其转换为number
* 他的原理和Number()函数一样
*
* var a = true;
* a = -a;显示a=-1;
* */
var str = 1 + "2"+3;//显示123
//+号换number
var str = 1 + +"2"+3//显示6,直接被+变为number,可以进行运算
</script>
</head>
<body>
</body>
</html>
4.自增自减的练习
<!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 是变量的新值(自减以后的值)
* */
//原版=low版
var a = 1;
a = a + 1;//自增加1 a+=1 和 a++ 都等于原始: a=a+1 但是a+=1 和 a++含义不同
console.log("a= "+a);//显示a=2
/*高大上版*/
var b = 1;
//使a自增1
b++;//+1=2
b++;//2+1=3
b++;//3+1=4
b++;//4+1=5
console.log("b= "+b);//显示b=2
/*自增和自减*/
/*使c自增1:结果都一样*/
//c++;
//++c;
/*方式一:c++*/
var c = 1;
console.log("c++" + c++);//显示原变量的值1
/*方式二:c++*/
var c = 1;
console.log("++c" + ++c);//显示新的值,重新赋值之后的值
/*练习:*/
var result = d++ + ++d + d;//显示64
/*解答:
d++ 原值 = 20
* ++d 赋的新值 = 22(前面自增一次,自己自增一次=22)
* d 自增了两次 = 22
* */
var d = d++;//等于20
/*等于(赋了两次值)
var e = d++; d++ = 21,但是 e =等于的是原始的d的值=20,我们需要的是e的值
d = e;
相当于先自增d++=21第一次赋值(自身),然后再赋值给d=20
*/
/*自减练习:
* */
var i = 10;
//i--;
//--i;
//console.log(i);//都等于9 过后的值
//而像这样是当前的值
console.log(i--);//10
console.log(--i);//显示9
var res = i-- + --i + i;//10(原)+8(原来第一个9,本身再减=8)+ 8(前面两次均减1)=26
</script>
</head>
<body>
</body>
</html>
5.自增自减练习
<!DOCTYPE html>
<html>
<head>
<meta charset="UTF-8">
<title></title>
<script type="text/javascript">
/*
自增自减的运算
*
*
*
* */
var n1 = 10 ,n2 = 20;
var n = n1++;
console.log("n=" + n);//10 原值
console.log("n1="+ n1);//11 自增后
/*上面还有一个自增 相当于n=11*/
n = ++n1;
console.log("n=" + n);//12
console.log("n1=" +n1);//12
n = n2--;
console.log("n=" +n);//20
console.log("n2=" + n2);//19
n = --n2;
console.log("n=" + n);//18
console.log("n2=" +n2);//18
/*
ctrl+p执行代码
*/
</script>
</head>
<body>
</body>
</html>
6.Boolean逻辑运算符(重点使用)
<!DOCTYPE html>
<html>
<head>
<meta charset="UTF-8">
<title></title>
<script type="text/javascript">
/*
JS中为我们提供了三种逻辑运算符:
* !(非)
* - !可以用来对一个值进行非运算
* - 所谓非运算就是指对一个值取反操作
* true变flase;flase变true
* - 如果对一个值取两次反,他不会变化(!!)
* - 如果对非布尔值进行元素,则会将其转换为布尔值,然后再取反(var a = 10;a = !a;//a显示false)
*
*(隐式类型转换)所以我们可以利用该特点,来将一个其他的数据类型转换为布尔值
* 可以为一个任意数据类型取两次反,来将其转换为布尔值(var a = 10;a = !!a;//a显示true)
* 原理和Boolean()函数一样
*
*
*
* && (与and:一假则假)
* - &&可以对符号两侧的值进行与运算并返回结果
* - 运算规则
* - 两个值中只要有一个值为false就会返回false
* - 只有两个值都为true时,才会返回true
* - JS运算中的与&&属于短路的与,如果第一个值为false,就可以判断了
* 例子:true&&alert("像极了爱情");第一个值为true,还会继续判断第二个
* false && alert("短路爱情");第一个值为false,不会再继续执行判断下去了
*
*
*
逻辑短路:说明如果在&&如果为假,那么就不会继续往下判断,如果接下来还有条件——————这就是短路
* || 或 (or:一真则真)
* - ||可以对符号两侧的值进行或运算并返回结果
* 运算规则
* - 两个值中只要有一个true,就返回true
* - 如果两个值都为false,才返回false
* - JS运算中的与&&属于短路的或,如果第一个值为true,就可以判断了,就不会检查第二个值了
*
*
*
* */
/*!非运算举例:(取反)*/
var a = true;
console.log("a= "+a);//显示ture
a = !a;
console.log("a= "+a);//显示false
/*&&与运算举例:只要有一个false就返回false*/
var result = true && true;//显示true
result = true&&false;//显示false
result = false&&false;//显示false
/*||或运算举例:(像极了舔狗)只要有一个true就能返回true*/
var result = true || true;//显示true
result = true || false;//显示true
result = false|| false;//显示false
</script>
</head>
<body>
<!--用户:<input type="text" name="user" id="user"/><br>
密码:<input type="text" name="paw" id="paw"/><br>
<button>登录</button> <button>注册</button>
-->
<!--.box1 + tab 快捷输入法-->
</body>
</html>
7.Boolean逻辑运算符练习(重点使用)
<!DOCTYPE html>
<html>
<head>
<meta charset="UTF-8">
<title></title>
<script type="text/javascript">
/*
!&& 与 非布尔值(数字)的情况
* - 对于非布尔值进行与&& ||或运算时
* 会先将其转换为布尔值,然后再运算,并且返回原值
*
* - 与运算(短路有关系,使用短路的也可以判断(第一个值):false不继续,true第二个):
* - 如果第一个值为true(还有继续看后面的),则必然返回第二个值
* - 如果第一个值为false,则直接返回第一个值
* 总结:找假
*
!|| 或 非布尔值(数字)的情况
* - 或运算(短路判真)
* -如果第一个值为true,则直接返回第一个值
* -如果第一个值为false,则直接返回第二个值
* 总结:找真
*
*
*
* */
/*举例:一假则假*/
/*true && true*/
//与运算:如果两个值都为true,则返回后边的
var result = 2 && 1;
console.log("reslut = " +result);//此时显示的是1
/*false && true*/
//如果有false则返回false
var result1 = 0 && 2;//等同于 = 2 && 0;
console.log("reslut1 = " +result1);//此时显示的是false =0
/*fasle && false,返回前面的*/
var result1 = 0 && NaN;//此时显示的是false =0
console.log("reslut2 = " +result2);
var result1 = NaN && 0;//此时显示的是false =NaN
/*总结:
规律:与运算:如果两个值中有false,则返回的是前的false
注意:返回的是原值,不是布尔类型的题
* */
/*举例:一真则真*/
/*true || true*/
//或运算:如果两个值都为true,则返回前边的
var sum = 1 || 2;
console.log("sum="+sum);//显示的true=1
/*false || true*/
//如果有true则直接返回true
var result1 = NaN && 1;//此时显示的是true =1
console.log("reslut2 = " +result2);
var result1 = 1 && NaN;//此时显示的是true =1
/*fasle || false,返回前面的*/
var result1 = 0 && NaN;//直接返回第二个值NaN
var result1 = NaN && 0;//直接返回第二个值0
/*练习:*/
var exe = ""+"hello";
console.log("exe = "+exe);//""转换为Boolean值是false,则直接等于hello
exe = -1+"你好";//-1是一个true ,则输出直接等于-1
</script>
</head>
<body>
</body>
</html>
8.赋值运算
<!DOCTYPE html>
<html>
<head>
<meta charset="UTF-8">
<title></title>
<script type="text/javascript">
/*
赋值运算 =
* 可以将符号右侧的值赋给符号左侧的变量:a=5;
*
* +=
* a += 5等价于a = a + 5;
* -=
* a -=5等于 a = a - 5;
* *=
* a *=5等于 a = a * 5;
* /=
* a /=5等于 a = a / 5;
* %=
* a %=5等于 a = a % 5;
* */
/*举例*/
var a =10;
//a = a + 5;
a += 5;//等同于a = a + 5;
console.log("a = "+a);//显示15
</script>
</head>
<body>
</body>
</html>
9.关系运算
<!DOCTYPE html>
<html>
<head>
<meta charset="UTF-8">
<title></title>
<script type="text/javascript">
/*
关系运算符(比较大小关系)
*
* > 大于号
* - 判断左侧的值是否大于右侧
* - 如果关系成立,返回true,如果关系不成立则返回false
*
* >= 大于等于号(大于或者等于//不小于)
* - 判断左侧的值是否大于或等于右侧
* - 如果关系成立,返回true,如果关系不成立则返回false
*
*
* < 小于号
* - 判断左侧的值是否小于右侧
* - 如果关系成立,返回true,如果关系不成立则返回false
*
*
* <= 小于等于号(小于或者等于//不大于)
* - 判断左侧的值是否小于或等于右侧
* - 如果关系成立,返回true,如果关系不成立则返回false
*
* 非数字比较的时候,先将字符串或者其他的转换为数组再比较
* 例如:
* 1>true//false
* 1>=true//true
* console.log(1>"0");//true
* console.log(1>null);//true
* 任何时候NaN和任何值比较都是false; "hello"=NaN
* 10 <= "hello"//false
*
*
*
*
*
* !非(不等于)
* != 不等于号
* - 判断左侧的值是否等于右侧
* - 如果关系成立,返回true,如果关系不成立则返回false
*
*
*
* */
/*大于号>举例:*/
var result = 5>10;//false
result = 5>4;//true
console.log(result);
/*大于等于号>=举例:*/
var sum = 5>= 4;//true
sum = 5>=5;//true
/*小于等于号>=举例:*/
var sum1 = 5<= 4;//false
sum1 = 5<=5;//true
/*非数值情况举例*/
console.log(1 >= true);//true
console.log(1 > "0");//true
console.log(10 > null);//true
//任何时候NaN和任何值比较都是false;
console.log(10 <= "hello");//false
console.log(true > false);//true
console.log("1" < "5");//true
//特殊情况:这里比较的是Unicode字符编码
//注意:在比较两个字符串的数字的时候一定一定要转型
console.log("11" < "5");//true
/*转型如下:+*/
console.log("112333" < + "5");//true
console.log("a"<"b");//97<98 true
/*比较字符编码的时候,如果都是字符串那就是一位一位按位置进行比较*/
console.log("abc"<"b");//true
console.log("bbc"<"b");//false b<b 不成立
console.log("abc"<"bcd");//true a<b 成立
</script>
</head>
<body>
</body>
</html>
10.Unic0de编码
<!DOCTYPE html>
<html>
<head>
<meta charset="UTF-8">
<title></title>
<script type="text/javascript">
/*
使用Unic0de编码
* 在JS中使用 :转义字符\编码
*
* */
console.log("\u2620");
</script>
</head>
<body>
<!--在网页中使用Unicode编码
&#编码; 这里的编码是10进制
-->
<h1 style="font-size: 100px;">☠</h1>
<h1 style="font-size: 100px;">⚀</h1>
</body>
</html>
11.相等运算
<!DOCTYPE html>
<html>
<head>
<meta charset="UTF-8">
<title></title>
<script type="text/javascript">
/*
相等运算符:用来比较两值是否相等
* - 如果相等会返回true,否则返回false
*
* == 相等运算符
* - 当使用 == 来比较两个值的值时,如果值的类型不同
* 则会自动进行类型转换,将其转换为相同的类型
* 然后再比较
*
*
*
*
* !=不相等运算符
* 不相等用来比较两值是否不相等
* - 如果相等会返回true,否则返回false
* - 使用!=来做不相等运算
* - 不相等也会对变量进行自动转换,如果转换后相等会显示false
*
* 上面做自动类型转换再比较
*---------------------------
* 下面不做自动类型转换就比较
*
* ===全等运算符
* 不做自动的类型转换,类型不一样的就直接返回false
*
*
* !==不全等
* 不做自动的类型转换,类型不一样的就直接返回true
*
*
*
*
*
* */
/*举例:*/
//console.log(1 == 1);//true
var a = 10;
//console.log(a == 4);//false
//字符串"1"转换为数字1
//console.log("1" == 1);//true
// 将字符串和布尔值都转为number
//console.log(true == "1");//显示true
//console.log(true == "hello");//false
//console.log(null == 0);//false
/*特殊情况:
undefined 衍生自 null
所以这两个值做相等判断时,会返回true
console.log(undefined == null);//true
*/
/*
NaN不和任何值相等,包括他本身
console.log(NaN == NaN);//false
*/
/*想要判断是否等于NaN*/
var b = NaN
/* 使用console.log(b == NaN);根本行不通,显示false
所以我们使用的是isNaN()函数;来判断是否为NaN
* */
console.log(isNaN(b));//显示true
/*!=不相等的运算
* */
console.log(10 != 5);//ture
console.log(10 != 10);//false
console.log("abcd" != "abcd");//false
console.log("1" != 1);//false
/*全等===*/
console.log("123" === 123);//false 类型不一样,就已经不能比了
/*全等!==*/
console.log("123" !== 123);//true 类型不一样,就已经不能比了
</script>
</head>
<body>
</body>
</html>
- 条件运算
<!DOCTYPE html>
<html>
<head>
<meta charset="UTF-8">
<title></title>
<script type="text/javascript">
/*
条件运算符也叫三元运算符/三目运算符
*
* 语法:
* 条件表达式?语句1:语句2;
*
* - 执行的流程:
* 条件运算符在执行的时候,首先对表达式进行求值
* 如果该值为true,那么执行语句1,并返回执行结果。
* 如果该值为fasle,那么执行语句2,并返回执行结果。
*
*
* - 如果表达式不是布尔值,在转换为布尔值再进行运算
*
*
*
*
* */
/*举例:*/
//true?alert("语句1"):alert("语句2");//语句1
//var a = 10;
//var b = 20;
//a > b ?alert("a大"):alert("b小");//false b小
/*举例二,两个值求最大值:*/
//var a=30,b=20;
//var max = a>b? a:b;//三元运算返回一个结果
//console.log("max=" +max);
/*举例三、3个值求最大值*/
/*var a =30,b = 43,c = 50;
var max = a > b ? a:b;
var max = max>c ? max:c;
console.log("max=" +max);*/
/*方法二*/
/*不推荐使用: 可读性差*/
var a =30,b = 43,c = 50;
var max = a > b ? ( a > c ? a : c):( b > c ? b : c)
/*
a > b 成立 执行语句1,此时a最大,语句1里的a再和c比较
*
* */
</script>
</head>
<body>
</body>
</html>
13.运算符的优先级
<!DOCTYPE html>
<html>
<head>
<meta charset="UTF-8">
<title></title>
<script type="text/javascript">
/*
运算符的优先级:
*
* , 运算符
* 使用,可以分割多个语句,一般可以在声明多个变量时使用
*
*/
//使用,运算符同时声明多个变量
//var a , b , c;
//还可以赋值
//var a=1 , b=2, c=3;
/*
JS中优先级:
* 如果||的优先级高,或者两个一样高,则应该返回3
* 如果与&&的优先级高,则应该返回1(先算于&&运算1||3)
*
* JS中有个优先级表
* 从上到下,从左到右,最高
* 如果你想改变优先级的排序,那么就用()来进行提高优先级
*
*
* */
var result = 1 || 2 && 3;
console.log("result=" + result);//显示1
</script>
</head>
<body>
</body>
</html>
14.代码块
<!DOCTYPE html>
<html>
<head>
<meta charset="UTF-8">
<title></title>
<script type="text/javascript">
/*
代码块:我们的程序是由一条一条语句构成的
* 语句是按照自上向下的顺序一条一条执行的
* 在JS中可以使用{}来为语句进行分组
* 同一个{}中的语句我们可以称为是一组语句
* 它们要么都执行,要么都不执行
* 一个{}中的语句我们也称为一个代码块
* 代码块不用再写分号;
*
* JS的代码块,只具有分组的作用,没有其他的用途
* 代码块内容的内容,在外部是完全可见的
*
*
* */
{//一组
var a = 10;
//弹出警告
alert("hello");
//控制台输出
console.log("你怎么那么好看");
//网页输出
document.write("文件写入");
}
</script>
</head>
<body>
</body>
</html>