web前端复习第十二课之JS

最新推荐文章于 2022-10-18 17:04:45 发布

思丰百年

最新推荐文章于 2022-10-18 17:04:45 发布

阅读量162

点赞数

分类专栏： web前端开发复习，从头再来文章标签： javascript css html

本文链接：https://blog.csdn.net/qq_39664934/article/details/108238226

版权

web前端开发复习，从头再来专栏收录该内容

22 篇文章 0 订阅

订阅专栏

基本数据类型

<!DOCTYPE html>
<html lang="en">
<head>
	<meta charset="UTF-8">
	<title>Document</title>
</head>
<body>
	<script type="text/javascript">
		// 基本数据类型
		// 5种   Number(数值型)、String(字符串)、Boolean(布尔值)、Null(空)、Undefined(未定义)
		// 1、Number  数值型(包含整型和浮点型)
		var num1 = 100;
		// 通过var 关键字定义一个变量名称为num1通过 = 赋值为100，100也是一个整数，所以num1称为整型
		var num2 = 99.99;
		// num2 带小数点的变量，成为浮点型

		// 2、String  字符串类型(通过引号，单引号或者双引号包裹着的内容)
		var str1 = "hello word";
		var str2 = "你好";
		var str3 = "100";

		// 3、Boolean  布尔值(true真的   false假的)
		var bool1 = true;    //真
		var bool2 = false;   //假

		// 4、Null  空(空的对象)
		var isNull = null;

		// 5、Undefined   未定义(定义了变量没有赋值)
		var test;
		console.log(test);
	</script>
</body>
</html>

通过JS改变样式

<!DOCTYPE html>
<html lang="en">
<head>
	<meta charset="UTF-8">
	<title>Document</title>
	<style type="text/css">
		#box{
			width: 200px;
			height: 200px;
			background-color: red;
		}
	</style>
</head>
<body>
	<div id="box">hello word</div>

	<script type="text/javascript">
		var oBox = document.getElementById("box");   //通过id获取文档的元素
		// document 文档    . 的     get 获取    Element 元素    By 通过   Id 
		
		oBox.style.width = "500px";    //通过js改变宽度
		oBox.style.height = "500px";
		oBox.style.backgroundColor = "green";
		oBox.style.fontSize = "50px";

		// 注意事项：js中禁止出现 - 要想使用 - 通过转义：font-size===>fontSize
		// margin-left ===> marginLeft
	</script>
</body>
</html>

检查数据类型

<!DOCTYPE html>
<html lang="en">
<head>
	<meta charset="UTF-8">
	<title>Document</title>
	<style type="text/css">
		
	</style>
</head>
<body>
	<script type="text/javascript">
		// 检测数据类型  typeof

		var num = 100;
		console.log(typeof num);      //number

		var str = "100";
		console.log(typeof str);      //string

		var bool = 100<10;
		console.log(typeof bool);     //boolean

		var isNull = null;
		// 特别说明：null属于object,typeof检测的类型属于对象
		console.log(typeof isNull);   //object

		var test;
		console.log(typeof test);     //undefined  未定义

		// typeof书写方式有两种
		// 1、typeof 变量名
		// 2、typeof(变量名)


	</script>
</body>
</html>

代码调试的方法

<!DOCTYPE html>
<html lang="en">
<head>
	<meta charset="UTF-8">
	<title>Document</title>
</head>
<body>
	<script type="text/javascript">
		// 1、alert()  普通弹出窗口
		//alert("abc");  会阻止后面的代码执行
		console.log("看看我有么有执行");

		// 2、prompt() 带输入框的弹窗
		var num=prompt("你今年几岁了");
		console.log(num);

		// 3、confirm()   带确认和取消按钮的弹窗
		confirm("你成年了吗？");


		// 面试题：网页常见的三种弹窗？
		// 1、alert()
		// 2、prompt()
		// 3、confirm()
	</script>
</body>
</html>

简单的事件

<!DOCTYPE html>
<html lang="en">
<head>
	<meta charset="UTF-8">
	<title>Document</title>
	<style type="text/css">
		#box{
			width: 200px;
			height: 200px;
			background: red;
		}
	</style>
</head>
<body>
	<input type="button" value="按钮" id="btn">
	<div id="box">div盒子</div>
	<script type="text/javascript">
		// 1、通过id获取元素
		var oBtn=document.getElementById('btn');     //获取按钮
		var oBox=document.getElementById('box');     //获取div盒子

		// 2、给按钮添加单击事件
				//单击事件 onclick
				//鼠标经过 onmouseover
				//鼠标离开 onmouseout
		//function(){}   这是一个命令
		// 给按钮绑定一个单击双击
		oBtn.onclick=function(){
			oBox.style.width = "500px";    //通过js改变宽度
			oBox.style.height = "500px";
			oBox.style.backgroundColor="blue";
		}
		
		// 给盒子绑定一个鼠标经过事件
		oBox.onmouseover=function(){
			// 通过js添加类名
			oBox.className="nav";
		}
	</script>
</body>
</html>