当前位置：首页 > news >正文

JavaScript-上篇

news 2025/5/15 8:36:42

JS 入门

JS概述

JavaScript（简称JS）是一种高层次、解释型的编程语言，最初由布兰登·艾奇（Brendan Eich）于1995年创建，并首次出现在网景浏览器中。JS的设计初衷是为Web页面提供动态交互功能，因此与HTML和CSS一起构成了Web的三大核心技术。随着时间的推移，JavaScript不断发展，成为如今最流行的编程语言之一。

ECMA

1997年，JavaScript正式通过ECMA-262标准化，成为ECMAScript（简称ES）。ECMAScript是一个基于JavaScript的规范，旨在统一和规范不同的JavaScript实现。此后，JavaScript的发展就与ECMAScript版本紧密相连，每个新版本都引入了新的特性和功能。目前流行的是ES6，也就是2015年发布的版本，也是大多数企业采用的。

Java与JS

Java与JavaScript虽然名字相似，但它们是两种不同的语言。Java是一种编译型的静态语言，主要用于开发企业级应用和移动应用，而JavaScript是一种动态语言，主要用于在网页中实现交互效果。两者之间并没有直接的关系，但因为Java在90年代的受欢迎程度，使得JavaScript的命名受到了影响。

Web工作关系

作为一个后端开发者，我们也是需要简单学习一下前端的知识，目前大多数企业都是采用前后端分离开发，我们应该重点学习后端部分。

JavaScript的引入方式

JavaScript可以通过两种主要方式引入到HTML文档中：

1.内联引入：

将JavaScript代码直接嵌入到HTML文件中，通常放置在<script>标签内。

2.外部引入：

将JavaScript代码写入外部文件中，然后在HTML中引入。这样做可以提高代码的复用性和维护性。

/*三种输出方式  */window.alert('HELLo!');//网页弹窗document.write('HELLo');//写入html中console.log('hello'); //浏览器控制台输出{/* 变量 */var a = 20;  //var是 variable的缩写a = '张三';/* JS大部分语法与Java类似，是弱类型的语言，因此类型不同也可以对同一变量赋值 var关键字定义变量的特点特点1.var定义出来的是全局变量特点2.可以重复定义变量名*/}{let x = 20;alert(x);/* let是ES6中引入的，let用法与var类似都是用来定义变量的1.let定义的是局部变量2.let不能重复定义变量名*/ }/* ES6还引入了 const 关键字，定义只读变量 */

<!DOCTYPE html>
<html lang="en">
<head><meta charset="UTF-8"><meta name="viewport" content="width=device-width, initial-scale=1.0"><script src="./JS_code/demo1.js"></script><title>js基础语法</title>
</head>
<body><!-- JS,跨平台、面向对象的脚本语言 --><script>/* js有两种引入方式 */</script></body>
</html>

JavaScript基础语法

1. 输出方式

JavaScript提供了3种方式来输出内容：

alert()：弹出警告框，显示信息。

alert("Hello, World!");

console.log()：在浏览器的控制台输出信息，适合调试使用。

console.log("这是一个调试信息");

document.write()：直接在HTML文档中写入内容，通常不推荐在页面加载之后使用。

document.write("这是一段文本");

2. 变量

JavaScript使用var、let和const声明变量：

var：用于声明可变变量，作用域为函数或全局。
let：用于声明块级作用域的变量。
const：用于声明常量，一旦赋值后不可修改。

/*三种输出方式  */window.alert('HELLo!');//网页弹窗document.write('HELLo');//写入html中console.log('hello'); //浏览器控制台输出{/* 变量 */var a = 20;  //var是 variable的缩写a = '张三';/* JS大部分语法与Java类似，是弱类型的语言，因此类型不同也可以对同一变量赋值 var关键字定义变量的特点特点1.var定义出来的是全局变量特点2.可以重复定义变量名*/}{let x = 20;alert(x);/* let是ES6中引入的，let用法与var类似都是用来定义变量的1.let定义的是局部变量2.let不能重复定义变量名*/ }/* ES6还引入了 const 关键字，定义只读变量 */

3. 运算符与数据类型

JavaScript的运算符与Java种类似，有稍微不同

可以看到只是多了一个 === ，那么 === 和 == 有什么区别呢？

<!DOCTYPE html>
<html lang="en">
<head><meta charset="UTF-8"><meta name="viewport" content="width=device-width, initial-scale=1.0"><title>JS运算符</title>
</head>
<body><script>// JS运算符与Java运算符大致相同，但也有一些差异。/* ==  与 === 区别：1. == 运算符比较两个值是否相等，不论数据类型是否相同，如果值相等，则返回true，否则返回false。2. === 运算符比较两个值是否相等，且数据类型也相同，如果值相等且数据类型相同，则返回true，否则返回false。*/{//转换为数字类型alert(parseInt('12A56'));//12alert(parseInt('A56'));//NaN}{//转换为boolean类型if(-1)    alert('只有0和NaN才为false，其他值都为true');//数字类型转换为boolean类型if("")    alert('空字符串转换为false，其他值都为true');//字符串类型转换为boolean类型if(" ")   alert('空格也是false');if(null)  alert('null转换为false');if(undefined)  alert('undefined转换为false');}</script></body>
</html>

<!DOCTYPE html>
<html lang="en">
<head><meta charset="UTF-8"><meta name="viewport" content="width=device-width, initial-scale=1.0"><title>JS数据类型</title>
</head>
<body><script>// JS 基本数据类型alert(typeof 8);//numberalert(typeof 3.14);//numberalert(typeof true);//booleanalert(typeof false);//booleanalert(typeof "HEllo!");//stringalert(typeof 'A');//stringalert(typeof null);//objectvar a;alert(typeof a);//未初始化会被归为,undefined</script></body>
</html>

JS是一种跨平台、面向对象的脚本语言，有了Java的基础，我们学习起来会非常轻松，下面是JS的基本数据类型。

4. 流程控制

JS流程控制与Java基本一致，我就不过多赘述了

JS函数

函数的定义与调用也非常简单，由于JS是弱类型的语言，可以不需要定义返回类型，不需要定义参数类型

主要有两种方式，通过 function 关键字来定义

<!DOCTYPE html>
<html lang="en">
<head><meta charset="UTF-8"><meta name="viewport" content="width=device-width, initial-scale=1.0"><title>JS函数</title>
</head>
<body><script>// 函数定义function add(a, b) {return a + b;}var add2 = function(a, b) {return a + b;}// 函数调用var result = add(10, 20);console.log(result);alert(add2(10, 20));</script></body>
</html>