JavaScript基础Ⅱ

news/2024/4/13 12:12:17/文章来源:https://blog.csdn.net/weixin_59528719/article/details/136527076

目录

第2章 JavaScript基础语法(掌握)

11-JS代码调试

12-JS函数

第3章 JS事件

14-事件的绑定方式

常用事件(了解)

15-常用事件

第4章 JS内置对象(掌握)

16-数组

17-日期

18-数学运算

19-数字

20-全局函数


第2章 JavaScript基础语法(掌握)

11-JS代码调试

12-JS函数

<!DOCTYPE html>
<html lang="zh">
<head><meta charset="UTF-8"><title>12-JS函数</title>
</head>
<body>
<!--
JS函数1. 普通函数 格式 function 函数名(参数){return}2. 匿名函数 格式 function(参数){return}
注意a.普通函数和匿名函数中都有一个参数数组对象 argumentsb. JS函数的调用只以函数名区分,与参数无关-->
<script >//1. 普通函数 格式 function 函数名(参数){return}function  myf1(name){console.log(name);console.log(arguments);//当前方法接收的参数数组return name+",您好";}//调用普通函数let str = myf1("李苏");console.log(str);//2. 匿名函数 格式 function(参数){return}let myf2 = function  (name){console.log(name);console.log(arguments);//当前方法接收的参数数组return name+",您好";}//调用匿名函数console.log(typeof myf2);//functionlet str2 = myf2("郝哲");console.log(str2);//a,b  JS函数的调用只以函数名区分,与参数无关let str3 = myf1("李苏1","李苏2","李苏3");console.log(str3);let str4 = myf2("李苏11","李苏22","李苏33");console.log(str4);</script>
</body>
</html>

第3章 JS事件

14-事件的绑定方式

Js可以监听用户的行为,并结合函数来完成用户交互功能.

1.命名函数 2.匿名函数

<!DOCTYPE html>
<html lang="zh">
<head><meta charset="UTF-8"><title>14-事件的两种绑定方式</title>
</head>
<body>
<!--
事件的绑定方式1. 命名函数 格式 onEvent=函数 this指的是window对象,使用自己需要传递2. 匿名函数 格式 onEvent=函数 this指的是当前对象自己
--><p onclick="myf1(this)" title="我是命名">1. 命名函数</p>
<p id="myp" title="我是匿名">2. 匿名函数</p><script >//1. 命名函数 格式 onEvent=函数function myf1(ele) {console.log(this);//widowconsole.log(this.title);//undefinedconsole.log(ele);//<p onclick="myf1(this)" title="我是命名">1. 命名函数</p>console.log(ele.title);console.log("命名函数执行");}//2. 匿名函数 格式 onEvent=函数document.querySelector("#myp").onclick = function () {console.log(this);//<p id="myp" title="我是匿名">2. 匿名函数</p>console.log(this.title);console.log("匿名函数执行");}</script>
</body>
</html>

常用事件(了解)

15-常用事件

<!DOCTYPE html>
<html lang="zh">
<head><meta charset="UTF-8"><title>15-常用事件</title>
</head>
<body>
<!--
常用事件1. onload 页面加载完成2. onfocus 获取焦点3. onblur 失去焦点4. onchange 表单控件的值改变时5. onclick 鼠标单击-->姓名 <input type="text" onfocus="myfocus()"><br/>
学历
<select name="edu" id="edu" ><option value="0">请选择</option><option value="1">本科</option><option value="2">大专</option>
</select>
<br/>
<button type="button" id="btn" onclick="myclick()">按钮</button>
<script >//1. onload 页面加载完成window.onload = function () {console.log("页面加载完成");}//2. onfocus 获取焦点function myfocus() {console.log("输入框获取焦点");}//3. onblur 失去焦点document.querySelector('input[type="text"]').onblur = function () {console.log("输入框失去焦点");console.log(this.value);//输入框中的输入字符}//4. onchange 表单控件的值改变时document.querySelector("#edu").onchange = function () {console.log("下拉列表值改变");console.log(this.value);}//5. onclick 鼠标单击function myclick() {//把输入框的值赋值给下拉列表document.querySelector("#edu").value = document.querySelector('input[type="text"]').value;}</script>
</body>
</html>

第4章 JS内置对象(掌握)

16-数组

<!DOCTYPE html>
<html lang="zh">
<head><meta charset="UTF-8"><title>16-数组</title>
</head>
<body>
<!--JS数组的特点:1.JS是弱类型,数组元素类型任意2. JS的数组类似于Java的集合,长度可变,所以有时又把js数组叫做数组或集合数组要求能够查询w3c手册完成如下功能1. 创建数组 []2. 数组合并 concat3. 添加元素数组头添加 unshift数组尾添加 push4. 删除元素数组头删除 shift数组尾删除 pop5. 数组元素拼接为字符串 join(分隔符)6. 排序数组元素 sort-->
<script >//1. 创建数组let arr1 = ["中国",666,true,null,undefined];let arr2 = new Array("您好",123,false,null);let arr3 = [5,3,1,4,7];//2. 数组合并console.log(arr1.concat(arr2));//3. 添加元素arr1.unshift("头元素");//从头添加arr1.push("尾巴元素");//尾巴添加console.log(arr1);//4. 删除元素arr1.shift();//删除头元素arr1.pop();//删除尾元素console.log(arr1);//5. 数组元素拼接为字符串console.log(arr3.join("-"));//用-拼接数组元素为字符串//6. 排序数组元素console.log(arr3.sort());//默认升序arr3.sort(function (a,b) {return a-b;//升序});console.log(arr3);arr3.sort(function (a,b) {return b-a;//降序});console.log(arr3);</script>
</body>
</html>

17-日期

<!DOCTYPE html>
<html lang="zh">
<head><meta charset="UTF-8"><title>17-日期</title>
</head>
<body>
<!--
日期查询手册完成:1. 创建日期对象2. 获取当前时间 转为字符串 格式 yyyy-MM-dd HH:mm:ss.SSS小扩展:字符串补位方法 padStart(位数,填充值) 例如要把7补齐为07 "7".padStart(2,"0")(了解)字符串模板 `字符串` 内部可以使用${变量名称} 取变量值. 注意${}与jsp中的${}冲突.
--><script >function getDateStr() {//1. 创建日期对象let d = new Date();//获取当前日期对象//2. 获取当前时间 转为字符串 格式 yyyy-MM-dd HH:mm:ss.SSSlet fullYear = d.getFullYear();//年let month = new String(d.getMonth()+1).padStart(2,"0");//月let date = new String(d.getDate()).padStart(2,"0");//日let hours = new String(d.getHours()).padStart(2,"0");//时let minutes = new String(d.getMinutes()).padStart(2,"0");//分let seconds = new String(d.getSeconds()).padStart(2,"0");//秒let milliseconds = new String(d.getMilliseconds()).padStart(3,"0");//毫秒let dateStr = `${fullYear}-${month}-${date} ${hours}:${minutes}:${seconds}.${milliseconds}`;console.log(dateStr);return dateStr;}getDateStr();//调用方法</script>
</body>
</html>

18-数学运算

<!DOCTYPE html>
<html lang="zh">
<head><meta charset="UTF-8"><title>18-数学运算</title>
</head>
<body>
<!--
数学运算查询手册完成1. 四舍五入 round(x) 把数四舍五入为最接近的整数2. 向下取整 floor(x) 对数进行下舍入。 地板3. 向上取整 ceil(x) 对数进行上舍入。4. 产生随机数 random() 返回 0 ~ 1 之间的随机数。5. 产生 [1,10]的随机整数小扩展:parseInt(x) 对x转为整数,有小数部分直接舍去. 功能类似 floor(x)random() 返回 [0,1) 之间的随机数。 [0,1) 左闭右开区间,包含0不包含1在任何语言的随机数中都是左闭右开.-->
<script >let n = 1234.567//1. 四舍五入console.log(Math.round(n));//1235//2. 向下取整console.log(Math.floor(n));;//1234//3. 向上取整console.log(Math.ceil(1234.0001));//1235//4. 产生随机数console.log(Math.random());//随机产生[0,1)小数//5. 产生 [1,10]的随机整数//[0,1) *10 --> [0,10) +1 --> [1,11)  floor-->  [1,10]console.log(Math.floor(Math.random() * 10 + 1));</script>
</body>
</html>

19-数字

<!DOCTYPE html>
<html lang="zh">
<head><meta charset="UTF-8"><title>19-数字</title>
</head>
<body style="width: 100vw;height: 100vh;" bgcolor="#f5f5dc" onclick="changeColor()">
<!--
数字1. 会使用二进制,八进制,十六进制js中使用 0b,0o,0x 前缀分别表示二进制,八进制,十六进制2. 会把数字格式为人民币格式 如9.85toFixed(小数位数) 把数字四舍五入转换为字符串,保留小数点后指定位数。3.  把数字转为16进制字符toString(进制) 把数字转换为字符串,使用指定的进制。4. 会产生随机颜色5. 点击页面,背景切换随机颜色
小扩展:vw 屏幕宽度百分比vh 屏幕高度百分比document.querySelector(css选择器) 根据css选择器获取匹配到的一个标签小作业:每隔五秒页面自动切换一个随机颜色setInterval(函数,间隔时间) 每隔固定间隔时间(毫秒)执行一次函数
-->
<script >//1. 会使用二进制,八进制,十六进制let n2 = 0b11;console.log(n2);//3let n8 = 0o11;console.log(n8);//9let n16 = 0x11;console.log(n16);//17//2. 会把数字格式为人民币格式 如9.85let price = 128.9867;console.log(price.toFixed(2));//128.99//3.  把数字转为16进制字符n16 = 255;console.log(n16.toString(16));//ff//4. 会产生随机颜色 #ff00ff//[0,1) *0xffffff --> [0x000000,0xffffff) round--> [0x000000,0xffffff]let colorStr = "#"+Math.round(Math.random() * 0xffffff).toString(16);//产生随机颜色console.log(colorStr);//5. 点击页面,背景切换随机颜色function changeColor(){let colorStr = "#"+Math.round(Math.random() * 0xffffff).toString(16);document.querySelector("body").bgColor = colorStr;//改变body的背景颜色}</script>
</body>
</html>

20-全局函数

<!DOCTYPE html>
<html lang="zh">
<head><meta charset="UTF-8"><title>20-全局函数</title>
</head>
<body>
<!--
全局函数1. 对数据进行加密encodeURI() 把字符串编码为 URI。2. 对加密数据进行解密decodeURI() 解码某个编码的 URI。3. 把字符串当做js表达式来执行eval() 计算 JavaScript 字符串,并把它作为脚本代码来执行
-->
<script >//1. 对数据进行编码let str = "今天下午两点偷袭珍珠";let enstr = encodeURI(str);//urI编码console.log(enstr);//2. 对数据进行解码let res = decodeURI(enstr);//urI解码console.log(res);//3. 把字符串当做js表达式来执行let s = "1+2*3-4/2";let result = eval(s);//把字符串当做js代码执行console.log(result);//5</script>
</body>
</html>

更多内容敬候 JavaScript高级Ⅰ

欢迎大家指点评论~ 点赞+关注⭐⭐⭐

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

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

相关文章

Kosmos-1: 通用接口架构下的多模态大语言模型

Kosmos-1: 通用接口架构下的多模态大语言模型 FesianXu 20230513 at Baidu Search Team 前言 在大规模语言模型&#xff08;Large Language Model, LLM&#xff09;看似要带来新一番人工智能变革浪潮之际&#xff0c;越来越多尝试以LLM作为通用接口去融入各种任务的工作&#…

Git实战(1)

一, git log 查看提交日志情况 根据 commitId进行版本回退 git reset --hard commitId(commitId可以是一部分,不用完整的ID) 只输出一行信息: git log --pretty=oneline 快速回退: git reset --hard HEAD^ 回退到上一个版本 git reset --hard HEAD^^ 回退到上上个版本 如果…

企业工程项目管理系统源码(三控:进度组织、质量安全、预算资金成本、二平台:招采、设计管理)

工程项目管理软件&#xff08;工程项目管理系统&#xff09;对建设工程项目管理组织建设、项目策划决策、规划设计、施工建设到竣工交付、总结评估、运维运营&#xff0c;全过程、全方位的对项目进行综合管理 工程项目各模块及其功能点清单 一、系统管理 1、数据字典&am…

防火墙:网络防御的第一道防线

目录 引言 一、安全技术与防火墙 &#xff08;一&#xff09;安全技术 &#xff08;二&#xff09;防火墙的主要功能与分类 1.防火墙的主要功能 2.防火墙的分类 二、Linux防火墙的基本认识 &#xff08;一&#xff09;Netfilter &#xff08;二&#xff09;防火墙工具…

性能对比:mysql 5.7-8.0-TiDB 7.5-OceanBase 4.2-MariaDB 10.11-机械硬盘-固态硬盘-

1.mysql 5.7-8.0 5.7比8.0优秀 结果&#xff1a;5.7比8.0优秀 10% 2.机械硬盘和固态硬盘 影响不大&#xff0c;主要是CPU 3. JAVA MYSQL 分开 4.『直属 MySQL 』vs 『Docker MySQL』 vs 『Podman MySQL』 直属最好 &#xff0c;其次是Podman&#xff0c;最后是DOCKER 5.MySQL …

Python与FPGA——sobel边缘检测

文章目录 前言一、sobel边缘检测二、Python sobel边缘检测三、FPGA sobel边缘检测总结 前言 边缘存在于目标、背景区域之间&#xff0c;它是图像分割所依赖的较重要的依据&#xff0c;也是图像匹配的重要特征。边缘检测在图像处理和计算机视觉中&#xff0c;尤其在图像的特征提…

【C语言】冒泡排序

概念 冒泡排序&#xff08;Bubble Sort&#xff09;是一种简单的排序算法&#xff0c;它重复地遍历要排序的列表&#xff0c;一次比较两个元素&#xff0c;并且如果它们的顺序错误就把它们交换过来。通过多次的遍历和比较&#xff0c;最大&#xff08;或最小&#xff09;的元素…

Tomcat介绍在IDEA中创建JavaWeb工程

文章目录 一、WEB服务器服务器概述使用Java代码手写web服务器 二、服务器软件Web服务器服务器软件的使用步骤 三、TomcatTomcat的下载Tomcat的安装与卸载Tomcat的启动与关闭常见问题 四、新建Java Web项目并将项目部署到tomcat中新建Java Web项目将项目部署到Tomcat中出现的问题…

webpack源码分析——tapable中before和stage如何改变执行顺序

一、Before用法 Before 用法 before 属性的值可以传入一个数组或者字符串,值为注册事件对象时的名称&#xff0c;它可以修改当前事件函数在传入的事件名称对应的函数之前进行执行。 示例 let hook new SyncWaterfallHook([arg1]);hook.tap(tap1, (arg)> {console.log(tap1…

农产品采购平台技术解析:Java+SpringBoot+Vue+MySQL

✍✍计算机毕业编程指导师 ⭐⭐个人介绍&#xff1a;自己非常喜欢研究技术问题&#xff01;专业做Java、Python、微信小程序、安卓、大数据、爬虫、Golang、大屏等实战项目。 ⛽⛽实战项目&#xff1a;有源码或者技术上的问题欢迎在评论区一起讨论交流&#xff01; ⚡⚡ Java、…

如何在 Mac 上成功轻松地恢复 Excel 文件

Microsoft Excel 的 Mac 版本始终略落后于 Windows 版本&#xff0c;这也许可以解释为什么如此多的用户渴望学习如何在 Mac 上恢复 Excel 文件。 但导致重要电子表格不可用的不仅仅是 Mac 版 Excel 的不完全稳定性。用户有时会失去注意力并删除错误的文件&#xff0c;存储设备…

049-WEB攻防-文件上传存储安全OSS对象分站解析安全解码还原目录执行

049-WEB攻防-文件上传&存储安全&OSS对象&分站&解析安全&解码还原&目录执行 #知识点&#xff1a; 1、文件上传-安全解析方案-目录权限&解码还原 2、文件上传-安全存储方案-分站存储&OSS对象 演示案例&#xff1a; ➢文件-解析方案-执行权限&…

C#,最小代价多边形三角剖分MCPT(Minimum Cost Polygon Triangulation)算法与源代码

1 最小代价多边形三角剖分算法 凸多边形的三角剖分是通过在非相邻顶点&#xff08;角点&#xff09;之间绘制对角线来形成的&#xff0c;这样对角线就不会相交。问题是如何以最小的代价找到三角剖分的代价。三角剖分的代价是其组成三角形的权重之和。每个三角形的重量是其周长…

vue在线查看pdf文件

1.引入组件 npm install --save vue-pdf2、pdf组件页面模板 <template><div class"scrollBox" ><el-dialog :visible.sync"open" :top"1" width"50%" append-to-body><div slot"title"><el…

EdgeX Foundry - 导出数据到 MQTT 服务

文章目录 一、概述1.安装说明2.安装 EMQX3.MQTTX 工具 二、安装部署1.docker-comepse2.修改配置3.启动 EdgeX Foundry4.访问 UI4.1. consul4.2. EdgeX Console 5.测试 EdgeX Foundry # EdgeX Foundryhttps://iothub.org.cn/docs/edgex/ https://iothub.org.cn/docs/edgex/devi…

Java8 CompletableFuture异步编程-入门篇

&#x1f3f7;️个人主页&#xff1a;牵着猫散步的鼠鼠 &#x1f3f7;️系列专栏&#xff1a;Java全栈-专栏 &#x1f3f7;️个人学习笔记&#xff0c;若有缺误&#xff0c;欢迎评论区指正 目录 前言 1、Future vs CompletableFuture 1.1 准备工作 1.2 Future 的局限性 …

小程序API能力集成指南——画布API汇总(四)

CanvasContext canvas 组件的绘图上下文。 方法如下&#xff08;3&#xff09;&#xff1a; scale CanvasContext.scale CanvasContext.scale(number scaleWidth, number scaleHeight) 功能描述 在调用后&#xff0c;之后创建的路径其横纵坐标会被缩放。多次调用倍数会相…

什么是VR虚拟现实|虚拟科技博物馆|VR设备购买

虚拟现实&#xff08;Virtual Reality&#xff0c;简称VR&#xff09;是一种通过计算机技术模拟出的一种全新的人机交互方式。它可以通过专门的设备&#xff08;如头戴式显示器&#xff09;将用户带入一个计算机生成的虚拟环境之中&#xff0c;使用户能够与这个虚拟环境进行交互…

基于“xxx” Androidx平台的驱动及系统开发 之 触摸板篇

目录 一、基于全志 A133 Android10平台&#xff0c;适配1366x768 - ilitek2511触摸1、原理图分析2、驱动移植与适配3、补丁和资源文件 二、基于瑞芯微 RK3566 Android11平台&#xff0c;适配GT9XX触摸1、原理图分析2、补丁及资源文件 三、遇到的问题与解决1、基于amlogic Andro…

Sodinokibi勒索病毒最新变种,勒索巨额赎金

前言 Sodinokibi勒索病毒在国内首次被发现于2019年4月份&#xff0c;2019年5月24日首次在意大利被发现&#xff0c;在意大利被发现使用RDP攻击的方式进行传播感染&#xff0c;这款病毒被称为GandCrab勒索病毒的接班人&#xff0c;在短短几个月的时间内&#xff0c;已经在全球大…