JavaScript基础 - 基础

news2024/9/20 14:30:08

目录

A. 简介

B. 基础用法

一. 使用

二. 输出

C. 语法

D. HTML DOM


A. 简介

JavaScript 是一种高级的、解释型的编程语言，主要用于网页开发，以下是它的简介：

一、历史与发展

  1. 诞生
    • JavaScript 于 1995 年由 Netscape 公司的 Brendan Eich 设计，最初的目的是在网页中实现一些简单的交互效果，比如验证表单输入、显示动态内容等。它的名字中的“Java”部分是出于当时 Java 语言流行的考虑，但实际上 JavaScript 与 Java 是两种不同的语言，它们在语法、用途等方面有很大差异。
  2. 发展与标准化
    • 随着时间的推移，JavaScript 不断发展和演进。1996 年，Netscape 公司将 JavaScript 提交给欧洲计算机制造商协会（ECMA）进行标准化，最终形成了 ECMAScript 标准。这个标准定义了 JavaScript 的核心语法和基本对象等内容。此后，不同的浏览器厂商按照这个标准实现和改进 JavaScript 的解释器，使得 JavaScript 能够在各种浏览器中运行。
    • 近年来，JavaScript 不仅在网页前端开发中占据主导地位，还通过 Node.js 等技术在服务器端开发等领域得到广泛应用。

二、主要特点

  1. 解释型语言
    • JavaScript 是一种解释型语言，这意味着它不需要像 C、C++等编译型语言那样经过复杂的编译过程。它的代码可以直接在浏览器或支持 JavaScript 的环境中逐行解释执行。这种特性使得 JavaScript 的开发和调试相对较为简单和快速，开发者可以在修改代码后立即看到效果。
  2. 弱类型语言
    • JavaScript 是一种弱类型语言，变量在声明时不需要指定数据类型，变量的数据类型可以根据赋值的情况自动转换。例如，一个变量可以先存储一个数字，然后又存储一个字符串。虽然这种灵活性在某些情况下很方便，但也可能导致一些潜在的错误，需要开发者注意类型转换的合理性。
  3. 面向对象和基于原型
    • JavaScript 具有面向对象的特性，但它的面向对象实现方式与传统的基于类的面向对象语言（如 Java）有所不同。JavaScript 是基于原型的面向对象语言，它通过原型链来实现对象的继承和属性共享。这意味着对象可以从其他对象继承属性和方法，并且可以动态地添加、修改和删除对象的属性和方法。
  4. 事件驱动
    • JavaScript 是一种事件驱动的语言，它非常适合处理用户与网页的交互。网页中的各种事件，如鼠标点击、键盘输入、页面加载等，都可以触发相应的 JavaScript 代码执行。通过监听这些事件，开发者可以实现丰富的交互功能，例如当用户点击按钮时显示一个弹出窗口，或者当页面加载完成后自动执行某些操作。

三、应用领域

  1. 网页前端开发
    • 在网页前端开发中，JavaScript 是不可或缺的一部分。它可以用于操作网页的文档对象模型（DOM），实现动态更新网页内容、创建动画效果、验证用户输入等功能。例如，通过 JavaScript 可以在用户滚动页面时动态加载更多内容，或者根据用户的选择显示或隐藏网页的某些部分。
    • 随着前端框架和库的不断发展，如 React、Vue.js 和 Angular 等，JavaScript 在构建大型、复杂的单页应用（SPA）方面变得更加高效和便捷。这些框架利用 JavaScript 的特性，提供了更高级的组件化开发模式和更好的代码组织方式，使得前端开发能够实现更高的可维护性和可扩展性。
  2. 服务器端开发
    • Node.js 的出现使得 JavaScript 可以在服务器端运行。Node.js 是一个基于 Chrome V8 引擎的 JavaScript 运行环境，它允许开发者使用 JavaScript 编写服务器端代码，处理网络请求、访问数据库、实现服务器端的业务逻辑等。Node.js 具有非阻塞 I/O 和事件驱动的特点，使得它在处理高并发请求时表现出色，适用于构建实时应用、聊天服务器、在线游戏服务器等。
  3. 移动应用开发
    • 通过一些框架和工具，如 React Native 和 Ionic 等，开发者可以使用 JavaScript 来构建跨平台的移动应用。这些框架允许开发者使用 JavaScript 和相关技术来编写移动应用的代码，然后将其编译成原生应用可以运行的代码，从而实现一次编写、多平台运行的效果。例如，使用 React Native 可以使用 JavaScript 编写类似于原生应用的界面和交互逻辑，同时可以利用原生平台的功能和特性。
  4. 桌面应用开发
    • 借助 Electron 等框架，JavaScript 也可以用于开发桌面应用程序。Electron 允许开发者使用 Web 技术（HTML、CSS 和 JavaScript）来构建跨平台的桌面应用。例如，Visual Studio Code 就是一个使用 Electron 开发的知名桌面应用，它具有良好的用户界面和丰富的功能，同时可以在不同的操作系统上运行。

总之，JavaScript 是一种功能强大、应用广泛的编程语言，它在网页开发以及其他多个领域都发挥着重要作用，并且随着技术的不断发展，它的应用场景还在不断扩大和深化。

B. 基础用法

一. 使用

1.<script> 标签

在 <head> 或者 <body> 中使用

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

2.外部的 JavaScript

<script src="myScript.js"></script>

二. 输出

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

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

C. 语法

一、变量声明

  1. 使用var
    • 在 JavaScript 中，可以使用var关键字来声明变量。例如：
   var name = "John";
   var age = 30;
  • var声明的变量存在变量提升现象，即变量可以在声明之前使用，其值为undefined。例如：
   console.log(x); // 输出 undefined
   var x = 5;
  1. 使用let和const（ES6 新增）
    • let也用于声明变量，但它具有块级作用域，这意味着变量只在其声明的代码块内有效。例如：
   {
       let y = 10;
       console.log(y); // 输出 10
   }
   console.log(y); // 报错，y 未定义
  • const用于声明常量，即一旦赋值后就不能再重新赋值。例如：
   const PI = 3.14159;
   // PI = 3.14; // 这会导致错误，不能重新赋值

二、数据类型

  1. 基本数据类型
    • Number：用于表示数字，包括整数和浮点数。例如：
   var num1 = 5;
   var num2 = 5.5;
  • String：表示文本字符串。可以用单引号或双引号括起来。例如：
   var str1 = 'Hello';
   var str2 = "World";
  • Boolean：只有两个值，true和false，用于表示逻辑真和假。例如：
   var isTrue = true;
   var isFalse = false;
  • Undefined：表示未定义的值。当一个变量声明了但没有赋值时，它的值就是undefined。
  • Null：表示一个空值，即没有值的对象。它与undefined不同，null是有意表示没有对象，而undefined表示变量未初始化。
  1. 复合数据类型（引用类型）
    • Object：对象是属性的无序集合，每个属性都有一个名称和一个值。可以通过对象字面量来创建对象。例如：
   var person = {
       name: "John",
       age: 30
   };
  • Array：数组是一组有序的值的集合。可以通过数组字面量来创建数组。例如：
   var numbers = [1, 2, 3, 4, 5];
  • Function：函数是可执行的代码块，可以接受参数并返回值。可以通过函数声明或函数表达式来定义函数。例如：
   function add(a, b) {
       return a + b;
   }
   // 或者
   var subtract = function(a, b) {
       return a - b;
   };

三、运算符

  1. 算术运算符
    • 包括加法+、减法-、乘法*、除法/、取余%等。例如：
   var result1 = 5 + 3; // 结果为 8
   var result2 = 10 % 3; // 结果为 1
  1. 比较运算符
    • 用于比较两个值，返回一个布尔值。例如相等比较==、严格相等比较===（不仅比较值，还比较类型）、大于>、小于<、大于等于>=、小于等于<=等。例如：
   var isEqual = 5 == 5; // true
   var isStrictEqual = 5 === '5'; // false
  1. 逻辑运算符
    • 包括逻辑与&&、逻辑或||、逻辑非!。例如：
   var result3 = true && false; // false
   var result4 = true || false; // true
   var result5 =!true; // false
  1. 赋值运算符
    • 除了基本的赋值=，还有复合赋值运算符，如+=、-=、*=、/=等。例如：
   var x = 5;
   x += 3; // 相当于 x = x + 3，此时 x 的值为 8

四、控制流语句

  1. 条件语句（if、else if、else）
    • 用于根据条件执行不同的代码块。例如：
   var num = 10;
   if (num > 5) {
       console.log("数字大于 5");
   } else if (num === 5) {
       console.log("数字等于 5");
   } else {
       console.log("数字小于 5");
   }
  1. 循环语句（for、while、do...while）
    • for循环：用于已知循环次数的情况。例如：
   for (var i = 0; i < 5; i++) {
       console.log(i); // 会依次输出 0, 1, 2, 3, 4
   }
  • while循环：在循环条件为真时重复执行代码块。例如：
   var j = 0;
   while (j < 3) {
       console.log(j);
       j++;
   } // 会依次输出 0, 1, 2
  • do...while循环：先执行一次代码块，然后在循环条件为真时重复执行。例如：
   var k = 5;
   do {
       console.log(k);
       k--;
   } while (k > 0); // 会依次输出 5, 4, 3, 2, 1

五、函数定义和调用

  1. 定义函数
    • 如前面提到的，可以使用函数声明或函数表达式来定义函数。函数可以有零个或多个参数。例如：
   function greet(name) {
       console.log("Hello, " + name);
   }
   // 或者
   var sayGoodbye = function(name) {
       console.log("Goodbye, " + name);
   };
  1. 调用函数
    • 通过函数名加上括号并传入相应的参数来调用函数。例如：
   greet("John"); // 输出 Hello, John
   sayGoodbye("Mary"); // 输出 Goodbye, Mary

D. HTML DOM

在 JavaScript（JS）中，HTML DOM（文档对象模型）是一种用于 HTML 和 XML 文档的编程接口。它将网页文档呈现为一个由节点组成的树形结构，通过 JavaScript 可以对这个树形结构进行操作，从而实现动态地改变网页的内容、结构和样式等。

一、HTML DOM 的结构

  1. 节点类型
    • 整个文档是一个文档节点。
    • 每个 HTML 元素是元素节点。
    • HTML 元素内的文本是文本节点。
    • 每个 HTML 属性是属性节点。
    • 注释是注释节点。

例如，在以下 HTML 代码中：

<html>
  <body>
    <p>Hello World!</p>
  </body>
</html>

这里有一个文档节点（整个 HTML 文档），一个 <html> 元素节点，一个 <body> 元素节点，一个 <p> 元素节点，以及 <p> 元素内的文本节点“Hello World!”。

  1. 节点关系
    • 父节点：在上面的例子中，<body> 是 <p> 的父节点。
    • 子节点：<p> 是 <body> 的子节点。
    • 同胞节点：拥有相同父节点的节点互为同胞节点，比如如果 <body> 中还有另一个 <p> 元素，那么这两个 <p> 元素就是同胞节点。

二、通过 JavaScript 操作 HTML DOM

  1. 访问元素
    • 通过 getElementById：根据元素的 id 属性来获取元素。例如：
     var element = document.getElementById("myElement");
  • 通过 getElementsByTagName：根据元素的标签名获取元素列表。例如：
     var elements = document.getElementsByTagName("p");
  • 通过 getElementsByClassName：根据元素的 class 属性获取元素列表。例如：
     var elements = document.getElementsByClassName("myClass");
  1. 改变元素内容
    • 使用 innerHTML 属性来设置或获取元素的 HTML 内容。例如：
     document.getElementById("myDiv").innerHTML = "New content";
  • 使用 textContent 或 innerText 属性来设置或获取元素的文本内容（不包括 HTML 标签）。例如：
     document.getElementById("myP").textContent = "Some text";
  1. 改变元素属性
    • 可以直接通过元素对象的属性来设置或获取属性值。例如：
     var img = document.getElementById("myImage");
     img.src = "newimage.jpg"; // 设置图像的 src 属性
     var width = img.width; // 获取图像的宽度属性
  1. 添加和删除元素
    • 创建新元素：
     var newDiv = document.createElement("div");
  • 为新元素添加文本：
     var newText = document.createTextNode("This is a new div");
     newDiv.appendChild(newText);
  • 将新元素添加到页面：
     document.body.appendChild(newDiv);
  • 删除元素：
     var elementToRemove = document.getElementById("myElementToRemove");
     elementToRemove.parentNode.removeChild(elementToRemove);

三、事件处理

HTML DOM 允许通过 JavaScript 对用户与网页的交互进行响应，这是通过事件处理实现的。

  1. 常见的事件类型有：

    • click：当用户点击元素时触发。
    • mouseover：当鼠标指针移动到元素上时触发。
    • mouseout：当鼠标指针移出元素时触发。
    • keydown：当用户按下键盘上的键时触发。
    • submit：当表单提交时触发。

  2. 事件处理的方式：

    • 内联方式：在 HTML 标签中直接指定事件处理函数。例如：
     <button onclick="alert('Button clicked')">Click Me</button>
  • 使用 JavaScript 代码添加事件监听器：
     var button = document.getElementById("myButton");
     button.addEventListener("click", function() {
       alert('Button clicked');
     });

HTML DOM 为 JavaScript 提供了一种强大的方式来与网页进行交互和动态操作，使得网页可以实现丰富的功能和良好的用户体验。它是现代 Web 开发中不可或缺的一部分，无论是构建简单的网页还是复杂的 Web 应用程序都需要对其有深入的理解和掌握。

本文来自互联网用户投稿，该文观点仅代表作者本人，不代表本站立场。本站仅提供信息存储空间服务，不拥有所有权，不承担相关法律责任。如若转载，请注明出处：http://www.coloradmin.cn/o/1990903.html

如若内容造成侵权/违法违规/事实不符，请联系多彩编程网进行投诉反馈，一经查实，立即删除！

相关文章

DataX PostgreSQL 读写支持Geometry类型

DataX PostgreSQL 读写支持Geometry类型

这里写目录标题 简要说明依赖代码 简要说明 通过简单修改源码中关于相关的reader、writer和DBUtil工具类&#xff0c;实现表到表之间的Geometry字段类型数据的输送&#xff0c;目前修改仅测试过在postgresql的postgis插件下的Geometry类型可行。 依赖 1.通过gitclone 或者 到…
阅读更多...
在Nestjs使用mysql和typeorm

在Nestjs使用mysql和typeorm

1. 创建项目 nest new nest-mysql-test 2. 添加config 安装 nestjs/config 包 pnpm i --save nestjs/config 添加 .env 文件 DATABASE_HOSTlocalhost DATABASE_PORT3306 DATABASE_USERNAMEroot DATABASE_PASSWORD123456 DATABASE_DBdbtest 创建 config/database.config.…
阅读更多...
Gstreamer实现udp帧数据的转发（一）

Gstreamer实现udp帧数据的转发（一）

前言 最近有个项目&#xff0c;要求实现信息分发&#xff0c;大概意思是经过了各种交换机和电台&#xff0c;经过两个信息分发软件实现udp数据的转发&#xff0c;可能包括文本、指令、音视频等数据。 例如&#xff1a;设备1 《---》 设备2&#xff08;信息分发软件1&#xff09…
阅读更多...
兼容性测试详解

兼容性测试详解

目录 前言1. 兼容性测试的定义和重要性1.1 兼容性测试的定义1.2 兼容性测试的重要性 2. 兼容性测试的类型2.1 跨浏览器测试2.1.1 跨浏览器测试的挑战2.1.2 跨浏览器测试的方法 2.2 跨平台测试2.2.1 跨平台测试的挑战2.2.2 跨平台测试的方法 3. 兼容性测试的步骤和策略3.1 测试计…
阅读更多...
前端错误日志上报解决方案

前端错误日志上报解决方案

前言 项目上线之后&#xff0c;用户如果出现错误&#xff08;代码报错、资源加载失败以及其他情况&#xff09;&#xff0c;基本上没有办法复现&#xff0c;如果用户出了问题但是不反馈或直接不用了&#xff0c;对开发者或公司来说都是损失。 由于我这个项目比较小&#xff0c…
阅读更多...
AI绘画工具介绍：以新奇角度分析与探索AI绘画艺术与技术的交汇点

AI绘画工具介绍：以新奇角度分析与探索AI绘画艺术与技术的交汇点

目录 前言 一、AI绘画工具的前沿技术 1.1 深度学习的进化 1.2 GANs的创新应用 1.3 风格迁移的多样化 1.4 交互式AI绘画的智能化 二、艺术与技术的交汇点 2.1 艺术创作的普及化 2.2 艺术风格的创新 2.3 艺术与科技的深度融合 三、新颖的思考角度 3.1 AI作为艺术创作…
阅读更多...
nginx平滑重启和php-fpm平滑重启

nginx平滑重启和php-fpm平滑重启

https://www.jianshu.com/p/c7809490979ahttp://xn--nginxphp-fpm-dc3k7692b4eb248gffzdlr6cx05cfuhyucca 1.在php-fpm.conf的配置中增加配置&#xff0c;让php-fpm重启前如果存在已经在处理的请求&#xff0c;先处理完再重启&#xff1a; 2.重启命令执行前&#xff0c;先…
阅读更多...
【Python】简单爆破破解

【Python】简单爆破破解

暴力破解是一种针对密码的破译方法&#xff0c;通过逐个推算或使用工具批量验证来找到正确的密码。暴力破解是信息安全领域中一个非常重要的话题。在当今数字化时代&#xff0c;个人信息、企业数据和各种网络服务都依赖于密码来保护安全。因此&#xff0c;破解密码成为黑客获取…
阅读更多...
熵权法模型（评价类问题）

熵权法模型（评价类问题）

一. 概念 利用信息熵计算各个指标的权重&#xff0c;从而为多指标的评价类问题提供依据。 指标的变异程度越小&#xff0c;所反映的信息量也越少&#xff0c;所以其对应的权值也应该越低。 指标的变异程度&#xff08;或称为变异性、波动性&#xff09;&#xff1a;描述了一…
阅读更多...
AI智能名片S2B2C商城小程序在社群团购平台产品供应链优化中的应用探索

AI智能名片S2B2C商城小程序在社群团购平台产品供应链优化中的应用探索

摘要&#xff1a;在社群团购这一新兴零售模式迅速崛起的背景下&#xff0c;产品供应链的效率和稳定性成为制约其进一步发展的关键因素。特别是在社群团购行业尚处于初步发展阶段的今天&#xff0c;产品资源的稀缺性尤为突出。针对这一问题&#xff0c;本文深入探讨了AI智能名片…
阅读更多...
计算机网络408考研 2021

计算机网络408考研 2021

2021 计算机网络408考研2021年真题解析_哔哩哔哩_bilibili 1 1 11 1 1 11
阅读更多...
飞睿智能8km无人机WiFi图传模块，高清、稳定、超远距！实时传输新高度

飞睿智能8km无人机WiFi图传模块，高清、稳定、超远距！实时传输新高度

在数字化飞速发展的今天&#xff0c;无人机已经从一个遥不可及的科幻概念&#xff0c;变成了我们日常生活中的得力助手。无论是航拍美景、农业植保&#xff0c;还是紧急救援、物流配送&#xff0c;无人机都展现出了其独特的优势。而在这背后&#xff0c;一个至关重要的技术支撑…
阅读更多...
VUE学习-day20

VUE学习-day20

VUE学习-day20 1. 下载与安装 1.1 安装Node.js Node.js是一个免费、开源、跨平台的 JavaScript 运行时环境&#xff0c;它让开发人员能够创建服务器、Web 应用、命令行工具和脚本。 我们可以通过node.js来下载vue的组件和创建vue项目 下载安装教程:https://blog.csdn.net/…
阅读更多...
检索增强生成 (RAG)在实践中的挑战

检索增强生成 (RAG)在实践中的挑战

检索增强生成 (RAG) 应用程序已成为大型语言模型 (LLM) 领域的强大工具&#xff0c;但在从原型过渡到生产环境时&#xff0c;经常面临挑战。 RAG 模型在需要深度知识整合和情境理解的应用中尤其有效&#xff0c;例如法律研究、科学文献综述和复杂的客户服务查询。检索和生成过…
阅读更多...
mysql 中的共享锁与排他锁

mysql 中的共享锁与排他锁

mysql 中的共享锁与排他锁 1、共享锁&#xff08;Shared Lock&#xff09;2、排他锁&#xff08;Exclusive Lock&#xff09; &#x1f496;The Begin&#x1f496;点点关注&#xff0c;收藏不迷路&#x1f496; 在MySQL的InnoDB存储引擎中&#xff0c;锁是管理并发访问数据的关…
阅读更多...
Leetcode—328. 奇偶链表【中等】

Leetcode—328. 奇偶链表【中等】

2024每日刷题&#xff08;153&#xff09; Leetcode—328. 奇偶链表 实现代码 /*** Definition for singly-linked list.* struct ListNode {* int val;* ListNode *next;* ListNode() : val(0), next(nullptr) {}* ListNode(int x) : val(x), next(nullptr)…
阅读更多...
入门岛3-Git 的使用与项目构建

入门岛3-Git 的使用与项目构建

任务概览 任务1: 破冰活动&#xff1a;自我介绍 任务2: 实践项目&#xff1a;构建个人项目 参考&#xff1a;git流程&#xff1a; csdn1 csdn2 任务1: 破冰活动&#xff1a;自我介绍 1.Git 是一种开源的分布式版本控制系统&#xff0c;广泛应用于软件开发领域&#xff0c;尤…
阅读更多...
DPDI Online在线kettle调度工具

DPDI Online在线kettle调度工具

1. DPDI简介 DPDI Online 是一款基于Kettle的强大在线任务调度平台&#xff0c;凭借其高效与灵活性&#xff0c;专为调度和监控Kettle客户端生成的ETL任务而设计 2. DPDI使用 2.1 DPDI登录 2.2 DPDI核心功能 2.2.1 工作台 DPDI online首页主要是显示任务监控信息&#xff…
阅读更多...
k8s 四种Service类型(ClusterIP、NodePort、LoadBalancer、ExternalName)详解

k8s 四种Service类型(ClusterIP、NodePort、LoadBalancer、ExternalName)详解

&#x1f407;明明跟你说过&#xff1a;个人主页 &#x1f3c5;个人专栏&#xff1a;《Kubernetes航线图&#xff1a;从船长到K8s掌舵者》 &#x1f3c5; &#x1f516;行路有良友&#xff0c;便是天堂&#x1f516; 目录 一、引言 1、k8s概述 2、Service在Kubernetes中的…
阅读更多...
细说盘点10种自动化拣货技术

细说盘点10种自动化拣货技术

导语 大家好&#xff0c;我是社长&#xff0c;老K。专注分享智能制造和智能仓储物流等内容。 在现代物流和仓储管理中&#xff0c;拣货技术的选择对于提高效率和降低成本至关重要。 本文将为您介绍10种流行的拣货技术&#xff0c;并分享它们的参数和应用场景&#xff0c;以帮助…
阅读更多...
推荐文章
最新文章

Copyright @ 2022~2023