web前端复习第十一课之JS

最新推荐文章于 2024-10-02 05:39:15 发布

思丰百年

最新推荐文章于 2024-10-02 05:39:15 发布

阅读量173

点赞数

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

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

版权

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

22 篇文章 0 订阅

订阅专栏

网页的结构

<!DOCTYPE html>
<html lang="en">
<head>
	<meta charset="UTF-8">
	<title>Document</title>
</head>
<body>
	<!-- 网页又三重结构
			HTML           网页的结构层  超文本标记语言
			CSS            网页的表示层  层叠样式表
			JavaScript     网页的行为层  网页的脚本语言

			ECMAScript   ECMA组织  
			javascript  >  2016ECMAScript  >  ES6
	 -->
	<h1>十大</h1>
</body>
</html>

js的引入方式

<!DOCTYPE html>
<html lang="en">
<head>
	<meta charset="UTF-8">
	<title>Document</title>
	
	
</head>
<body>
	<!-- 第一种引入方式   行内样式-->
	<h1 style="color: red;" onclick="alert('行内引入样式')">hello word</h1>

	<!-- 第二种引入方式   内部引入-->
	<script>
		alert('内部引入方式')
	</script>

	<!-- 第三种引入方式   外部引入-->
	<script type="text/javascript" src="js/引入方式.js"></script>
</body>
</html>

附js

alert('外部引入方式')

js输出内容的方式

<!DOCTYPE html>
<html lang="en">
<head>
	<meta charset="UTF-8">
	<title>Document</title>
	
	
</head>
<body>

	<script type="text/javascript">
		// js执行顺序，一般情况下自上而下，从左到右
		// 在执行的过程中，同一个script标签中一旦出错，后面的代码就不会执行了

		// 1、alert()
		// 普通的弹出窗口，弹出的内容需要加上引号，单引号和双引号都可以
		// 说明：如果说弹出的内容是数字可以不用加引号
		// alert('今天是周五，距离周末不远了');
		// alert("今天是周五，距离周末不远了");
		// alert(100)

		// 2、console.log()
		// 控制台打印日志，内容需要加上引号，单引号和双引号都可以
		// 说明：如果说弹出的内容是数字可以不用加引号
		// console.log('今天是周五，距离周末不远了');
		// console.log(100);

		// 3、document.write()    写入文档，或者向body中插入内容
		// document  文档（重点）
		// .  的
		// write  写

		document.write("天是周五，距离周末不远了");
		document.write("<h1>我是一级标题</h1>");
		document.write("<img src='../王者荣耀/img/logo.png' alt='' />")

		// 单引号套双引号，双引号套单引号，不能双引号套双引号
	</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-color: red;
		}
	</style>
	
</head>
<body>
	<div id="box"></div>
	<script type="text/javascript">
		// 变量  >  可以变化的量（一个名称）
		// 定义一个变量
		// 在Html里面  class="box"   id="pox"
		// 在js中   var box = 100;  定义一个变量名为box值为100

		// 变量的命名规范
		// 1、变量是由数字、字母、下划线以及$组成的，第一个字符不能是数字
		// 2、驼峰式命名
			// 大驼峰  每个单词的首字符都大写  如BoxPox
			// 小驼峰   第一个单词小写，后面的单词首字母大写
			// 如：getElementById  推荐小驼峰命名
		// 3、变量是区分大小写的，比如：box和Box这是两个变量
		// 4、不能使用系统的关键字和保留字   如var、class、id、name
		// 5、命名要有 见名知意   var num=100;   var str="hello";

		// 连写   等号是赋值的意思
		// var myName = "张三";

		// 分写
		// var myName;
		// myName = "张三";

		// 一次性定义多个变量
		var myName = "张三",
			myAge = 27,
			myGender = "male";

		// 更改定义好的变量值
		myAge = 13;
		console.log(myAge)
	</script>
</body>
</html>