操作符
算术运算
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<title>Title</title>
<style>
* {
margin: 0;
padding: 0;
}
</style>
</head>
<body>
<script>
/*
算数运算符（基础数字运算）
+ - * / %(求余数）
当不是数字之间的运算的时候
+号两边一旦有字符串（引号引起来的一坨），那么+号就不再是数学运算了,而是拼接，最终结果是字符串 *****
-/*% 尽量将字符串转换成数字（隐式类型转换）
NaN : Not a Number number
*/
var a = "5";
var b = "2";
console.log(a-b);//3
</script>
</body>
</html>
赋值运算符
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<title>Title</title>
<style>
* {
margin: 0;
padding: 0;
}
</style>
</head>
<body>
<div id="box">
<ul>
<li>1</li>
<li>2</li>
<li>3</li>
<li>4</li>
</ul>
</div>
<script>
/*
赋值运算符
+= -= *= /= %=
++ -- 两个都存在隐式类型转换，会全部转换为数字
++x x++
*/
var oBox = document.getElementById("box");
oBox.innerHTML += "999";
//var x = 4;
//var y = ++x; // x = x + 1; y = x;
//console.log(x);//5
//console.log(y);//5
var x = 6;
var y = x++;// y = x ; x = x + 1;
console.log(x);
console.log(y);
</script>
</body>
</html>
比较运算符
逻辑运算符
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<title>Title</title>
<style>
* {
margin: 0;
padding: 0;
}
</style>
</head>
<body>
<script>
/*
针对布尔值 true false
&& 与 两边都为真，结果才为真，其他为假
|| 或 两边都为假，结果才为假，其他都是真
! 非 取反，真变假，假变真
当逻辑运算符，两边不一定是布尔值的时候
&& 遇到假就停，但是不会进行类型转换
|| 遇到真就停，但是不会进行类型转换
！ 隐式类型转换，将后面的数据先转换为布尔值再取反
*/
var a = true && false && true;
// alert(a);
var b = false || false || true;
// alert(b);
var c = 1 && true && 6 && 1;
// alert(c);
var d = false || false || 0;
// alert(d);
var q = !"5";
alert(q);
</script>
</body>
</html>
流程控制
if else流程控制
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<title>Title</title>
<style>
* {
margin: 0;
padding: 0;
}
</style>
</head>
<body>
<script>
/*
if ==> 布尔值
判断符
> < >= <= == != !== ===
== 只判断值是否一样 "5"==5
=== 不仅仅判断值，还判断类型是否一样 "5" === 5
当if的条件 运算完后不是布尔值的时候 会被强制性的转换为布尔值
哪些值，在转换为布尔值的时候为false
0 number
false boolean
"" string
null object/null
undefined undefined
NaN number
NaN :Not a Number number类型
一般在非法运算的时候才会 出现NaN
isNaN(参数) 非常讨厌数字
首先尽量把参数转换成数字，然后
当参数是 数字，返回 false
当参数不是数字，返回 true
在if里面，能用布尔值做条件判断的时候，不要用其他的来代替，因为强制数据类型的转换需要耗费时间
在两个值比较的时候，能用三等判断的时候，就用三等判断
*/
// alert(5 === "5");
/*if(" "){
alert("true");//条件为真的时候执行
}else{
alert("false");//条件为假的时候执行
}*/
//当真语句只有一行的时候，可以去掉大括号，还可以直接写在条件的后面
/*if(9>8){
alert("true");
}
if(6>4)alert("zhen");*/
//真语句一行，假语句一行 三目运算
//9>20?alert("zhen"):alert("jia");//条件?真语句:假语句;
//当三目的真假语句都是给同一个变量赋值的时候，可以更近一步简写
// a=9>20?9:20;
// alert(a);
// var a;
// if(9>20){
// a = 9;
// }else{
// a = 20;
// }
// alert(a);
var x = 10;
if(x > 20){
alert("x>20");
}else if(x > 15){
alert("x>15")
}else if(x>10){
alert("x>10")
}else{
}
</script>
</body>
</html>
switch case default流程控制
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<title>Title</title>
<style>
* {
margin: 0;
padding: 0;
}
</style>
</head>
<body>
<script>
/*var name = "wjh";
if(name === "xiaopo"){
alert(name + "真阔爱");
}else if( name === "wjh"){
alert(name + "好帅");
}else{
alert(name+"你是谁");
}*/
//全等判断 break 来阻止代码自动地向下一个 case 运行
var name = "wmk";
switch(name){
case "xiaopo":
alert(name + "真阔爱");
break;
case "wmk":
alert(name + "好帅");
break;
default:
alert(name+"你是谁");
break;
}
</script>
</body>
</html>
循环
for
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<title>Title</title>
<style>
* {
margin: 0;
padding: 0;
}
</style>
</head>
<body>
<script>
// for(var i = 0; i < 10 ; i ++){
// console.log(i);
// }
// for(var i = 0 ; i < 5 ; i ++ ){
// for(var j = 0 ; j < 3 ; j ++){
// console.log(i+ ";" + j);
// }
// }
for(var i = 0 ; i < 10 ; i ++ ){
if(i === 5){
//break;// 0 1 2 3 4中断循环，终止循环，结束循环，未执行的代码不执行
continue;//跳出本次循环 012346789
}
console.log(i);
}
</script>
</body>
</html>
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<title>Title</title>
<style>
* {
margin: 0;
padding: 0;
}
ul li{
list-style: none;
50px;
height: 50px;
background: yellowgreen;
border-radius: 50%;
margin: 25px;
line-height: 50px;
text-align: center;
}
</style>
</head>
<body>
<ul id="box">
<li>00</li>
<li>11</li>
<li>22</li>
<li>33</li>
<li>44</li>
</ul>
<script>
var aLi = document.getElementsByTagName("li");
// console.log(aLi.length);
/*aLi[0].onclick = function () {
alert(0);
};
aLi[1].onclick = function () {
alert(1);
};
aLi[2].onclick = function () {
alert(2);
};
aLi[3].onclick = function () {
alert(3);
};*/
for(var i = 0 , len = aLi.length ; i < len ; i++ ){
aLi[i].index = i;//index 自定义变量 a b c d
//aLi[0].index = 0;
//aLi[1].index = 1;
//aLi[2].index = 2;
//aLi[3].index = 3;
aLi[i].onclick = function () {
alert(this.index);
}
/*aLi[i].onclick = function () {
alert(i);//是循环结束的i
}*/
/*aLi[0].onclick = function () {
alert(i);
}
aLi[1].onclick = function () {
alert(i);
}
aLi[2].onclick = function () {
alert(i);
}
aLi[3].onclick = function () {
alert(i);
}
*/
}
</script>
</body>
</html>
补充：let
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<title>Title</title>
<style>
* {
margin: 0;
padding: 0;
}
ul li{
list-style: none;
50px;
height: 50px;
background: yellowgreen;
border-radius: 50%;
margin: 25px;
line-height: 50px;
text-align: center;
}
</style>
</head>
<body>
<ul id="box">
<li>00</li>
<li>11</li>
<li>22</li>
<li>33</li>
<li>44</li>
</ul>
<script>
var aLi = document.getElementsByTagName("li");
for(let i = 0 ,len = aLi.length ; i < len ; i ++ ){
aLi[i].onclick = function () {
alert(i);
}
}
// var a = 5;
// var a = 6;
// alert(a);
//let 不能重复声明
//块级作用域
// let a = 5;
// let a = 6;
// alert(a);
if(true){
let a = 12;
}
alert(a);
</script>
</body>
</html>
while do...while
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<title>Title</title>
<style>
* {
margin: 0;
padding: 0;
}
</style>
</head>
<body>
<script>
/*var i = 0;
for(; i < 4 ; ){
console.log(i);
i++;
}*/
var i = 100;
// while(i<10){
// console.log(i);
// i ++;
// }
do{//至少执行一次
console.log(i);
}while(i<10);
</script>
</body>
</html>
字符串方法
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<title>Title</title>
<style>
* {
margin: 0;
padding: 0;
}
</style>
</head>
<body>
<script>
/*
string 字符串
索引、下标、偏移量——从0开始
str[index];——通过索引取字符串
str.length;——获取长度 空格也算
value.toString();——转换字符串
str.substring();——截取字符串 会比较参数值的大小，小的参数在前面,负数变为0
str.slice()——切片,不会交换位置，负数从右到左数
str.split()——字符串切割，返回数组 ******
str.indexOf——查找字符串，成功返回索引，反之返回-1 ******
str.toUpperCase()——全部转换大写
str.toLowerCase()——全部到小写
*/
var str = "wo shi shui";
// alert(str.length);
// alert(str[4]);//可读性
str[0] = "W";//不可写
// console.log(str);
var str1 = "wo zai na wo shi shui";
// console.log(str1.substring(2,5));//[2,5)
// console.log(str1.substring(5,1));
// console.log(str1.substring(-5,5));
// console.log(str1.slice(1,5));
// console.log(str1.slice(5,2));
// console.log(str1.slice(-4,-2));
console.log(str1.split("i"));
alert(str1.indexOf("a"));//4
alert(str1.indexOf("a",5));//8
alert(str1.indexOf("q"));
</script>
</body>
</html>
数组方法
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<title>Title</title>
<style>
* {
margin: 0;
padding: 0;
}
</style>
</head>
<body>
<script>
/*
数组 主要存放数据的
arr.length
查看数组的个数
arr[]
可以读可写
arr.push
在后面添加 能同时添加多个值
arr.unshift()
在前面添加 能同时添加多个值
arr.pop()
删除数组的最后一个
arr.shift()
删除数组的第一个
arr.splice() ******
(3) 数组的长度
(0, 1) 从第0位开始删除第一个 返回删除的那个
(2, 3, 'a') 从第二位开始后面三位全部替换成 a
(2, 0, 'a') 第二位开始前面插入 a
arr.sort()
顺序来排序
arr.reverse()
倒序排序
arr.join() *****
arr.join('a') 以`a`为界限拼接字符串
*/
var arr = ["wmk","wf","zx"];
console.log(arr.length);
// alert(arr[2]);//可读
arr[0] = "sqx";//可写
console.log(arr);
arr.push("bb","wmk");
console.log(arr);
arr.unshift("wjh","xiaopo");
console.log(arr);
arr.pop();
console.log(arr);
arr.shift();
console.log(arr);
//arr.splice(3);//数组的长度为3
//console.log(arr);
// arr.splice(1,2);//从小标1开始 删除两位
// console.log(arr);
arr.splice(1,0,"qq","ww");
console.log(arr);
// var arr1 = new Array();
// arr1[0] = "xiaopo1";
// arr1[1] = "xiaopo2";
// arr1[2] = "xiaopo3";
// console.log(arr1);
var arr2 = ["我","是","小泼"];
console.log(arr2.join("+"));
var arr3 = [-2,-8,-5];
// console.log(arr3.sort());
arr3.sort(function (a,b) {
//return a-b;//从小到大
//return b-a;//从大到小
//return 1;//倒序
return 0;
});
console.log(arr3);
</script>
</body>
</html>
补充：
