HTML-JavaScript基礎（非常詳細）

么是JavaScript

JavaScript是一種基于對象和事件驅動的、并具有安全性能的腳本語言，已經被廣泛用于Web應用開發，常用來為網頁添加各式各樣的動態功能，為用戶提供更流暢美觀的瀏覽效果。通常JavaScript腳本是通過嵌入在HTML中來實現自身的功能的。

JavaScript特點

是一種解釋性腳本語言（代碼不進行預編譯）。

主要用來向HTML（標準通用標記語言下的一個應用）頁面添加交互行為。

可以直接嵌入HTML頁面，但寫成單獨的js文件有利于結構和行為的分離。

跨平臺特性，在絕大多數瀏覽器的支持下，可以在多種平臺下運行（如Windows、Linux、Mac、Android、iOS等）。

JavaScript組成

JavaScript日常用途

1、嵌入動態文本于HTML頁面。

2、對瀏覽器事件做出響應。

3、讀寫HTML元素。

4、在數據被提交到服務器之前驗證數據。

5、檢測訪客的瀏覽器信息。

6、控制cookies，包括創建和修改等。

7、基于Node.js技術進行服務器端編程。

JavaScript的基本結構

<script type="text/javascript">
 <!—
 JavaScript 語句;
 —>
</script >

示例：

……
<title>初學JavaScript</title>
</head>
<body>
<script type="text/javascript">
 document.write("初學JavaScript");
 document.write("<h1>Hello，JavaScript</h1>");
</script>
</body>
</html>

<script>…</script>可以包含在文檔中的任何地方，只要保證這些代碼在被使用前已讀取并加載到內存即可

JavaScript的執行原理

網頁中引用JavaScript的方式

1、使用<script>標簽

2、外部JS文件

<script src="export.js" type="text/javascript"></script>

3.直接在HTML標簽中

<input name="btn" type="button" value="彈出消息框" 
 onclick="javascript：alert('歡迎你');"/>

JavaScript核心語法：

1. 變量

①先聲明變量再賦值

var width;
width=5;
var － 用于聲明變量的關鍵字
width － 變量名

②同時聲明和賦值變量

var catName="皮皮";
var x, y, z=10;

③不聲明直接賦值【一般不使用】

width=5;

變量可以不經聲明而直接使用，但這種方法很容易出錯，也很難查找排錯，不推薦使用。

2. 數據類型

①undefined：示例：var width;

變量width沒有初始值，將被賦予值undefined

②null：表示一個空值，與undefined值相等

③number：

var iNum=23; //整數

var iNum=23.0; //浮點數

④Boolean：true和false 但是JS會把他們解析成1；0

⑤String：一組被引號（單引號或雙引號）括起來的文本 var string1="This is a string";

3. typeof運算符

typeof檢測變量的返回值；typeof運算符返回值如下：

①undefined：變量被聲明后，但未被賦值.

②string：用單引號或雙引號來聲明的字符串。

③boolean：true或false。

④number：整數或浮點數。

⑤object：javascript中的對象、數組和null。

avaScript 程序不能獨立運行，它需要被嵌入 HTML 中，然后瀏覽器才能執行 JavaScript 代碼。通過 <script> 標簽將 JavaScript 代碼引入到 HTML 中，有兩種方式：
1.內部方式
內部方式是通過<script>標簽包裹JavaScript代碼,從而引入HTML頁面中，示例代碼如下：

<!DOCTYPE html>
 <html>
 <head>
   <meta charset="UTF-8">
   <title>JavaScript 基礎 - 引入方式</title>
 </head>
 <body>
   <!-- 內聯形式：通過 script 標簽包裹 JavaScript 代碼 -->
   <script>
     alert('嗨，歡迎來傳智播學習前端技術！')
   </script>
 </body>
 </html>

2.外部形式

一般將 JavaScript 代碼寫在獨立的以 .js 結尾的文件中，然后通過 <script>標簽的 <src>屬性引入，示例代碼如下：

// demo.js
document.write('嗨，歡迎來傳智播學習前端技術！')

<!DOCTYPE html>
 <html>
 <head>
   <meta charset="UTF-8">
   <title>JavaScript 基礎 - 引入方式</title>
 </head>
 <body>
   <!-- 外部形式：通過 script 的 src 屬性引入獨立的 .js 文件 -->
   <script src="demo.js"></script>
 </body>
 </html>

注意：如果 script 標簽使用 src 屬性引入了某 .js 文件，那么標簽的代碼會被忽略！！！如下代碼所示：

言

在.NET Core中運行JavaScript代碼，目前已經有很多實現方案。

但是，如果你希望在純JavaScript環境中運行.NET Core代碼呢？

那么，DotNetJS可能對你有所幫助。

DotNetJS

DotNetJS可以將C#項目編譯為與任何環境兼容的單文件JavaScript庫，無論是Web瀏覽器，Node.js還是自定義限制空間，如VS Code的Web擴展，都可以正常使用它。

該解決方案基于兩個主要組件：

JavaScript/dotnet-runtime（npm） 使用已編譯的C#程序集和.NET運行時WebAssembly模塊，以在JavaScript中提供C# 操作性層。該庫與環境無關 - 它不依賴于特定于平臺的API，如瀏覽器DOM或節點模塊，并且可以作為CommonJS或ECMAScript模塊導入，也可以通過瀏覽器中的腳本標記使用。
DotNet/dotNetJS（NuGet） 在C#中提供JavaScript互操作性層，并通過MSBuild任務將項目輸出打包到單文件JavaScript庫中。生成的庫包含使用項目程序集初始化的dotnet運行時，并準備用作打包的C#項目的互操作性層。

Demo

1. 創建項目

使用VS2022創建一個控制臺項目，修改項目文件，文件內容如下：

<Project Sdk="Microsoft.NET.Sdk.BlazorWebAssembly">
 <PropertyGroup>
  <TargetFramework>net6.0</TargetFramework>
  <EmitSourceMap>true</EmitSourceMap>
  <EmitTypes>true</EmitTypes>
 </PropertyGroup>
 <ItemGroup>
  <PackageReference Include="DotNetJS" Version="0.4.0" />
 </ItemGroup>
</Project>

指定SDK為Microsoft.NET.Sdk.BlazorWebAssembly
引用DotNetJS Nuget包

2. 實現C#代碼

實現Program.cs，代碼如下：


using DotNetJS;
using Microsoft.JSInterop;
using System;
using System.Threading.Tasks;
namespace HelloDotnetJS;
public partial class Program
{ 
    public static void Main()
    {
        Console.WriteLine($"HelloDotnetJS 初始化!");
    }
    [JSFunction]  
    public static partial string GetBaseAddress();
    [JSInvokable]
    public async static Task<WeatherForecast[]> Demo()
    {
        var uri = new Uri(GetBaseAddress());
        Console.WriteLine(uri);
        var json = await new System.Net.Http.HttpClient { BaseAddress = uri }
            .GetStringAsync("weather.json");
        var forecasts = Newtonsoft.Json.JsonConvert.DeserializeObject<WeatherForecast[]>(json);
        return forecasts;
    }
}

Demo方法的具體邏輯如下：

獲取網站根路徑，使用[JSFunction]指定具體值來源于JS傳入；
訪問網站根路徑下的weather.json文件
反序列化json，調用Newtonsoft驗證第三方庫能否正常使用；
返回WeatherForecast集合

在終端窗口執行dotnet publish，上述代碼將會編譯成JS代碼文件dotnet.js。

3. 實現JS代碼

創建demo.html，代碼如下：

<meta charset="UTF-8">
<script src="dotnet.js"></script>
<script>
    //定義GetBaseAddress實現
    dotnet.HelloDotnetJS.GetBaseAddress = () => window.location.protocol + "//" + window.location.host;
    window.onload = async function () {
        //初始化
        await dotnet.boot();
 
        console.log("開始執行Demo");
        const str = await dotnet.HelloDotnetJS.Demo();
        console.log(str);
    };
</script>

4. 運行效果

將所有文件部署到網站上，例如http://localhost:5678/：

weather.json的文件內容如下：

[
  {
    "date": "2018-05-06",
    "temperatureC": 1,
    "summary": "My IO"
  },
  {
    "date": "2018-05-07",
    "temperatureC": 14,
    "summary": "Bracing"
  }
]

用瀏覽器訪問http://localhost:5678/demo.html，在控制臺窗口可以看到代碼運行正常：

結論

DotNetJS目前還不完善，生成的JS代碼文件dotnet.js尺寸較大，demo代碼就有11M。

在線咨詢

上一篇：8個簡單且包容的表單設計技巧請查收
下一篇：14個HTML5實現的效果合集

您的項目需求

*請認真填寫需求信息，我們會在24小時內與您取得聯系。

整合營銷服務商