js基础:01、第一个js程序(hello world),js 编写位置,基本语法,字面量和变量,标识符

Ⅰ、第一个js程序(hello world):

其一、代码为:


<!DOCTYPE html>
<html>
	<head>
		<meta charset="UTF-8">
		<title></title>
		<!--JS代码需要编写到script标签中-->
		<script type="text/javascript">
			
			/*
			 * 控制浏览器弹出一个警告框
			 * alert("哥,你真帅啊!!");
			 */
			

			/*
			 * 让计算机在页面中输出一个内容
			 * document.write()可以向body中输出一个内容
			 * document.write("看我出不出来~~~");
			 */
			
			 
			/*
			 * 向控制台输出一个内容
			 * console.log()的作用是向控制台输出一个内容
			 * console.log("你猜我在哪出来呢?");
			 */
			
			alert("哥,你真帅啊!!");
			document.write("看我出不出来~~~");
			
			console.log("你猜我在哪出来呢?");
			
			
			
			
		</script>
	</head>
	<body>
	</body>
</html>

其二、结果展示:

// 一进入页面的弹窗:

在这里插入图片描述

// 点击确定后的页面及控制台展示:

在这里插入图片描述

Ⅱ、js 编写位置:

其一、代码为:


<!DOCTYPE html>
<html>
	<head>
		<meta charset="UTF-8">
		<title></title>
		
		<!--
			可以将js代码编写到外部js文件中,然后通过script标签引入
			写到外部文件中可以在不同的页面中同时引用,也可以利用到浏览器的缓存机制
			推荐使用的方式
		-->
		<!--
			script标签一旦用于引入外部文件了,就不能在编写代码了,即使编写了浏览器也会忽略
			如果需要则可以在创建一个新的script标签用于编写内部代码
		-->
		<script type="text/javascript" src="js/script.js"></script>
		<script type="text/javascript">
			alert("我是内部的JS代码");
		</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注释
			 	多行注释,注释中的内容不会被执行,但是可以在源代码中查看
			 		要养成良好的编写注释的习惯,也可以通过注释来对代码进行一些简单的调试
			 */
			
			//单行注释
			//alert("hello");
			//document.write("hello");
			console.log("hello"); //该语句用来在控制台输出一个日志
			


			
			/*
			 * 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 = 456;
			a = 123124223423424;
			
			
			//声明和赋值同时进行
			var b = 789;
			var c = 0;
			
			var age = 80;
			
			console.log(age);
			
			
		</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.标识符一般都采用驼峰命名法
			 * 			- 首字母小写,每个单词的开头字母大写,其余字母小写
			 * 			helloWorld xxxYyyZzz
			 * 
			 * 	- JS 底层保存标识符时实际上是采用的 Unicode 编码,
			 * 		所以理论上讲,所有的 utf-8 中含有的内容都可以作为标识符
			 */
			/*var if = 123;
			
			console.log(if);*/
			
			
			//千万不要这么用
			var 锄禾日当午 = 789;
			console.log(锄禾日当午);
			
			
		</script>
	</head>
	<body>
	</body>
</html>

其二、结果展示:

// 一进入页面后的控制台展示:

在这里插入图片描述

Ⅵ、小结:

其一、哪里有不对或不合适的地方,还请大佬们多多指点和交流!
其二、若有转发或引用本文章内容,请注明本博客地址(直接点击下面 url 跳转) https://blog.csdn.net/weixin_43405300,创作不易,且行且珍惜!
其三、有兴趣的话,可以多多关注这个专栏(Vue(Vue2+Vue3)面试必备专栏)(直接点击下面 url 跳转):https://blog.csdn.net/weixin_43405300/category_11525646.html?spm=1001.2014.3001.5482
其四、再有兴趣的话,也可以多多关注这个专栏(Java)(直接点击下面 url 跳转):https://blog.csdn.net/weixin_43405300/category_12654744.html?spm=1001.2014.3001.5482

评论
添加红包

请填写红包祝福语或标题

红包个数最小为10个

红包金额最低5元

当前余额3.43前往充值 >
需支付:10.00
成就一亿技术人!
领取后你会自动成为博主和红包主的粉丝 规则
hope_wisdom
发出的红包

打赏作者

狮子座的男孩

如果可以,请我喝杯咖啡吧!

¥1 ¥2 ¥4 ¥6 ¥10 ¥20
扫码支付:¥1
获取中
扫码支付

您的余额不足,请更换扫码支付或充值

打赏作者

实付
使用余额支付
点击重新获取
扫码支付
钱包余额 0

抵扣说明:

1.余额是钱包充值的虚拟货币,按照1:1的比例进行支付金额的抵扣。
2.余额无法直接购买下载,可以购买VIP、付费专栏及课程。

余额充值