Night小课堂09 JavaScript的核心语法 上

已于 2023-05-19 14:17:59 修改
阅读量92 收藏
点赞数 1
文章标签： javascript 前端 html
于 2023-05-18 14:50:06 首次发布
版权声明：本文为博主原创文章，遵循 CC 4.0 BY-SA 版权协议，转载请附上原文出处链接和本声明。
本文链接：https://blog.csdn.net/NoNight_Zzz/article/details/130745884
版权

1.变量

特点1：JS变量 存储变量值，这个变量值会赋给变量名

[变量名 =变量值] 代表的含义即将变量值赋给变量名

特点2：如何使用变量步骤：

        （1）步骤1：定义变量名[var 变量名;]

        （2）步骤2：变量赋值[变量名 = 变量值]

        （3）步骤3：输出变量[alert(变量名);]

变量的代码写法有3种

第一种

<!DOCTYPE html>
<html>
	<head>
		<meta charset="UTF-8">
		<title>第一种</title>
		<script type="text/javascript">
			var name; //定义变量
			name = "Night";//给变量赋值
			alert("我是:"+name);//输出变量
			
		</script>
	</head>
	<body>
	</body>
</html>

第二种（推荐写法）

<!DOCTYPE html>
<html>
	<head>
		<meta charset="UTF-8">
		<title>第二种</title>
		<script type="text/javascript">
			var name = "Night"//同时定义（声名）且赋值
			alert("我是："+name);//输出变量
		</script>
	</head>
	<body>
	</body>
</html>

第三种

<html>
	<head>
		<meta charset="UTF-8">
		<title></title>
		<script type="text/javascript">
			name = "Night"
			alert("我的名字是："+name);
		</script>
	</head>
	<body>
	</body>
</html>

2.数值类型

（1）数值类型 number

typeof( )代表的含义是查询某个参数的类型，下面会讲

<!DOCTYPE html>
<html>
	<head>
		<meta charset="UTF-8">
		<title></title>
		<script type="text/javascript">
			var age = 18;
			alert(typeof(age));
		</script>
	</head>
	<body>
	</body>
</html>

（2）字符串类型 string

<!DOCTYPE html>
<html>
	<head>
		<meta charset="UTF-8">
		<title></title>
		<script type="text/javascript">
	    var name = "我是"
		alert(typeof(name));
		</script>
	</head>
	<body>
	</body>
</html>

（3）布尔类型boolean

<!DOCTYPE html>
<html>
	<head>
		<meta charset="UTF-8">
		<title></title>
		<script type="text/javascript">
		var flag = true;
		alert(typeof(flag));
		</script>
	</head>
	<body>
	</body>
</html>

（4）undefined类型

特点：变量定义但是未赋值

<!DOCTYPE html>
<html>
	<head>
		<meta charset="UTF-8">
		<title></title>
		<script type="text/javascript">
		var weight;
		alert(typeof(weight));
		</script>
	</head>
	<body>
	</body>
</html>

（5）null类型

特点1：null == underfined 代表两者等价

特点2：typeof（null）代表的含义是null属于父类型object类型

<!DOCTYPE html>
<html>
	<head>
		<meta charset="UTF-8">
		<title></title>
		<script type="text/javascript">
		var sex = null;
		alert(null == undefined);
		</script>
	</head>
	<body>
	</body>
</html>

3.typeof运算符

typeof( )代表的含义是查询某个参数的类型

typeof运算符返回值如下：

undefined：变量被声明后，但未被赋值

string：用单引号或双引号来声明的字符串

boolean：true或false

number：整数或浮点数

object：javascript中的对象、数组和null

4.string类型

 特点：获取某个字符串的长度，利用length属性（包含空格）

<!DOCTYPE html>
<html>
	<head>
		<meta charset="UTF-8">
		<title></title>
	</head>
	<body>
		<script type="text/javascript">
			var str = "my name is Night"
			alert(str.length);
		</script>
	</body>
</html>

方法：

（1）chatAt( )

特点：charAt( )方法可返回指定位置的字符。第一个字符位置为0，第二个字符位置为1

<!DOCTYPE html>
<html>
	<head>
		<meta charset="UTF-8">
		<title></title>
	</head>
	<body>
		<script type="text/javascript">
			var str = "My Name Is Night"
			alert("第11位的位置："+str.charAt(11))
			document.write("第0位的位置："+str.charAt(0))
		</script>
	</body>
</html>

（2）indexOf( )

特点：indexOf( )方法可返回某个指定的字符串值在字符串中首次出现的位置。

如果没有找到匹配的字符串则返回 -1。

注意： indexOf() 方法区分大小写。

<!DOCTYPE html>
<html>
	<head>
		<meta charset="UTF-8">
		<title></title>
	</head>
	<body>
		<button onclick="myFunction()">点我</button>
		<script>
		function myFunction(){
			var str="Hello world, welcome to the universe.";
			var n=str.indexOf("we2lcome");
			document.write(n);
		}
		</script>	
	</body>
</html>

最后输出值为-1，因为没有找到we2lcome

5.数组

特点1： var array =[ ]; 代表创建一个数组;

特点2： array[0];代表给数组的第一个位置上赋值，值为32；

特点3： array[5];代表给数组的第六个位置上赋值，值为3；

特点4： 在位置0，1，2，5上都赋值，唯独3，4位置未赋值，但是依然占位，所以会导致array.slength 获取数组的长度为6

特点5：for（var i=0；i<array.length;i++）{}代表的含义是循环遍历array数组，从数组的0位置遍历到数组的6位置（array.length），直至循环结束

下面是第一种数组写法（表现形式）

<!DOCTYPE html>
<html>
	<head>
		<meta charset="utf-8" />
		<title></title>
	</head>
	<body>
		<script type="text/javascript">
			//步骤1：创建数组
			var array = [];
			//步骤2：给数组赋值
			array[0] = 32;
			array[1] = 3;
			array[2] = 3;
			array[5] = 3;
			//步骤3：查询数组的长度
			alert(array.length);
			//步骤4：循环遍历数组，并输出数组的每一个值至浏览器之上
			for(var i=0;i<array.length;i++){
				document.write(array[i]+"<br/>")
			}
		</script>
	</body>
</html>

数组的创建/赋值 的第二种表现形式

<!DOCTYPE html>
<html>
	<head>
		<meta charset="UTF-8">
		<title></title>
	</head>
	<body>
		<script type="text/javascript">
			//创建数组的第二种方式
			var array = new Array();
			//给数组添加值的第二种方式
			array.push(1);
			array.push(2);
			array.push(6);
			//获取数组长度
			alert(array.length);
			//循环输出数组的值（从0位置到最后一个位置输出到浏览器之上）
			for(var i=0;i<array.length;i++){
				document.write(array[i]+"<br />")
			}
		</script>
	</body>
</html>

数组的创建和赋值的多种方式可以交叉使用

6.运算符

（1）算数运算符

  + - * /

<!DOCTYPE html>
<html>
	<head>
		<meta charset="UTF-8">
		<title></title>
	</head>
	<body>
		<script type="text/javascript">
			var a = 1;
			var b = 2;
			var c = a + b;
			document.write(c);//数值之间加的操作
			
			var a = "1";
			var b = "2";
			var c = a+b;
			document.write(c);//字符串之间的加操作（拼接操作）==>12
			
			var a = "1";
			var b = 2;
			document.write(a + b);//字符串和数值之间的加操作（拼接操作）==>12
		</script>
	</body>
</html>

<!DOCTYPE html>
<html>
	<head>
		<meta charset="UTF-8">
		<title></title>
	</head>
	<body>
		<script type="text/javascript">
		var a = 5;
		var b = 3;
		var c = a - b;
		document.write(c);
		
		var a = 5;
	    var b = 2;
	    var c = a * b;
		document.write(a * b);
		
		var a = 5;
		var b = 4;
		var c = a / b;
		document.write(c);
		
		</script>

	</body>
</html>

（2）赋值运算符

         = 和+=

<!DOCTYPE html>
<html>
	<head>
		<meta charset="UTF-8">
		<title></title>
	</head>
	<body>
		<script type="text/javascript">
			var a = 3;
			var b = 7
			a+=b;//a=a+b
			document.write(a);
		</script>
	</body>
</html>

（3）比较运算符

         >  <  >=  <=  ==  != 

<!DOCTYPE html>
<html>
	<head>
		<meta charset="UTF-8">
		<title></title>
	</head>
	<body>
		<script type="text/javascript">
			var a = 2;
			var b = 3;	
			if(a>b){
				alert("a大于b的值");
			}else{
				alert("a不大于b的值");
			}
			
			if(a<b){
				alert("a小于b的值");
			}else{
				alert("a不小于b的值");
			}
			
			if(a>=b){
				alert("a大于等于b的值");
			}else{
				alert("a大于等于b的值 不成立");
			}			
			
			if(a<=b){
				alert("a小于等于b的值");
			}else{
				alert("a小于等于b的值 不成立");
			}	
			
			if(null == undefined){
				alert("null == undefined");
			}else{
				alert("null == undefined 不成立")
			}
			
			if(a !=2){
				alert("a不等于2");
			}else{
				alert("a等于2")
			}
		</script>
	</body>
</html>

（4）逻辑运算符

&& （逻辑与）

T && T ==>T

T && F ==>F

F && F ==>F

(口诀：但凡执行&&操作的所有参数中有一个F，结果为F)

|| （逻辑或）

T || T ==>T

T || F ==>F

F || F ==>F

(口诀：但凡执行||操作的所有参数中有一个T，结果为T)

! 逻辑非

! T==>F

! F==>T

(口诀：与原有结果相反)

<!DOCTYPE html>
<html>
	<head>
		<meta charset="UTF-8">
		<title></title>
	</head>
	<body>
		<script type="text/javascript">
			var a = 1;
			var b = 2;
			
			if((a>b)&&(a>0)){
					alert("one");
				}else{
					alert("two");
				}
			
			if((a>b)||(a>0)){
					alert("one");
				}else{
					alert("two");
				}			
						
			
			if(!(a>=5)){
					alert("one");
				}else{
					alert("two");
				}
		</script>
	</body>
</html>

下期预告：下一篇文章将介绍关于JavaScript的核心语法的后半段

本人才疏学浅，文中如有出现错误请多多谅解

Night-Zzz
关注
  • 1
    点赞
  • 踩
  • 0
    收藏
    觉得还不错? 一键收藏
  • 0
    评论
简易操作系统OS方案规划
weixin_53295593的博客
08-10 2658
提示：文章写完后，目录可以自动生成，如何生成可参考右边的帮助文档 文章目录 前言 一、pandas是什么？ 二、使用步骤 1.引入库 2.读入数据 总结 前言 不会一次而成，需反复多次修改，前面发布的有错难免、会经常修改，后面发布的为准。为与虚拟内存页的概念一致，修改为：1c（簇cluster）= 8kp页（page） = 64ks（扇区sector），1p页（page）= 8s（扇区sector）=4kb。 多核处理器则是指在单个芯片上包含任意多个（如2、4、8、..
JavaScript基本语法
04-05
JavaScript的基础知识
Night小课堂10 JavaScript的核心语法 下
NoNight_Zzz的博客
05-19 71
本篇文章主要讲了JavaScript的核心语法
Night小课堂11 JavaScript函数及BOM
NoNight_Zzz的博客
05-20 85
本篇文章主要讲了JavaScript中的函数和BOM的相关知识
Night小课堂08 什么是JavaScript？
NoNight_Zzz的博客
05-17 64
本文主要介绍了关于JavaScript的一些基础知识
英语四级单词
热门推荐
xxiyy0411的博客
12-18 2万+
// ==UserScript== // @name 背单词 // @description 边上网边刷英语四级单词 // @namespace Xiaomaxin // @version 1.31 // @author Xiaomaxin // @include * // @require http://cdn.bootcss.com
ace.js ajax 跳转,ace.js中文使用手册，收集比较全面
weixin_39594895的博客
08-05 819
发表于黑白课堂ace.js官方的github https://github.com/ajaxorg/aceace 是一个用 JavaScript 编写的独立代码编辑器。我们的目标是创建一个基于浏览器的编辑器，该编辑器匹配并扩展现有本机编辑器(如 TextMate，VIM 或 Eclipse)的功能，可用性和性能。它可以轻松嵌入任何网页或 JavaScript 应用程序中。Ace 是 Cloud9 ...
吾爱破解培训第一课作业密码_如何实现您的第一个无密码登录系统
07-09 2904
吾爱破解培训第一课作业密码You may have heard that there are 360 Million Reasons to Destroy All Passwords and that Passwords are Obsolete. But that doesn’t really help you actually make a passwordless authenticatio...
【新手向】程序员相关概念梳理
wlkdb的博客
11-27 673
我有很多中学同学大学同学转行成为了程序员，包括我自己也是。一路走来，确实有很多东西可以分享的。程序员又名码农，当然是要写代码的，但很可能这只占小部分时间。与同事沟通、思考方案、看代码、改错、学新技术等等同样是程序员的日常，接下来我就系统的来介绍程序员相关的方方面面。
qcon_从QCon San Francisco 2008中学到的主要知识点和教训
cunfu6353的博客
07-09 1262
qcon 在本文中，我们介绍了许多博客上 有关 QCon的博客的观点和观点，以便您可以体会到QCon San Francisco（2008年11月）的印象和经历。 从最初的教程到最后的会议，人们在他们的博客中讨论了QCon的许多方面。 您还可以在Flickr上看到许多与会者拍摄的QCon照片，以及通过Twitter发布有关QCon的数百条推文 。 这次QCon是InfoQ的第四次会议，也是旧...
Day-and-Night:javascript 画布 HTML 动画
06-25
接下来，我们需要在JavaScript文件中获取这个Canvas元素，然后创建一个绘图上下文（2D或3D），它是所有绘图操作的基础： ```javascript var canvas = document.getElementById('myCanvas'); var ctx = canvas....
js-night:全栈 javascript 课程（仅限内部规划）
07-12
JavaScript，作为一种广泛应用于...通过这个内部规划的"js-night"课程，学员将有机会深入学习这些核心知识点，并逐步成为一名全能的JavaScript开发者。在实际项目中应用这些知识，可以构建高效、可维护的全栈Web应用。
Flutter的昼夜切换小部件。-JavaScript开发
05-26
依赖项：day_night_switch：用法要使用插件，只需导入package import'package：day_night_switch / day_n DayNightSwitch Flutter的昼夜切换小部件。 安装添加到pubspec.yaml。 依赖项：day_night_switch：用法要...
powercord-day-night:Powercord插件可根据时间更改您的状态
05-01
综上所述，“powercord-day-night”插件涉及到的技术和知识领域包括Discord的自定义插件开发、Powercord框架的使用、JavaScript编程、时间和日期API的运用、Discord API交互以及配置文件管理。开发者需要具备这些...
Vue前端打包
weixin_63680330的博客
07-04 319
介绍:Nginx是一款轻量级的Web服务器/反向代理服务器及电子邮件(IMAP/POP3)代理服务器。其特点是占有内存少，并发能力强，在各大型互联网公司都有非常广泛的使用。启动：双击nginx.exe 文件启动，服务器默认占用80端口。官网:https://nginx.org/打包好的dist目录赋值到html下。html静态资源文件目录。conf 配置文件目录。logs日志文件目录。temp临时文件目录。
什么是防抖和节流？如何理解它们并在不同的场景条件下灵活运用？
最新发布
Vinca@的博客
07-08 492
防抖（Debouncing）和节流（Throttling）是两种常见的性能优化技术，常用于控制某些操作（例如事件处理器）的频率，从而减少资源消耗并提高性能。防抖：在事件停止触发后的指定时间内执行函数。适用于需要等用户停止操作后再处理事件的场景。节流：在指定时间间隔内最多执行一次函数。适用于需要限制函数执行频率的场景。滚动停止后的操作：使用防抖。滚动过程中的持续操作：使用节流。根据具体需求选择适合的优化技术可以有效提高应用性能和用户体验。
lightchart 和百度echarts 有什么区别, 各自优势是什么
huanghm88的专栏
07-08 123
总体而言，Lightchart和百度Echarts都是强大的图表库，选择使用哪个取决于具体的需求和个人偏好。如果您对界面简洁和定制化有较高要求，可以选择Lightchart；社区活跃：百度Echarts拥有广泛的用户群体和开发者社区，用户可以通过社区获取到丰富的文档、教程和示例，解决问题和获取帮助。易于使用：Lightchart提供了方便易用的API和丰富的文档和示例，使用户能够快速上手并灵活使用图表库。成熟稳定：百度Echarts已经发布了多个版本，经过了长时间的发展和优化，具有较高的稳定性和可靠性。
vue3+ts项目中.env配置环境变量与情景配置
我愿化作繁星
07-03 928
就是在编码过程中应用这些自定义环境变量的时候，给出的智能提示。src目录下创建一个或者env.d.ts文件src同级别types目录下创建文件env.d.ts// 更多环境变量...在文件中专门用于处理项目src文件中的TypeScript配置文件，include配置项加入文件：(会提示自定义设置的环境变量)// ...// 第一种方式对应配置"vite-env.d.ts", // 或者 "env.d.ts"// 第二种方式对应配置。
javascript夜间模式
05-22
最后，在JavaScript中实现 `toggleNightMode()` 函数，用于切换夜间模式： ```javascript function toggleNightMode() { document.body.classList.toggle('night-mode'); } ``` 这样，当用户点击按钮时，`night-...

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

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

请填写红包祝福语或标题

个

红包个数最小为10个

元

红包金额最低5元

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

抵扣说明：

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

余额充值