当前位置: 首页 > news >正文

JavaScript(1)

JavaScript简介

JavaScript是一门跨平台、面向对象的脚本语言,用来控制网页行为的,它能使网页可以交互。

JavaScript引入方式

1、内部脚本

将js代码定义在HTML页面中,在HTML中,JavaScript代码必须位于<script>与</script>标签之间

<!DOCTYPE html>
<html lang="en">
<head><meta charset="UTF-8"><title>Document</title>
</head>
<body><script>alert("hello js~");</script>
</body>
</html>

提示:

  • 在HTML文档中可以在任意位置放置任意数量的<script>标签
  • 一般把脚本置于<body>元素底部,可以改善显示速度,因为脚本执行会拖慢显示

2、外部脚本

将js代码定义在外部js文件中,然后引入到HTML页面中

  • 外部文件demo.js
alert("Hello JS~");
  • 引入外部js文件
<!DOCTYPE html>
<html lang="en">
<head><meta charset="UTF-8"><title>Document</title><script src="./js/demo.js"></script>
</head>
<body></body>
</html>

注意:
1、对于一个<script>,不能同时引入JS文件和在内部书写JS代码
2、外部脚本JS文件中不能包含<script>标签

书写语法

  1. 区分大小写:与Java一样,变量名、函数名以及其他一切东西都是区分大小写的
  2. 每行结尾的分号可有可无
  3. 注释:单行注释(//)、多行注释(/* */)
  4. 大括号表示代码块

输出语句

  • 使用window.alert()写出警告框
  • 使用document.write()写入HTML输出
  • 使用console.log()写入浏览器控制台
<!DOCTYPE html>
<html lang="en">
<head><meta charset="UTF-8"><title>Document</title>
</head>
<body><script>window.alert("hello JS~");//弹出警告框document.write("hello JS~");//写入HTML(网页显示)console.log("hello JS~");//写入控制台(开发者模式)</script>
</body>
</html>

JavaScript基本语法

一、变量

JS本身是一门弱类型语言,只需要使用var关键字即可,不需要指定数据类型。
语法:var 变量名; 或者var 变量名1,变量名2; 或者var 变量名=值;
在这里插入图片描述

二、数据类型

分为两类:基本数据类型和引用数据类型
在这里插入图片描述

引用数据类型:通常叫做类(class),JS会将之转换成对象来处理

使用typeof运算符可以获取数据类型

alert(typeof age);

三、运算符

算数运算符:+ - * / % ++ –

赋值运算符:= += -= *= /= %=

关系运算符: === ,>, >=, <, <=, ==, !=

逻辑运算符:&& || !

条件运算符:条件表达式 ? true_value : false_value

注意:
在这里插入图片描述
类型转换:
在这里插入图片描述
在这里插入图片描述

四、流程控制语句

分支结构:单分支:if(){}、双分支:if(){}else{}、多分支:if(){}else if(){}else{}、等值多分支:switch(){case :……break;default:……}

循环结构:JS中while循环,do while循环,for循环跟Java基本一致。增强型for循环略有差别。

 //增强型for循环//java:for(数据类型 变量:数组名){}for(var i in array) {console.log(i)//打印的还是索引console.log(array[i]);}

五、日期对象

<!DOCTYPE html>
<html lang="en">
<head><meta charset="UTF-8"><title>日期对象</title>
</head>
<body><script>var now = new Date;console.log(now);//Thu Mar 02 2023 19:48:29 GMT+0800 (GMT+08:00)//日期格式转换console.log(now.toLocaleDateString());//2023/3/2console.log(now.toLocaleString());//2023/3/2 19:52:14console.log(now.toLocaleTimeString());//19:52:14var year = now.getFullYear();var month = now.getMonth()+1;var date = now.getDate();var hour = now.getHours();var minute = now.getMinutes();var second = now.getSeconds();var week = now.getDay();var time = year+"年"+month+"月"+date+"日 星期"+week+" "+hour+":"+minute+":"+second;console.log(time);//2023年3月2日 星期4 19:55:40</script>
</body>
</html>

六、函数对象

JavaScript函数通过function关键字进行定义

语法为:

<script>function functionName(参数1,参数2...){要执行的代码}
</script>

注意:
1、形参不需要类型,应为JS是弱类型语言
2、返回值也不需要定义类型,可以在函数内部直接使用return返回即可

function sum(){var a = 4,b = 7;var res = a + b;return res;
}

调用:函数名称(实际参数列表);

七、数组对象

Array对象用于定义数组:
在这里插入图片描述
在这里插入图片描述

代码演示:

<!DOCTYPE html>
<html lang="en">
<head><meta charset="UTF-8"><title>Document</title><script>//1)创建空数组var array1 = new Array();//2)创建有长度的数组var array2 = new Array(5);//3)创建有初始值的数组var array3 = [2,1.23,true,"abc"];//获取数组的长度//console.log(array3.length);//遍历数组数据for (var i = 0;i < array3.length;i ++) {//console.log(array3[i]);}//console.log(array3[8]);//array3[8] = "陈微";//alert(array3);//增强型for循环//java:for(数据类型 变量:数组名){}for(var i in array3) {console.log(array3[i]);}</script>
</head>
<body></body>
</html>

八、数学对象

1、创建:Math对象不用创建直接使用。使用时直接调用方法,如:Math.方法名();

2、常用方法:

(1)random():返回 0 ~ 1 之间的随机数

(2)max(x,y):返回 x 和 y 中的最大值

(3)min(x,y):返回 x 和 y 中的最低值

(4)ceil(x):对数进行向上取整

(5)floor(x):对数进行向下取整

(6)round(x):把数四舍五入为最接近的整数

(7)abs(x):返回数的绝对值

3、属性:PI,圆周率

九、字符串对象

1、创建:
在这里插入图片描述
2、属性:
在这里插入图片描述

3、常用方法:
(1)是否以某个字符开头 startsWith()

(2)是否以某个字符结尾 endsWith()

(3)截取字符串

 a、substring(起始下标,结束角标)

 b、substr(起始下标,截取长度)

(4)根据某个字符拆分字符串 返回数组 split()

(5)返回指定位置的字符 charAt()

(6)检索字符串 indexOf()

十、自定义对象

在这里插入图片描述

相关文章:

JavaScript(1)

JavaScript简介 JavaScript是一门跨平台、面向对象的脚本语言&#xff0c;用来控制网页行为的&#xff0c;它能使网页可以交互。 JavaScript引入方式 1、内部脚本 将js代码定义在HTML页面中&#xff0c;在HTML中&#xff0c;JavaScript代码必须位于<script>与</scrip…...

阿里云云原生每月动态 | 聚焦实战,面向开发者的系列课程全新上线

作者&#xff1a;云原生内容小组 云原生是企业数字创新的最短路径。 《阿里云云原生每月动态》&#xff0c;从趋势热点、产品新功能、服务客户、开源与开发者动态等方面&#xff0c;为企业提供数字化的路径与指南。 本栏目每月更新。 趋势热点 《云原生实战指南》白皮书发布 …...

Goby 征文大擂台,超值盲盒等你来!

001 Goby 技术征文正式启动 Goby 致力于做最好的网络安全工具。为了促进师傅们知识共享和技术交流&#xff0c;现发起关于 Goby 的技术文章征集活动&#xff01; 欢迎所有师傅们参加&#xff0c;分享您的使用经验或挖洞窍门等&#xff0c;帮助其他人更好地了解和利用 Goby。 …...

NLP - langid 语种识别

文章目录一、关于 langid二、基本使用Normalization多个语言中选择一个三、训练模型1、需要2、工具是3、过程4、代码调用自定义模型一、关于 langid https://github.com/saffsd/langid.py 用于检测语言 二、基本使用 import langidlangid.classify("This is a test"…...

liquibase学习和使用

文章目录liquibase学习介绍数据库更新日志和数据库更新日志锁定相关概念changelogchangeset的属性preconditionsql样例Contextssql样例Labelsql样例文件格式sql样例其他格式用的时候在补充跟踪表DATABASECHANGELOGLOCK &#xff08;数据库更改日志锁定表&#xff09;DATABASECH…...

redhawk:Low Power Analysis

1.rush current与switch cell 在standby状态下为了控制leakage power我们选择power gating的设计方式&#xff0c;使用power switch cell关闭block/power domain的电源。 power switch的基本介绍可见: 低功耗设计-Power Switch power switch的table中有四种状态&#xff0c;…...

24- 深度学习的模型保存和加载 (TensorFlow系列) (深度学习)

知识要点 keras 保存成hdf5文件, 1.保存模型和参数, 2.只保存参数 1.保存模型和参数 save_modelcallback ModelCheckpoint2. 只保存参数 save_weightscallback ModelCheckpoint save_weights_only True 保存模型: 案例数据: Fashion-MNIST总共有十个类别的图像model.save_w…...

【Echarts图例点击事件】自定义Echarts图例legend点击事件(已解决)

目录先睹为快&#xff08;效果&#xff09;1、实现Echarts多条曲线2、点击echarts触发接口请求2.1 先默认隐藏部分数据2.2 自定义legend图例点击事件3、源码下载地址&#xff08;解压即用&#xff09;**【写在前面】**这下我又不得不说了&#xff0c;还是客户现场使用时想查询一…...

uniapp-首页配置

为了获取到后台服务器发来的数据&#xff0c;需要配置相应的网络地址。位置在main.js入口文件中。 import { $http } from escook/request-miniprogramuni.$http $http // 配置请求根路径 $http.baseUrl https://api-hmugo-web.itheima.net// 请求开始之前做一些事情 $http.…...

支持DDR5,超频更简单,小雕够给力,技嘉B760M小雕WIFI主板上手

目前13代酷睿已经全员集结了&#xff0c;其中全新的i5 13490F应该依然会备受欢迎&#xff0c;当然了&#xff0c;刚上市不久的13代酷睿价格方面还不是很有吸引力&#xff0c;好在12代酷睿在新一代主板上面依然可用&#xff0c;所以预算有限的朋友&#xff0c;完全可用继续使用1…...

fengMap 自定义dom 偏离实际位置;缩放时飘出地图所在区域

目录 一、问题 二、原因及解决方法 三、总结 一、问题 1.前人写了一份代码&#xff0c;很奇怪。使用 new fengmap.FMCompositeMarker添加的复合覆盖物位置是正常的&#xff0c;缩放的时候也是正常的&#xff0c;仍然处于地图内部&#xff1b;但是new fengmap.FMDomMarker添加…...

TryHackMe-黑我杯

黑我杯 相信我们大家在TryHackMe的日积月累都学到了不少东西&#xff0c;从纯萌新到oscp再到更高 我很高兴能将国内各thm玩家聚集到一起&#xff0c;构建一个更好的学习环境和氛围 本次娱乐分两场&#xff1a; Offensive Pentesting — 中等难度Junior Penetration — 容易难…...

【JAVA程序设计】【C00109】基于SSM(非maven)的员工工资管理系统

基于SSM&#xff08;非maven&#xff09;的员工工资管理系统项目简介项目获取开发环境项目技术运行截图项目简介 基于ssm框架非maven开发的企业工资管理系统共分为二个角色&#xff1a;系统管理员、员工 管理员角色包含以下功能&#xff1a; 系统后台登陆、管理员管理、员工信…...

《计算机原理》——HelloWorld.cpp如何运行的

学校《计算机原理》开课啦&#xff01;特此开辟专栏&#xff0c;将一些知识作为笔记&#xff0c;记录下来。 前言 本篇博客知识点来源于educoder的相关题目 1. 相关知识 1.1 计算机语言 计算机语言是人与计算机之间通讯的语言&#xff0c;计算机语言包括编写计算机程序的字符…...

【面试题】在JS循环中使用await会怎么样?

前言这个问题是这样产生的&#xff1f;某天&#xff0c;在学习异步的知识遇到这样一道题&#xff1a;使用Promise的方式&#xff0c;每隔一秒输出数组中一个值const arr [1, 2, 3] ​ arr.reduce((pre, cur) > {return pre.then(() > {returnnewPromise((resolve, rejec…...

Qt QMessageBox详解

文章目录一.QMessageBox介绍枚举属性函数二.QMessageBox的用法1.导入QMessage库2.弹窗提示3.提供选项的弹窗提示4.作为提示&#xff0c;报警&#xff0c;报错提示窗口一.QMessageBox介绍 文本消息显示框(message box)向用户发出情况警报信息并进一步解释警报或向用户提问&…...

Flutter之beamer路由入门指南

beamer路由入门指南 前言使用方法1、路由配置方式1路由配置方式2路由跳转测试现象前言 Beamer是一个很好用的路由组件,本文以beamer1.5.0版本进行说明,前面博主也介绍了其他路由组件 Flutter实战之go_router路由组件入门指南 、 Flutter之Fluro路由组件入门指南 Flutter之Ge…...

「基础篇」机器学习概览

文章目录1. 什么是机器学习2. 引入机器学习3. 应用场景4. 机器学习分类4.1. 有无人类监督4.2. 是否增量学习4.3. 泛化方式5. 主要挑战6. 测试与验证1. 什么是机器学习 机器学习&#xff08;Machine Learning&#xff0c;ML&#xff09;是一个研究领域&#xff0c;让计算机无需…...

揭秘可视化图探索工具 NebulaGraph Explore 是如何实现图计算的

前言 在可视化图探索工具 NebulaGraph Explorer 3.1.0 版本中加入了图计算工作流功能&#xff0c;针对 NebulaGraph 提供了图计算的能力&#xff0c;同时可以利用工作流的 nGQL 运行能力支持简单的数据读取&#xff0c;过滤及写入等数据处理功能。 本文将简单分享下 NebulaGr…...

移动架构43_什么是Jetpack

Android移动架构汇总​​​​​​​ 文章目录一 Android 开发框架演变1 MVC2 MVP3 MVVM二 什么是JetPack三 如何构建支持Jetpack项目一 Android 开发框架演变 1 MVC Model-View-Controller&#xff0c;模型-视图-控制器&#xff0c;Model负责数据管理&#xff0c;View负责UI显…...

盘古信息PCB行业解决方案:以全域场景重构,激活智造新未来

一、破局&#xff1a;PCB行业的时代之问 在数字经济蓬勃发展的浪潮中&#xff0c;PCB&#xff08;印制电路板&#xff09;作为 “电子产品之母”&#xff0c;其重要性愈发凸显。随着 5G、人工智能等新兴技术的加速渗透&#xff0c;PCB行业面临着前所未有的挑战与机遇。产品迭代…...

《从零掌握MIPI CSI-2: 协议精解与FPGA摄像头开发实战》-- CSI-2 协议详细解析 (一)

CSI-2 协议详细解析 (一&#xff09; 1. CSI-2层定义&#xff08;CSI-2 Layer Definitions&#xff09; 分层结构 &#xff1a;CSI-2协议分为6层&#xff1a; 物理层&#xff08;PHY Layer&#xff09; &#xff1a; 定义电气特性、时钟机制和传输介质&#xff08;导线&#…...

生成 Git SSH 证书

&#x1f511; 1. ​​生成 SSH 密钥对​​ 在终端&#xff08;Windows 使用 Git Bash&#xff0c;Mac/Linux 使用 Terminal&#xff09;执行命令&#xff1a; ssh-keygen -t rsa -b 4096 -C "your_emailexample.com" ​​参数说明​​&#xff1a; -t rsa&#x…...

是否存在路径(FIFOBB算法)

题目描述 一个具有 n 个顶点e条边的无向图&#xff0c;该图顶点的编号依次为0到n-1且不存在顶点与自身相连的边。请使用FIFOBB算法编写程序&#xff0c;确定是否存在从顶点 source到顶点 destination的路径。 输入 第一行两个整数&#xff0c;分别表示n 和 e 的值&#xff08;1…...

初学 pytest 记录

安装 pip install pytest用例可以是函数也可以是类中的方法 def test_func():print()class TestAdd: # def __init__(self): 在 pytest 中不可以使用__init__方法 # self.cc 12345 pytest.mark.api def test_str(self):res add(1, 2)assert res 12def test_int(self):r…...

Redis的发布订阅模式与专业的 MQ(如 Kafka, RabbitMQ)相比,优缺点是什么?适用于哪些场景?

Redis 的发布订阅&#xff08;Pub/Sub&#xff09;模式与专业的 MQ&#xff08;Message Queue&#xff09;如 Kafka、RabbitMQ 进行比较&#xff0c;核心的权衡点在于&#xff1a;简单与速度 vs. 可靠与功能。 下面我们详细展开对比。 Redis Pub/Sub 的核心特点 它是一个发后…...

QT3D学习笔记——圆台、圆锥

类名作用Qt3DWindow3D渲染窗口容器QEntity场景中的实体&#xff08;对象或容器&#xff09;QCamera控制观察视角QPointLight点光源QConeMesh圆锥几何网格QTransform控制实体的位置/旋转/缩放QPhongMaterialPhong光照材质&#xff08;定义颜色、反光等&#xff09;QFirstPersonC…...

Python+ZeroMQ实战:智能车辆状态监控与模拟模式自动切换

目录 关键点 技术实现1 技术实现2 摘要&#xff1a; 本文将介绍如何利用Python和ZeroMQ消息队列构建一个智能车辆状态监控系统。系统能够根据时间策略自动切换驾驶模式&#xff08;自动驾驶、人工驾驶、远程驾驶、主动安全&#xff09;&#xff0c;并通过实时消息推送更新车…...

MySQL 索引底层结构揭秘:B-Tree 与 B+Tree 的区别与应用

文章目录 一、背景知识&#xff1a;什么是 B-Tree 和 BTree&#xff1f; B-Tree&#xff08;平衡多路查找树&#xff09; BTree&#xff08;B-Tree 的变种&#xff09; 二、结构对比&#xff1a;一张图看懂 三、为什么 MySQL InnoDB 选择 BTree&#xff1f; 1. 范围查询更快 2…...

Unity UGUI Button事件流程

场景结构 测试代码 public class TestBtn : MonoBehaviour {void Start(){var btn GetComponent<Button>();btn.onClick.AddListener(OnClick);}private void OnClick(){Debug.Log("666");}}当添加事件时 // 实例化一个ButtonClickedEvent的事件 [Formerl…...