js运算符

简单的对象操作

如果在 script 标签中使用了src 属性引入了外部js 则该标签中嵌套的所有js代码无效

<script src="./js/fly.js">
    console.log('陆抗');
</script>

通过 document.getElementById(‘wp’) 获取html中的dom元素

每一个 html标签都是一个对象，称为 dom对象
每一个标签的属性也是 一个 对象的属性

设置对象属性的值 obj.属性名 = ‘a’;
获取对象属性的值 obj.属性名

每一个 html标签都有一个 style属性，因此可以使用js 操作该style，如果设置style属性，则是给标签行间添加一个style属性

<script>
/*
通过 document.getElementById('wp') 获取html中的dom元素

每一个 html标签都是一个对象，称为 dom对象
每一个标签的属性也是 一个 对象的属性

设置对象属性的值  obj.属性名 = 'a';
获取对象属性的值  obj.属性名

每一个 html标签都有一个 style属性，因此可以使用js 操作该style，如果设置style属性，则是给标签行间添加一个style属性
*/
let abc = document.getElementById('aa');
abc.style.color = '#f00';
// 如果属性是组合形式的，需要把-去掉，使用驼峰的形式
abc.style.fontSize = '40px';

abc.style.background = '#ff0';
console.log(abc.title);

let txt = document.getElementById('txt');
let btn = document.getElementById('btn');
// 给btn添加点击事件
btn.onclick = function () {
    alert( txt.value );
    console.log( txt.value );
    txt.style.border = '2px #f00 solid'
}
</script>

// 通过原生js设置对象

<script>
// 通过原生js设置对象
/*
使用 {} 创建对象，它里面设置属性的是方式 key:value
key 是属性名 value 是 属性值
获取属性的值 obj.key
设置属性的值 obj.key = value

如果访问一个 对象中不存在的属性，那么他的结果是 undefined
*/
let obj = {
    name:'雷震子',
    age: 20,
    sex:'男'
}
let obj1 = {
    name:'王俊凯',
    age: 22,
    sex:'男'
}

console.log( obj.name );
console.log( obj.age );

console.log( obj1.name );
console.log( obj1.age );

// obj1中没有属性run, 因此结果是undefined
console.log( obj1.run );
</script>

js运算符

<script>
/*
1.算术运算符
2.比较(关系)运算符
3.逻辑运算符
4.三元运算符
5.赋值运算符

从1到5运算符的优先级依次减弱
*/
/*
算术运算符
+ - * / % ++ --
*/
// + 运算符
let num1 = 10;
let num2 = 20;
let num3 = num1 +  num2;
console.log( num3 );
/*
如果 + 的两边有一个是字符串，则表示的是字符串的拼接
原理：如果两个不同类型的数据相加，有一个字符串，则另一个数据会被
隐式转化为字符串，然后通过+ 和另一个数据拼接在一起
*/
let str = '莫愁前路无知己';
let num4 = str + num2 + num2 + num2;
console.log( num4 );
let str1 = '西出阳关无故人';
console.log( str + str1 );

let num5 = num2 + num2 + num2 + str1;
console.log( num5 );

//  - 运算符
/*
- 运算符 ，可以把他两边的字符串类型 隐式转化为 数字类型
如果被转化的字符串是 一个数字，则参与减法运算
如果 被转化的字符串是 一个普通字符，则得出的结果是 NaN

除了 + 运算的时候，把数字转化为字符串，其他的算术运算符都是把字符
串转化为数字

*/
let num6 = 200;
let num7 = 100;
let num8 = '300';

console.log( num6 - num7 );
console.log( str1 - num7);
console.log( num6 + num8);
console.log( num6 - num8);

let sum = document.getElementById('sum');
let txt = document.getElementById('txt');
let txt1 = document.getElementById('txt1');
sum.onclick = function () {
    //  js 通过 input 的 value属性获取的值，是一个字符串。通过隐式转化 变成一个 数字
    let t1 = txt.value - 0;
    let t2 = txt1.value - 0;
    alert( t1 + t2 );
};
</script>

js的算术运算符

<script>
/*
1.算术运算符
2.比较(关系)运算符
3.逻辑运算符
4.三元运算符
5.赋值运算符

从1到5运算符的优先级依次减弱
*/
/*
算术运算符
+ - * / % ++ --
*/
// + 运算符
let num1 = 10;
let num2 = 20;
let num3 = num1 +  num2;
console.log( num3 );
/*
如果 + 的两边有一个是字符串，则表示的是字符串的拼接
原理：如果两个不同类型的数据相加，有一个字符串，则另一个数据会被
隐式转化为字符串，然后通过+ 和另一个数据拼接在一起
*/
let str = '莫愁前路无知己';
let num4 = str + num2 + num2 + num2;
console.log( num4 );
let str1 = '西出阳关无故人';
console.log( str + str1 );

let num5 = num2 + num2 + num2 + str1;
console.log( num5 );

//  - 运算符
/*
- 运算符 ，可以把他两边的字符串类型 隐式转化为 数字类型
如果被转化的字符串是 一个数字，则参与减法运算
如果 被转化的字符串是 一个普通字符，则得出的结果是 NaN

除了 + 运算的时候，把数字转化为字符串，其他的算术运算符都是把字符
串转化为数字

*/
let num6 = 200;
let num7 = 100;
let num8 = '300';

console.log( num6 - num7 );
console.log( str1 - num7);
console.log( num6 + num8);
console.log( num6 - num8);

let sum = document.getElementById('sum');
let txt = document.getElementById('txt');
let txt1 = document.getElementById('txt1');
sum.onclick = function () {
    //  js 通过 input 的 value属性获取的值，是一个字符串。通过隐式转化 变成一个 数字
    let t1 = txt.value - 0;
    let t2 = txt1.value - 0;
    alert( t1 + t2 );
};







let num1 = 2;
let num2 = 3;

console.log( num1 * num2 );

console.log( num2 / num1 );
console.log( 0.1+0.2 );
/*
% 取余，又称 模运算
运算的结果是 相除之后的余数

被除数%除数 返回结果是 余数

被除数和除数不一定都是整数

*/
let num3 = 10;
let num4 = 3;
console.log( num3%num4 );

console.log( 9.3%2.1 );
/*
++ --
a++ ++a 都是自增写法

c = a++; 先把a的值赋值给c，然后在执行a的自增
c = ++a; 先执行a的自增, 然后再把a的值赋值给c


*/
let num5 = 10;
// ++num5;
// num5++;
// console.log( num5 );
//console.log( num5++ ); // 10
console.log( ++num5 );

let a = 10;
let c = a++; // 1.把a的值赋值给c，此刻c=10; 2.执行a的自增，此刻a=11;
console.log(c,a);

let k=10;
let m = (k++)+3;
console.log(k,m);

let n=13;
let s = ++n+(n++)+n;
/*
1. ++n,n的值变成了 14，此时让n=14参与后来的运算
2. n++,先把n的值取出来，n=14 参与当前一步的计算，然后n++(n=15),参与后来的运算
3. s= 14 + 14 + 15;

*/
console.log(s);
/*
-- 自减，a-- --a 使用方式和上面的 ++ 一致
c=a--: 先把a的值赋值给c，然后在执行a的自减
c=--a：先执行a的自减, 然后再把a的值赋值给c

++ 和 -- 的运算优先级高于 + - * / %
*/
let j=14;

let num6 = (j++) + (--j) + (j--) + (++j);
console.log(num6);

</script>

关系运算符

<script>
/*
关系运算符
>大于， <小于， >= 大于等于， <= 小于等于， == 等于， != 不等于，=== 全等，!== 不全等
关系表达式 的 返回值是 true 或者 false

== 只比较数值，不比较类型
=== 不但比较数值，而且比较类型
*/
console.log( 3>5 );
console.log( 5>=5 );
let num1 = 30;
let num2 = '30';
console.log('num1和num2是否相等', num1 === num2 );

if(num1 == num2){
    console.log('相等');
}else{
    console.log('不相等');
}

let str1 = '陈胜';
let str2 = '吴广';
console.log( str1!=str2 );

console.log('高堂明镜悲白发' == '朝如青丝暮成雪');
</script>

逻辑运算符

<script>
/*
parseInt(num) 把数字num 直接转化为整数，他会去掉num的小数部分

*/
let num = 325;
let s = num/100;
console.log( parseInt(s) );

/*
逻辑运算符
或 ||
与(并且) &&
非 !

判断规则
或 || ：两边的判断条件，只要有一个为真(true),则返回结果为真
与 && ：两边的判断条件都为真(true), 则返回结果为真(true)
非 ！ ： 取当前结果返回布尔值的 反向值，就是取反的意思

*/
console.log( 3>4 || 2>3);
console.log( 3>4 || 2<3);

console.log('=================');
// 只有一个为true, 返回结果是false
console.log( 3>4 && 2<3);

// 两个同时为true, 返回结果是true
console.log( 3<4 && 2<3);

if(!(3<4)){
    console.log('今天晚上做作业');
}else{
    console.log('今天晚上做练习');
}
//0 为 false, 非0数字为true
if(0){
    console.log('今天晚上吃米饭');
}else{
    console.log('今天晚上不吃饭');
}
</script>