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小时内与您取得联系。

整合营销服务商