整合營(yíng)銷(xiāo)服務(wù)商
電腦端+手機(jī)端+微信端=數(shù)據(jù)同步管理
免費(fèi)咨詢熱線：
電腦端+手機(jī)端+微信端=數(shù)據(jù)同步管理
免費(fèi)咨詢熱線：
么是JavaScript
JavaScript是一種基于對(duì)象和事件驅(qū)動(dòng)的、并具有安全性能的腳本語(yǔ)言，已經(jīng)被廣泛用于Web應(yīng)用開(kāi)發(fā)，常用來(lái)為網(wǎng)頁(yè)添加各式各樣的動(dòng)態(tài)功能，為用戶提供更流暢美觀的瀏覽效果。通常JavaScript腳本是通過(guò)嵌入在HTML中來(lái)實(shí)現(xiàn)自身的功能的。
JavaScript特點(diǎn)
是一種解釋性腳本語(yǔ)言（代碼不進(jìn)行預(yù)編譯）。
主要用來(lái)向HTML（標(biāo)準(zhǔn)通用標(biāo)記語(yǔ)言下的一個(gè)應(yīng)用）頁(yè)面添加交互行為。
可以直接嵌入HTML頁(yè)面，但寫(xiě)成單獨(dú)的js文件有利于結(jié)構(gòu)和行為的分離。
跨平臺(tái)特性，在絕大多數(shù)瀏覽器的支持下，可以在多種平臺(tái)下運(yùn)行（如Windows、Linux、Mac、Android、iOS等）。
JavaScript組成
JavaScript日常用途
1、嵌入動(dòng)態(tài)文本于HTML頁(yè)面。
2、對(duì)瀏覽器事件做出響應(yīng)。
3、讀寫(xiě)HTML元素。
4、在數(shù)據(jù)被提交到服務(wù)器之前驗(yàn)證數(shù)據(jù)。
5、檢測(cè)訪客的瀏覽器信息。
6、控制cookies，包括創(chuàng)建和修改等。
7、基于Node.js技術(shù)進(jìn)行服務(wù)器端編程。
JavaScript的基本結(jié)構(gòu)
<script type="text/javascript"> <!— JavaScript 語(yǔ)句; —> </script >
示例：
……
<title>初學(xué)JavaScript</title>
</head>
<body>
<script type="text/javascript">
document.write("初學(xué)JavaScript");
document.write("<h1>Hello，JavaScript</h1>");
</script>
</body>
</html>
<script>…</script>可以包含在文檔中的任何地方，只要保證這些代碼在被使用前已讀取并加載到內(nèi)存即可
JavaScript的執(zhí)行原理
網(wǎng)頁(yè)中引用JavaScript的方式
1、使用<script>標(biāo)簽
2、外部JS文件
<script src="export.js" type="text/javascript"></script>
3.直接在HTML標(biāo)簽中
<input name="btn" type="button" value="彈出消息框"
onclick="javascript：alert('歡迎你');"/>
JavaScript核心語(yǔ)法：
1. 變量
①先聲明變量再賦值
var width; width=5; var － 用于聲明變量的關(guān)鍵字 width － 變量名
②同時(shí)聲明和賦值變量
var catName="皮皮"; var x, y, z=10;
③不聲明直接賦值【一般不使用】
width=5;
變量可以不經(jīng)聲明而直接使用，但這種方法很容易出錯(cuò)，也很難查找排錯(cuò)，不推薦使用。
2. 數(shù)據(jù)類(lèi)型
①u(mài)ndefined：示例：var width;
變量width沒(méi)有初始值，將被賦予值undefined
②null：表示一個(gè)空值，與undefined值相等
③number：
var iNum=23; //整數(shù)
var iNum=23.0; //浮點(diǎn)數(shù)
④Boolean：true和false 但是JS會(huì)把他們解析成1；0
⑤String：一組被引號(hào)（單引號(hào)或雙引號(hào)）括起來(lái)的文本 var string1="This is a string";
3. typeof運(yùn)算符
typeof檢測(cè)變量的返回值；typeof運(yùn)算符返回值如下：
①u(mài)ndefined：變量被聲明后，但未被賦值.
②string：用單引號(hào)或雙引號(hào)來(lái)聲明的字符串。
③boolean：true或false。
④number：整數(shù)或浮點(diǎn)數(shù)。
⑤object：javascript中的對(duì)象、數(shù)組和null。
avaScript 程序不能獨(dú)立運(yùn)行，它需要被嵌入 HTML 中，然后瀏覽器才能執(zhí)行 JavaScript 代碼。通過(guò) <script> 標(biāo)簽將 JavaScript 代碼引入到 HTML 中，有兩種方式：
1.內(nèi)部方式
內(nèi)部方式是通過(guò)<script>標(biāo)簽包裹JavaScript代碼,從而引入HTML頁(yè)面中，示例代碼如下：
<!DOCTYPE html>
<html>
<head>
<meta charset="UTF-8">
<title>JavaScript 基礎(chǔ) - 引入方式</title>
</head>
<body>
<!-- 內(nèi)聯(lián)形式：通過(guò) script 標(biāo)簽包裹 JavaScript 代碼 -->
<script>
alert('嗨，歡迎來(lái)傳智播學(xué)習(xí)前端技術(shù)！')
</script>
</body>
</html>2.外部形式
一般將 JavaScript 代碼寫(xiě)在獨(dú)立的以 .js 結(jié)尾的文件中，然后通過(guò) <script>標(biāo)簽的 <src>屬性引入，示例代碼如下：
// demo.js
document.write('嗨，歡迎來(lái)傳智播學(xué)習(xí)前端技術(shù)！')<!DOCTYPE html>
<html>
<head>
<meta charset="UTF-8">
<title>JavaScript 基礎(chǔ) - 引入方式</title>
</head>
<body>
<!-- 外部形式：通過(guò) script 的 src 屬性引入獨(dú)立的 .js 文件 -->
<script src="demo.js"></script>
</body>
</html>注意：如果 script 標(biāo)簽使用 src 屬性引入了某 .js 文件，那么 標(biāo)簽的代碼會(huì)被忽略！！！如下代碼所示：
在.NET Core中運(yùn)行JavaScript代碼，目前已經(jīng)有很多實(shí)現(xiàn)方案。
但是，如果你希望在純JavaScript環(huán)境中運(yùn)行.NET Core代碼呢？
那么，DotNetJS可能對(duì)你有所幫助。
DotNetJS可以將C#項(xiàng)目編譯為與任何環(huán)境兼容的單文件JavaScript庫(kù)，無(wú)論是Web瀏覽器，Node.js還是自定義限制空間，如VS Code的Web擴(kuò)展，都可以正常使用它。
該解決方案基于兩個(gè)主要組件：
使用VS2022創(chuàng)建一個(gè)控制臺(tái)項(xiàng)目，修改項(xiàng)目文件，文件內(nèi)容如下：
<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>
實(shí)現(xiàn)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方法的具體邏輯如下：
在終端窗口執(zhí)行dotnet publish，上述代碼將會(huì)編譯成JS代碼文件dotnet.js。
創(chuàng)建demo.html，代碼如下：
<meta charset="UTF-8">
<script src="dotnet.js"></script>
<script>
//定義GetBaseAddress實(shí)現(xiàn)
dotnet.HelloDotnetJS.GetBaseAddress = () => window.location.protocol + "//" + window.location.host;
window.onload = async function () {
//初始化
await dotnet.boot();
console.log("開(kāi)始執(zhí)行Demo");
const str = await dotnet.HelloDotnetJS.Demo();
console.log(str);
};
</script>
將所有文件部署到網(wǎng)站上，例如http://localhost:5678/：
weather.json的文件內(nèi)容如下：
[
{
"date": "2018-05-06",
"temperatureC": 1,
"summary": "My IO"
},
{
"date": "2018-05-07",
"temperatureC": 14,
"summary": "Bracing"
}
]
用瀏覽器訪問(wèn)http://localhost:5678/demo.html，在控制臺(tái)窗口可以看到代碼運(yùn)行正常：
DotNetJS目前還不完善，生成的JS代碼文件dotnet.js尺寸較大，demo代碼就有11M。
*請(qǐng)認(rèn)真填寫(xiě)需求信息，我們會(huì)在24小時(shí)內(nèi)與您取得聯(lián)系。
