網頁制作12-html,css,javascript初認識のJavascipt腳本基礎

 一、JavaScript的三種基本使用方法:body|head|外部

網頁效果:

運行代碼:

.html

<!doctype html>
<html>
<head>
<meta charset="utf-8">
<title>無標題文檔</title><script>
function n1(){document.getElementById("ama01").innerHTML="NO.3這是head中的 JavaScript 函數";
}
</script>
</head><body><script>document.write("NO.1 HELLO WORLD")//Document要小寫</script><p>NO.2  這是body中的JavaScript函數</p><button onclick="myFunction()">NO.2 Click me</button><p id="ama"></p>
<script>
function myFunction(){var x="";var time=new Date().getHours();if (time<20){x="Good day";}document.getElementById("ama").innerHTML=x;
}</script><p id="ama01"></p><button type="button" onclick="n1()">NO.3 Click me</button><p>NO.4 n4保存在名為"n4.js"的外部文件中</p><p id="ama04"></p><button type="button" onclick="n4()"> NO.4 Click me</button><script src="n4Script.js"></script>
</body>
</html>

.n4Script.js

// JavaScript Document
function n4()
{document.getElementById("ama04").innerHTML="NO.4 this is my 外部JavaScript";
}

二、 JavaScript的基本語法

1、寫法

1)代碼

document.getElementById("ama01").innerHTML=" The first one"; document.getElementById("ama02").innerHTML=" The second one";

2)代碼塊

function myFunction()
{
    document.getElementById("ama01").innerHTML="  The first one";
    document.getElementById("ama02").innerHTML=" The second one";
}

3)多余的空格會忽略 

4)反斜杠對代碼行進行換行

5)//單行注釋,/*多行注釋*/

6)賦值:文本類型用雙引號,數字類型不加雙引號

2、輸出顯示語句

1)window.alert() 彈出警告框。
<body><h1>window.alert() 彈出警告框</h1>
<script>
window.alert("window.alert()");
</script>
</body>

2)document.write() 將內容寫到 HTML 文檔中。

3)innerHTML 寫入到 HTML 元素。

上文代碼已展示,此處略過……

4)console.log() 寫入到瀏覽器的控制臺。

</script>
<script>
a = 1;
b = 1;
c = a + b;
console.log(c);
</script>

1、數據類型(用typeof,可以判斷數據類型)

1)值類型(基本類型)

a.字符串(String):用在單引號或者雙引號

b.數字(Number):數字number:整數,小數,科學計數(123e5)

c.布爾(Boolean):兩種狀態true or false

d.空(Null)

e.未定義(Undefined)

f.Symbol:是 ES6 引入了一種新的原始數據類型,表示獨一無二的值。

2)引用數據類型(對象類型)

對象(Object):定義一個對象{a:"a1",b:"b1",c:300}

數組(Array):定義一個數組[1,2,3,9]

函數(Function):定義一個函數,前面已舉例,略過

正則(RegExp):正則表達式通常用于檢查和替代 : search() 和 replace();

日期(Date):當前日期時間

<script>var a="hellow world";//字符串var b=1;//數字var c=true;//布爾型let d=null;//空值var e;//未定義var f=Symbol('unique');var alph=new Array("a","b","c");//創建數組;var g={a:"a1",b:"b1", c:5566};//創建對象;var h=Date();var str="OH,happy new year";var j=str.search(/happy/i);//正則表達式搜索a1=typeof a;b1=typeof b;c1=typeof c;d1=Object.is(d,null);e1=typeof e;f1=typeof f;document.write(a1+"</br>",b1+"<br>",c1+"<br>",d1+"<br>",e1+"<br>",f1+"<br>",alph+"<br>",g.c+"<br>",h+"<br>",j+"<br>");</script>

2、常量

  1. )整型常量:可以使用16進制八進制和十進制表示其值

  2. )實型常量:由整數部分加小數部分表示

  3. )布爾值:

  4. )字符型常量:用單引號或者雙引號或起來的一個或幾個字符

  5. )空值:null

3、變量:它主要作為數據的存儲容器,最好對其進行聲明

命名所注意的點:

  1. )只能由字母數字和下劃線組成, Besides不能有空格或其他符號

  2. )不能使用JavaScript中的關鍵字

    NUM.grammer DESCRIPTION
    1boolean布爾值
    2break退出當前循環或標簽語句
    3byte字節
    4case在switch語句中定義一個分支。
    5catch定義在try語句塊執行時,一旦發生錯誤,就執行的代碼塊。
    6char字符類型
    7class
    8const聲明一個只讀的常量。
    9continue跳過當前循環的剩余部分,立即進行下一次循環。
    10debugger設置斷點,方便調試代碼
    11default在switch語句中定義默認分支。當條件不存在時使用該項
    12delete刪除了一個屬性
    13do與while一起使用,創建一個至少執行一次的循環。
    14double雙精度浮點型
    15else與if語句一起使用,定義一個條件為假時執行的代碼塊。
    16enum枚舉
    17export可以輸出一個模塊可以是變量或者方法
    18extends用來創建一個普通類或者內建對象的子類
    19final修飾用的關鍵詞
    20finallytry-catch-finally 語句是一種用于處理異常的結構,finally 關鍵字可以用于 finally 塊中,用于定義一些必須執行的代碼
    21float解析一個字符串并返回一個浮點值
    22for創建一個循環,包含初始化表達式、條件表達式和增量表達式。
    23function函數
    24goto無條件轉移語句
    25if根據指定的條件執行代碼塊
    26implements實現相應接口的方法
    27import導入另一個模塊
    28in判斷某個屬性是否屬于某個對象。
    29instanceof判斷一個對象是否是某個類的實例。
    30int整型
    31interface將一個數值向下取整
    32let聲明一個塊作用域的局部變量。
    33long長整形數據
    34nativeNative關鍵字用于聲明一個方法是由本地代碼(通常是C或C++)實現的
    35new創建一個新對象
    36null空值
    37package屬性是Java解釋器所知道的所有包的根
    38private@ Private標簽標記標識符為私有
    39protected創建使用程序函數
    40public全局變量
    41ractReact 是一個用于構建用戶界面的 JAVASCRIPT 庫。 React 主要用于構建 UI,很多人認為 React 是 MVC 中的 V(視圖)
    42return從函數返回一個值。
    43short短整型
    44static靜態變量和類變量
    45super終于調用父類
    46switch根據不同的條件執行不同的代碼塊。
    47synchronized實例對象鎖
    48this 指向調用該方法的對象。
    49throw拋出一個異常。
    50throws將異常拋給調用者可以使程序能夠繼續執行下去
    51transient一種持久化對象實例的機制
    52try定義一個測試塊,以測試代碼塊的錯誤
    53typeof檢測變量的數據類型。
    54var賦值一個變量
    55void執行一個表達式并返回undefined。空 / 聲明沒有返回值
    56volatile作為指令關鍵字確保本條指令不會因編譯器的優化而,且要求每次直接讀值
    57while當循環
    58with設置代碼在特定對象中的作用域
    59FALSE不符合
    60TRUE符合
  3. )最好把變量意義與其代表意思對應

本文來自互聯網用戶投稿,該文觀點僅代表作者本人,不代表本站立場。本站僅提供信息存儲空間服務,不擁有所有權,不承擔相關法律責任。
如若轉載,請注明出處:http://www.pswp.cn/bicheng/73580.shtml
繁體地址,請注明出處:http://hk.pswp.cn/bicheng/73580.shtml
英文地址,請注明出處:http://en.pswp.cn/bicheng/73580.shtml

如若內容造成侵權/違法違規/事實不符,請聯系多彩編程網進行投訴反饋email:809451989@qq.com,一經查實,立即刪除!

相關文章

全面對比分析:HDMI、DP、DVI、VGA、Type-C、SDI視頻接口特點詳解

在當今的多媒體時代&#xff0c;視頻接口的選擇對于設備連接和顯示效果至關重要。不同的視頻接口在傳輸質量、兼容性、帶寬等方面各有優劣。本文將全面對比分析常用的視頻接口HDMI、DP、DVI、VGA、Type-C、SDI&#xff0c;幫助讀者更好地理解它們的特點和適用場景。 一、HDMI&…

麒麟服務器操作系統PostgreSQL環境部署手冊

軟件簡介 PostgreSQL 是一個免費的對象-關系數據庫服務器(ORDBMS),在靈活的BSD許可證下發行。 ORDBMS(對象關系數據庫系統)是面向對象技術與傳統的關系數據庫相結合的產物,查詢處理是 ORDBMS 的重要組成部分,它的性能優劣將直接影響到DBMS 的性能。 軟件環境 操作系統…

【藍橋杯速成】| 4.遞歸

遞歸 題目一&#xff1a;最大公約數 問題描述 1979. 找出數組的最大公約數 - 力扣&#xff08;LeetCode&#xff09; 給你一個整數數組 nums &#xff0c;返回數組中最大數和最小數的 最大公約數 。 兩個數的 最大公約數 是能夠被兩個數整除的最大正整數。 解題步驟 需要…

當大模型訓練遇上“雙向飆車”:DeepSeek開源周 DualPipe解析指南

前言 在大模型訓練中&#xff0c;傳統流水線并行因單向數據流和通信延遲的限制&#xff0c;導致GPU利用率不足60%&#xff0c;成為算力瓶頸。DeepSeek團隊提出的DualPipe雙向流水線架構&#xff0c;通過雙向計算流與計算-通信重疊的創新設計&#xff0c;將前向與反向傳播拆解為…

藍橋杯好題推薦---前綴和

&#x1f308;個人主頁&#xff1a; 羽晨同學-CSDN博客 &#x1f4ab;個人格言:“成為自己未來的主人~” 題目鏈接 【模板】前綴和https://ac.nowcoder.com/acm/problem/226282 解題思路 這種題目是要求我們找到一個數組中從l到r的元素的和&#xff0c;查詢Q次&#xff0c;…

Nginx快速上手

什么是nginx Nginx 是一款開源的高性能 HTTP 和反向代理服務器&#xff0c;同時也提供了 IMAP/POP3/SMTP 代理功能。它由俄羅斯程序員 Igor Sysoev 于2004年首次發布&#xff0c;最初設計目的是為了解決 C10k 問題&#xff0c;即如何讓單臺服務器同時處理1萬個并發連接的問題。…

【C++】:STL詳解 —— 布隆過濾器

目錄 布隆過濾器的概念 布隆過濾器的優點 布隆過濾器的缺點 布隆過濾器使用場景 布隆過濾器的實現 布隆過濾器的概念 布隆過濾器&#xff08;Bloom Filter&#xff09; 是一種空間效率極高的概率型數據結構&#xff0c;用于快速判斷一個元素是否屬于某個集合。其核心特點…

從Instagram到畫廊:社交平臺如何改變藝術家的展示方式

從Instagram到畫廊&#xff1a;社交平臺如何改變藝術家的展示方式 在數字時代&#xff0c;藝術家的展示方式正在經歷一場革命。社交平臺&#xff0c;尤其是Instagram&#xff0c;已經成為藝術家展示作品、與觀眾互動和建立品牌的重要渠道。本文將探討社交平臺如何改變藝術家的…

MySQL(事物上)

目錄 示例&#xff1a; 一 引入事物 1. 概念 2. 事物的4大特性 3. 為什么要有事物&#xff1f; 二 事物操作 1. 查看存儲引擎支持的事物 2. 事物的提交方式 2.1 查看事物的默認提交方式 2.2 設置事物的默認提交方式 2.3 查看事物的全局隔離級別 2.4 驗證事物的回滾…

Spring Boot 實現多數據源配置

一、配置流程 在 Spring Boot 中實現多數據源配置通常用于需要連接多個數據庫的場景。主要有以下幾個步驟&#xff1a; 配置多個數據源的連接信息。定義多個數據源的 Bean。為每個數據源配置MyBatis的SqlSessionFactory和事務管理器。為每個數據源定義Mapper接口和Mapper XML…

p5.js:繪制各種內置的幾何體,能旋轉

向 豆包 提問&#xff1a;請編寫 p5.js 示例&#xff0c; 繪制各種內置的幾何體&#xff0c;能讓這些幾何體緩慢旋轉。 cd p5-demo copy .\node_modules\p5\lib\p5.min.js . 此代碼創建了一個包含多個內置幾何體的 3D 場景&#xff0c;每個幾何體都有不同的顏色和位置。運行代…

結構體定義與應用

引言 到今天為止,c語言的基礎操作和基礎數據類型,就都已經結束了,大家都知道,如果要實現復雜的功能,大家都可以通過函數封裝調用,那么如果要實現基礎數據類型的封裝,該怎么辦呢?答案就是結構體。 在C語言編程中,結構體(struct)是非常重要的一個概念,它為程序員提供…

MindGYM:一個用于增強視覺-語言模型推理能力的合成數據集框架,通過生成自挑戰問題來提升模型的多跳推理能力。

2025-03-13&#xff0c;由中山大學和阿里巴巴集團的研究團隊提出了MindGYM框架&#xff0c;通過合成自挑戰問題來增強視覺-語言模型&#xff08;VLMs&#xff09;的推理能力。MindGYM框架通過生成多跳推理問題和結構化課程訓練&#xff0c;顯著提升了模型在推理深度和廣度上的表…

R語言零基礎系列教程-01-R語言初識與學習路線

代碼、講義、軟件回復【R語言01】獲取。 R語言初識 R是一個開放的統計編程環境&#xff0c;是一門用于統計計算和作圖的語言。“一切皆是對象”&#xff0c;數據、函數、運算符、環境等等都是對象。易學&#xff0c;代碼像偽代碼一樣簡潔&#xff0c;可讀性高強大的統計和可視…

PythonWeb開發框架—Flask-APScheduler超詳細使用講解

1.定時任務的兩種實現方式 1.1 用scheduler.task裝飾任務 安裝插件&#xff1a; pip install Flask-APScheduler pip install apscheduler 腳本實現&#xff1a; ###app.py##導入依賴庫 from flask import Flask import datetime import config from flask_apscheduler i…

python_巨潮年報pdf下載

目錄 前置&#xff1a; 步驟&#xff1a; step one: pip安裝必要包&#xff0c;獲取年報url列表 step two: 將查看url列表轉換為pdf url step three: 多進程下載pdf 前置&#xff1a; 1 了解一些股票的基本面需要看歷年年報&#xff0c;在巨潮一個個下載比較費時間&…

從0到1構建AI深度學習視頻分析系統--基于YOLO 目標檢測的動作序列檢查系統:(2)消息隊列與消息中間件

文章大綱 原始視頻隊列Python 內存視頻緩存優化方案(4GB 以內)一、核心參數設計二、內存管理實現三、性能優化策略四、內存占用驗證五、高級優化技巧六、部署建議檢測結果隊列YOLO檢測結果隊列技術方案一、技術選型矩陣二、核心實現代碼三、性能優化策略四、可視化方案對比五…

React Native 如何使用 Expo 快速開發?

React Native是當下熱門的跨平臺移動開發框架&#xff0c;而Expo則是它的重要開發工具之一。Expo提供了一套完整的開發環境&#xff0c;使開發者無需安裝Android Studio或Xcode也能快速運行React Native項目。它包含了眾多內置API&#xff0c;如相機、地理位置、推送通知等&…

中考英語之09從句

1 賓語從句 定義 在主從復合句中充當賓語&#xff0c;位于及物動詞、介詞或復合謂語之后的從句。 引導詞 綜述&#xff1a; that&#xff08;可省略&#xff09;、if/whether、連接代詞&#xff08;what、which、who、whom、whose 等&#xff09;和連接副詞&#xff08;when、…

平方矩陣問題

Ⅰ 回字形二維數組 #include <iostream> #include <iomanip> using namespace std; int main(){int n;while(cin>>n,n){for(int i0; i<n;i){for(int j0; j<n; j){int upi, downn-i1, leftj, rightn-j1;cout<<min(min(up,down),min(left,right)…