JavaScript

最新推荐文章于 2024-08-26 15:30:34 发布

笈

最新推荐文章于 2024-08-26 15:30:34 发布

阅读量820

点赞数 21

文章标签： javascript 开发语言 ecmascript

本文链接：https://blog.csdn.net/2302_81507836/article/details/137406783

版权

本文介绍了JavaScript的基础知识，包括语言特性（如解释型、DOM和BOM、WebAPIs）、输入输出操作、变量和数据类型、动态类型以及函数的创建、调用、参数和返回值。通过实例演示，展示了如何高效学习和理解JavaScript的入门概念。

摘要由CSDN通过智能技术生成

写在前面:规避掉以前靠视频学习冗长效率不高的方法,本篇多采用多查找多阅读的方法学习,结合一些优秀博客,受上节课学姐启发,这里举了一些AI生成的实例增强理解,并加以少量注释,不深究后续学习内容,简化学习步骤,以摸索更高效的学习方法.

一.JS概述

是一种运行于JavaScript解释器/引擎(浏览器)中的解释型脚本语言(编程语言)

运行环境:

(1)独立安装的JS解释器(NodeJS)

(2)嵌入在浏览器内核中JS解释器

解释型:运行之前是不需要编译的,不会检查错误,知道碰到错误为止

编译型:对源码进行编译,还能检查语法错误(C C++)

作用:

网页特效(监听用户的一些行为让网页做出对应的反馈)
表单验证(针对表单数据的合法性进行判断)
数据交互(获取后台的数据,渲染到前端)
服务端编程呢个(node.js)

1.JS组成

(1)基本语法:ECMAScript

(2)文档对象模型:DOM(Document Object Model)

提供了一种方式来表示和交互HTML或XML文档的结构。通过DOM，JavaScript可以访问和修改页面的内容、结构和样式。如对网页元素进行移动,大小,添加删除等操作.

(3)浏览器对象模型:BOM(Browser Object Model)

提供了与浏览器交互的对象和方法,使得开发者能够控制浏览器窗口和框架，以及执行与浏览器相关的各种任务。如页面弹窗,检测窗口宽度,存储数据到浏览器等.

Web APIs:DOM+BOM

2.JS的书写位置

(1)内部JavaScript

直接写在html文件里,用script标签包住

规范:script标签写在</body>上面

拓展:alert('你好,JS')页面弹出警告对话框(一种输出方式)

<body>
<script>
   alert('你好,JS')
</script>
</body>

注:我们将<script>放在HTML文件底部附近的原因是浏览器会按照代码在文件中的顺序加载HTML

如果先加载的JavaScript期望修改其下方的HTML,那么它可能由于HTMl尚未被加载而失效,所以将JS代码放在HTML页面底部最好.

(2)外部JS

代码写在以.js结尾的文件里

语法:通过script标签,引入到html页面中

<body>
<script src="../my.js">
    //中间不要写内容
</script>
</body>

注:a.script标签中间无需写代码,否则会被忽略

b.外部JavaScript会使代码更加有序,更易于被复用,且没有脚本的混合,HTML更易读.

(3)内联JS

代码写在标签内部

3.JS的注释

(1)单行注释：使用两个正斜杠（//）开始。从//开始到行尾的所有内容都会被JavaScript解释器忽略。

// 这是一个单行注释
var x = 5; // 这里也可以添加注释

(2)多行注释：使用/*开始和*/结束。在这两个标记之间的所有内容都会被JavaScript解释器忽略，无论跨越多少行。

/*
这是一个多行注释，
可以跨越多行来解释代码块或复杂的功能。
*/
var y = 10;

/* 也可以在代码中间使用多行注释
例如，当需要临时移除某段代码时 */
// var z = 15; // 这行代码被注释掉了

二.JS基础

1.输入输出语句

在JavaScript中，没有像传统编程语言那样的专门的“输入”和“输出”语句。相反，JavaScript提供了多种方法和对象来处理输入和输出.

(1)输入

在浏览器环境中，JavaScript通常不直接提供从用户那里获取输入的语句。相反，它依赖于HTML表单元素（如<input>、<textarea>等）来收集用户输入，并通过事件监听器（如addEventListener）来响应这些输入。

例如，使用document.getElementById()或类似的方法获取HTML元素，然后使用.value属性读取其值。

<input type="text" id="myInput">
<button onclick="getInput()">Submit</button>
//是一个HTML按钮元素，其中onclick是一个事件属性，用于指定当按钮被点击时应执行的JavaScript代码。

<script>
function getInput()//用函数声明来创建一个函数{
    var inputElement = document.getElementById('myInput');//获取HTML元素
    var userInput = inputElement.value; // 获取用户输入的值
    console.log(userInput); // 输出到控制台
}
</script>

在Node.js(JS解释器)环境中，使用readline模块来从命令行读取用户输入。

例如,readline.question()方法用于向用户显示一个提示并等待用户输入。用户的响应会作为回调函数的参数传递。 (用AI的例子进行简单了解)

const readline = require('readline');

const rl = readline.createInterface({
  input: process.stdin,
  output: process.stdout
});

rl.question('请输入你的名字: ', (name) => {
  console.log(`你好, ${name}!`);
  rl.close();
});

① require('readline')：这是Node.js中用于引入内置或第三方模块的方法。在这里，它正在尝试引入名为readline的模块。readline是Node.js的一个内置模块，它提供了一个接口用于从可读流（如用户输入、文件等）中读取数据，通常是一行一行地读取。

②const readline = ...：const是一个关键字，用于声明一个常量。

③const readline = require('readline'); 这行代码的作用就是引入Node.js的readline模块，并将它赋值给一个名为readline的常量,处理用户输入或其他可读流的数据。

(2)输出

a.控制台输出

在JavaScript中，最常用的输出方法是使用console.log()函数，它将信息打印到浏览器的控制台。这通常用于调试和跟踪代码的执行。

console.log("Hello, World!"); // 输出 "Hello, World!" 到控制台

除了console.log()，还有其他一些console对象的方法可以用于输出，如console.info(), console.warn(), console.error()等，它们用于输出不同级别的信息。

b.页面输出

<script>
    document.write("Hello,World!");
</script>

c.弹出窗口输出

<script>
    alert("Hello,World!");
</script>

2.字面量

字面量实际上就是一些固定的值，比如：1、2 、3、true、false、null、NaN、“hello”，字面量都是不可以改变的，由于字面量不是很方便使用，所以在JavaScript中很少直接使用字面量，使用的而是变量。

3.变量

(1)变量的声明和赋值

变量的声明： 使用var关键字声明一个变量。

var a;

变量的赋值： 使用=为变量赋值

a = 123;

声明和赋值同时进行：

var a = 123;

4.数据类型

JavaScript的数据类型主要包括以下几种：

(1)Number：用于表示数字，包括整数和浮点数。例如：42 或 3.14159。
(2)String：用于表示文本或字符序列。字符串必须用引号括起来，可以是单引号（'）或双引号（").
(3)Boolean：逻辑数据类型，有两个值：true 和 false。
(4)Null：表示一个空值或者“无”。它只有一个值，即null。
(5)Undefined：表示一个变量已经被声明了，但还没有赋值。其值为undefined。
(6)Object：用于表示复杂的数据结构，如数组、函数、日期等。JavaScript中的大多数内容都是对象，包括数组、函数等。

注: JavaScript是一种动态类型语言，这意味着可以在程序的执行过程中改变变量的数据类型。例如，一个开始时存储数字的变量之后可以存储字符串，反之亦然。

对于原始类型（Number、String、Boolean、Null、Undefined），它们是不可变的，也就是说，当你尝试改变一个原始类型的值时，实际上是创建了一个新的原始类型的值。而对于对象类型（包括数组和函数），它们是可变的，可以添加、删除或修改其属性。

参考: http://t.csdnimg.cn/JBNhG

查找后发现的一些数据类型和强制类型转换细节

反思:

(1)理解动态类型：JavaScript是一种动态类型语言，这意味着在声明变量时，不需要指定其数据类型。变量的类型会在运行时根据赋给它的值自动确定。但要避免类型错误。
(2)类型转换：JavaScript在运算过程中会自动进行类型转换，这有时可能会导致一些非预期的结果。例如，将字符串和数字相加会得到一个字符串，而不是数字的和。在必要时手动进行类型转换。

(3)严格相等与抽象相等：JavaScript提供了两种比较运算符：===（严格相等）和==（抽象相等）。严格相等运算符会同时比较值和类型，而抽象相等运算符在比较前会进行类型转换。为了避免因类型转换导致的错误，建议使用严格相等运算符。

(4)理解null和undefined：null表示一个空值或者“无”，而undefined表示一个变量已经被声明了，但还没有赋值。尽管它们在某些情况下可以互换使用，但它们在语义上是有区别的。

(与C语言JAVA类似的语句省略不写)

5.函数

函数（Function）是一段可以重复使用的代码块，它执行特定的任务并可以接收输入（参数）和返回输出（返回值）。函数在编程中起着非常重要的作用，它们可以提高代码的可读性、可维护性和复用性。

(1)函数创建

在JavaScript中，你可以使用function关键字来定义函数。以下是一个简单的函数定义示例：

function greet(name) {
  console.log("Hello, " + name + "!");
}

在这个例子中，greet是函数的名称，name是函数的参数。函数体（在大括号{}中）包含了当函数被调用时应该执行的代码。

(2)调用函数

要执行函数中的代码，需要“调用”或“执行”该函数。这可以通过在函数名后加上一对圆括号（可能包含参数）来完成。以下是如何调用上面定义的greet函数的示例：

greet("Alice"); // 输出：Hello, Alice!

(3)函数参数

JS中的所有的参数传递都是按值传递的，也就是说把函数外部的值赋值给函数内部的参数，就和把值从一个变量赋值给另一个变量是一样的，在调用函数时，可以在()中指定实参（实际参数），实参将会赋值给函数中对应的形参
调用函数时，解析器不会检查实参的类型，所以要注意，是否有可能会接收到非法的参数，如果有可能，则需要对参数进行类型的检查，函数的实参可以是任意的数据类型

(4)函数返回

函数可以有一个返回值，这是通过使用return语句来实现的。return语句会立即终止函数的执行，并返回指定的值。如果没有return语句，或者return后面没有跟任何值，那么函数将返回undefined。

function add(a, b) {
  return a + b;
}

var sum = add(5, 3); // sum 的值是 8

笈

关注

21
点赞
踩
15

收藏

觉得还不错? 一键收藏
1
评论
JavaScript

是一种运行于JavaScript解释器/引擎(浏览器)中的解释型脚本语言(编程语言)运行环境:(1)独立安装的JS解释器(NodeJS)(2)嵌入在浏览器内核中JS解释器解释型:运行之前是不需要编译的,不会检查错误,知道碰到错误为止编译型:对源码进行编译,还能检查语法错误(C C++)网页特效(监听用户的一些行为让网页做出对应的反馈)表单验证(针对表单数据的合法性进行判断)数据交互(获取后台的数据,渲染到前端)服务端编程呢个(node.js)
复制链接

扫一扫