JavaScript基础part2（完结）

2024-09-06 06:36
文章标签 java 基础 script part2 完结

本文主要是介绍JavaScript基础part2（完结），希望对大家解决编程问题提供一定的参考价值，需要的开发者们随着小编来一起学习吧！

JavaScript基础

函数

语法：

function 函数名(形参表){代码}

代码中加return语句则可以返回值，默认返回值为undefined

两个相同的函数，后面会覆盖前面

命名规则：

前缀为动词

传参注意事项

  1. 实参个数 > 形参个数 ==> 没用上的实参被忽略
  2. 实参个数 < 形参个数 ==> 没赋予值得形参为undefined

作用域

全局变量在函数体外定义
局部变量在函数体中定义

访问原则：

有命名冲突，先用局部变量

匿名函数

没有函数名的函数，如何调用

  1. 函数表达式 let fn = function(){}

  2. 立即执行 (function(){})(); 防止变量污染

    多个要用分号隔开，前后都要

案例：

函数传参为数组名

let arr = [1, 2, 3, 4]function calArr(a) {let all = 0for (let i = 0; i < a.length; i++) {all += a[i]}document.write(all)}calArr(arr)

局部与全局的区别

function f1() {let num = 123function f2() {console.log(num)}}f2()let num = 456f1()

匿名函数

 //1.函数表达式调用let fn = function () { document.write('hello') }fn();//2.立即执行(function () { document.write('byebye') })();

转换时间

let time = +(prompt('请输入秒数'))//1.小时let hour = parseInt(time / 3600)time -= hour * 3600if (hour < 10) {document.write(`0${hour}h`)} else {document.write(`${hour}h`)}//2.分钟let minute = parseInt(time / 60)time -= minute * 60if (minute < 10) {document.write(`0${minute}m`)} else {document.write(`${minute}m`)}//3.秒数let sec = timeif (sec < 10) {document.write(`0${sec}s`)} else {document.write(`${sec}s`)}

对象

无序的数据集合 ==> 用来描述某个对象：静态特征（属性）和动态行为（方法）

声明语法

let 对象名 = {} 或 let 对象名 = new object()

属性书写语法

uname : '猪猪侠' ,

age : 18

若属性名中有特殊符号，用引号包住

方法书写

方法名 : function(形参表) {代码} ==若后面还有方法需要加,

有特殊符号也可用引号包起

方法调用

对象名.方法名

增删改查

增

对象名.新属性 = 属性值

删

delete 对象名.属性名 仅作了解

改

对象名.已有属性名 = 新属性值

查

两种方法

  1. 对象名.属性名
  2. 对象名['属性名']

遍历对象

可以用来遍历数组，但不推荐

书写语法

for(let k in 对象名){console.log(对象名[k])}

  • k代表的是属性名，可以用其他字母代替，但最好是k 或key

经验

script可以写在body标签的中部，可以更好地进行循环操作

内置对象

JavaScript内部提供的对象 ==> 给开发者调用

如

  • document.write()
  • console.log()

Math中提供了一系列做数学操作的运算方法

  • random 0~1的随机数，包含0但不包含1
  • ceil 向上取整
  • floor 向下取整
  • max 找最大
  • min 找最小
  • pow 幂运算
  • abs 绝对值

实际应用

N ~ M 之间的随机数

Math.floor(Math.random()*(M - N + 1) + N)

案例

对象声明

let goods = {name: '小米10 青春版',number: '100012816024',weight: '0.05kg',address: '中国大陆'}document.write(goods.name)document.write('</br>')document.write(goods.number)document.write('</br>')document.write(goods.weight)document.write('</br>')document.write(goods.address)document.write('</br>')

对象的增和改

 let goods = {name: '小米10 青春版',number: '100012816024',weight: '0.05kg',address: '中国大陆'}goods.name = '小米10 PLUS'goods.color = 'pink'document.write(goods)

对象的方法调用

let player = {dance: function () {document.write('dance')document.write('</br>')},song: function () {document.write('sing')document.write('</br>')}}//对象方法调用player.dance()player.song()

遍历对象数组

let students = [{ name: '小明', age: 18, gender: '男', hometown: '河北省' },{ name: '小红', age: 19, gender: '女', hometown: '河南省' },{ name: '小刚', age: 17, gender: '男', hometown: '山西省' },{ name: '小丽', age: 18, gender: '女', hometown: '山东省' }]//遍历对象数组for (let i = 0; i < students.length; i++) {for (let k in students[i]) {console.log(students[i][k])}}

数组对象渲染生成表格

<!DOCTYPE html>
<html lang="en"><head><meta charset="UTF-8"><meta name="viewport" content="width=device-width, initial-scale=1.0"><title>Document</title><style>table {width: 600px;text-align: center;}table,th,td {border: 1px solid #ccc;border-collapse: collapse;}caption {font-size: 18px;margin-bottom: 10px;font-weight: 700;}tr {height: 40px;cursor: pointer;}table thead {background-color: #ddd;}table tr:not(。thead):hover {background-color: #eee;}</style>
</head><body><script>let students = [{ name: '小明', age: 18, gender: '男', hometown: '河北省' },{ name: '小红', age: 19, gender: '女', hometown: '河南省' },{ name: '小刚', age: 17, gender: '男', hometown: '山西省' },{ name: '小丽', age: 18, gender: '女', hometown: '山东省' }]document.write(`<table><caption>学生列表</caption><thead><tr class = "thead"><td>序号</td><td>姓名</td><td>年龄</td><td>性别</td><td>家乡</td></tr></thead><tbody>`)for (let i = 0; i < students.length; i++) {document.write(`<tr>`)document.write(`<td>${i + 1}</td>`)for (let k in students[i]) {document.write(`<td>${students[i][k]}</td>`)}document.write(`</tr>`)}document.write(`</tbody>`)</script>
</body></html>

在这里插入图片描述

随机点名案例

 let nameArr = ['赵云', '黄忠', '关羽', '张飞', '马超', '刘备', '曹操']let n = Math.floor(Math.random() * (6 - 0) + 0)document.write(nameArr[n])nameArr.splice(n, 1)document.write(`</br>`)document.write(nameArr)

在这里插入图片描述

猜数字

 let n = Math.floor(Math.random() * (10 - 1) + 1)let num = +(prompt('请输入你要猜的数字'))while (n !== num) {num = +(prompt('猜错了，继续猜'))}alert('终于猜对了老弟')

综合案例

<!DOCTYPE html>
<html lang="en"><head><meta charset="UTF-8"><meta name="viewport" content="width=device-width, initial-scale=1.0"><link rel="stylesheet" href="css/style.css"><title>Document</title>
</head><body><!-- 4. box核心内容区域开始 --><div class="box w"><div class="box-hd"><h3>精品推荐</h3><a href="#">查看全部</a></div><div class="box-bd"><ul class="clearfix"><script>let data = [{src: 'images/course01.png',title: 'Think PHP 5.0 博客系统实战项目演练',num: 1125},{src: 'images/course02.png',title: 'Android 网络动态图片加载实战',num: 357},{src: 'images/course03.png',title: 'Angular2 大前端商城实战项目演练',num: 22250},{src: 'images/course04.png',title: 'Android APP 实战项目演练',num: 389},{src: 'images/course05.png',title: 'UGUI 源码深度分析案例',num: 124},{src: 'images/course06.png',title: 'Kami2首页界面切换效果实战演练',num: 432},{src: 'images/course07.png',title: 'UNITY 从入门到精通实战案例',num: 888},{src: 'images/course08.png',title: 'Cocos 深度学习你不会错过的实战',num: 590},]for (let i = 0; i < data.length; i++) {document.write(`<li><a href="#"><img src=${data[i].src} alt=""><h4>${data[i].title}}</h4><div class="info"><span>高级</span> • <span>${data[i].num}</span>人在学习</div></a></li>`)}</script></ul></div></div>
</body></html>

在这里插入图片描述

注意

代码执行顺序

按照编写顺序，但alert和prompt优先，先于页面渲染执行

数据类型在内存中的情况简单比喻

简单的数据类型将值放在栈空间中，而复杂的数据类型将数据地址放在栈空间中，然后将一系列的值放在堆空间中

思维导图
在这里插入图片描述

这篇关于JavaScript基础part2（完结）的文章就介绍到这儿，希望我们推荐的文章对编程师们有所帮助！


http://www.chinasem.cn/article/1141275。

相关文章

Java实现字节字符转bcd编码

Java实现字节字符转bcd编码

《Java实现字节字符转bcd编码》BCD是一种将十进制数字编码为二进制的表示方式,常用于数字显示和存储,本文将介绍如何在Java中实现字节字符转BCD码的过程,需要的小伙伴可以了解下... 目录前言BCD码是什么Java实现字节转bcd编码方法补充总结前言BCD码（Binary-Coded Decima
阅读更多...
SpringBoot全局域名替换的实现

SpringBoot全局域名替换的实现

《SpringBoot全局域名替换的实现》本文主要介绍了SpringBoot全局域名替换的实现,文中通过示例代码介绍的非常详细,对大家的学习或者工作具有一定的参考学习价值,需要的朋友们下面随着小编来一... 目录 项目结构⚙️ 配置文件application.yml️ 配置类AppProperties.Ja
阅读更多...
Java使用Javassist动态生成HelloWorld类

Java使用Javassist动态生成HelloWorld类

《Java使用Javassist动态生成HelloWorld类》Javassist是一个非常强大的字节码操作和定义库,它允许开发者在运行时创建新的类或者修改现有的类,本文将简单介绍如何使用Javass... 目录1. Javassist简介2. 环境准备3. 动态生成HelloWorld类3.1 创建CtC
阅读更多...
JavaScript中的高级调试方法全攻略指南

JavaScript中的高级调试方法全攻略指南

《JavaScript中的高级调试方法全攻略指南》什么是高级JavaScript调试技巧,它比console.log有何优势,如何使用断点调试定位问题,通过本文,我们将深入解答这些问题,带您从理论到实... 目录观点与案例结合观点1观点2观点3观点4观点5高级调试技巧详解实战案例断点调试：定位变量错误性能分
阅读更多...
Java实现将HTML文件与字符串转换为图片

Java实现将HTML文件与字符串转换为图片

《Java实现将HTML文件与字符串转换为图片》在Java开发中,我们经常会遇到将HTML内容转换为图片的需求,本文小编就来和大家详细讲讲如何使用FreeSpire.DocforJava库来实现这一功... 目录前言核心实现：html 转图片完整代码场景 1：转换本地 HTML 文件为图片场景 2：转换 H
阅读更多...
Java使用jar命令配置服务器端口的完整指南

Java使用jar命令配置服务器端口的完整指南

《Java使用jar命令配置服务器端口的完整指南》本文将详细介绍如何使用java-jar命令启动应用,并重点讲解如何配置服务器端口,同时提供一个实用的Web工具来简化这一过程,希望对大家有所帮助... 目录1. Java Jar文件简介1.1 什么是Jar文件1.2 创建可执行Jar文件2. 使用java
阅读更多...
SpringBoot实现不同接口指定上传文件大小的具体步骤

SpringBoot实现不同接口指定上传文件大小的具体步骤

《SpringBoot实现不同接口指定上传文件大小的具体步骤》：本文主要介绍在SpringBoot中通过自定义注解、AOP拦截和配置文件实现不同接口上传文件大小限制的方法,强调需设置全局阈值远大于... 目录一  springboot实现不同接口指定文件大小1.1 思路说明1.2 工程启动说明二 具体实施2
阅读更多...
Java实现在Word文档中添加文本水印和图片水印的操作指南

Java实现在Word文档中添加文本水印和图片水印的操作指南

《Java实现在Word文档中添加文本水印和图片水印的操作指南》在当今数字时代,文档的自动化处理与安全防护变得尤为重要,无论是为了保护版权、推广品牌,还是为了在文档中加入特定的标识,为Word文档添加... 目录引言Spire.Doc for Java：高效Word文档处理的利器代码实战：使用Java为Wo
阅读更多...
SpringBoot日志级别与日志分组详解

SpringBoot日志级别与日志分组详解

《SpringBoot日志级别与日志分组详解》文章介绍了日志级别（ALL至OFF）及其作用,说明SpringBoot默认日志级别为INFO,可通过application.properties调整全局或... 目录日志级别1、级别内容2、调整日志级别调整默认日志级别调整指定类的日志级别项目开发过程中，利用日志
阅读更多...
Java中的抽象类与abstract 关键字使用详解

Java中的抽象类与abstract 关键字使用详解

《Java中的抽象类与abstract关键字使用详解》：本文主要介绍Java中的抽象类与abstract关键字使用详解,本文通过实例代码给大家介绍的非常详细,感兴趣的朋友跟随小编一起看看吧... 目录一、抽象类的概念二、使用 abstract2.1 修饰类 => 抽象类2.2 修饰方法 => 抽象方法，没有
阅读更多...

Copyright China编程 23002807@qq.com

沪ICP备2023033072号-2