JS入門第一節

来源:https://www.cnblogs.com/20200109-zwh/archive/2023/08/18/17639580.html
-Advertisement-
Play Games

![image](https://img2023.cnblogs.com/blog/2609621/202308/2609621-20230818091044358-21979402.png) ```html 點擊觸發頁面彈窗 ``` ```js alert('努力,奮鬥') ``` ![image ...


image

<!DOCTYPE>
<html>
<head>
    <!--註意兩個標簽之間不能有任何內容,否則會導致頁面失效-->
    <script src="my.js"></script>
</head>
<body>
    <!--行內JS-->
    <button onclick="alert('努力,奮鬥')">點擊觸發頁面彈窗</button>

    <!--內部JS一般放在body內部的末尾,因為會影響後面其他類型標簽的渲染-->
    <!--script 標簽是按照出現的位置執行的-->
    <script>
        alert('努力,奮鬥');
    </script>
</body>
</html>
<!--外部 js 文件-->
alert('努力,奮鬥')

image

<script>
	alert('你好 JS~')
	document.write('JavaScript 我來了!')
	console.log('它~會魔法吧~')
</script>

image

<script>
        let num = 20;
        let uname = '張三';
        console.log(`num = ${num}, uname = ${uname}`);
</script>

image

<script>
        let name;
        name = prompt('請輸入姓名:');
        document.write('您的姓名為: ' + name);
</script>

image

<script>
        let num1 = 10;
        let num2 = 20;
        let temp = num1;
        num1 = num2;
        num2 = temp;

        document.write(`num1 = ${num1}, num2 = ${num2}`);
</script>

image

<script>
        let uname, age, gender;
        uname = prompt('請輸入您的姓名:');
        age = prompt('請輸入您的年齡:');
        gender = prompt('請輸入您的性別:');

        document.write(`uname = ${uname}, age = ${age}, gender = ${gender}`);
</script>

image

<script>
        let week = [
            '星期一',
            '星期二',
            '星期三',
            '星期四',
            '星期五',
            '星期六',
            '星期日',
        ]

        document.write(week[6]);
</script>

image

<script>
        const pi = 3.14;
        let area;
        let r = prompt('請輸入半徑');
        are = pi * r * r;
        document.write('圓的面積為:'+area);
</script>

image

<script>
        let uname, age;
        uname = prompt('請您輸入姓名');
        age = prompt('請您輸入年齡');
        document.write(`大家好,我叫${uname},今年${age}歲了`);
</script>

<script>
        let num1, num2;
        num1 = prompt('請輸入第一個數');
        num2 = prompt('請輸入第二個數');
        document.write(`sum = ${Number(num1) + parseInt(num2)}`);
</script>

<script>
        let price, num, address;
        price = prompt('請輸入商品價格:');
        num = prompt('請輸入商品數量:');
        address = prompt('請輸入收貨地址:');

        document.write(`price = ${price}, num = ${num}, address = ${address}`);
</script>

<!DOCTYPE>
<html>
<head>
    <style>
        h2 {
          text-align: center;
        }
    
        table {
          /* 合併相鄰邊框 */
          border-collapse: collapse;
          height: 80px;
          margin: 0 auto;
          text-align: center;
        }
    
        th {
          padding: 5px 30px;
        }
    
        table,
        th,
        td {
          border: 1px solid #000;
        }
      </style>
</head>
<body>
    
    

    <h2>訂單確認</h2>
    <script>     
        let price, num, address;  
        price = prompt('請輸入商品價格:');
        num = prompt('請輸入商品數量:');
        address = prompt('請輸入收貨地址:');
        let sum = price * num;

        document.write(`
            
            <table>
                <tr>
                    <th>商品名稱</th>
                    <th>商品價格</th>
                    <th>商品數量</th>
                    <th>總價</th>
                    <th>收貨地址</th>
                </tr>
                <tr>                   
                    <td>小米手機青春PLUS</td>
                    <td>${price}元</td>
                    <td>${num}</td>
                    <td>${sum}元</td>
                    <td>${address}</td>
                </tr>
            </table>
        `);
    </script>  
</body>
</html>


您的分享是我們最大的動力!

-Advertisement-
Play Games
更多相關文章
  • ![](https://img2023.cnblogs.com/blog/3076680/202308/3076680-20230816164601035-688425072.png) # 1. 變化就是軟體的特性 ## 1.1. 變化保證天天有,存活保障無處尋 ## 1.2. 非每一款軟體每天都需 ...
  • 1. 概述 對於分散式系統,人們首先對現實中的分散式系統進行高層抽象,然後做出各種假設,發展了諸如CAP, FLP 等理論,提出了很多一致性模型,Paxos 是其中最璀璨的明珠。我們對分散式系統的時序,複製模式,一致性等基礎理論特別關註。 在共識演算法的基礎上衍生了選舉演算法,並且為分散式事務提供了部分 ...
  • ##一、前言 **工廠模式常見的詞:簡單工廠、工廠方法、抽象工廠。簡單工廠不屬於23種經典設計模式,但通常將它作為學習其他工廠模式的基礎。** ##二、簡單工廠 ###1、定義 **定義一個工廠類,它可以根據參數的不同返回不同類型的實例,被創建的實例通常都具有共同的父類。由於簡單的工廠模式中用於創建 ...
  • 背景: PyAV是一個用於音頻和視頻處理的Python庫,它提供了一個簡單而強大的介面,用於解碼、編碼、處理和分析各種音頻和視頻格式。PyAV基於FFmpeg多媒體框架,它本質上是FFmpeg 的Python綁定,因此可以利用FFmpeg的功能來處理各種多媒體任務。 基本概念: 編解碼器(Codec ...
  • 本文通過設計演講比賽流程管理系統,全面介紹了使用C++面向對象編程思想開發項目應用的過程,涵蓋了需求分析、系統架構設計、類的提取,以及採用多種STL容器配合演算法的具體實現。文中詳細展示了構建選手類、管理類,設計菜單界面與用戶交互、實現兩輪比賽流程的抽簽、評分模塊,並能夠完成記錄文件的讀寫與管理 ...
  • **原文鏈接:** [Go 語言中排序的 3 種方法](https://mp.weixin.qq.com/s/RyVc_JZJi_pTT_51mEHYiw) 在寫代碼過程中,排序是經常會遇到的需求,本文會介紹三種常用的方法。 廢話不多說,下麵正文開始。 ## 使用標準庫 根據場景直接使用標準庫中的方 ...
  • 本文通過簡單的示例代碼和說明,讓讀者能夠瞭解微服務如何集成redis 之前的教程 https://www.cnblogs.com/leafstar/p/17638933.html 由於redis的安裝網上教程很多,再次不再贅述,現在預設你已經安裝好了redis 1.在需要redis的微服務下麵添加下 ...
  • 配置Redis哨兵集群時日誌顯示+sdown slave的問題 一、配置及其環境描述(問題產生的原因是因為Redis複製中主節點對從節點的ip配置錯誤,從而導致哨兵無法識別從節點,進而無法進行故障轉移) 1.操作系統:Linux 虛擬機:VMware Workstation 16 Pro 、WSL ...
一周排行
    -Advertisement-
    Play Games
  • 移動開發(一):使用.NET MAUI開發第一個安卓APP 對於工作多年的C#程式員來說,近來想嘗試開發一款安卓APP,考慮了很久最終選擇使用.NET MAUI這個微軟官方的框架來嘗試體驗開發安卓APP,畢竟是使用Visual Studio開發工具,使用起來也比較的順手,結合微軟官方的教程進行了安卓 ...
  • 前言 QuestPDF 是一個開源 .NET 庫,用於生成 PDF 文檔。使用了C# Fluent API方式可簡化開發、減少錯誤並提高工作效率。利用它可以輕鬆生成 PDF 報告、發票、導出文件等。 項目介紹 QuestPDF 是一個革命性的開源 .NET 庫,它徹底改變了我們生成 PDF 文檔的方 ...
  • 項目地址 項目後端地址: https://github.com/ZyPLJ/ZYTteeHole 項目前端頁面地址: ZyPLJ/TreeHoleVue (github.com) https://github.com/ZyPLJ/TreeHoleVue 目前項目測試訪問地址: http://tree ...
  • 話不多說,直接開乾 一.下載 1.官方鏈接下載: https://www.microsoft.com/zh-cn/sql-server/sql-server-downloads 2.在下載目錄中找到下麵這個小的安裝包 SQL2022-SSEI-Dev.exe,運行開始下載SQL server; 二. ...
  • 前言 隨著物聯網(IoT)技術的迅猛發展,MQTT(消息隊列遙測傳輸)協議憑藉其輕量級和高效性,已成為眾多物聯網應用的首選通信標準。 MQTTnet 作為一個高性能的 .NET 開源庫,為 .NET 平臺上的 MQTT 客戶端與伺服器開發提供了強大的支持。 本文將全面介紹 MQTTnet 的核心功能 ...
  • Serilog支持多種接收器用於日誌存儲,增強器用於添加屬性,LogContext管理動態屬性,支持多種輸出格式包括純文本、JSON及ExpressionTemplate。還提供了自定義格式化選項,適用於不同需求。 ...
  • 目錄簡介獲取 HTML 文檔解析 HTML 文檔測試參考文章 簡介 動態內容網站使用 JavaScript 腳本動態檢索和渲染數據,爬取信息時需要模擬瀏覽器行為,否則獲取到的源碼基本是空的。 本文使用的爬取步驟如下: 使用 Selenium 獲取渲染後的 HTML 文檔 使用 HtmlAgility ...
  • 1.前言 什麼是熱更新 游戲或者軟體更新時,無需重新下載客戶端進行安裝,而是在應用程式啟動的情況下,在內部進行資源或者代碼更新 Unity目前常用熱更新解決方案 HybridCLR,Xlua,ILRuntime等 Unity目前常用資源管理解決方案 AssetBundles,Addressable, ...
  • 本文章主要是在C# ASP.NET Core Web API框架實現向手機發送驗證碼簡訊功能。這裡我選擇是一個互億無線簡訊驗證碼平臺,其實像阿裡雲,騰訊雲上面也可以。 首先我們先去 互億無線 https://www.ihuyi.com/api/sms.html 去註冊一個賬號 註冊完成賬號後,它會送 ...
  • 通過以下方式可以高效,並保證數據同步的可靠性 1.API設計 使用RESTful設計,確保API端點明確,並使用適當的HTTP方法(如POST用於創建,PUT用於更新)。 設計清晰的請求和響應模型,以確保客戶端能夠理解預期格式。 2.數據驗證 在伺服器端進行嚴格的數據驗證,確保接收到的數據符合預期格 ...