JavaScript的理解，JS的初步认识（一）

最新推荐文章于 2025-02-24 21:49:50 发布

余一痴

最新推荐文章于 2025-02-24 21:49:50 发布

阅读量1.7k

点赞数 2

分类专栏：前端文章标签： javascript css3 html node.js es6

本文链接：https://blog.youkuaiyun.com/yycnf/article/details/109766020

版权

前端专栏收录该内容

45 篇文章

订阅专栏

本文介绍了JavaScript的基础知识，包括其作为轻量级脚本语言的角色，嵌入式特性和对象模型。讨论了为何要学习JavaScript，强调其解释性、基于对象、事件驱动和跨平台的特点。讲解了JavaScript在HTML中的使用、输出方式，如alert、document.write、innerHTML和console.log。此外，还涵盖了JavaScript的字面量、变量定义、变量命名规则以及注释的用途。最后，文章提到了JavaScript事件，如页面加载和用户行为触发的事件，展示了JavaScript在网页交互中的应用。

摘要生成于 C知道，由 DeepSeek-R1 满血版支持，前往体验 >

什么是 JavaScript 语言？

JavaScript 是一种轻量级的脚本语言。脚本语言指的是它不具备开发操作系统的能力，而是只用来编写控制其他大型应用程序的“脚本”。
JavaScript 是一种嵌入式（embedded）语言。它本身提供的核心语法不算很多，只能用来做一些数学和逻辑运算。JavaScript 本身不提供任何与 I/O（输入/输出）相关的 API，都要靠宿主环境（host）提供，所以 JavaScript 只合适嵌入更大型的应用程序环境，去调用宿主环境提供的底层 API。宿主环境最常见的环境就是浏览器，另外还有服务器环境，也就是 Node 项目。
从语法角度看，JavaScript语言是一种“对象模型”语言。各种宿主环境通过这个模型，描述自己的功能和操作接口，从而通过 JavaScript 控制这些功能。但是，JavaScript 并不是纯粹的“面向对象语言”，还支持其他编程范式（比如函数式编程）。这导致几乎任何一个问题，JavaScript 都有多种解决方法。

JavaScript 的核心语法？

只包括两个部分：基本的语法构造（比如操作符、控制结构、语句）和标准库（就是一系列具有各种功能的对象比如Array、Date、Math等）
除此之外，各种宿主环境提供额外的 API（即只能在该环境使用的接口），以便 JavaScript 调用。

我们为什么要学习 JavaScript？

JavaScript适合作为我们学习编程的入门语言，也适合当作日常开发的工作语言。它是目前最有希望、前途最光明的计算机语言之一。

javascript脚本语言的主要特点：

解释性：javascript是一种解释语言，源代码不需要经过编译，直接在浏览器上运行时被解释。
基于对象：javascripth是一种基于对象的语言，能运用自己已经创建了的对象，许多功能可以来自于脚本环境中对象的方法与脚本的相互作用。
事件驱动：JavaScript可以直接对用户或客户输入做出响应，无需经过web服务程序。他对用户的响应，是以事件驱动的方式进行的，所谓事件驱动，指的是在主页执行了某种操作所产生的动作，此动作称为“事件”。
跨平台：JavaScript依赖于浏览器本身，与操作环境无关。只要能运行浏览器的计算机，并支持JavaScript的浏览器就可以正确执行。
安全性：JavaScript是一种安全性语言。它不允许访问本地的磁盘，并不能将数据存入服务器上；不允许对网络文本进行修改和删除，只能通过浏览器实现信息浏览或动态交互。可有效的防止数据丢失。

JavaScript 用法

HTML 中的脚本必须位于 <script> 与 </script> 标签之间。
脚本可被放置在 HTML 页面的 <body> 和 <head> 部分中。

<script>标签：如需在 HTML 页面中插入 JavaScript，请使用 <script> 标签。<script> 和 </script> 会告诉 JavaScript 在何处开始和结束。

//<script> 和 </script> 之间的代码行包含了 JavaScript

<script>
    alert("hello world");
</script>

//您无需理解上面的代码。只需明白，浏览器会解释(解析)并执行位于 <script> 和 </script>之间的 JavaScript 代码

//注： JavaScript 是所有现代浏览器以及 HTML5 中的默认脚本语言。

<body> 中的 JavaScript:JavaScript 会在页面加载时向 HTML 的 <body> 写文本

<!DOCTYPE html>
<html>
<body>
    <script>
        document.write("<h1>这是一级标题</h1>");
        document.write("<p>这是一个段落</p>");
    </script>
</body>
</html>

JavaScript 输出方式

JavaScript 可以通过不同的方式来输出数据：

使用 window.alert() 弹出警告框。
使用 document.write() 方法将内容写到 HTML 文档中。
使用 innerHTML 写入到 HTML 元素。
使用 console.log() 写入到浏览器的控制台。

1、window.alert()使用

<!DOCTYPE html>
<html>
<body>

<script>
    window.alert(5 + 6);//弹出11
</script>

</body>
</html>

2、document.write()使用

<!DOCTYPE html>
<html>
<body>
<script>
    document.write(new Date().toLocaleString());
</script>

</body>
</html>

3、innerHTML 使用

<!DOCTYPE html>
<html>
<body>

    <p id="demo">我的第一个段落</p>

<script>
  document.getElementById("demo").innerHTML = "段落已修改";
</script>

</body>
</html>

4、console.log()使用

<!DOCTYPE html>
<html>
<body>

<script>
    var a = 5;
    var b = 6;
    var c = a + b;
    console.log(c);
</script>

</body>
</html>

JavaScript 字面量

定义：在编程语言中，一般固定值称为字面量，如 3.14

//字面量有：
            
            1、数字（Number）字面量 可以是整数或者是小数，或者是科学计数(e)。

            2、字符串（String）字面量 可以使用单引号或双引号

            3、表达式字面量 用于计算 如：5 + 6 或 5*5

            4、数组（Array）字面量 定义一个数组 [1,2,3,4,5,6]

            5、对象（Object）字面量 定义一个对象 {name:'小马哥',age:15}

            6、函数（Function）字面量 定义一个函数 function Fu(a, b) { return a * b;}

JavaScript 变量

在编程语言中，变量用于存储数据值。

变量的命名规则：

变量必须以字母开头
变量也能以 $ 和 _ 符号开头（不过我们不推荐这么做）
变量名称对大小写敏感（y 和 Y 是不同的变量）

JavaScript 使用关键字 var 来定义变量，使用等号来为变量赋值

<script>

    var x;

    x = 5

</script>

//变量可以通过变量名访问。在指令式语言中，变量通常是可变的。字面量是一个恒定的值。

//注：变量是一个名称。字面量是一个值。

JavaScript 注释

作用：

JavaScript 注释可用于提高代码的可读性。
可用于调试

不是所有的 JavaScript 语句都是"命令"。双斜杠 // 后的内容将会被浏览器忽略：

//var len = 16;   这行代码就不会被浏览器解析（单行注释）


JavaScript 多行注释

多行注释以 /* 开始，以 */ 结尾

document.getElementById("myH1").innerHTML="Hello world";
/*会在输出
页面输出Hello world*/   (多行注释)

JavaScript 事件

HTML 事件是发生在 HTML 元素上的事情。

当在 HTML 页面中使用 JavaScript 时， JavaScript 可以触发这些事件。

HTML 事件

HTML 事件可以是浏览器行为，也可以是用户行为。

HTML 事件的实例：

HTML 页面完成加载
HTML input 字段改变时
HTML 按钮被点击

//通常，当事件发生时，你可以做些事情。

//在事件触发时 JavaScript 可以执行一些代码。

//HTML 元素中可以添加事件属性，使用 JavaScript 代码来添加 HTML 元素。

//在下实例中，按钮元素中添加了 onclick 属性 (并加上代码):

<button onclick="getElementById('demo').innerHTML=Date()">现在的时间是?</button>

常见的HTML事件

事件	描述
onchange	HTML 元素改变
onclick	用户点击 HTML 元素
onmouseover	用户在一个HTML元素上移动鼠标
onmouseout	用户从一个HTML元素上移开鼠标
onkeydown	用户按下键盘按键
onload	浏览器已完成页面的加载