前端基础：JavaScript（篇一）

news2024/12/23 3:45:35

目录

JavaScript概述

JavaScript历史：

须知：

基本语法

变量

代码

运行

数据类型

1、数值型(number)：

代码 

运行 

2、布尔型(boolean)：

 代码 

运行

 3、字符串型：

代码  

运行

4、 undefined类型

代码  

运行

 5:、Object类型

代码 

运行

算术运算符   + - * / % ++ --

加法运算

代码

运行

减法运算

代码

运行

乘法运算

代码

运行

赋值运算

-=

代码

运行

=(赋值)

代码

运行

比较运算符

==(比较值是否相等)

代码

运行

===(比较值是否相等,还需要比较两个类型是否一致)

代码

运行

逻辑运算符

条件运算符

控制语句

选择结构

循环结构

函数

定义函数

调用

代码

运行 

代码

运行

代码

运行

全局函数

• 确认对话框

代码

运行

• 输入对话框

代码

运行

• parseInt(arg)

代码

运行

• parseFloat(arg)

代码

运行

• typeof (arg)

代码

运行

• eval(arg)

代码

运行

JavaScript概述

JavaScript历史：

JavaScript原名叫live Script,是由美国网景开发的一种用于对网页操作的脚本语言。

网页操作(图片切换)

脚本语言（不需要编译  sql,html,css,javaScript,由某种解释器直接可以运行的）

live Script 也是面向对象的

后来sun公司与网景公司合作，将名字改为JavaScript

JavaScript与Java是两种不同的语言

JavaScript是嵌入在网页中，对网页进行各种操作的，是一种脚本语言

Java是一种后端高级语言，是需要编译的

须知：

html是网页的基本内容（标签，文本）

css是网页外观（样式）

JavaScript/js是网页的行为，为网页添加各种动态操作效果。

ES TS 面向对象结构搭建

基本语法

avaScript脚本写在一组<script>标签中，此标签可以放在head中或body中，一般习惯放在 head中，还可以将脚本写在外部的.js文件中，在html页面中导入外部的.js文件

对话框 alert(‘welcome!’); 提示对话框

console.log();

变量

js声明变量  java语言强类型语言 python js是弱类型语言
变量没有类型，直接使用var关键字声明即可，值有类型，给变量赋了什么值，变量就是什么类型的。

代码

<!DOCTYPE html>
<html>
	<head>
		<meta charset="utf-8">
		<title></title>
		<script>
			var a = 10;
			    a = "cba";
				a = true; 
			alert(a);
		</script>
	</head>
	<body>
	</body>
</html>

运行

数据类型

1、数值型(number)：

其中包括整型数和浮点型数。

代码 
<!DOCTYPE html>
<html>
	<head>
		<meta charset="utf-8">
		<title></title>
		<script> 
			//数值型 包括整数和浮点数  
			var c = 10;
			alert(typeof(c));//typeof(c) 返回变量c的数据类型 
			    c = 10.5;
			alert(typeof(c));	
			alert(c+)5;
		</script>
	</head>
	<body>
	</body>
</html>
运行 

typeof(c) 返回变量c的数据类型

alert(c+)5; 

ERROR

2、布尔型(boolean)：

即逻辑值，true或flase。

 代码 
<!DOCTYPE html>
<html>
	<head>
		<meta charset="utf-8">
		<title></title>
		<script> 
            var a = true;
 			var b = "abc";
            //布尔型 true false
			alert(a==b);
			if(1){
				alert(111);
			} 
		</script>
	</head>
	<body>
	</body>
</html>
运行

 3、字符串型：

由单个或多个文本字符组成。字符串是用单引号或双引号来说明的。 （使用单引号来输入包含引号的字符串。）

代码  
<!DOCTYPE html>
<html>
	<head>
		<meta charset="utf-8">
		<title></title>
		<script> 
			//字符串型 "abc" 'a' 
			var s1="abcd";
			var s2='abcde';
			alert(typeof(s1));
			alert(typeof(s2));
		</script>
	</head>
	<body>
	</body>
</html>
运行

4、 undefined类型

声明了一个变量，却没有为变量初始化赋值，值不明确 

代码  
<!DOCTYPE html>
<html>
	<head>
		<meta charset="utf-8">
		<title></title>
		<script> 
			//undefined类型  
		    var x;
			alert(x);
		    alert(x==undefined);
		</script>
	</head>
	<body>
	</body>
</html>
运行

 5:、Object类型

js也是面向对象的语言，前期我们主要使用内置的对象，我们不自己定义对象 

代码 
<!DOCTYPE html>
<html>
	<head>
		<meta charset="utf-8">
		<title></title>
		<script>  
			//object对象类型   
			var date = new Date();
			alert(date.getFullYear());
			alert(s1.charAt(2));
		</script>
	</head>
	<body>
	</body>
</html>
运行

算术运算符   + - * / % ++ --

加法运算

代码
<!DOCTYPE html>
<html>
	<head>
		<meta charset="utf-8">
		<title></title>
		<script>
			var a = 10;
			var b = 5;
			var c = "5";

			alert(a+b);//加法运算
			alert(a+c);//连接 105
			alert(a+c*1);
		</script>
	</head>
	<body>
	</body>
</html>
运行

减法运算

代码
<!DOCTYPE html>
<html>
	<head>
		<meta charset="utf-8">
		<title></title>
		<script>
			var a = 10;
			var b = 5;
			var c = "5";
			
			alert(a-b);//减法运算
			alert(a-c);//减法运算 10-"5" 隐式将字符串"5"转为数值类型
			alert(a-"a");//NoN not a number
		</script>
	</head>
	<body>
	</body>
</html>
运行

乘法运算

代码
<!DOCTYPE html>
<html>
	<head>
		<meta charset="utf-8">
		<title></title>
		<script>
			var a = 10;
			var b = 5;
			var c = "5";
			
			alert(a*b);//乘法运算
			alert(a*c);//乘法运算
		</script>
	</head>
	<body>
	</body>
</html>
运行

赋值运算

-=

代码
<!DOCTYPE html>
<html>
	<head>
		<meta charset="utf-8">
		<title></title>
		<script>
			var a = 10;
			var b = 5;
			var c = "5";

			a-=c;
			alert(a);
		</script>
	</head>
	<body>
	</body>
</html>
运行

=(赋值)

代码
<!DOCTYPE html>
<html>
	<head>
		<meta charset="utf-8">
		<title></title>
           for (var i = 0; i < 10; i++) {
				console.log(i);
		   }
		</script>
	</head>
	<body>
	</body>
</html>
运行

比较运算符

==(比较值是否相等)

代码
<!DOCTYPE html>
<html>
	<head>
		<meta charset="utf-8">
		<title></title>
		<script>
			var a = 10;
			var b = 5;
			var c = "5";
			
		    alert(b==c);
		</script>
	</head>
	<body>
	</body>
</html>
运行

===(比较值是否相等,还需要比较两个类型是否一致)

代码
<!DOCTYPE html>
<html>
	<head>
		<meta charset="utf-8">
		<title></title>
		<script>
			var a = 10;
			var b = 5;
			var c = "5";
			
			alert(b===c);
		</script>
	</head>
	<body>
	</body>
</html>
运行

逻辑运算符

条件运算符

var result = (条件表达式)?结果1:结果2

当条件成立返回?后的内容，否则返回:后的内容

控制语句

选择结构

1.单一选择结构（if）

2.二路选择结构（if/else）

3.多路选择结构（switch）

循环结构

1.由计数器控制的循环（for）

2.在循环的开头测试表达式（while）

3.在循环的末尾测试表达式（do/while）

4.break continue

函数

定义函数

基本语法：

function functionName([arguments]){

     javascript statements

     [return expression]

}

function: 表示函数定义的关键字;

functionName:表示函数名;

arguments:表示传递给函数的参数列表，各个参数之间用逗号隔开，可以为空;

statements: 表示实现函数功能的函数体;

return expression:表示函数将返回expression的值，同样是可选的的语句。

调用

代码
<!DOCTYPE html>
<html>
	<head>
		<meta charset="utf-8">
		<title></title>
		<script>
			function test(){
				alert("你好")
			} 
		</script>
	</head>
	<body>
		<input type="button" value="测试" onclick="test()"/>
	</body>
</html>
运行 

代码
<!DOCTYPE html>
<html>
	<head>
		<meta charset="utf-8">
		<title></title>
		<script>
			
			function test(a,b){
				alert(a+":"+b);
			} 
			
			function test(a,b){
				return a+b;
			}
			var c = test("1",true); 
			alert(c);
		</script>
	</head>
	<body> 
	</body>
</html>
运行

代码
<!DOCTYPE html>
<html>
	<head>
		<meta charset="utf-8">
		<title></title>
		<script>
			function test(a,b){
				return a+b;
			}
			var c = test(1,"5");
			alert(c);
		</script>
	</head>
	<body>
	</body>
</html>
运行

全局函数

• 确认对话框

确认-true 取消-false

代码
<!DOCTYPE html>
<html>
	<head>
		<meta charset="utf-8">
		<title></title>
		<script>
			//确认对话框 确认-true 取消-false
			var res = confirm("您确定要退出吗");
			alert(res);
		</script>
	</head>
	<body>
	</body>
</html>
运行

• 输入对话框
代码
<!DOCTYPE html>
<html>
	<head>
		<meta charset="utf-8">
		<title></title>
		<script>
		    //输入对话框
			var name = prompt("请输入姓名？");
			alert(name);
		</script>
	</head>
	<body>
	</body>
</html>
运行

• parseInt(arg)

把括号内的内容转换成整数之后的值。如果括号内是字符串， 则字符串开头的数字部分被转换成整数，如果以字母开头，则返回 “NaN” 。

代码
<!DOCTYPE html>
<html>
	<head>
		<meta charset="utf-8">
		<title></title>
		<script>
			//parseInt(n) 
			var a = "5";
			//var a = "5.5";
			alert(5+parseInt(a));
		</script>
	</head>
	<body>
	</body>
</html>
运行

整数

浮点数

• parseFloat(arg)

 将参数转为浮点数

代码
<!DOCTYPE html>
<html>
	<head>
		<meta charset="utf-8">
		<title></title>
		<script>
			//parseFloat(n)  
            var a = "5.5";
			alert(5+parseFloat(a)); 
		</script>
	</head>
	<body>
	</body>
</html>
运行

• typeof (arg)

返回arg值的数据类型。

代码
<!DOCTYPE html>
<html>
	<head>
		<meta charset="utf-8">
		<title></title>
		<script>
			//typeof(arg);  
			var a = new Date();
			alert(typeof(a));
		</script>
	</head>
	<body>
	</body>
</html>
运行

• eval(arg)

可运算某个字符串。

代码
<!DOCTYPE html>
<html>
	<head>
		<meta charset="utf-8">
		<title></title>
		<script>
			//eval(s) 
			var a = "5.5";
			var s = "2+3+a*2";
			var res = eval(s);
			alert(res);  
		</script>
	</head>
	<body>
	</body>
</html>
<!DOCTYPE html>
<html>
	<head>
		<meta charset="utf-8">
		<title></title>
		<script>
			var a = "5.5";
			var s = "alert(a)";
			eval(s); 
		</script>
	</head>
	<body>
	</body>
</html>
运行

本文来自互联网用户投稿，该文观点仅代表作者本人，不代表本站立场。本站仅提供信息存储空间服务，不拥有所有权，不承担相关法律责任。如若转载，请注明出处：http://www.coloradmin.cn/o/1885223.html

如若内容造成侵权/违法违规/事实不符，请联系多彩编程网进行投诉反馈，一经查实，立即删除！

相关文章

Boss直聘，无良厂商，乱封号

Boss直聘，无良厂商，乱封号

耽误招工作&#xff0c;瞎吉儿封号 哥们单身 需要女生多的公司 问一下都不行&#xff0c;什么尿性 直接就给你封了 装什么呢 辣鸡boss 倒闭吧赶紧 我是狗子&#xff0c;希望你倒闭&#xff01;
阅读更多...
GPON-GPON帧链路层知识学习

GPON-GPON帧链路层知识学习

前言&#xff1a; 引用&#xff1a; gpon学习_gpon帧结构-CSDN博客 了解 GPON 技术 - Cisco GPON、XG(S)-PON基础_网络_门牙会稍息-开放原子开发者工作坊 gpon学习_gpon帧结构-CSDN博客 广域网宽带接入技术七GPON技术_gtc帧-CSDN博客 https://www.cnblogs.com/aliyunyun/…
阅读更多...
顶顶通语音信箱手机助手拦截方案

顶顶通语音信箱手机助手拦截方案

在电话自动外呼系统&#xff0c;常见的问题是被叫号码开通了语音信箱&#xff0c;或者运营商自动给开通了小秘书服务&#xff0c;一旦电话打不通&#xff0c;就会先播放一个类似这样的提示音&#xff0c;你拨打的电话已经开启了来电小秘书&#xff0c;请在滴声后留言。还有一个…
阅读更多...
什么是智能仓储

什么是智能仓储

智能仓储是指利用先进的信息技术、物联网技术以及自动化设备&#xff0c;实现仓储管理过程的智能化&#xff0c;通过集成多种现代技术&#xff0c;使得仓库管理更加高效、精准和透明。以下是智能仓储的一些关键特点和技术&#xff1a; --------------------------------------…
阅读更多...
夸克网盘拉新暑期大涨价！官方授权渠道流程揭秘

夸克网盘拉新暑期大涨价！官方授权渠道流程揭秘

夸克网盘拉新暑期活动来袭&#xff0c;价格大涨&#xff01;从7月1日开始持续两个月&#xff0c;在这两个月里夸克网盘拉新的移动端用户&#xff0c;一个从原来的5元涨到了10元。这对做夸克网盘拉新的朋友来说&#xff0c;真的是福利的。趁着暑期时间多&#xff0c;如果有想做夸…
阅读更多...
迅为2K1000核心板商业级/工业级/全国产

迅为2K1000核心板商业级/工业级/全国产

硬件配置 国产龙芯处理器&#xff0c;双核64位系统&#xff0c;板载2G DDR3内存&#xff0c;流畅运行Busybox、Buildroot、Loognix、QT5.12 系统! 接口全板载4路USB HOST、2路千兆以太网、2路UART、2路CAN总线、Mini PCIE、SATA固态盘接口、4G接口、GPS接口WIF1、蓝牙、Mini HD…
阅读更多...
中原汉族与北方游牧民族舞蹈文化在这段剧中表现得淋漓尽致，且看！

中原汉族与北方游牧民族舞蹈文化在这段剧中表现得淋漓尽致，且看！

中原汉族与北方游牧民族舞蹈文化在这段剧中表现得淋漓尽致&#xff0c;且看&#xff01; 《神探狄仁杰》之使团喋血记是一部深入人心的历史侦探剧&#xff0c;不仅以其曲折离奇的案情和狄仁杰的睿智形象吸引观众&#xff0c;更以其对唐代文化的精准再现而备受赞誉。#李秘书讲写…
阅读更多...
大数据、人工智能、云计算、物联网、区块链序言【大数据导论】

大数据、人工智能、云计算、物联网、区块链序言【大数据导论】

各位大佬好 &#xff0c;这里是阿川的博客&#xff0c;祝您变得更强 个人主页&#xff1a;在线OJ的阿川 大佬的支持和鼓励&#xff0c;将是我成长路上最大的动力 阿川水平有限&#xff0c;如有错误&#xff0c;欢迎大佬指正 本篇序言前 必看 【大数据导论】—大数据序言 这是…
阅读更多...
自动编码器简单理解及简单使用描述

自动编码器简单理解及简单使用描述

1. 什么是自动编码器&#xff1f; 自动编码器分为编码器和解码器&#xff0c;其中解码器只在训练阶段用到。具体过程就是&#xff1a; 首先&#xff0c;输入训练样本&#xff0c;编码器对输入样本进行编码&#xff0c;对其进行降维&#xff0c;直到到达某个瓶颈层&#xff1b…
阅读更多...
财务RPA工具——探索用于财务自动化的常见RPA工具

财务RPA工具——探索用于财务自动化的常见RPA工具

近年来数字化浪潮正席卷各大行业&#xff0c;数字化转型成为企业通向成功的一条必经之路。而财务管理作为企业经营过程中的有力支撑&#xff0c;是企业数字化转型的一个关键切入点。如今越来越多的数字技术在现代财务工作中得以应用&#xff0c;以提升财务工作效率&#xff0c;…
阅读更多...
JavaScript——对象的创建

JavaScript——对象的创建

目录 任务描述 相关知识 对象的定义 对象字面量 通过关键字new创建对象 通过工厂方法创建对象 使用构造函数创建对象 使用原型(prototype)创建对象 编程要求 任务描述 本关任务&#xff1a;创建你的第一个 JavaScript 对象。 相关知识 JavaScript 是一种基于对象&a…
阅读更多...
JVM线上监控环境搭建Grafana+Prometheus+Micrometer

JVM线上监控环境搭建Grafana+Prometheus+Micrometer

架构图 一: SpringBoot自带监控Actuator SpringBoot自带监控功能Actuator&#xff0c;可以帮助实现对程序内部运行情况监控&#xff0c;比如监控内存状况、CPU、Bean加载情况、配置属性、日志信息、线程情况等。 使用步骤&#xff1a; 1. 导入依赖坐标 <dependency><…
阅读更多...
H5漂流瓶交友源码_社交漂流瓶H5源码

H5漂流瓶交友源码_社交漂流瓶H5源码

简介&#xff1a; 一种流行的娱乐性社交新潮流&#xff0c;年轻人玩得比较多。和盲盒有点类似 社交漂流瓶搭建教程 环境&#xff1a;Nginx 1.20.1-MySQL 5.6.50-PHP-7.3 上传源码至网站根目录&#xff0c;创建并导入数据库 数据库信息修改&#xff1a;/config/database.ph…
阅读更多...
.net core 的缓存方案

.net core 的缓存方案

这里主要讲两个缓存的使用&#xff0c;MemoryCache和Redis 先讲讲常见的缓存 1、.net framework web中自带有Cache缓存&#xff0c;这种缓存属于粘性缓存&#xff0c;是缓存到项目中的&#xff0c;项目从服务器迁移的时候缓存的内容也能够随着服务器一起迁移 2、MemoryCache缓存…
阅读更多...
聊聊低代码，它到底厉害在哪？

聊聊低代码，它到底厉害在哪？

今天想和大家聊聊低代码这个热门话题。 低代码是什么&#xff1f; 简单来说&#xff0c;它是一种通过可视化界面和少量代码就能快速构建应用程序的技术。以往&#xff0c;开发一款应用可能需要数月甚至更长时间&#xff0c;而低代码的出现大大缩短了这个周期。 低代码的发展历…
阅读更多...
Spring Boot配置文件properties/yml/yaml

Spring Boot配置文件properties/yml/yaml

一、Spring Boot配置文件简介 &#xff08;1&#xff09;名字必须为application,否则无法识别。后缀有三种文件类型&#xff1a; properties/yml/yaml&#xff0c;但是yml和yaml使用方法相同 &#xff08;2&#xff09; Spring Boot 项⽬默认的配置文件为 properties &#xff…
阅读更多...
Salus: Efficient Security Support for CXL-Expanded GPU Memory——论文泛读

Salus: Efficient Security Support for CXL-Expanded GPU Memory——论文泛读

HPCA 2024 Paper CXL论文阅读笔记整理 问题 GPU已成为许多数据密集型应用程序不可或缺的加速器&#xff0c;如科学工作负载、深度学习模型和图分析&#xff0c;这些应用程序对越来越大的内存有着共同的需求。通常&#xff0c;采用统一存储器[12]、[18]、[34]、[67]和多GPU[7]…
阅读更多...
2024阿里云大模型自定义插件(如何调用自定义接口)

2024阿里云大模型自定义插件(如何调用自定义接口)

1&#xff0c;自定义插件入口 2&#xff0c;插件定义&#xff1a;描述插件的参数 2.1&#xff0c;注意事项&#xff1a; 2.1.1&#xff0c;只支持json格式的参数&#xff1b;只支持application/JSON&#xff1b;如下图&#xff1a; 2.1.2&#xff0c;需要把接口描述进行修改&a…
阅读更多...
计算机网络 —— 路由协议：RIP、OSPF、BGP、MPLS

计算机网络 —— 路由协议：RIP、OSPF、BGP、MPLS

路由协议 1. 定义2. IGP2.1 RIP2.2 OSPF 3. BGP4. MPLS 1. 定义 互联网中需要通过路由将数据发送至目标主机。 路由器根据路由控制表(RoutingTable)转发数据包&#xff0c;它根据所收到的数据包中目标主机的IP地址与路由控制表的比较得出下一个应该接收的路由器。 &#xff…
阅读更多...
NARF(法线对齐的径向特征)

NARF(法线对齐的径向特征)

NARF 全称 normal aligned radial feature(法线对齐的径向特征) &#xff0c;是一种为从深度图像中识别物体而提出的3D关键点检测和描述的算法&#xff0c;该算法由Bastian Steder和 Radu Bogdan Rusu等人于2010年在他们的文章《Point Feature Extraction on 3D Range Scans Ta…
阅读更多...
推荐文章
最新文章

Copyright @ 2022~2023