javaScript （基础1）

最新推荐文章于 2024-11-03 09:26:21 发布

原创最新推荐文章于 2024-11-03 09:26:21 发布 · 181 阅读

CC 4.0 BY-SA版权

本文介绍了JavaScript中三种常见的输出方式：alert对话框输出、document.write页面输出和console.log控制台输出。此外，还探讨了JS代码的编写位置，包括在script标签、onclick属性和href属性中的使用。文章进一步讲解了JS的基本语法，包括注释的使用、变量声明与赋值，以及标识符的命名规则。

script输出形式

alert（" 内容"）
document.write
console.log

<!DOCTYPE html>
<html>
	<head>
		<meta charset="UTF-8">
		<title></title>
		<!--JS代码需要编写到script标签中--->
		<script type="text/javascript">
			/**
			 * 控制浏览器弹出一个警告框
			 * alert("哥，你真帅");
			 */
			/**
			 * 让计算机在页面中输出一个内容
			 * document.write("Hello,my name is tyler")可以向body中输出一个内容
			 */
			/**
			 * 向控制台输出内容
			 * console.log()的作用是向控制台输出一个内容
			 */
			alert("哥，你真帅");//对话框输出
			document.write("Hello,my name is tyler")//页面输出
			console.log("你猜我在哪??")//开发人员才能看
		</script>
	</head>
	<body>
	</body>
</html>

script编写位置

可以写在onclick和href属性中（不推荐）
可以写在script标签中，通过js文件引入。

<!DOCTYPE html>
<html>
	<head>
		<meta charset="UTF-8">
		<title></title>
		
		<!--
        	可以将js代码编写到外部js文件中，然后通过script标签引入
        	写到外部文件中可以在不同的页面中同时引用，也可以利用到浏览器的缓存机制，推荐使用
        -->
        <script type="text/javascript" src="script.js"></script>
        <!--
        	script标签一旦用于引入外部文件了，就不能再编写代码了，即使编写了浏览器也会忽略
        	如果需要，则可以在创建一个新的script标签用于编写内部代码
        -->
        <script>alert("我是内部的");</script>
		
		<!--
        	//可以将js代码编写到script标签
		<script type="text/javascript">
			alert("我是script标签中的代码！！")
		</script>
        -->
		
	</head>
	<body>
		<!--可以将JS代码编写到标签的onclick属性中
			当我们点击按钮时，js代码才会执行
		-->
		
		<button onclick="alert('你点我干啥~~~');">点我一下</button>
		<!--
        	可以将js代码写在超链接的href属性中，这样当点击超链接时，才会执行js代码。
        -->
		<a href="javascript:alert('让你点你就点！！');">你也点我一下</a>
		
		<a href="javascript:;">你也点我一下</a>
		
	</body>
</html>

基本语法

<!DOCTYPE html>
<html>
	<head>
		<meta charset="UTF-8">
		<title></title>
		<script type="text/javascript">
			/*
		 	JS注释
		 	单行注释
		 	多行注释，注释中的内容不会被执行，但可以在源代码中查看
					 
		 */
			/**
			 * 1. js中严格区分大小写
			 * 2. js中每一条语句以分号（;）结尾
			 * 		--如果不写分号，浏览器会自动添加，但会消耗一些系统资源
			 * 			而且有些时候，浏览器会加错分号，所以要写。
			 * 3. js中会忽略多个空格和换行。
			 * 
			 */
			alert("hello")
		</script>
	</head>
	<body>
	</body>
</html>

字面量和变量

<!DOCTYPE html>
<html>
	<head>
		<meta charset="UTF-8">
		<title></title>
		<script type="text/javascript">
			/**
			 * 字面量，都是一些不可变的值，
			 * 		比如：1 2 3 4 5 ....
			 * 		字面量都是可以直接使用的，但是我们一般都不会直接使用字面量
			 * 
			 * 变量：变量可以用来保存字面量，而且变量的值是可以任意改变的 
			 * 		变量更加方便我们使用
			 */
			/**
			 * 声明变量
			 * 在js中使用var关键字来声明一个变量
			 */
			var a;
			//为变量赋值
			a = 123;
			a = 345;
			
			//声明和赋值同时进行
			var b = 4321;
			console.log(a)
			console.log(b)
			
			
		</script>
	</head>
	<body>
	</body>
</html>

标识符

<!DOCTYPE html>
<html>
	<head>
		<meta charset="UTF-8">
		<title></title>
		<script type="text/javascript">
			/**
			 * 标识符
			 * 		在js中所有的可以由我们自主命名的都可以称之为是标识符
			 * 		例如：变量名，函数名，属性名等
			 * 		命名标识符需要遵守如下规则：
			 * 			1. 标识符可以含有字母，数字、_、 $
			 * 			2. 标识符不可以以数字开头
			 * 			3. 标识符不能是ES中的关键字或保留字
			 * 			4. 标识符一般都采用驼峰命名法
			 * 				首字母小写，每个单词的开头字母大写，其余字母小写
			 */
			
			
			//但是不推荐使用
			var 汉字也能命名 = 123456;
			console.log(汉字也能命名)
		</script>
	</head>
	<body>
	</body>
</html>