JS基础（一）-CSDN博客

本文链接：https://blog.csdn.net/weixin_45364386/article/details/128571993

JS基础

JS的HelloWorld
JS代码编写位置

JS的HelloWorld

<!DOCTYPE html>
<html>
	<head>
		<meta charset="utf-8">
		<title>HelloWorld</title>
		<!--JS代码需要编写到script标签中-->
		<script type="text/javascript">
			/**
			 * 控制浏览器弹出一个警告框
			 * alert("这是一个警告框");
			 */
			alert("这是一个警告框！");
			/**
			 * 让计算机在页面中输出一个内容
			 * document.write()可以在body中输出一个内容
			 */
			document.write("让计算机在页面中输出一个内容！！！");
			/**
			 * 向控制台输出一个内容
			 * 
			 */
			console.log("向控制台输出一个内容");
			
		</script>
	</head>
	<body>
	</body>
</html>

JS代码编写位置

<!DOCTYPE html>
<html>
	<head>
		<meta charset="utf-8">
		<title></title>
		<!--
			可以将的JS代码编写到外部js文件中，然后通过script标签引入
			写到外部文件中可以在不同的页面中同时引用，也可以利用到浏览器的缓存机制
			推荐使用的方式
			
			JS代码是自上向下一行一行执行的
		-->
		<!-- 
			<script></script> 该标签，一旦引入外部文件，就不能再编写代码了，即使编写了浏览器也会忽略
			如果需要则可以在创建一个新的script标签用于编写内部代码。
		 -->
		<script type="text/javascript" src="js/script.js"></script>
		
		<!--
			可以将js代码编写到script标签
		-->
		<script type="text/javascript">
			alert("我是script标签中的代码！");
		</script>
	</head>
	<body>
		<!--可以将JS代码编写到标签的onclik属性中
			当我们点击按钮时，JS代码才会执行
			
			注意：
			双引号中还需要引号，需要使用单引号区分
			alert语句末尾需要加分号;
		-->
		
		<button onclick="alert('讨厌,你点我干嘛!');">点我一下</button>
		
		<!--
			可以将JS代码写在超链接的href属性中，这样当点击超链接时，会执行js代码
		-->
		<a href="../">超链接-你也点我一下</a>
		<a href="javascript:alert('让你点你就点啊!!!');">超链接-你也点我一下</a>
		<a href="javascript:;">点我一下</a>
		<a href="HelloWorld.html">点我</a>
	</body>
</html>

标识符

<!DOCTYPE html>
<html>
	<head>
		<meta charset="utf-8">
		<title>标识符</title>
		<script type="text/javascript">
			
			/**
			 * 标识符：
			 * 		- 在JS中所有的可以由我们自主命名的都可以称之为标识符
			 * 		- 例如：变量名，函数名，属性名都属于标识符
			 * 		- 命名一个标识符需要遵守如下规则：
			 * 			1.标识符中可以含有字母、数字、_、$ 
			 * 			2.标识符不能以数字开头
			 * 			3.标识符不能是ES中的关键字或保留字
			 * 			4.标识符一般都采用驼峰命名法
			 * 				- 首字母小写，每个单子的开头字母小写，其余字母小写，
			 * 				helloworld,xxxYxxxZxxx
			 * 
			 * 		- JS底层保存标识符实际上是采用的Unicode编码
			 * 			理论上讲，所有utf-8中含有的内容都可以作为标识符
			 */

			 var name = $123;
			console.log(name);


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

基础语法

<!DOCTYPE html>
<html>
	<head>
		<meta charset="utf-8">
		<title></title>
		<script type="text/javascript">
			
			/**
			 * 多行注释
			 * JS注释
			 * 多行注释，注释中的内容不容易被执行，但是可以在源码中查看
			 * 	要养成良好的注释习惯，也可以通过注释来对代码进行一些简单的调试
			 */
			//单行注释
			// alert("hello");
			document.write("hello");
			console.log("hello");//该语句用来在控制台输出一个日志
			
			/**
			 * 1.JS中严格区分大小写
			 * 2.JS中每一条语句以分号（;）结尾
			 * 		如果不写分号，浏览器会自动添加，但是会消耗一些系统资源，
			 * 			而且有些时候，浏览器会加错分号，所以在开发中分号必须写。
			 * 3.JS中会忽略多个空格和换行，所以我们可以利用空格和换行对代码进行格式化。
			 * 
			 */	
		</script>
	</head>
	<body>
	</body>
</html>

字面量和变量

<!DOCTYPE html>
<html>
	<head>
		<meta charset="utf-8">
		<title></title>
		<script type="text/javascript">
			
			/**
			 * 字面量，都是一些不可改变的值
			 * 		比如： 1 2 3 4 5
			 * 字面量都是可以直接使用的，但是我们一般都不会直接使用字面量
			 * 
			 * 变量：可以用来保存字面量，而且变量的值是可以任意改变的
			 * 		所以在开发中，我们都是使用通过变量去保存一个字面量的，
			 * 		而很少直接使用字面量
			 * 	x = 88287990898870897878
			 */
			alert(88287990898870897878);//字面量直接使用会非常的麻烦
			
			/**
			 * 声明变量：
			 * 		在JS中使用var关键字来声明一个变量
			 */
			var a;

			console.log(a);//undefined
			
			//为变量赋值
			a = 123;
			console.log(a); //123
			
			//声明和赋值同时进行
			var b = 2323;
			var c = 666;
			console.log(a,b,c);//123 2323 666
		</script>
	</head>
	<body>
	</body>
</html>