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.pswp.cn/news/900901.shtml
繁體地址,請注明出處:http://hk.pswp.cn/news/900901.shtml
英文地址,請注明出處:http://en.pswp.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;驗證源設…