# 00测试
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<title>测试</title>
</head>
<body>
</body>
</html>
<script>
// console.log(abc); // 1 报错,如果使用let声明,在作用域内必须先声明,在使用,这一点和var 不同
let abc;
abc = 100;
// console.log(abc); // 2
// console.log(kkk); // 3
let str = '魔礼青';
let str1 = 100;
let num1 = 1;
console.log( str1-num1 == str1-num1 );
</script>
01简单的对象操作
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<title>简单的对象操作</title>
<style>
* {
margin: 0;
padding: 0;
}
.wp {
width: 200px;
height: 200px;
background: #04be02;
}
</style>
</head>
<body>
<div id="aa" class="wp" title="刘禅" >
刘禅
</div>
<div id="bb" class="wp" title="李信" >
李信
</div>
<hr />
<br />
<input type="text" name="" id="txt">
<button id="btn">获取输入的值</button>
</body>
</html>
<!--
如果在 script 标签中使用了 src 属性引入了外部js,则该script标签中嵌套的所有js代码无效
-->
<script src="../js/fly.js">
console.log('陆抗');
</script>
<script>
/*
通过 document.getElementById('wp') 获取html中的dom元素
每一个 html标签都是一个对象,称为 dom对象
每一个标签的属性也是 一个 对象的属性
设置对象属性的值 obj.属性名 = 'aa';
获取对象属性的值 obj.属性名
每一个 html标签都有一个 style属性,因此可以使用js 操作该 style,如果设置style属性,则是给标签行间添加一个 style属性
*/
let abc = document.getElementById('aa');
abc.style.color = '#f00';
console.log( abc.title );
let abc1 = document.getElementById('bb');
abc1.style.background = '#f60'
// 如果属性是组合i形式的,需要把 - 去掉,使用驼峰形式
abc.style.fontSize = '40px'
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';
};
//通过原生js设置对象
/*
使用 {} 创建对象,他的里面设置属性的方式是 key:value
key 是属性名 value 是 属性值
获取属性值 obj.key
设置属性值 obj.key = value
*/
let obj = {
name:'雷震子',
age:20,
sex:'男'
}
let obj1 = {
name:'丁真',
age:22,
sex:'男',
hobby:'悦刻5'
}
console.log( obj.name );
console.log( obj.age );
console.log( obj1.name );
console.log( obj1.age );
console.log( obj1.hobby );
// obj1中没有属性run,因此结果是undefined
console.log( obj1.run );
</script>
02、JS的运算符
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<title>js运算符</title>
</head>
<body>
<input id="cc" type="number"> + <input id="dd" type="number"> = <button id="btn">求和</button>
</body>
</html>
<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;
console.log( num4 );
let str1 = '西出阳关无故人';
console.log(str + str1);
let num5 = num2 + num2 + num2 + str + 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 );
console.log( num8 - num6 );
let FFF = document.getElementById( 'cc' );
let DDD = document.getElementById( 'dd' );
let btn = document.getElementById( 'btn' );
btn.onclick = function () {
// js 通过 input 的 value属性获取的值,是一个字符串,通过隐式转化 变成一个 数字
let v1 = FFF.value - 0;
let v2 = DDD.value - 0;
alert( v1 + v2 );
console.log( v1 + v2 );
}
</script>
03、JS的运算符2
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<title>js的运算符2</title>
</head>
<body>
</body>
</html>
<script>
let num1 = 2;
let num2 = 3;
console.log( num1*num2);
console.log( num1/num2);
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;
// console.log( num5 );
// console.log( num5++ );
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++)+k+3;
console.log( k,m );
let n = 13;
let s = ++n+(n++)+n;
console.log(s);
/*
1. ++n, n的值变成了 14, 此使让 n=14 参与后来的运算
2. n++,先把n的值取出来,n=14 参与当前一步的计算,然后n++(n=15),参与后来的运算
3. s = 14 + 14 + 15;
*/
/*
-- 自减,a-- --a 使用方式和上面的自增( ++ ) 一致
c=a--:先把a的值赋值给c,然后再执行a的自减
c=--a:先把执行a的自减,然后再把a的值赋值给c
++ 和 -- 的运算优先级高于 加减乘除、取余( + - * / %)
*/
let j=14;
let num6 = (j++) + (--j) + (j--) + (++j);
// 14 + 14 + 14 + 14
console.log( num6 );
</script>
04、关系运算符
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<title>关系运算符</title>
</head>
<body>
</body>
</html>
<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>
05、逻辑运算符
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<title>逻辑运算符</title>
</head>
<body>
</body>
</html>
<script>
/*
parseInt(num) 把数字num 直接转化为整数,他会去掉num的小数部分
*/
let num = 325;
let s = num/100;
console.log( parseInt(s) );
/*
逻辑运算符
或 ||
与(并且) &&
非 !
判断规则:
或 || :两边的判断条件,只要有一个为真(true),则返回结果为真(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);
console.log( '========================' );
if(!(3<4)){
console.log('今天晚上做作业');
}else{
console.log('今天晚上做练习');
}
console.log( '========================' );
//0 为 false, 非0数字为true
if(0){
console.log('今天晚上去锻炼');
}else{
console.log('今天晚上不锻炼');
}
</script>