JavaScript day02

最新推荐文章于 2024-08-17 12:54:01 发布

不万能的小李.

最新推荐文章于 2024-08-17 12:54:01 发布

阅读量22

点赞数

文章标签： javascript 前端开发语言

本文链接：https://blog.csdn.net/Li1023055421/article/details/132238375

版权

# 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>