前端基础：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 falsealert(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);//连接 105alert(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 取消-falsevar 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.mzph.cn/diannao/41276.shtml

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

相关文章

TCP的pop网络模式

TCP的pop网络模式

TCP的pop网络模式 1、tcp连接的状态有以下11种 CLOSED&#xff1a;关闭状态LISTEN&#xff1a;服务端状态&#xff0c;等待客户端发起连接请求SYN_SENT&#xff1a;客户端已发送同步连接请求&#xff0c;等待服务端相应SYN_RECEIVED&#xff1a;服务器收到客户端的SYN请请求&…
阅读更多...
MySQL 基本语法讲解及示例（下）

MySQL 基本语法讲解及示例（下）

第六节&#xff1a;如何检索资料 在本节中&#xff0c;我们将介绍如何使用SQL语句检索数据库中的资料&#xff0c;具体包括选择特定列、排序、条件过滤以及组合排序等操作。我们以一个名为student的表格为例&#xff0c;演示不同的检索方法。 初始表格 student student_idname…
阅读更多...
修复harbor的/account/sign-in\?globalSearch=b不登录可以查询镜像的问题

修复harbor的/account/sign-in\?globalSearch=b不登录可以查询镜像的问题

Nginx的location指令不能直接匹配查询参数&#xff0c;所以需要通过其他方式来处理。这里是一个使用if指令结合查询参数来实现的方法。该方法会在请求路径中带有特定查询参数时返回404。 使用if指令匹配查询参数 打开Nginx配置文件&#xff1a; sudo vim /etc/nginx/sites-ava…
阅读更多...
Python中frozenset，秒变不可变集合，再也不用担心多线程了！

Python中frozenset，秒变不可变集合，再也不用担心多线程了！

目录 1、Frozenset基础介绍 🌐 1.1 Frozenset定义与创建 1.2 不可变集合特性 1.3 与Set的区别对比 2、Frozenset操作实践 🧩 2.1 初始化与添加元素尝试 2.2 成员测试: in & not in 2.3 集合运算: 并集、交集、差集 2.4 使用场景示例: 字典键、函数参数默认值 …
阅读更多...
登录设计(实战项目)-1个手机号多用户身份登录

登录设计(实战项目)-1个手机号多用户身份登录

一. 背景&#xff1a; 该需求是一个互联网医院的预约单场景&#xff0c;护士在小程序上申请患者查房预约单&#xff0c;医生在小程序上对预约单进行接单&#xff0c;护士开始查房后填写查房小结&#xff0c;客户需要对用户信息进行授权&#xff0c;医生查房后进行签字&#xff…
阅读更多...
劲爆！华为享界两款新车曝光，等等党有福了

劲爆！华为享界两款新车曝光，等等党有福了

文 | AUTO芯球 作者 | 雷慢 劲爆啊&#xff0c;北汽的一份环境影响分析报告&#xff0c; 不仅曝光了享界S9的生产进展&#xff0c; 还泄露了自家的另两款产品&#xff0c; 第一款是和享界S9同尺寸的旅行车&#xff0c; 我一看&#xff0c;这不是我最喜欢的“瓦罐”吗&…
阅读更多...
v-html 空格/换行不生效

v-html 空格/换行不生效

接口返回的内容如下&#xff1a;有空格有换行&#xff0c;但 使用v-html无效 需加css样式 white-space: pre-wrap; <div class"pretty-html" v-html"Value"></div>.pretty-html {white-space: pre-wrap; /* 保留空格和换行&#xff0c;并允许…
阅读更多...
掌握麦肯锡精英的6个技巧，你也能成为1%的精英！

掌握麦肯锡精英的6个技巧，你也能成为1%的精英！

不知道大家有没有想过&#xff0c;我们和那些全球顶尖精英的差距可能只有1%&#xff0c;只是99%的人还不知道这件事。 今天给大家推荐一本好书&#xff0c;《你和麦肯锡精英的差别只有1%》。优思学院发现&#xff0c;在我们的六西格玛、精益管理的学生中很多人对自己没有自信。…
阅读更多...
软通动力子公司鸿湖万联最新成果SwanLink AI亮相世界人工智能大会

软通动力子公司鸿湖万联最新成果SwanLink AI亮相世界人工智能大会

7月4日&#xff0c;2024世界人工智能大会暨人工智能全球治理高级别会议&#xff08;WAIC 2024&#xff09;在上海拉开帷幕&#xff0c;软通动力董事长兼首席执行官刘天文受邀出席开幕式。其间&#xff0c;软通动力携子公司鸿湖万联深度参与到大会各项活动中&#xff0c;并全面展…
阅读更多...
C语言_结构体初阶（还未写完）

C语言_结构体初阶（还未写完）

结构体的声明 1. 什么是结构&#xff1f;结构是一些值的集合&#xff0c;这些值称为成员变量。结构的每个成员可以是不同类型的变量 数组&#xff1a;一组相同类型元素的集合 结构体&#xff1a;一组不一定相同类型元素的集 2. 结构的声明 struct tag //tag根据实际情况给名字…
阅读更多...
Spring注解@Qualifier

Spring注解@Qualifier

Autowired 注解是 Spring 依赖注入。但是有些场景下仅仅靠这个注解不足以让Spring知道到底要注入哪个 bean。 默认情况下&#xff0c;Autowired 按类型装配 Spring Bean。 如果容器中有多个相同类型的 bean&#xff0c;则框架将抛出 NoUniqueBeanDefinitionException&#xff0…
阅读更多...
数字化产科管理平台全套源码，java产科电子病历系统源码

数字化产科管理平台全套源码，java产科电子病历系统源码

数字化产科管理平台全套成品源码&#xff0c;产科电子病历系统源码&#xff0c;多家大型妇幼专科医院应用案例。源码完全授权交付。 数字化产科管理平台&#xff08;智慧产科系统&#xff09;是为医院产科量身定制的信息管理系统。它管理了孕妇从怀孕开始到生产结束42天以内的一…
阅读更多...
数据库MySQL学习笔记

数据库MySQL学习笔记

数据库MySQL学习笔记 主要记录常见的MySQL语句学习过程&#xff0c;增删改查。 -- 显示所有数据库 SHOW DATABASES;-- 创建新数据库 CREATE DATABASE mydatabase;-- 使用数据库 USE mydatabase;-- 显示当前数据库中的所有表 SHOW TABLES;-- 创建新表 CREATE TABLE users (id …
阅读更多...
BERT--学习

BERT--学习

一、Transformer Transformer&#xff0c;是由编码块和解码块两部分组成&#xff0c;其中编码块由多个编码器组成&#xff0c;解码块同样也是由多个解码块组成。 编码器&#xff1a;自注意力 全连接 多头自注意力&#xff1a;Q、K、V 公式&#xff1a; 解码块&#xff1…
阅读更多...
【Hive实战】 HiveMetaStore的指标分析

【Hive实战】 HiveMetaStore的指标分析

HiveMetaStore的指标分析&#xff08;一&#xff09; 文章目录 HiveMetaStore的指标分析&#xff08;一&#xff09;背景目标部署架构 hive-site.xml相关配置元数据服务的指标相关配置 源码部分&#xff08;hive2.3系&#xff09;JvmPauseMonitor.javaHiveMetaStore的内部类HMS…
阅读更多...
【anaconda】—“conda info“命令后conda配置和环境信息的理解

【anaconda】—“conda info“命令后conda配置和环境信息的理解

文章目录 conda配置和环境信息的理解 conda配置和环境信息的理解 安装anaconda成功后&#xff0c;打开cmd&#xff0c;输入"conda info"命令&#xff0c;结果显示如下&#xff1a; conda的配置和环境信息的输出。以下是对每个字段的解释&#xff1a; active environm…
阅读更多...
H2 Database Console未授权访问漏洞封堵

H2 Database Console未授权访问漏洞封堵

背景 H2 Database Console未授权访问&#xff0c;默认情况下自动创建不存在的数据库&#xff0c;从而导致未授权访问。各种未授权访问的教程&#xff0c;但是它怎么封堵呢&#xff1f; -ifExists 很简单&#xff0c;启动参数添加 -ifExists &#xff0c;它的含义&#xff1a…
阅读更多...
中电金信:加快企业 AI 平台升级，构建金融智能业务新引擎

中电金信:加快企业 AI 平台升级，构建金融智能业务新引擎

在当今数字化时代的浪潮下&#xff0c;人工智能&#xff08;AI&#xff09;技术的蓬勃发展正为各行业带来前所未有的变革与创新契机。尤其是在金融领域&#xff0c;AI 模型的广泛应用已然成为提升竞争力、优化业务流程以及实现智能化转型的关键驱动力。然而&#xff0c;企业在积…
阅读更多...
【C++ 】解决 C++ 语言报错：Null Pointer Dereferenc

【C++ 】解决 C++ 语言报错：Null Pointer Dereferenc

文章目录 引言 在 C 编程中&#xff0c;空指针解引用&#xff08;Null Pointer Dereference&#xff09;是一种常见且危险的错误。当程序试图通过空指针访问内存时&#xff0c;会导致程序崩溃或产生不可预期的行为。本文将详细探讨空指针解引用的成因、检测方法及其预防和解决…
阅读更多...
微信新宠！淘宝扭蛋机小程序，让购物更添乐趣

微信新宠！淘宝扭蛋机小程序，让购物更添乐趣

在移动互联网飞速发展的今天&#xff0c;微信小程序以其便捷性、即用即走的特点&#xff0c;迅速成为了用户日常生活中不可或缺的一部分。而在众多小程序中&#xff0c;一款名为“淘宝扭蛋机”的新晋“网红”&#xff0c;正以其独特的玩法和丰富的惊喜&#xff0c;为购物体验增…
阅读更多...
最新文章

Copyright @ 2022~2023