首页 > 编程语言 >JavaScript | JavaScript入门知识

JavaScript | JavaScript入门知识

时间:2023-07-23 10:44:22浏览次数:42  
标签:知识 变量 JavaScript JS 注释 var 标识符 入门

JavaScript编写位置

  • 我们目前学习的JS全都是客户端的JS,也就是说全都是需要在浏览器中运行的,所以我们我们的JS代码全都需要在网页中编写。
  • 我们的JS代码需要编写到<script>标签中。
  • 我们一般将script标签写到head中。(和style标签有点像)(但是不一定)
  • 属性:
    • type:默认值text/javascript可以不写,不写也是这个值。
    • src:当需要引入一个外部的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>

Hello World

  • 创建一个html文件。
  • 在html文件的head标签中创建一个script标签,并编写如下代码。
<!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>

严格区分大小写

  • JavaScript是严格区分大小写的,也就是abc和Abc会被解析器认为是两个不同的东西。
  • 所以在编写上边的HelloWorld时,一定要注意区分大小写。

JavaScript注释

  • 注释中的内容不会被解析器解析执行,但是会在源码中显示,我们一般会使用注释对程序中的内容进行解释。
  • JS中的注释和Java的的一致,分为两种:
    • 单行注释://注释内容
    • 多行注释:/*注释内容*/
<!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>

JavaScript标识符

  • 所谓标识符,就是指变量、函数、属性的名字,或函数的参数

  • 标识符可以是按照下列格式规则组合起来的一或多个字符:

    • 第一个字符必须是一个字母、下划线( _ )或一个美元符号( $ )
    • 其他字符可以是字母、下划线、美元符号数字
  • 按照惯例,ECMAScript 标识符采用驼峰命名法

  • 但是要注意的是JavaScript中的标识符不能是关键字保留字符

<!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>

JavaScript关键字和保留字符

  • 关键字

  • 保留字符

  • 其他不建议使用的标识符

JavaScript变量

  • 变量的作用是给某一个值或对象标注名称。

  • 比如我们的程序中有一个值123,这个值我们是需要反复使用的,这个时候我们最好将123这个值赋值给一个变量,然后通过变量去使用123这个值。

  • 变量的声明:

    • 使用var关键字声明一个变量。
    • var a;
  • 变量的赋值:

    • 使用=为变量赋值。
    • a=123;
  • 声明和赋值同时进行:

    • var a = 123;
<!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>

标签:知识,变量,JavaScript,JS,注释,var,标识符,入门
From: https://www.cnblogs.com/zhangxuegold/p/17574763.html

相关文章

  • JavaScript(二)运算符
    一:算数运算符+-*/加减乘除%取模(余数)二:赋值运算符+=-+*=/=%=letnum=5num=num+1num+=1两行一样三:自增自减运算符++  变量+1--  变量-1++在后面,先进行变量外的运算++在前面,先进行自增,在进行变量外的运算用的比较少四:比较运算符(关系运算符)输出布尔值><......
  • 读数据压缩入门笔记09_多媒体数据压缩
    1. 压缩分类1.1. 多媒体数据压缩(media-specificcompression)1.2. 通用压缩(generalpurposecompression)2. 有损压缩算法2.1. 为了使数据压缩得更小,可以牺牲多媒体的质量这样的数据转换2.2. 针对特定的多媒体文件2.2.1. 针对图像文件的算法就不太适用于音频文件2.3.......
  • python数据结构类型从入门到精通
    Python是一种灵活且强大的编程语言,它提供了丰富的数据类型和数据结构,使得我们可以有效地组织和操作数据。本文将介绍Python中常见的数据类型和数据结构,包括数字、字符串、列表、元组、字典和集合,并通过相关代码进行讲解。一、数字Python中的数字类型包括整数(int)、浮点数(float)和......
  • 【技术积累】Vue中的核心知识【三】
    this关键字在Vue中,this关键字是指向当前组件实例的引用。它可以在组件的各个方法和生命周期钩子函数中使用。在组件的方法中,this指向当前组件实例,可以通过this访问组件的属性和方法。例如,可以通过this.message访问组件的data中的message属性。在生命周期钩子函数中,this同样......
  • QT从入门到实战完整版 P36
    绘图事件widget.h#ifndefWIDGET_H#defineWIDGET_H#include<QWidget>QT_BEGIN_NAMESPACEnamespaceUi{classWidget;}QT_END_NAMESPACEclassWidget:publicQWidget{Q_OBJECTpublic:Widget(QWidget*parent=nullptr);~Widget();......
  • springboot3.0 从入门到高级学习路线,技术精讲?
    springboot3.0从入门到高级学习路线,技术精讲?学习SpringBoot3.0的技术精讲需要经历以下几个阶段:阶段一:基础知识学习1.Java基础:熟悉Java编程语言及面向对象的基本概念和语法。2.Spring基础:了解Spring框架的核心概念和基本用法,包括依赖注入、AOP等。3.SpringBoot基础:学习Spr......
  • 很全面的 Docker 教程,从入门到精通
    docker不是一个值得投入的领域,它解决的问题是Unix系统最初设计的一个疏忽。从一个不会用docker的小白,自己一步一步的摸索,中间也踩过许多坑。但任然,坚持从哪里跌倒就从哪里爬起来。不求感动自己,但求人生无悔。 1容器简介1.1什么是Linux容器1.2容器不就是虚拟化吗1.3容器发......
  • JavaScript
    溢出属性p{height:100px;width:50px;border:3pxsolidred;/*overflow:visible;!*默认就是可见溢出还是展示*!*//*overflow:hidden;!*溢出部分直接隐藏*!*//*overflow:scroll;!*设......
  • 并查集知识梳理
    并查集目录并查集并查集的定义并查集的思想朴素并查集的代码(1)初始化(2)查找(3)合并路径压缩(1)查找代码(2)路径压缩完整代码按秩合并思想实现(1)初始化(2)合并并查集的定义并查集是一种树型的数据结构,用于处理一些不相交集合的合并及查询问题。并查集通常包含两种操作:查找(Find):查询两个......
  • MySQL之存储过程简单入门(crud)
    存储过程介绍存储过程是事先经过编译并存储在数据库中的一段SQL语句的集合,调用存储过程可以简化应用开发人员的很多工作,减少数据在数据库和应用服务器之间的传输,对于提高数据处理的效率是有好处的。存储过程思想上很简单,就是数据库SQL语言层面的代码封装与重用。特点封装......