初识JavaScript 第二节

最新推荐文章于 2024-06-10 22:52:06 发布
最新推荐文章于 2024-06-10 22:52:06 发布
阅读量482 收藏
点赞数 2
分类专栏： 从单调到花里胡哨 文章标签： javascript 前端 css3
版权声明：本文为博主原创文章，遵循 CC 4.0 BY-SA 版权协议，转载请附上原文出处链接和本声明。
本文链接：https://blog.csdn.net/m0_57376815/article/details/122315532
版权

初识JavaScript 第二节

JavaScript 语法

  JavaScript 语法是一套规则，它定义了 JavaScript 的语言结构。

JavaScript 值

JavaScript 语句定义两种类型的值：
1>混合值
2>变量值
混合值被称为字面量（literal）。变量值被称为变量。

JavaScript 字面量

  书写混合值的重要规则是，写数值有无小数点都可以。
实例：

<!DOCTYPE html>
<html>
	<body>

		<p id="demo"></p>

		<script>
			document.getElementById("demo").innerHTML = 14.50;
		</script>

	</body>
</html>

在这里插入图片描述

JavaScript 变量

  在编程语言中，变量用于存储数据值。JavaScript 使用 var 关键词来声明变量，= 号用于为变量赋值。
实例：

<!DOCTYPE html>
<html>
	<body>

		<p> x 被定义为变量，然后 x 被赋值 5。</p>

		<p id="demo"></p>

		<script>
		var x;
		x = 5;
		document.getElementById("demo").innerHTML = x;
		</script>

	</body>
</html>

在这里插入图片描述

JavaScript 运算符

  JavaScript 使用算数运算符（+ - * /）来计算值：
实例：

<!DOCTYPE html>
<html>
	<body>

		<p id="demo"></p>

		<script>
		document.getElementById("demo").innerHTML = (5 + 15) * 6;
		</script>

	</body>
</html>

在这里插入图片描述
  JavaScript 使用赋值运算符（=）向变量赋值：
实例：

<!DOCTYPE html>
<html>
	<body>

		<p id="demo"></p>

		<script>
		var a, b;
		a = 2;
		b = 9;
		document.getElementById("demo").innerHTML = a + b;
		</script>

	</body>
</html>

在这里插入图片描述

JavaScript 表达式

  表达式是值、变量和运算符的组合，计算结果是值。
实例：

<!DOCTYPE html>
<html>
	<body>

		<p id="demo"></p>
		<p id="demo1"></p>

		<script>
		var x;
		x = 6;
		document.getElementById("demo").innerHTML = x * 10;
		document.getElementById("demo1").innerHTML = 8 * 50;
		</script>

	</body>
</html>

在这里插入图片描述

JavaScript 关键词

<!DOCTYPE html>
<html>
	<body>

		<p id="demo"></p>

		<script>
		var x, y;
		x = 7 + 8;
		y = x * 10;
		document.getElementById("demo").innerHTML = y;
		</script>

	</body>
</html>

JavaScript 标识符

  标识符是名称。在 JS 中，标识符用于命名变量（以及关键词、函数和标签）。在大多数编程语言中，合法名称的规则大多相同。在 JS 中，首字符必须是字母、下划线（-）或美元符号（$）。连串的字符可以是字母、数字、下划线或美元符号。
提示：数值不可以作为首字符。这样，JavaScript 就能轻松区分标识符和数值。

JavaScript 对大小写敏感

  所有JS标识符对大小写敏感。变量JG和jg，是两个不同的变量。
JS不会把 VAR 或 Var 译作关键词 var。
实例：

<!DOCTYPE html>
<html>
	<body>

		<p id="demo"></p>

		<script>
		var lastname, lastName;
		lastName = "Gates";
		lastname = "Jobs";
		document.getElementById("demo").innerHTML = lastName;
		</script>

	</body>
</html>

在这里插入图片描述

JavaScript 与驼峰式大小写

连字符：

first-name, last-name, master-card, inter-city.

注释：JavaScript 中不能使用连字符。它是为减法预留的。
下划线：

first_name, last_name, master_card, inter_city.

驼峰式大小写（Camel Case）：

FirstName, LastName, MasterCard, InterCity.

JS程序员倾向于使用以小写字母开头的驼峰大小写。

JavaScript 注释

  JS 注释用于解释 JS代码，增强其可读性。JS注释也可以用于在测试替代代码时阻止执行。

单行注释

单行注释以 // 开头。
实例：

<!DOCTYPE html>
<html>
	<body>

		<h1 id="myH"></h1>
		<p id="myP"></p>

		<script>
		// 改变标题：
		document.getElementById("myH").innerHTML = "二哥";
		// 改变段落：
		document.getElementById("myP").innerHTML = "二哥";
		</script>

	</body>
</html>

在这里插入图片描述

多行注释

  多行注释以 /* 开头，以 */ 结尾。任何位于 /* 和 */ 之间的文本都会被 JS忽略。
实例：

<!DOCTYPE html>
<html>
	<body>

		<p id="myP"></p>

		<script>
		/*
		下面的代码会改变id = "myp" 的段落
		*/
		document.getElementById("myP").innerHTML = "二哥";
		</script>

	</body>
</html>

在这里插入图片描述
注释：使用单行注释最为常见。注释块常用于官方声明。

使用注释来阻止执行

  在代码行之前添加 // 会把可执行的代码行更改为注释。

JavaScript 变量

  JS变量是存储数据值的容器。
实例：

<!DOCTYPE html>
<html>
	<body>

		<p id="demo"></p>

		<script>
		var a = 8;
		var b = 14;
		var c = a + b;
		document.getElementById("demo").innerHTML =
		"c 的值是：" + c;
		</script>

	</body>
</html>

在这里插入图片描述

类似代数

实例：

<!DOCTYPE html>
<html>
	<body>

		<p id="demo"></p>

		<script>
		var q = 14;
		var w = 8;
		var e = 12;
		var r = q + w + e;
		document.getElementById("demo").innerHTML = "总计：" + r;
		</script>

	</body>
</html>

在这里插入图片描述

JavaScript 标识符

  所有 JS变量必须以唯一的名称的标识。这些唯一的名称称为标识符。
提示：JavaScript 标识符对大小写敏感。

JavaScript 数据类型

JS变量可存放数值，比如 875，以及文本值，比如 "jg"在编程中，文本值被称为字符串。
实例：

<!DOCTYPE html>
<html>
	<body>

		<p id="demo"></p>

		<script>
		var pi = 3.1415;
		var person = "jg";
		var answer = 'nihao';

		document.getElementById("demo").innerHTML =
		pi + "<br>" + person + "<br>" + answer;
		</script>

	</body>
</html>

在这里插入图片描述

声明（创建） JavaScript 变量

  在 JS中创建变量被称为“声明”变量。我们可以通过 var 关键词来声明 JS变量。
实例：

<!DOCTYPE html>
<html>
	<body>

		<p id="demo"></p>

		<script>
		var carName = "porsche";
		document.getElementById("demo").innerHTML = carName;
		</script>

	</body>
</html>

在这里插入图片描述
提示：在脚本的开头声明所有变量是个好习惯！一条语句可以声明多个变量。

JavaScript Let

全局作用域

  全局（在函数之外）声明的变量拥有全局作用域。
实例：

<!DOCTYPE html>
<html>
	<body>

		<p id="demo"></p>

		<script>
		var carName = "money";
		myFunction();

		function myFunction() {
		    document.getElementById("demo").innerHTML =
		    "I want " + carName;
		}
		</script>

	</body>
</html>

在这里插入图片描述

函数作用域

  局部（函数内）声明的变量拥有函数作用域。
实例：

<!DOCTYPE html>
<html>
	<body>

		<p id="demo1"></p>

		<p id="demo2"></p>

		<script>
		myFunction();

		function myFunction() {
		    var carName = "money";
		    document.getElementById("demo1").innerHTML =
		    typeof carName + " " + carName;
		}

		document.getElementById("demo2").innerHTML =
		typeof carName;
		</script>

	</body>
</html>

在这里插入图片描述

JavaScript 块作用域

  通过 var 关键词声明的变量没有块作用域。
实例：

<!DOCTYPE html>
<html>
	<body>

		<p id="demo"></p>

		<script>
		var  x = 6;
		{  
		  var x = 5;
		}
		document.getElementById("demo").innerHTML = x;
		</script>

	</body>
</html>

在这里插入图片描述

循环作用域

  在循环中使用 var。
实例：

<!DOCTYPE html>
<html>
	<body>

		<p id="demo"></p>

		<script>
		var i = 5;
		for (var i = 0; i < 10; i++) {
		  // 一些语句
		}
		document.getElementById("demo").innerHTML = i;
		</script>

	</body>
</html>

在这里插入图片描述  在循环中使用 let。
实例：

<!DOCTYPE html>
<html>
	<body>

		<p id="demo"></p>

		<script>
		let i = 5;
		for (let i = 0; i < 10; i++) {
		  // 一些语句
		}
		document.getElementById("demo").innerHTML = i;
		</script>

	</body>
</html>

在这里插入图片描述

函数作用域

  在函数内声明变量时，使用 var 和 let 很相似。它们都有函数作用域。

HTML 中的全局变量

  使用 JS的情况下，全局作用域是 JS 环境。在 HTML 中，全局作用域是 window 对象。通过 var 关键词定义的全局变量属于 window 对象。
实例：

<!DOCTYPE html>
<html>
	<body>

		<p id="demo"></p>

		<script>
		var carName = "money";

		// 此处的代码能够使用 window.carName
		document.getElementById("demo").innerHTML = "I want " + window.carName;
		</script>

	</body>
</html>

在这里插入图片描述

提升

通过 var 声明的变量会提升到顶端。

JavaScript Const

通过 const 定义的变量与 let 变量类似，但不能重新赋值。
实例：

<!DOCTYPE html>
<html>
	<body>

		<p id="demo"></p>

		<script>
		try {
		  const PI = 3.1415;
		  PI = 3.14;
		}
		catch (err) {
		  document.getElementById("demo").innerHTML = err;
		}
		</script>

	</body>
</html>

在这里插入图片描述

块作用域

  在块作用域内使用 const 声明的变量与 let 变量相似。
实例：

<!DOCTYPE html>
<html>
	<body>

		<p id="demo"></p>

		<script>
		var  x = 10;
		// 此处 x 是 10
		{  
		  const x = 2;
		  // 此处 x 是 2
		}
		// 此处 x 是 10
		document.getElementById("demo").innerHTML = x;
		</script>

		</body>
</html>

在这里插入图片描述

在声明时赋值

  JSconst 变量必须在声明时赋值。
错误的

const PI;
PI = 3.1415;

正确的

const PI = 3.1415;

不是真正的常数

  关键字 const 有一定的误导性。它没有定义常量值。它定义了对值的常量引用。

原始值

  如果我们将一个原始值赋给常量，我们就不能改变原始值：

常量对象可以更改

  我们可以更改常量对象的属性。
实例：

<!DOCTYPE html>
<html>
	<body>

		<p id="demo"></p>

		<script>
		// 创建对象：
		const zuo = {type:"Porsche", model:"911", color:"white"};

		// 更改属性：
		zuo.color = "red";

		// 添加属性：
		zuo.owner = "jg";

		// 显示属性：
		document.getElementById("demo").innerHTML = "作者是：" + zuo.owner; 
		</script>

	</body>
</html>

在这里插入图片描述

JavaScript 算数

算数运算符

  典型的算术运算会操作两个数值。
实例：

<!DOCTYPE html>
<html>
	<body>

		<p id="demo"></p>

		<script>
		var x = 7 + 8;
		document.getElementById("demo").innerHTML = x;
		</script>

	</body>
</html>

在这里插入图片描述

加法

  加法运算符（+）加数：

减法

  减法运算符（-）减数。

乘法

  乘法运算符（*）乘数。

除法

  除法运算符（/）除数。

系数

  系数运算符（%）返回除法的余数。
注释：在算术中，两个整数的除法产生商和余数。
注释：在数学中，模运算的结果是算术除法的余数。

递增

  递增运算符（++）对数值进行递增。

递减

  递减运算符（–）对数值进行递减。

幂

  取幂运算符（**）将第一个操作数提升到第二个操作数的幂。

运算符优先级

  运算符优先级（Operator precedence）描述了在算术表达式中所执行操作的顺序。

第二节到这里就结束了

世界上那些最容易的事情中，拖延时间最不费力。

敬故
关注
  • 2
    点赞
  • 踩
  • 0
    收藏
    觉得还不错? 一键收藏
  • 0
    评论
专栏目录
Javascript基础就业班第二阶段2.md
08-01
js基础就业班第二阶段js的初识和js函数数组等知识点
javascript练习
09-20
其中包含javaScript上机题目，以及答案源码 题目如下 1、 页面两侧的可关闭的对联广告 2、 窗口加载的时候打开一个无状态栏，地址栏的广告窗口 3、 页面中五张轮换播放的最新产品图片 4、 用户名和密码不能为空，...
初识JavaScript 第三节
敬故的博客
01-07 473
快进来看看吧。
初识JavaScript第十二节
敬故的博客
06-10 171
此后省略好多好多字...
初识JavaScript第六节
敬故的博客
04-26 1329
此后省略好多字...
初识JavaScript第四节
敬故的博客
04-12 820
此后省略好多好多字...
初识JavaScript第五节
敬故的博客
04-16 751
此后省略好多好多字...
初识JavaScript第八节
敬故的博客
05-08 359
此后省略好多好多字...
初识JavaScript第十节
敬故的博客
05-16 104
此后省略好多好多字...
JS第二节--初识JavaScript
liuzizhoufaith的博客
02-03 90
JavaScript的历史及基础概念
javascript第一节：初识javascript
m0_59784593的博客
09-27 97
一.javascript的引入方式 1.嵌入式 用<script></script>标签包裹javascript代码，直接填写在HTML文档中 实例：<script type=“text/javascript”>（type属性用于告知游览器脚本的类型，默认值为text/javascript ，可忽略不写。） javascript语句； </script> 2.外链式 即在外部直接编写一个.js文件，然后使用<srcipt>标签的s.
第一篇初识bootstrap
11-24
Bootstrap是一款目前非常流行的前端框架，简单的说，就是html,css,javascript的工具集，我们可以用...（2）自带了13个jQery插件，这些插件为bootstrap中的组件赋予了生命。其中包括：模式对话框、标签页、滚动条、弹
第一章之初识Bootstrap
11-26
2.Bootstrap 特点 3.Bootstrap 结构 4.创建第一个页面 5.学习的各项准备 本节课我们主要了解一下 Boostrap 历史、特点、用途，以及为什么选择 Boostrap 来开发我们的 Web 项目。 一．Bootstrap 概述 Bootstrap ...
JavaScript实战
12-20
第2章 JavaScript的语法 16 2.1 语句 16 2.2 命令 16 2.3 数据类型 17 2.3.1 数值 17 2.3.2 字符串 18 2.3.3 Boolean 19 2.4 变量 19 2.4.1 创建变量 20 2.4.2 使用变量 22 2.5 操作数据类型和变量 23 2.5.1 基本...
JS中一个dom元素能绑定多少事件
ggq53219的博客
06-10 534
在JavaScript中，一个DOM元素可以绑定的事件数量并没有明确的限制，这主要取决于浏览器的实现和内存限制。然而，在实际应用中，为同一个DOM元素绑定过多的事件监听器可能会导致性能问题，尤其是在事件处理函数执行复杂操作的情况下。总之，虽然JavaScript中DOM元素可以绑定的事件数量没有明确的限制，但在实际应用中应注意避免过度绑定和优化事件处理函数，以确保良好的性能和用户体验。
[Vue-常见错误]浏览器显示Uncaught runtime errors
一个喜欢什么都研究一下的小小后端程序员
06-09 374
在vue.config.js中配置关闭Uncaught runtime errors显示。
基于JavaScript 如何实现爬山算法以及优化方案
乐闻世界
06-10 1361
爬山算法（Hill Climbing Algorithm）是一种常见的启发式搜索算法，常用于解决优化问题。其核心思想是从一个初始状态出发，通过逐步选择使目标函数值增大的邻近状态来寻找最优解。接下来，我们将通过 JavaScript 实现一个简单的爬山算法，帮助大家理解其原理和应用。从一个初始状态开始。评估当前状态的目标函数值。在当前状态的邻居中选择一个目标函数值更大的状态。如果找到了更优的邻居，则移动到该邻居并重复步骤2和步骤3。如果没有更优的邻居，则算法结束，当前状态即为局部最优解。
第二十一节:带你梳理Vue2: 父组件使用子组件时的修饰符和双向数据绑定
最新发布
我们专注于分享最实用的编程技术和干货，帮助你提升编程能力,感谢您的支持和关注！
06-10 1252
原生事件修饰符.native ,关于组件标签上的事件 在组件标签上是没办法触发原生的js事件的,vue会将其作为自定义事件处理
第1关：初识数据之特征选择
09-14
2. 数组可以存储相同数据类型的多个元素。3. 数组的长度是固定的，一旦创建后就不能改变。数组的初始化方式有多种，可以通过直接赋值、使用循环赋值等方式进行初始化。使用数组时，可以通过索引来访问数组中的元素。...

“相关推荐”对你有帮助么？

  • 非常没帮助
  • 没帮助
  • 一般
  • 有帮助
  • 非常有帮助
提交
评论
添加红包

请填写红包祝福语或标题

个

红包个数最小为10个

元

红包金额最低5元

当前余额3.43元 前往充值 >
需支付：10.00元
成就一亿技术人!
领取后你会自动成为博主和红包主的粉丝 规则
hope_wisdom
发出的红包
实付元
使用余额支付
点击重新获取
扫码支付
钱包余额 0

抵扣说明：

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

余额充值