JavaScript学习笔记

最新推荐文章于 2024-10-16 16:26:58 发布
最新推荐文章于 2024-10-16 16:26:58 发布
阅读量222 收藏
点赞数
文章标签： javascript 学习 笔记
版权声明：本文为博主原创文章，遵循 CC 4.0 BY-SA 版权协议，转载请附上原文出处链接和本声明。
本文链接：https://blog.csdn.net/weixin_62936749/article/details/131408384
版权
JavaScript是一种高级脚本语言，常用于网页交互和动态功能。它可以嵌入HTML中或作为外部文件引用，支持变量声明、数据类型、运算符、条件语句和循环语句。JavaScript在客户端执行，与服务器无关，是Web开发的关键部分，可用于表单验证、动态内容、页面操作和动画等。
摘要由CSDN通过智能技术生成

JavaScript（JS）

文章目录

一、 JavaScript简介

JavaScript是一种高级编程语言，通常用于为网页添加交互性和动态功能。它是一种脚本语言，意味着它可以直接在网页中嵌入，也可以作为外部文件引用。

JavaScript最初是为了在网页上执行简单的脚本而创建的，但随着时间的推移，它发展成了一种功能强大的语言，可以用于开发复杂的Web应用程序和移动应用程序。

JavaScript与HTML和CSS配合使用，可以实现许多强大的功能，如表单验证、动态内容加载、页面元素操作、动画效果、用户交互等。它可以直接访问和操作网页的文档对象模型（DOM），从而改变网页的内容、样式和结构。

JavaScript具有以下特点：

  • 客户端脚本语言：JavaScript在用户的浏览器中执行，与服务器无关，可以在客户端进行实时交互。
  • 弱类型语言：JavaScript不需要显式声明变量的类型，变量的类型会根据赋值自动推断。
  • 动态语言：JavaScript允许在运行时修改和扩展代码，可以动态创建和调用函数、对象等。
  • 面向对象：JavaScript支持面向对象编程，可以创建和使用对象、类、继承等。
  • 跨平台：JavaScript可以在多种操作系统和设备上运行，包括桌面浏览器、移动浏览器和服务器端环境。

JavaScript的语法与其他编程语言类似，包括变量声明、数据类型、运算符、条件语句、循环语句等。它也有许多内置函数和对象，可以用于处理字符串、数组、日期、数学计算等常见任务。

总之，JavaScript是一种强大而灵活的编程语言，是Web开发中不可或缺的一部分。通过学习JavaScript，你可以为网页添加丰富的交互功能，提升用户体验，并开发出更加复杂和功能丰富的Web应用程序。

二、JavaScript用法

HTML 中的 Javascript 脚本代码必须位于 <script> 与 </script> 标签之间。

Javascript 脚本代码可被放置在 HTML 页面的 <body> 和 <head> 部分中。

1.<script> 标签

如需在 HTML 页面中插入 JavaScript，请使用 <script> 标签。

<script> 和 </script> 会告诉 JavaScript 在何处开始和结束。

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

<script>
alert("我的第一个 JavaScript");
</script>

2. 中的 JavaScript

在本例中，JavaScript 会在页面加载时向 HTML 的 <body> 写文本：
实例

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

3.<head> 中的 JavaScript 函数

本例把一个 JavaScript 函数放置到 HTML 页面的 <head> 部分。

该函数会在点击按钮时被调用：

<!DOCTYPE html>
<html>
<head>
<script>
function myFunction()
{
    document.getElementById("demo").innerHTML="我的第一个 JavaScript 函数";
}
</script>
</head>
<body>
<h1>我的 Web 页面</h1>
<p id="demo">一个段落</p>
<button type="button" onclick="myFunction()">尝试一下</button>
</body>
</html>

4.<body> 中的 JavaScript 函数

本例把一个 JavaScript 函数放置到 HTML 页面的 <body> 部分。

该函数会在点击按钮时被调用：

<!DOCTYPE html>
<html>
<body>
<h1>我的 Web 页面</h1>
<p id="demo">一个段落</p>
<button type="button" onclick="myFunction()">尝试一下</button>
<script>
function myFunction()
{
    document.getElementById("demo").innerHTML="我的第一个 JavaScript 函数";
}
</script>
</body>
</html>

5.外部的 JavaScript

也可以把脚本保存到外部文件中。外部文件通常包含被多个网页使用的代码。

外部 JavaScript 文件的文件扩展名是 .js。

如需使用外部文件，请在 <script> 标签的 “src” 属性中设置该 .js 文件：

<!DOCTYPE html>
<html>
<body>
<script src="myScript.js"></script>
</body>
</html>

三、JavaScript基本语法

下面是JavaScript的基本语法要点：

1. 变量声明

使用var、let或const关键字声明变量。例如：

var x = 5;
let y = 10;
const z = 15;

2. 数据类型

JavaScript有多种数据类型，包括数字、字符串、布尔值、数组、对象等。例如：

var num = 10;
var str = "Hello";
var bool = true;
var arr = [1, 2, 3];
var obj = { name: "John", age: 25 };

3. 运算符

JavaScript支持常见的数学运算符（如加减乘除），以及比较运算符和逻辑运算符。例如：

var sum = 2 + 3;
var isGreater = 5 > 3;
var isTrue = true && false;

4. 条件语句

使用if语句根据条件执行不同的代码块。还可以使用else if和else来处理多个条件。例如：

if (x > 10) {
  console.log("x is greater than 10");
} else if (x < 10) {
  console.log("x is less than 10");
} else {
  console.log("x is equal to 10");
}

5. 循环语句

使用for、while或do-while循环来重复执行代码块。例如：

for (var i = 0; i < 5; i++) {
  console.log(i);
}

var i = 0;
while (i < 5) {
  console.log(i);
  i++;
}

var i = 0;
do {
  console.log(i);
  i++;
} while (i < 5);

6. 函数

使用function关键字定义函数，可以接收参数并返回值。例如：

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

var result = add(3, 5);
console.log(result); // 输出 8

三、JavaScript数据类型

1.基本数据类型

JavaScript有以下几种基本数据类型：

  1. 数字（Number）：用于表示数值，包括整数和浮点数。例如：var num = 10;

  2. 字符串（String）：用于表示文本数据，由一系列字符组成。可以使用单引号或双引号括起来。例如：var str = "Hello";

  3. 布尔值（Boolean）：用于表示真或假的值。只有两个可能的取值：true和false。例如：var bool = true;

  4. 数组（Array）：用于存储多个值的有序集合。数组中的每个值称为元素，可以通过索引访问。数组可以包含不同类型的数据。例如：var arr = [1, 2, 3];

  5. 对象（Object）：用于存储键值对的集合。每个键值对称为属性，可以通过属性名访问对应的值。对象可以包含不同类型的数据。例如：var obj = { name: "John", age: 25 };

  6. 空值（Null）：表示一个空值或不存在的对象。例如：var nullValue = null;

  7. 未定义（Undefined）：表示一个未定义的值，通常用于声明变量但未给其赋值时。例如：var undefinedValue;

除了这些基本数据类型，JavaScript还有一些特殊的数据类型，如函数（Function）、日期（Date）、正则表达式（RegExp）等。

JavaScript还具有动态类型的特性，这意味着变量可以在运行时被赋予不同类型的值。例如，一个变量可以先被赋值为数字，然后再被赋值为字符串。

可以使用typeof运算符来确定一个值的数据类型。例如：typeof num;将返回"number"。

2.数据类型实例

以下是一些实例：

  1. 数字（Number）：

    var age = 25;
var price = 9.99;

  2. 字符串（String）：

    var name = "John";
var message = 'Hello, how are you?';

  3. 布尔值（Boolean）：

    var isTrue = true;
var isFalse = false;

  4. 数组（Array）：

    var numbers = [1, 2, 3, 4, 5];
var fruits = ["apple", "banana", "orange"];

  5. 对象（Object）：

    var person = { name: "John", age: 25, city: "New York" };
var car = { brand: "Toyota", model: "Camry", year: 2020 };

  6. 空值（Null）：

    var nullValue = null;

  7. 未定义（Undefined）：

    var undefinedValue;

  8. 函数（Function）：

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

  9. 日期（Date）：

    var currentDate = new Date();

  10. 正则表达式（RegExp）：

    var pattern = /[a-z]+/;

这些示例展示了JavaScript中不同数据类型的用法。JavaScript是一种动态类型语言，变量的数据类型可以根据赋值而变化。

四、JavaScript运算符

1.一些常见的运算符

下面是一些常见的JavaScript运算符的详细介绍：

  1. 算术运算符：

    • 加法运算符（+）：用于将两个值相加。
    • 减法运算符（-）：用于将一个值减去另一个值。
    • 乘法运算符（*）：用于将两个值相乘。
    • 除法运算符（/）：用于将一个值除以另一个值。
    • 模运算符（%）：用于获取两个值相除的余数。

  2. 赋值运算符：

    • 等号运算符（=）：用于将右侧的值赋给左侧的变量。
    • 加等于运算符（+=）：用于将右侧的值加到左侧的变量上，并将结果赋给左侧的变量。
    • 减等于运算符（-=）：用于将右侧的值从左侧的变量中减去，并将结果赋给左侧的变量。
    • 乘等于运算符（*=）：用于将右侧的值乘以左侧的变量，并将结果赋给左侧的变量。
    • 除等于运算符（/=）：用于将左侧的变量除以右侧的值，并将结果赋给左侧的变量。
    • 模等于运算符（%=）：用于将左侧的变量除以右侧的值的余数，并将结果赋给左侧的变量。

  3. 比较运算符：

    • 相等运算符（==）：用于检查两个值是否相等。
    • 不等运算符（!=）：用于检查两个值是否不相等。
    • 全等运算符（===）：用于检查两个值是否严格相等（值和类型都相等）。
    • 不全等运算符（!==）：用于检查两个值是否不严格相等。
    • 大于运算符（>）：用于检查左侧的值是否大于右侧的值。
    • 小于运算符（<）：用于检查左侧的值是否小于右侧的值。
    • 大于等于运算符（>=）：用于检查左侧的值是否大于或等于右侧的值。
    • 小于等于运算符（<=）：用于检查左侧的值是否小于或等于右侧的值。

  4. 逻辑运算符：

    • 逻辑与运算符（&&）：用于检查两个条件是否都为真。
    • 逻辑或运算符（||）：用于检查两个条件是否至少有一个为真。
    • 逻辑非运算符（!）：用于取反一个条件的值。

这些只是JavaScript运算符的一部分，还有其他类型的运算符，如位运算符、三元运算符等。

2.运算符实例

当然！下面是一些JavaScript运算符的示例：

  1. 算术运算符：
let x = 5;
let y = 2;

console.log(x + y); // 输出：7
console.log(x - y); // 输出：3
console.log(x * y); // 输出：10
console.log(x / y); // 输出：2.5
console.log(x % y); // 输出：1
  1. 赋值运算符：
let x = 5;

x += 2; // 等同于 x = x + 2;
console.log(x); // 输出：7

x -= 3; // 等同于 x = x - 3;
console.log(x); // 输出：4

x *= 2; // 等同于 x = x * 2;
console.log(x); // 输出：8

x /= 4; // 等同于 x = x / 4;
console.log(x); // 输出：2

x %= 3; // 等同于 x = x % 3;
console.log(x); // 输出：2
  1. 比较运算符：
let x = 5;
let y = 3;

console.log(x == y); // 输出：false
console.log(x != y); // 输出：true
console.log(x === '5'); // 输出：false
console.log(x !== '5'); // 输出：true
console.log(x > y); // 输出：true
console.log(x < y); // 输出：false
console.log(x >= y); // 输出：true
console.log(x <= y); // 输出：false
  1. 逻辑运算符：
let x = 5;
let y = 3;
let z = 7;

console.log(x > y && y < z); // 输出：true
console.log(x > y || y > z); // 输出：true
console.log(!(x > y)); // 输出：false

五.条件语句和循环语句

当编写JavaScript代码时，条件语句和循环语句是非常有用的工具。它们可以根据特定条件执行不同的代码块，或者重复执行一段代码。下面是关于JavaScript中条件语句和循环语句的详细介绍

1.条件语句：

1. if语句

if语句是最基本的条件语句，它根据给定的条件执行相应的代码块。如果条件为真，将执行if代码块中的语句。

if (condition) {
  // 如果条件为真，执行这里的代码
}

2. if…else语句

if…else语句在条件为真时执行if代码块，否则执行else代码块。

if (condition) {
  // 如果条件为真，执行这里的代码
} else {
  // 如果条件为假，执行这里的代码
}

3. if…else if…else语句

if…else if…else语句允许您根据多个条件执行不同的代码块。

if (condition1) {
  // 如果条件1为真，执行这里的代码
} else if (condition2) {
  // 如果条件2为真，执行这里的代码
} else {
  // 如果条件1和条件2都为假，执行这里的代码
}

2.循环语句：

1. for循环

for循环用于重复执行一段代码，可以指定循环的起始值、结束条件和每次迭代后的步长。

for (initialization; condition; increment) {
  // 在每次迭代中执行这里的代码
}

2. while循环

while循环在给定条件为真时重复执行一段代码，直到条件为假为止。

while (condition) {
  // 只要条件为真，就一直执行这里的代码
}

3. do…while循环

do…while循环与while循环类似，但它先执行一次代码块，然后再检查条件是否为真。只要条件为真，就会重复执行代码块。

do {
  // 执行这里的代码
} while (condition);

这些是JavaScript中常用的条件语句和循环语句。它们根据不同的条件执行代码块，或者重复执行一段代码。

933
关注
JavaScript基础语法及小案例
明哥
07-21 1044
函数是一种在编程中用于封装代码的机制。它是一段可重复使用的代码块，通过给它一个名称，可以在程序中多次调用该代码块，从而实现代码的模块化和复用。函数由以下几个主要组成部分：函数名：函数具有一个名称，用于标识和调用函数。函数名应具有描述性，能够清晰地表达函数的功能。参数：函数可以接受零个或多个参数（也称为形式参数）。参数是函数在调用时传递给函数内部的值。参数可以在函数内部使用，用于执行特定的操作和计算。参数允许将数据传递到函数中，从而使函数更加通用和灵活。
尚硅谷JavaScript高级学习笔记
javaThinker的专栏
03-08 1118
JavaScript中函数是对象。我们后续描述构造函数的内存模型时，会将构造函数称为构造函数对象。typeof 运算符来查看值的类型，它返回的是类型的字符串值 会做数据转换 输出： 每个函数都有一个prototype属性，它默认指向一个0bject空对象(即称为:原型对象) 给原型对象添加属性、方法，函数的所有实例对象自动拥有原型中的属性(方法) 16、显式原型和隐式原型 和 中保存的都是原型对象的地址值。Fun的prototype、f的__proto__属性什么时
Javascript学习笔记五
qwsadsdga的博客
12-03 452
JavaScript中函数的定义方式。
javascript学习笔记——上
weixin_64574004的博客
10-07 921
​ 1，HTML定义了网页的内容，CSS定义了网页的布局和网页中内容的样式，而JavaScript控制了网页的行为。​ 2，javascript是一种脚本语言。​ 3，javascript的主要使用范围​ **JavaScript：直接写入HTML输入流：**ducument.write(“HTML语句”)​ **JavaScript：对事件的反应：**onclick​ **JavaScript：改变HTML内容：**DOM。
javascript 学习笔记
Katios
05-25 7314
注释“//”表示单行注释 “/* */”可以用来多行注释变量1.变量必须使用字母、下划线(_)或者美元符($)开始。2.然后可以使用任意多个英文字母、数字、下划线(_)或者美元符($)组成。3.不能使用JavaScript关键词与JavaScript保留字4.变量区分大小写 javascript作为一种脚本语言可以放在html页面中任何位置，但是浏览器解释html时是按先后顺序的，所以前
Javascript入门学习笔记
weixin_61370021的博客
04-27 4670
JS入门学习笔记，JavaScript是目前web开发中不可缺少的脚本语言，js不需要编译即可运行，运行在客户端，需要通过浏览器来解析执行JavaScript代码。
JavaScript学习笔记（详细）一
jojo_oulaoula的博客
05-19 1413
脚本语言（一堆命令组合在一起可以批量执行的称为脚本）有一定的安全性一种基于对象的一种语言（创建对象/面对对象）可以定义一堆事件（方法/函数）并进行调用函数定义：是完成特定任务的代码语句块函数使用方式：可以直接使用函数的分类：系统函数（JavaScript内置函数），自定义函数自定义函数分类：匿名函数 和 有名函数函数的别名：方法（1）特点1:定义有函数名称的函数（2）特点2:定义函数的语法结构（3）特点3:调用有名函数的语法结构a）直接调用。
JavaScript 学习笔记 超详细（b站pink老师）
weixin_59531237的博客
05-10 1万+
1. JavaScript （是什么？是一种运行在客户端（浏览器）的编程语言，实现人机交互效果。2. 作用（做什么？– 网页特效 (监听用户的一些行为让网页作出对应的反馈)– 表单验证 (针对表单数据的合法性进行判断)– 数据交互 (获取后台的数据, 渲染到前端)– 服务端编程 (node.js)3. JavaScript的组成（有什么？
javaScript学习笔记（一）js基础
热门推荐
一叶知秋
09-21 13万+
================================= 公众号 关注一波 （一叶知秋博客） 不定期分享视频资料 一、简介 1、概述： JavaScript是目前web开发中不可缺少的脚本语言，js不需要编译即可运行，运行在客户端，需要通过浏览器来解析执行JavaScript代码。 诞生于1995年，当时的主要目的是验证表单的数据是否合法。 Java...
javascript学习笔记
11-24
学习JavaScript时，了解这些基础知识是至关重要的。随着深入学习，你将接触到更高级的概念，如闭包、异步编程（回调函数、Promise、async/await）、模块系统以及现代框架如React、Vue和Angular的使用。JavaScript的...
javaScript学习笔记
03-10
个人在学习javaScript过程中做的一些笔记和代码实例
npm 和 npx 的区别和使用场景
Dou_Hua6的博客
10-09 668
自动下载和缓存：如果本地未安装所需包，npx会自动下载并执行，执行完毕后可以选择保留或删除。脚本运行：通过package.json中的scripts字段定义和运行自定义脚本。依赖管理：管理项目的dependencies和devDependencies。简化命令行工具的使用：临时执行命令，避免全局安装带来的版本冲突或污染。npm 全称：Node Package Manager。发布包：将自己的包发布到npm注册表供他人使用。：无需全局安装即可运行npm包中的可执行文件。
【JavaScript】移动色块案例 实现一个可以拖动并且在拖动过程中会自动改变颜色的色块（JS 事件监听器）
m0_66584716的博客
10-11 1338
- **移动色块**：用户可以通过鼠标按住并拖动页面上的红色方块（`#blocks`）。当用户按下鼠标左键时，色块开始跟随鼠标的移动而移动；当用户释放鼠标左键时，色块停止移动。 - **显示当前位置**：随着色块的移动，其当前的屏幕坐标（相对于浏览器窗口）会被实时更新，并显示在页面底部左侧的位置显示区域（`#positionDisplay`）中。 - **自动变色**：一旦用户开始拖动色块，系统就会每隔300毫秒随机改变一次色块的颜色。颜色的变化是通过调用 `getRandomColor()` 函数生成一个
ECMAScript标准解析及其发展历史与技术演进
qq_20245171的博客
10-15 503
ECMAScript（简称ES）是由ECMA国际（欧洲计算机制造商协会）制定的一种脚本语言规范。它是JavaScript、JScript等语言的基础，并为现代Web开发提供了强大的支持。ECMAScript标准不仅定义了语言的语法和语义，还涵盖了数据类型、对象模型和执行环境等内容，极大推动了JavaScript语言的发展。本文将全面介绍ECMAScript标准的起源、各个版本的演变、关键特性以及未来趋势，深入探讨其对Web开发及编程语言设计的影响。
Element-plus el-form、el-dialog 数据回显同时用时，重置失效问题
Mr. Zhang Xiaojian's Blog
10-12 500
当第一次打开网页并点击“编辑”按钮时，虽然对话框变量变为 true 使对话框可见，但同步代码会将 formData 对象的属性设置为默认值。由于 Vue 的异步更新机制，DOM 实际上还未更新，因此表单组件内绑定了这些有值的初始数据。这样，在后续调用 resetFields 方法时，表单将会重置为这些默认值而不是空值。编辑时表单的初始值被设置成了回显的数据，而不是空字符串。时，表单会回到上次设置的初始值，即回显的数据。
基于Java微信小程序的水果销售系统详细设计和实现(源码+lw+部署文档+讲解等)
最新发布
源码好优多
10-16 386
请联系我获取更详细的演示视频。
如何使用Python爬虫处理JavaScript动态加载的内容？
Z_suger7的博客
10-11 733
JavaScript动态加载的内容为爬虫带来了挑战，但也提供了新的机遇。通过使用Selenium、分析API请求或Pyppeteer，我们可以有效地爬取这些动态内容。这些方法各有优势，Selenium适合模拟复杂的用户交互，API请求适合直接获取数据，而Pyppeteer则提供了更强大的JavaScript控制能力。在实际应用中，开发者应根据目标网站的特点和需求选择合适的方法。随着技术的不断发展，我们也需要不断学习和适应新的工具和方法，以保持在数据获取领域的竞争力。复制再试一次分享。
JavaScript学习笔记：从基础到DOM编程
"这是一份全面的JavaScript学习笔记，涵盖了从CSS样式表基础到JavaScript语法、DOM编程等多个方面，旨在帮助读者深入理解并掌握JavaScript语言。" 在这份笔记中，作者首先介绍了CSS样式表的基本概念，包括什么是CSS...
评论
添加红包

请填写红包祝福语或标题

个

红包个数最小为10个

元

红包金额最低5元

当前余额3.43元 前往充值 >
需支付：10.00元
成就一亿技术人!
领取后你会自动成为博主和红包主的粉丝 规则
hope_wisdom
发出的红包
实付元
使用余额支付
点击重新获取
扫码支付
钱包余额 0

抵扣说明：

1.余额是钱包充值的虚拟货币，按照1:1的比例进行支付金额的抵扣。
2.余额无法直接购买下载，可以购买VIP、付费专栏及课程。

余额充值