js day5

复习模板字符串:
在输出语句里面
document.write(我今年${a}岁了)中间是反引号;里面是${变量};

复习基本类型
number String null undefined boolean
检测数据类型输出typedf 变量则可;
添加链接描述

复习样式变量table什么的边框,宽高;透明度,距离的padding :上下多少;左右;margin的距离;不设宽度,设置上下左右边距也行;
作业
在这里插入图片描述

<!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>.c1{text-align: center;}table,th,td{border: 1px solid #000;}table{border-collapse: collapse;/* 边框 */height: 80px;margin: 0 auto;}th{padding: 5px 20px;}</style>
</head>
<body><h1 class="c1">表格渲染</h1><script>let name = prompt('输入商品名称')let num = prompt('输入商品数量')let price = prompt('输入商品价格')let address = prompt('收货地址')let total =price*num//模板字符串document.write(`<table class="c1"><tr> <!-- tr是行,th是列 --><th>名字</th><th>价格</th><th>数量</th><th>总价</th><th>收货地址</th></tr><tr><td>小米</td><td>${price}</td><td>${num}</td><td>${total}</td><td>${address}</td></tr>
</table>`)</script>
</body>
</html>
  • 在输出里面直接做table这种就行;直接反引号标全场; 先看一个常见错误;变量没初始化,没声明

在这里插入图片描述

比如常量const他必须必须要初始化他不能不初始化;

判断一般报错
在这里插入图片描述

这个一看就是可能是变成字符串相加;或者不同类型相加,就报错了;有可能报错NAN;
在这里插入图片描述

字符串前面带个+号就可以转换为字符型了;


比较运算符提醒:以后比较就用全等别用==,我们还是要类型和值都一致;
在这里插入图片描述

过后的
if switch for 数组,先过;大家都一样,想搞难的排序算法啥的问ai吧,也就是for嵌套两if/switch

速看函数;为了项目;后端应该封装好方法了我调用应该就欧克
在这里插入图片描述

函数要返回一个值那就用return结束;一个return直接就是把函数解决到这就结束了,不会进行下一个语句了;
函数有返回值哈,直接把他给一个变量然后打印一下就行了,

在这里插入图片描述
匿名函数直接不命名function直接存,调用的时候用这个变量名就可以;

面向对象

妈呀这前面其实可能都用不上,跳对象了
对象就是一个类模板,一个结构体;里面就是属性和方法,属性就是基本值,方法就是
在这里插入图片描述
声明就这样声明,输出有好几种方法:
输出可以先直接输出到控制台

对对象增删改查

在这里插入图片描述
增加:
直接用对象.访问里面的东西或者一个位置变量这种;直接就是加进去了;
删除
delete 对象名.属性
改变
改值直接就是对象名字.属性=新值就完了
查询
直接对象名字.访问就行了;obj.name类似这种

如果属性名字很长
在这里插入图片描述
就用双引号括起来中间打杠就行,输出就变了
在这里插入图片描述

要用[]括起来输出;但是不用打点了;

在对象里面写方法就是
方法名字(自定义):function(){
}
调用直接在object.方法名就行
在这里插入图片描述

遍历对象
快速输出对象,就遍历他,对象没有下标没有长度 用for in 这个获取的下标是字符串没法用于数组,就适合用于对象 而且用于对象后,这里的k就是你的属性,obj[k]这个就是你的属性值;
在这里插入图片描述
记住k本身他就是一个字符串

数组对象
一个数组的类型里面有几个对象
遍历就正常遍历 let i i<array.length i++这种,然后输出,想输出到页面就得document但是他又默认是字符串,所以你for循环遍历一遍是表层是遍历的数组,那里面是你写的对象;但是想要访问对象的属性值, 你还需要再遍历一遍;将外循环遍历结果存到变量里面,再用强循环遍历对象,就能得到属性了;
在这里插入图片描述
类似这个,有几行遍历几次这个是5行
记得一定一定一定一定要循环的时候let i=0要初始化,不然渲染不出来!!!

在这里插入图片描述
渲染一个表格;
1.首先先建立一个表格,行列都得有;看要渲染那几行;再对应位置吧script写上;
2.先再script里面准备数据;准备好了才能渲染,把script里面的东西渲染到dom里面去
3.for循环遍历数组;然后直接写输出,输出根据循环来。

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

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

相关文章

SmolVLM2: The Smollest Video Model Ever(三)

这是对《SmolLM2: When Smol Goes Big — Data-Centric Training of a Small Language Model》的翻译阅读 摘要 虽然大语言模型在人工智能的许多应用中取得了突破&#xff0c;但其固有的大规模特性使得它们在计算上成本高昂&#xff0c;并且在资源受限的环境中部署具有挑战性。…

汽车软件开发常用的需求管理工具汇总

目录 往期推荐 DOORS&#xff08;IBM &#xff09; 行业应用企业&#xff1a; 应用背景&#xff1a; 主要特点&#xff1a; Polarion ALM&#xff08;Siemens&#xff09; 行业应用企业&#xff1a; 应用背景&#xff1a; 主要特点&#xff1a; Codebeamer ALM&#x…

爬虫工程师杂活工具人

30岁的年龄;这个年龄大家都是成年人;都是做父母的年龄了;你再工位上的心态会发生很大变化的; 爬虫工程师基本都是如此;社会最low的一帮连销售都做不了的;单子都开不出来的然后转行做爬虫工程师的;这样的人基本不太和社会接触; 你作为爬虫初级工程师就敲着键盘然后解析着html;…

如何使用Tomcat

1 简介 Tomcat是Apache 软件基金会&#xff08;Apache Software Foundation&#xff09;的Jakarta 项目中的一个核心项目&#xff0c;由Apache、Sun 和其他一些公司及个人共同开发而成。因为Tomcat 技术先进、性能稳定&#xff0c;而且免费&#xff0c;成为目前比较流行的Web 应…

【AI工具】FastGPT:开启高效智能问答新征程

前言 在人工智能飞速发展的当下&#xff0c;各类 AI 工具如雨后春笋般涌现。FastGPT 作为一款基于大语言模型&#xff08;LLM&#xff09;的知识图谱问答系统&#xff0c;凭借其强大的数据处理和模型调校能力&#xff0c;为用户带来了便捷的使用体验。今天&#xff0c;就让我们…

14. git remote

基本概述 git remote 的作用是&#xff1a;查看、添加、修改和删除与本地仓库关联的远程仓库。 基本用法 1.查看远程仓库 git remote # 显示所有关联的远程仓库&#xff08;名称&#xff09; git remote -v # 显示所有关联的远程仓库&a…

【spark-submit】--提交任务

Spark-submit spark-submit 是 Apache Spark 提供的用于提交 Spark 应用程序到集群的命令行工具。 基本语法 spark-submit [options] <app-jar> [app-arguments]常用参数说明 应用程序配置 --class <class-name>: 指定应用程序的主类&#xff08;对于 Java/Sc…

2025.4.10总结

今日记录&#xff1a;今天提了两个问题单&#xff0c;最近要关注一下产出了&#xff0c;上半年的考核如今还剩两个月了&#xff0c;然后发现一同入职的同事&#xff0c;有的人进步得很快&#xff0c;得向优秀得同事看齐了&#xff0c;不然几年过去&#xff0c;别人连升好几年&a…

SvelteKit 最新中文文档教程(18)—— 浅层路由和 Packaging

前言 Svelte&#xff0c;一个语法简洁、入门容易&#xff0c;面向未来的前端框架。 从 Svelte 诞生之初&#xff0c;就备受开发者的喜爱&#xff0c;根据统计&#xff0c;从 2019 年到 2024 年&#xff0c;连续 6 年一直是开发者最感兴趣的前端框架 No.1&#xff1a; Svelte …

Winform入门进阶企业级开发示例:http接口数据清洗转换、断线续传、mqtt数据传输实例详解(附代码资源下载)

场景 C#/Winform入门、进阶、强化、扩展、知识体系完善等知识点学习、性能优化、源码分析专栏分享: C#/Winform入门、进阶、强化、扩展、知识体系完善等知识点学习、性能优化、源码分析专栏分享_winform 强化学习-CSDN博客 如何将以上相关理论知识学以致用。下面针对Winform…

Python代码缩进统一规范

一、Python缩进的重要性:逻辑与可读性的桥梁 1. 语法规则的核心 Python与其他编程语言显著不同之处在于,它使用缩进来表示代码块的层次结构。不像C、Java等语言依靠大括号{}来明确函数体、循环体和条件语句的范围,Python完全依赖缩进来界定这些逻辑单元。例如,在一个if条…

asp.net core 项目发布到 IIS 服务器

目录 一、VS2022 发布 二、设置IIS服务 三、配置IIS管理器 &#xff08;一&#xff09;打开IIS管理器 &#xff08;二&#xff09;添加站台 &#xff08;三&#xff09;配置应用程式集区 四、安装ASP.NET Core Hosting Bundle 五、设定IIS的日志位置 六、测试 一、VS2…

spring mvc中不同服务调用类型(声明式(Feign)、基于模板(RestTemplate)、基于 SDK、消息队列、gRPC)对比详解

RestControllerAdvice 和 ControllerAdvice 对比详解 1. 基本概念 注解等效组合核心作用ControllerAdviceComponent RequestMapping&#xff08;隐式&#xff09;定义全局控制器增强类&#xff0c;处理跨控制器的异常、数据绑定或全局响应逻辑。RestControllerAdviceControll…

CVE-2025-29927 Next.js 中间件鉴权绕过漏洞

Next.js Next.js 是一个基于 React 的现代 Web 开发框架&#xff0c;用来构建高性能、可扩展的 Web 应用和网站。 CVE-2025-29927 Next.js 中间件鉴权绕过漏洞 CVE-2025-29927是Next.js框架中的一个授权绕过漏洞&#xff0c;允许攻击者通过特制的HTTP请求绕过在中间件中执行…

WP最主题专业的wordpress主题开发

WP最主题&#xff08;wpzui.com&#xff09; WP最主题是一个提供高品质WordPress主题的平台。它注重主题的设计和功能&#xff0c;旨在为用户提供美观且实用的主题选择。其主题通常具有良好的用户体验、丰富的自定义选项以及优化的性能&#xff0c;能够满足不同类型的网站搭建…

玩转代理 IP :实战爬虫案例

在现代互联网环境下&#xff0c;爬虫不仅是数据获取的利器&#xff0c;也成为应对网站反爬机制的技术博弈。而在这场博弈中&#xff0c;"代理 IP" 是核心武器之一。本文将以高匿名的代理ip为核心&#xff0c;结合 Python 实战、代理策略设计、高匿技巧与反封锁优化&a…

Vue 3 中 ref 与 reactive 的对比

Vue 3 中 ref 与 reactive 的对比 Vue 3 中 ref 与 reactive 的对比一、定义和基本使用refreactive 二、响应式原理refreactive 三、适用场景refreactive 四、注意事项refreactive Vue 3 中 ref 与 reactive 的对比 在 Vue 3 中&#xff0c;ref 和 reactive 都是用于创建响应式…

《Vue.js组件化开发实战:从安全纵深到性能跃迁》

开篇&#xff1a;组件化开发的工业革命 当全球500强企业的核心业务系统在12.12大促中经受每秒38万次请求冲击时&#xff0c;我们突然意识到&#xff1a;现代前端组件已不再是简单的UI积木&#xff0c;而是承载业务逻辑、安全防护、性能优化的纳米级作战单元。本文将从军工级系统…

从0到1的Python接口自动化学习路线

Python 是一门非常适合初学者且功能强大的编程语言,它在接口自动化测试领域具有广泛应用。 以下是一份针对 Python 与接口自动化测试的详细学习路线,帮助你从零开始学习并逐步掌握相关知识。 第一阶段:Python基础 目标:掌握 Python 基本语法和编程能力。 一、学习内容 1.…

HDCP(五)

HDCP 2.2 测试用例设计详解 基于HDCP 2.2 CTS v1.1规范及协议核心机制&#xff0c;以下从正常流程与异常场景两大方向拆解测试用例设计要点&#xff0c;覆盖认证、密钥管理、拓扑验证等关键环节&#xff1a; 1. 正常流程测试 1.1 单设备认证 • 测试目标&#xff1a;验证源设…