JavaScript课程——Day02（运算符与表达式、javaScript交互基础）

运算符与表达式

运算符：也被称为操作符，用于执行程序代码运算，会针对一个以上操作数来进行运算

表达式：是由一个或多个操作数通过运算符连接起来的式子，每个表达式最终都会有一个结果，返回给开发者

 

运算符的分类：

• 算术运算符
• 赋值运算符
• 比较运算符
• 逻辑运算符
• 三目运算符

1、算数运算符

　　1.1、+  加

　　规则：

• 如果两边都是数字，则就是普通的运算
• 如果有一边的字符串，则另一边也转成字符串，再进行字符串的拼接
• 如果没有字符串，不全是数字，则调用Number方法，转成数字，再进行运算
• 如果有一边是对象，则对象调用 toString 得到字符串表示，再进行运算

console.log(2 + 3); // 5
console.log('2' + 3); // '23'
console.log(true + 0); // 1
console.log(true + null); // 1
console.log(false + null); // 0
console.log(false + undefined); // NaN

console.log(1 + {}); // '1[object Object]'

  // 案例
  var a = 5;
  var b = 10;
  // console.log(a + b);
  // console.log('5+10的和是15');
  console.log(a + '+' + b + '的和是' + (a + b));

 

　　1.2、-  *  /  减  乘  除

　　规则：操作符的两边都调用Number转成数字再计算

console.log(10 - 5); // 5
console.log('10' - 5); // 5
console.log('小王' - 5); // NaN

 

　　1.3、%  取余/取模

console.log(12 % 5); // 2
console.log(13 % 5); // 3
console.log('13' % 5); // 3
console.log('13' % 0); // NaN

 

　　1.4、++  递增      --  递减

　　规则：

• 加加/减减在前，先自增/自减，再参与表达式的运算
• 加加/减减在后，先参与表达式的运算，再自增/自减

var a = 10;
a++; // a = a + 1;   加加在后
++a; // 加加在前
console.log(a); // 12
// 加加在前，先自增，然后参与表达式的计算
// 加加在后，先参与表达式的计算，再自增

// var num1 = 2;
// var num2 = 20;
// var num3 = num1++ + num2; // num3 = num1+num2       num1++
// var num4 = num1 + num2;
// console.log(num3, num4);

// var num1 = 2;
// var num2 = 20;
// var num3 = ++num1 + num2; // num1++      num3 = num1+num2
// var num4 = num1 + num2;
// console.log(num3, num4);

var a = 10;
var b = ++a + a++;
console.log(a, b); // 12 22

 

2、赋值运算符

=  +=  -=  *=  /=  %=

// =
var a = 10; // 将10赋给a，先将等号的右边求出一个值，再给左边

// += -= *= /= %=
// 操作符的两边先操作，结果赋给左边
a += 5; // a = a + 5;
a *= 3; // a = a * 3;
console.log(a); // 45

 

3、比较运算符（返回的都是布尔值）

　　3.1、>  >=  <  <=

　　规则1：如果有一边不是字符串，则调用 Number() 方法，转成数字，再进行比较

console.log(10 >= 9); // true
console.log(10 >= 10); // true
console.log('2' >= 100); // false

　　

　　规则2：如果两边都是字符串，则是字符串的比较，从左向右，一位一位的比较，比较的是字符的ASCII编码

console.log('2' >= '100'); // true
//2的第一位是2；100的第一位是1，2与1比较ASCII编码，2大于1，结果为真

 

 

 

　　3.2、==  !=

　　规则：相等/不等比较，为了能够进行比较，操作符的两边都调用 Number() 转数字比较，但是null和undefined不能转换数字

console.log(NaN == NaN); // false

console.log(10 == 10); // true
console.log(10 == '10'); // true

console.log(null == false); // false
console.log(null == undefined); // true  js原码规定它俩相等

console.log(10 != '10'); // false

 

　　3.3、===  !==

　　规则：三个等号的比较（全等/全不等），必须类型和值都相等，不会进行转换

console.log(10 === '10'); // false
console.log(10 !== '10'); // true

console.log(null === undefined); // false

 

4、逻辑运算符

　　4.1、&&  与/并且

// 操作符的两边都为真，结果为真，只要有一边为假，结果为假
console.log(10 >= 9 && 12 >= 12); // true
console.log(10 <= 9 && 12 >= 12); // false

// 如果左边为假，则不用跑到右边；直接看左边，如果左边是表达式，则表达式求值，如果左边是值，则返回这个值
// 如果左边为真，则跑到右边；直接看右边，如果右边是表达式，则表达式求值，如果右边是值，则返回这个值
console.log(0 && 5); // 0
console.log(1 && 5); // 5
console.log(10 > 5 && 5); // 5
console.log(10 > 5 && 5 > 3); // true
console.log(10 < 5 && 5 > 3); // false
console.log(null && 5 > 3); // null


// 短路运算：逻辑短路是指：当有多个表达式（值）时，左边的表达式值可以确定结果时，就不再继续运算右边的表达式的值;
var a = 1,
    b = 1;
var n = --a && --b;
console.log(n, a, b); // 0 0 1

var n = ++a && ++b;
console.log(n, a, b); // 2 1 2

　　

　　4.2、||  或/或者

// 只要有一边为真，结果为真，如果两边都是假的，结果为假
console.log(10 >= 10 || 11 <= 10); // true
console.log(10 >= 12 || 11 <= 10); // false

// 如果左边为真，则不用跑到右边；直接看左边，如果左边是表达式，则表达式求值，如果左边是值，则返回这个值
// 如果左边为假，则跑到右边；直接看右边，如果右边是表达式，则表达式求值，如果右边是值，则返回这个值

console.log(10 > 5 || 5); // true
console.log(10 < 5 || 5); // 5


var a = 1,
    b = 1;
var n = --a || --b;
console.log(n, a, b); // 0 0 0 

var n = ++a || ++b;
console.log(n, a, b); // 1 1 0

 

　　4.3、|  非（取反值）

// 返回的都是布尔值
var a = 10;
console.log(!a); // false
console.log(!!!!!!!a); // false

 

5、三目（三元）运算符

格式：表达式 ? 表示式为真执行代码:表达式为假执行的代码;

var age = 7;
// age >= 7 ? alert('上小学') : alert('上幼儿园');

// 推荐写法：
var n = age >= 7 ? '上小学' : '上幼儿园';
alert(n);

 

6、运算符的优先级

https://github.com/xhlwill/blog/issues/16

 

7、隐式类型转换

// 加 +
console.log(10 + 100); // 110
console.log(10 + 'string'); // '10string'
console.log(19 + 10 + 'age' + 18 + 10) // '29age1810'
console.log(10 + '100'); // '10100'
console.log(10 + true); // 11
console.log(true + false); // 1
console.log('10' + true); // '10true'
console.log('' + 100); // '100'
console.log(10 + null); // 10
console.log(10 + undefined); // NaN
// 减 -
console.log(100 - 10); // 90
console.log(100 - 't'); // NaN
console.log(100 - ''); // 100
console.log(100 - true); // 99
console.log(100 - '80'); // 20
console.log(100 - null); // 100
console.log(100 - undefined); // NaN
// 乘 *
console.log(100 * 'a'); // NaN
console.log(100 * ''); // 0
console.log(100 * '100');// 10000
console.log(100 * null); // 0
console.log(100 * undefined);// NaN
// 除 /
console.log(100 / 'a'); // NaN
console.log(100 / ''); // 无穷大
console.log(100 / '70'); // 1.xx
console.log(100 / null); // 无穷大
console.log(100 / undefined); // NaN
// 取余 %
console.log(100 % 'a'); // NaN
console.log(100 % ''); // NaN
console.log(100 % '70'); // 30
console.log(100 % null); // NaN
console.log(100 % undefined); // NaN
// ++
var n = '10';
n++;
console.log(n); // 11
// 取反
console.log(!true); // false
console.log(!10); // false
console.log(!'web'); // false

 

8、强制类型转换和隐式类型转换

　　8.1、强制类型转换　

Number(参数)
parseInt(参数)
parseFloat(参数)
String(参数)
参数.toString()
Boolean(参数)

 

　　8.2、隐式类型转换

+ - * / % ++ -- 都具有隐式类型转换的作用

 

----------------------------------------------------------------分割线----------------------------------------------------------------

 

javaScript交互基础

1、找元素

　　1.1、通过ID

document.getElementById('ID名');      返回这个元素的引用，返回的是一个元素

var abc = document.getElementById('abc');
// console.log(abc);

// 元素.事件 = function () { 要做的事 }
abc.onclick = function () {
    alert('点我了');
}

 

　　1.2、通过标签名

document.getElementsByTagName('标签名');  返回文档下所有的元素
父级.getElementsByTagName('标签名');  返回这个父级下所有的元素

返回的是多个元素(类数组、伪数组)，它有长度，有下标，可以通过下标获取某一个元素

var lis = document.getElementsByTagName('li');
console.log(lis); // 一组
console.log(lis.length); // 长度
console.log(lis[2]); // 通过下标获取某一个

// lis是一个组，组是虚拟，不能操作
// lis.onclick = function () {
//     alert('点了我')
// }

// 要操作，必须是给某一个元素操作
lis[0].onclick = function () {
    console.log(1);
}
lis[1].onclick = function () {
    console.log(2);
}

// 找某个父级下面的li
var list2 = document.getElementById('list2');
var li = list2.getElementsByTagName('li');
console.log(li);

 

　　1.3、通过class名

　　*IE8及以下不支持

document.getElementsByClassName('class名');
父级.getElementsByClassName('class名');

返回的是多个元素(类数组、伪数组)，它有长度，有下标，可以通过下标获取某一个元素

 

2、交互三要素

• 获取元素
• 绑定事件
• 做什么事情

// 元素.事件 = function () { 要做的事 }

var box = document.getElementById('box');
box.onclick = function () {
     alert('不服就干');
}

 

3、window.onload

　　当页面加载完成之后（页面包含的html/css/js/图片等），执行这个函数

window.onload = 函数

window.onload = function () {
    var box = document.getElementById('box'); // 找元素

    console.log(box); // 检查找得对不对

    box.onclick = function () {
        alert('哥们，点了我')
    }
}

 

4、鼠标事件

• onclick：单击事件
• ondbclick：双击事件
• onmouseover：鼠标移入元素
• onmouseout：鼠标移出元素
• onmouseenter：鼠标移入元素
• onmouseleave：鼠标移出元素
• onmousemove：鼠标在元素中移动
• onmousedown：鼠标按下
• onmouseup：鼠标抬起
• oncontextmenu：鼠标右击

window.onload = function () {
    var box = document.getElementsByClassName('box')[0];

    // 点击事件
    box.onclick = function () {
        console.log('点了我');
    }

    // 双击
    box.ondblclick = function () {
        console.log('双击了');
    }

    // 滑上
    box.onmouseover = function () {
        console.log('滑上了');
    }

    // 滑离 在鼠标滑动的过程中，会不断的执行
    box.onmouseout = function () {
        console.log('滑离了');
    }

    // 滑动
    box.onmousemove = function () {
        console.log('滑动了');
    }

    // 滑上
    box.onmouseenter = function () {
        console.log('滑上了2');
    }

    // 滑离
    box.onmouseleave = function () {
        console.log('滑离了2');
    }
    // 这两对滑上滑离有区别

    // 鼠标按下
    box.onmousedown = function () {
        console.log('鼠标按下');
    }

    // 鼠标按下
    box.onmouseup = function () {
        console.log('鼠标抬起');
    }

    // context 上下文   menu菜单
    // 按右键
    box.oncontextmenu = function () {
        console.log('按右键了');
    }
}

 

5、javaScript操作标签

　　5.1、元素内容操作

　　　　5.1.1表单元素（单标签）

　　　　获取：元素.value;

　　　　设置：元素.value = 值;

　　注意：设置会覆盖原来的内容

<input type="text" id="txt1">
<br>
<button>获取</button>
<button>设置</button>

var txt1 = document.getElementById('txt1');
var btn = document.getElementsByTagName('button');

// console.log(txt1, btn);

// 获取
btn[0].onclick = function () {
    console.log(txt1.value);
}

// 设置
btn[1].onclick = function () {
    txt1.value = '大王派我来巡山';
}

 

　　　　5.1.2、双标签元素

　　　　识别标签

　　　　获取：元素.innerHTML;

　　　　设置：元素.innerHTML = 值;

 

　　　　不识别标签

　　　　获取：元素.innerText;

　　　　设置：元素.innerText = 值;

<div>你是<b>隔壁老王</b></div>

<button>获取</button>
<button>设置</button>

// 步骤：
// 1、获取元素
var div = document.getElementsByTagName('div')[0];
var btn = document.getElementsByTagName('button');
// 2、检查
// console.log(div);
// console.log(btn);

// 3、获取
btn[0].onclick = function () {
    console.log(div.innerHTML);
    console.log(div.innerText);
}

// 4、设置
btn[1].onclick = function () {
    // div.innerHTML = '<i>李冰冰</i>就是';
    div.innerText = '<i>李冰冰</i>就是';
}

 

　　5.2、操作元素属性

　　获取：元素.属性名;

　　设置：元素.属性名 = 值;

 

　　获取：元素.className;

　　设置：元素.className = 值;

<div id="box" class="abc" title="不服就干">平头哥</div>

<img src="img/1.jpg" alt="">

var box = document.getElementById('box');

// 操作title属性
console.log(box.title); // 获取
box.title = '12345'; // 设置

// --------------------------

// 操作class属性，class是一个关键字，我们要用className
console.log(box.className);
box.className += ' dd1'; // 保留原来的类名
// box.className = box.className + ' dd1';


// --------------------------------
// 图片操作
var img = document.getElementsByTagName('img')[0];

// 滑上图片显示图2
img.onmouseover = function () {
    img.src = 'img/2.jpg';
}

// 滑离图片显示图1
img.onmouseout = function () {
    img.src = 'img/1.jpg';
}

 

　　5.3、操作元素样式

　　获取：元素.style.样式名;

　　设置：元素.style.样式名 = 值;

<div id="box" style="border: 10px solid #000;">平头哥</div>

var box = document.getElementById('box');

// 设置
box.style.width = '200px';
box.style.height = '200px';
box.style.backgroundColor = 'red';
box.style.color = 'white';
box.style.fontSize = '40px';

// 获取
console.log(box.style.width);

// --------------------------------
// cssText   覆盖原来行间的样式
box.style.cssText = 'width: 200px; height: 200px; background: pink; font-size: 50px; color: #fff;';