前端基础：JavaScript（篇一）

目录

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.mfbz.cn/a/775029.html

如若内容造成侵权/违法违规/事实不符，请联系我们进行投诉反馈qq邮箱809451989@qq.com，一经查实，立即删除！

相关文章

Vue 邮箱登录界面

Vue 邮箱登录界面

功能 模拟了纯前端的邮箱登录逻辑 还没有连接后端的发送邮件的服务 后续计划&#xff0c;再做一个邮箱、密码登录的界面 然后把这两个一块连接上后端 技术介绍 主要介绍绘制图形人机验证乃个 使用的是canvas&#xff0c;在源码里就有 界面控制主要就是用 表格、表单&#x…
阅读更多...
Cookie的默认存储路径以及后端如何设置

Cookie的默认存储路径以及后端如何设置

问题场景 最近在写一个前后端分离的项目&#xff0c;需要跨域&#xff0c;前端开发同学遇到一个问题一直报错&#xff0c;本质上就是后端返回的cookie中的sessionID在前端发送http请求时无法被请求自动携带&#xff0c;每次htttpRequest都被后端识别为一个新的session&#xf…
阅读更多...
Java传引用问题

Java传引用问题

本文将介绍 Java 中的引用传递&#xff0c;包括其定义、实现方式、通过引用修改原来指向的内容和通过引用修改当前引用的指向的区别 目录 1、引用传递的概念 2、引用传递的实现方式 3、传引用会发生的两种情况&#xff1a; 通过引用修改当前引用的指向 通过引用修改原来指…
阅读更多...
IDEA 编译单个Java文件

IDEA 编译单个Java文件

文章目录 一、class文件的生成位置二、编译单个文件编译项目报错Error:java: 无效的源发行版: 8 一、class文件的生成位置 file->project structure->Modules 二、编译单个文件 选中文件&#xff0c;点击recompile 编译项目报错 Error:java: 无效的源发行版: 8 Fi…
阅读更多...
谈大语言模型动态思维流程编排

谈大语言模型动态思维流程编排

尽管大语言模型已经呈现出了强大的威力&#xff0c;但是如何让它完美地完成一个大的问题&#xff0c;仍然是一个巨大的挑战。 需要精心地给予大模型许多的提示&#xff08;Prompt&#xff09;。对于一个复杂的应用场景&#xff0c;编写一套完整的&#xff0c;准确无误的提示&am…
阅读更多...
【技术支持】console控制台输出美化(腾讯文档)

【技术支持】console控制台输出美化(腾讯文档)

function style(color, size 12){return display:inline-block;background-color:${color};color:#fff;padding:2px 4px;font-size:${size}px; } const dataVersion 3.0.0 const codeVersion 3.0.28657969 const branchVersion release-20240617-f98487dc //注意此处%c后面…
阅读更多...
Amesim应用篇-信号传递

Amesim应用篇-信号传递

前言 在Amesim中常见的信号传递是通过信号线连接&#xff0c;针对简单的模型通过信号线连接还可以是信号线清晰规整&#xff0c;方便查看。如果模型较复杂&#xff0c;传递信号的元件较多时&#xff0c;此时再继续使用信号线进行信号传递&#xff0c;可能会使草图界面看起来杂…
阅读更多...
vxe-table合并行数据；element-plus的el-table动态合并行

vxe-table合并行数据；element-plus的el-table动态合并行

文章目录 一、vxe-table合并行数据1.代码 二、使用element-plus的el-table动态合并行2.代码 注意&#xff1a;const fields 是要合并的字段 一、vxe-table合并行数据 1.代码 <vxe-tableborderresizableheight"500":scroll-y"{enabled: false}":span-m…
阅读更多...
ASUS/华硕枪神4 G532L G732L系列 原厂win10系统 工厂文件 带F12 ASUS Recovery恢复

ASUS/华硕枪神4 G532L G732L系列 原厂win10系统 工厂文件 带F12 ASUS Recovery恢复

华硕工厂文件恢复系统 &#xff0c;安装结束后带隐藏分区&#xff0c;一键恢复&#xff0c;以及机器所有驱动软件。 系统版本&#xff1a;Windows10 原厂系统下载网址&#xff1a;http://www.bioxt.cn 需准备一个20G以上u盘进行恢复 请注意&#xff1a;仅支持以上型号专用…
阅读更多...
【HALCON】如何实现hw窗口自适应相机拍照成像的大小

【HALCON】如何实现hw窗口自适应相机拍照成像的大小

前言 在开发一个喷码检测软件的时候碰到相机成像和hw窗体的大小不一致&#xff0c;hw太小显示不完全成像的图片&#xff0c;这使得成像不均匀&#xff0c;现场辨别起来比较不直观&#xff0c;因此需要对其进行一个调整。 解决 省略掉读取图片的环节&#xff0c;我们只需要将…
阅读更多...
BSI 第七届万物互联智慧高峰论坛：主题：拥抱AI时代，标准赋能组织实现可持续发展

BSI 第七届万物互联智慧高峰论坛：主题：拥抱AI时代，标准赋能组织实现可持续发展

BSI 第七届万物互联智慧高峰论坛&#xff1a;主题&#xff1a;拥抱AI时代&#xff0c;标准赋能组织实现可持续发展 主要收到 BSI 温女士的邀请参加的本次论坛。还是学到的很多 。 在科技日新月异的时代背景下&#xff0c;BSI 第七届万物互联智慧高峰论坛于[时间&#xff1a;6…
阅读更多...
mac安装docker

mac安装docker

1、首先打开docker官网 https://docs.docker.com/engine/install/ 2、下载好后安装到app应用 3、安装好环境变量 #docker echo export PATH"/usr/local/Cellar/docker/20.10.11/bin:$PATH" >> .bash_profile
阅读更多...
百度云智能媒体内容分析一体机（MCA）建设

百度云智能媒体内容分析一体机（MCA）建设

导读 &#xff1a;本文主要介绍了百度智能云MCA产品的概念和应用。 媒体信息海量且复杂&#xff0c;采用人工的方式对视频进行分析处理&#xff0c;面临着效率低、成本高的困难。于是&#xff0c;MCA应运而生。它基于百度自研的视觉AI、ASR、NLP技术&#xff0c;为用户提供音视…
阅读更多...
不错的用户需求访谈方法

不错的用户需求访谈方法

不错的用户需求访谈方法&#xff0c;可以用如下的矩阵&#xff0c;用来引导用户访谈&#xff1a;
阅读更多...
vue实现搜索文章关键字，滑到指定位置并且高亮

vue实现搜索文章关键字，滑到指定位置并且高亮

1、输入搜索条件&#xff0c;点击搜索按钮 2、滑到定位到指定的搜索条件。 <template><div><div class"search_form"><el-inputv-model"searchVal"placeholder"请输入关键字查询"clearablesize"small"style&quo…
阅读更多...
Go源码--channel源码解读

Go源码--channel源码解读

简介 channel顾名思义就是channel的意思&#xff0c;主要用来在协程之间传递数据&#xff0c;所以是并发安全的。其实现原理&#xff0c;其实就是一个共享内存再加上锁&#xff0c;底层阻塞机制使用的是GMP模型。可见 GMP模型就是那个道&#xff0c;道生一,一生二,二生三,三生…
阅读更多...
2024.8月28号杭州电商博览会，在杭州国博举办

2024.8月28号杭州电商博览会，在杭州国博举办

2024杭州电商新渠道博览会暨集脉电商节 时间&#xff1a;2024年08月28-30日 地点&#xff1a;杭州国际博览中心&#xff08;G20&#xff09; 主办单位&#xff1a;浙江集脉展览有限公司、杭州华维展览有限公司 承办单位&#xff1a;浙江集脉展览有限公司 报名参展&#xf…
阅读更多...
Navicat和MySQL的安装

Navicat和MySQL的安装

1、下载 Navicat Navicat 官网&#xff1a;www.navicat.com.cn/ 在产品中可以看到很多的产品&#xff0c;点击免费试用 Navicat Premium 即可&#xff0c;是一套多连数据库开发工具&#xff0c;其他的只能连接单一类型数据库 点击试用 选择系统直接下载 二、安装 Navicat 安…
阅读更多...
03：EDA的进阶使用

03：EDA的进阶使用

使用EDA设计一个38译码器电路和245放大电路 1、38译码器1.1、查看74HC138芯片数据1.2、电路设计 2、245放大电路2.1、查看数据手册2.2、设计电路 3、绘制PCB3.1、导入3.2、放置3.3、飞线3.4、特殊方式连接GND3.5、泪滴3.6、配置丝印和划分区域3.7、添加typc接口供电 1、38译码器…
阅读更多...
‘艾’公益——微笑行动「广安站」为艾祝福，让笑起舞

‘艾’公益——微笑行动「广安站」为艾祝福，让笑起舞

艾多美“微笑行动”广安站拉开帷幕 此次爱心帮助7名唇腭裂患儿 重新绽放微笑 艾多美“微笑行动”广安站拉开帷幕 此次爱心帮助7名唇腭裂患儿 重新绽放微笑 不让笑容留有缺憾 每个孩子都有微笑的权利 艾多美向唇腭裂儿童伸出援手 绽放笑容&#xff0c;拥抱全新的未来 2…
阅读更多...
最新文章

Copyright @ 2022~2023

友情链接： 我的编程经验分享 一条长河网 尧图网站开发 尧图建网站