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

JavaScript的引入方式和基础语法的快速入门与学习

news 2025/7/22 11:08:18

一.什么是JavaScript

        JavaScript（简称 JS）是一种广泛应用于 Web 开发的高级、动态、弱类型、解释型编程语言，是脚本语言。是一门跨平台，面向对象的脚本语言，是用来控制网页行为的，使我们的网页可以交互。

注意：Java和JavaScript并无特殊的直接的联系，是完全不同的语言，不论是概念还是设计，但是基础语法类似，请大家在学习这两个语言时注意区分。

二.JS的引入方式

        在 HTML 里引入 JavaScript 主要有以下几种方式：

1.内联脚本

    使用onclick属性：

        onclick 是 HTML 元素的一个事件处理属性，用于定义当用户点击该元素时要执行的 JavaScript 代码。这是一种将 JavaScript 行为直接绑定到 HTML 元素的内联方式。下面从不同方面详细解释 onclick。

       基本用法：

        onclick 属性的值是一段 JavaScript 代码或函数调用。当用户点击绑定了 onclick 属性的元素时，浏览器会执行这段代码。

        直接写 JavaScript代码：
<!DOCTYPE html>
<html lang="zh-CN">
<head><meta charset="UTF-8"><title>onclick 直接代码示例</title>
</head>
<body><button onclick="alert('你点击了这个按钮！')">点击我</button>
</body>
</html>

        在这个例子中，当用户点击按钮时，浏览器会弹出一个包含 “你点击了这个按钮！” 文本的警告框。       

        调用 JavaScript 函数
<!DOCTYPE html>
<html lang="zh-CN">
<head><meta charset="UTF-8"><title>onclick 函数调用示例</title>
</head>
<body><button onclick="showMessage()">点击我</button><script>function showMessage() {alert('函数被调用，你点击了按钮！');}</script>
</body>
</html>

        这里定义了一个名为 showMessage 的函数，当用户点击按钮时，onclick 属性会调用这个函数。 

传递参数

        如果需要在调用函数时传递参数，可以在 onclick 属性中直接传递。

<!DOCTYPE html>
<html lang="zh-CN">
<head><meta charset="UTF-8"><title>onclick 传递参数示例</title>
</head>
<body><button onclick="greet('张三')">点击向张三打招呼</button><script>function greet(name) {alert(`你好，${name}！`);}</script>
</body>
</html>
注意事项： 
  • 作用域问题：内联 onclick 中的代码在全局作用域中执行，可能会导致命名冲突。
  • 维护性：大量使用内联 onclick 会使 HTML 和 JavaScript 代码耦合度增加，不利于代码的维护和复用。现代 Web 开发更推荐使用 addEventListener 方法来绑定事件。

使用<script>标签：

        也叫内联脚本，直接把 JavaScript 代码写在 HTML 文件的 <script> 标签内。一般用于编写少量代码或者实现简单交互。

        在HTML文档中可以放在任意地方，放置任意数量的<script>，一半把脚本至于<body>元素的底部，可以改善显示的速度。

<!DOCTYPE html>
<html lang="en">
<head><meta charset="UTF-8"><meta name="viewport" content="width=device-width, initial-scale=1.0"><title>Document</title>
</head>
<body><button id="myButton">点击我</button><script>const button = document.getElementById('myButton');button.addEventListener('click', function() {alert('按钮被点击了！');});</script>
</body>
</html>

2.外部脚本

        把 JavaScript 代码存于单独的 .js 文件，再借助 <script> 标签的 src 属性引入。这种方式有利于代码复用和维护，适合大型项目。

        外部JS文件中，只包含JS代码，不包含<script>标签，同时<script>标签不能自闭合。

第一步：创建外部 JavaScript 文件，创建一个名为 script.js 的文件，内容如下

// 输出信息到控制台
console.log('这是外部脚本文件');

第二步：在 HTML 文件中引入

<!DOCTYPE html>
<html lang="zh-CN">
<head><meta charset="UTF-8"><title>外部脚本</title>
</head>
<body><!-- 引入外部 JavaScript 文件 --><script src="script.js"></script>
</body>
</html>

三.JS的基础语法

1.书写语法

区分大小写：和Java一样，所有的变量名，函数名，以及其他一切东西都是区分大小写的；每一行的最后的分号可写可不写，但是为便于规范代码结构，我们通常书写；

JS的注释书写方式：单行注释：//注释内容，多行注释：/*注释内容*/

    <script>//单行注释/*多行注释*/</script>

大括号代表代码块：

    <script>if (1 == 1) {alert('1等于1');}</script>

2.变量

        在 JavaScript 中，可用 var(variablede的缩写)、let 和 const 声明变量，JS是一门弱类型语言，变量可以存放不同类型的值。

        变量名的遵循的规则：组成字符可以是任何字母，数字，下划线(_)或美元符号($)，同时不能以数字开头，建议使用驼峰命名。

// 使用 var 声明变量（函数作用域）
var num1 = 10;// 使用 let 声明变量（块级作用域）
let num2 = 20;// 使用 const 声明常量（块级作用域，值不可变）
const PI = 3.14;

var定义的变量相当于全局变量，是可以重复声明定义的。

let定义的变量只在代码块中有效，并且不可重复定义。

const声明的是常量，常量的值不可改变，作用域也只在块内。

3.数据类型，运算符

JS的数据类型分为原始数据类型和引用数据类型：

(1).原始类型

基本数据类型是不可变的，直接存储在栈内存中。

undefined 表示变量已声明但未赋值：

let variable;
console.log(variable); // 输出: undefined

null 表示一个空对象指针，通常用于手动清空变量的值。

let emptyObj = null;
console.log(emptyObj); // 输出: null

 boolean类型 只有两个值：true 和 false，常用于逻辑判断。

let isDone = true;
let isWorking = false;

 number类型 用于表示整数和浮点数，JavaScript 没有单独的整数类型。

let integer = 10;
let float = 3.14;
let negative = -5;
let infinity = Infinity; // 表示正无穷大
let nan = NaN; // 表示非数字

string类型 用于表示文本数据，可用单引号、双引号或反引号包裹。

let singleQuote = 'Hello';
let doubleQuote = "World";
let templateLiteral = `Hello ${singleQuote}`; // 模板字符串支持变量插值

(2).引用类型

引用数据类型存储在堆内存中，变量保存的是对象的引用地址。

object 是 JavaScript 中最基本的引用类型，可用于存储键值对。

let person = {name: 'Alice',age: 25,sayHello: function() {console.log(`Hello, my name is ${this.name}`);}
};

array 是特殊的对象，用于存储有序的数据集合。 

let numbers = [1, 2, 3, 4, 5];
let mixed = [1, 'hello', true];

 function 也是一种引用类型，可作为参数传递和返回。

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

(3).获取数据类型

可以使用 typeof 和 instanceof 操作符检测数据类型。

console.log(typeof 'hello'); // 输出: string
console.log(typeof 123); // 输出: number
console.log([] instanceof Array); // 输出: true
console.log({} instanceof Object); // 输出: true

(4).JS中的运算符与“===”运算符 

        在 JavaScript 里，运算符是用于执行各种操作的符号，主要分为算术运算符，赋值运算符，比较运算符，逻辑运算符，三元运算符等。整体上与Java中的运算符无太大区别，所以不在赘述。

        在JS的运算符中有一个在Java中没有的，即“===”，这里只对这个运算符做必要讲解。

        在 JavaScript 里，=== 被称为严格相等运算符，也叫全等运算符。它用于比较两个值是否严格相等，会同时检查值和数据类型是否一致。

  • value1 和 value2 是要进行比较的两个值。
  • 若 value1 和 value2 的值和数据类型都相同，表达式返回 true；反之则返回 false。

特点：不进行类型转换，和 == 运算符不同，=== 不会在比较前对操作数进行类型转换。

 示例：基本数据类型比较

// 数字比较
console.log(5 === 5); // 输出: true
console.log(5 === '5'); // 输出: false，类型不同，一个是 number，一个是 string// 字符串比较
console.log('hello' === 'hello'); // 输出: true
console.log('hello' === 'Hello'); // 输出: false，值不同// 布尔值比较
console.log(true === true); // 输出: true
console.log(true === false); // 输出: false// null 和 undefined 比较
console.log(null === null); // 输出: true
console.log(undefined === undefined); // 输出: true
console.log(null === undefined); // 输出: false

示例：引用数据类型比较

        对于引用数据类型（如对象、数组、函数），=== 比较的是它们的引用地址，而非实际内容。

// 对象比较
let obj1 = { name: 'Alice' };
let obj2 = { name: 'Alice' };
let obj3 = obj1;
console.log(obj1 === obj2); // 输出: false，虽然内容相同，但引用地址不同
console.log(obj1 === obj3); // 输出: true，引用同一个对象// 数组比较
let arr1 = [1, 2, 3];
let arr2 = [1, 2, 3];
let arr3 = arr1;
console.log(arr1 === arr2); // 输出: false，引用地址不同
console.log(arr1 === arr3); // 输出: true，引用同一个数组// 函数比较
function func1() {}
function func2() {}
let func3 = func1;
console.log(func1 === func2); // 输出: false，函数定义不同
console.log(func1 === func3); // 输出: true，引用同一个函数

        与 == 运算符的区别： == 是宽松相等运算符，在比较时会进行类型转换，而 === 不会。示例如下：

console.log(5 == '5'); // 输出: true，'5' 被转换为数字 5 后比较
console.log(5 === '5'); // 输出: false，类型不同

总结：=== 运算符在比较时更严格，会同时检查值和数据类型，适合需要精确比较的场景，能避免因类型转换带来的意外结果。

4.流程控制语句

        JS中的流程控制语句和Java中的类似，用法基本一直，所以不在过多赘述。

5.输出语句

在 JavaScript 里，有多种输出语句，适用于不同场景，下面为你详细介绍。

        alert() 函数：用于弹出一个模态警告框（写入警告框），向用户展示信息。警告框会暂停页面操作，直到用户点击“确定”按钮关闭。

<!DOCTYPE html>
<html lang="en">
<head><meta charset="UTF-8"><meta name="viewport" content="width=device-width, initial-scale=1.0"><title>Document</title>
</head>
<body><script>// 弹出警告框显示信息alert('这是一个警告框信息');</script>
</body>
</html>

        console.log() 用于在浏览器开发者工具的控制台输出信息（写入浏览器控制台），常用于调试代码。

<!DOCTYPE html>
<html lang="en">
<head><meta charset="UTF-8"><meta name="viewport" content="width=device-width, initial-scale=1.0"><title>Document</title>
</head>
<body><script>const message = '这是控制台输出信息';// 在控制台输出变量的值console.log(message);</script>
</body>
</html>

        document.write()：用于向 HTML 文档写入内容（写入HTML页面）。如果在页面加载完成后调用，会覆盖整个文档内容。

<!DOCTYPE html>
<html lang="en">
<head><meta charset="UTF-8"><meta name="viewport" content="width=device-width, initial-scale=1.0"><title>Document</title>
</head>
<body><script>// 向文档写入内容document.write('<p>这是通过 document.write 写入的内容</p>');</script>
</body>
</html>
http://www.lryc.cn/news/595254.html

相关文章：

  • DigitalOcean 云平台上线 AMD MI325X GPU Droplet 服务器
  • 网站域名备案和服务器有关系吗
  • 解决OpenHarmony中找不到pthread_cancel和pthread_setcanceltype等libc符号的问题
  • Shell判断结构
  • 5道挑战题writup
  • 中文分词模拟器 - 华为OD统一考试(Java 题解)
  • macbookpro m1 max本儿上速搭一个elasticsearch+kibana环境
  • 在 React 中实现全局防复制hooks
  • MySQL表的基础操作
  • 鸿蒙DevEco Studio找不到JsonFormat插件
  • 虚拟机扩展磁盘容量后扩展分区大小
  • Linux的磁盘存储管理实操——（中）——逻辑卷管理实战
  • Linux find命令：强大的文件搜索工具
  • Apache Ignite Binary Object Restrictions
  • 青少年科学世界名刊分析评介：《生物技术世界》
  • 从 C# 到 Python：项目实战第五天的飞跃
  • Django视图与路由系统
  • 深入解析 Linux 硬链接与软链接：原理、区别及应用场景
  • 可编辑54页PPT | 智慧工业大数据建设方案智慧工厂整体解决方案
  • Git 常用命令与操作步骤
  • 深入理解 消息队列 与 ZeroMQ
  • C语言：20250721笔记
  • 板凳-------Mysql cookbook学习 （十二--------3_1)
  • 位标志法处理多选字段在数据库中的存储方式 查询效率与扩展性之间的权衡
  • 图论基本算法
  • LLaMA-Factory 微调可配置的LoRA参数
  • MySQL：表的增删查改
  • DFS习题篇【上】
  • buntu 22.04 上离线安装Docker 25.0.5（二）
  • 宝塔访问lnmp项目，跳转不到项目根目录问题解决