5分钟JavaScript快速入门


目录

一.JavaScript基础语法

 二.JavaScript的引入方式

三.JavaScript中的数组

四.BOM对象集合

五.DOM对象集合

六.事件监听

使用addEventListener()方法添加事件监听器

使用onX属性直接指定事件处理函数

使用removeEventListener()方法移除事件监听器


一.JavaScript基础语法

JavaScript是一种高级编程语言,用于开发网页和网络应用程序。它是一种动态类型语言,可以在客户端和服务器端运行。JavaScript主要用于改善用户体验、实现动态网页、与用户进行交互以及处理数据等功能。它具有易学易用的特点,被广泛用于网页开发和移动应用开发。

JavaScript是一种弱类型、动态的编程语言,主要用于在网页上添加交互功能。以下是JavaScript的一些基本语法要点:

  1. 变量声明:使用 var、let const 来声明变量,例如:
    var x = 10;
    let y = 5;
    const z = 3.14;
    
  2. 数据类型:支持数值(整数和浮点数)、字符串、布尔值、数组、对象等多种数据类型
  3. 条件语句:使用 if-else 语句进行条件判断,例如:

    if (x > 5) {console.log("x大于5");
    } else {console.log("x小于等于5");
    }
    
  4. 循环语句:使用 for、while do-while 语句进行循环操作,例如:
    for (var i = 0; i < 5; i++) {console.log(i);
    }
    
  5. 函数定义:使用 function 关键字定义函数,例如:
    function add(a, b) {return a + b;
    }
    
  6. 事件处理:可以通过添加事件监听器来响应用户的操作,例如:
    document.getElementById("myButton").addEventListener("click", function() {console.log("按钮被点击了");
    });
    
  7. 对象和属性:可以使用对象字面量或构造函数来创建对象,并使用点操作符访问对象的属性,例如:
    var person = {name: "张三",age: 20
    };
    console.log(person.name);
    

 二.JavaScript的引入方式

JavaScript可以通过以下几种方式引入:

  1. 内联方式(Inline):直接在HTML页面中嵌入JavaScript代码,使用<script>标签将JavaScript代码放置在HTML文件的<head><body>标签内。例如:
    <head><script>// JavaScript代码</script>
    </head>
    

    这种方式适用于较小的脚本或临时性的代码

  2. 外部文件方式(External):将JavaScript代码保存在一个独立的外部文件中,然后使用<script>标签的src属性将文件引入到HTML页面中。例如:
    <head><script src="script.js"></script>
    </head>
    

    在外部文件中编写JavaScript代码,可以提高代码的可维护性和重用性。

  3. 内部方式(Internal):将JavaScript代码直接嵌入HTML文件的<script>标签内,但不使用src属性引入外部文件。例如:
    <head><script>// JavaScript代码</script>
    </head>
    

    这种方式适用于较小的脚本或临时性的代码,与内联方式类似。

根据具体的需求和项目规模,选择合适的引入方式可以提高代码的可维护性和效率。


三.JavaScript中的数组

JavaScript中的数组是一种特殊的对象,用于存储多个值。它可以包含不同类型的数据,如数字、字符串、布尔值等。数组使用方括号 [] 来定义,元素之间用逗号分隔。

创建数组可以使用以下语法创建一个新的数组:

var arr = []; // 空数组
var arr = [1, 2, 3]; // 包含三个元素的数组
var arr = new Array(); // 使用构造函数创建空数组
var arr = new Array(1, 2, 3); // 使用构造函数创建包含三个元素的数组

访问数组元素 可以使用索引来访问数组中的元素,索引从 0 开始。例如:

var arr = [1, 2, 3];
console.log(arr[0]); // 输出 1
console.log(arr[1]); // 输出 2
console.log(arr[2]); // 输出 3
var arr = [1, 2, 3];
console.log(arr[0]); // 输出 1
console.log(arr[1]); // 输出 2
console.log(arr[2]); // 输出 3

数组长度 可以使用 length 属性来获取数组的长度。例如:

var arr = [1, 2, 3];
console.log(arr.length); // 输出 3

 JavaScript 提供了一些内置的数组方法,用于对数组进行操作,如增加、删除、修改元素,获取子数组等。常用的方法包括:

  • push():向数组末尾添加一个或多个元素,并返回新的长度
  • pop():删除并返回数组的最后一个元素
  • shift():删除并返回数组的第一个元素
  • unshift():向数组开头添加一个或多个元素,并返回新的长度
  • splice():删除、替换或添加元素,或者同时进行多个操作
  • slice():返回数组的一个子数组
  • concat():将多个数组合并为一个新数组
  • join():将数组的所有元素连接成一个字符串
  • reverse():反转数组的元素顺序
  • sort():对数组的元素进行排序

四.BOM对象集合

BOM(Browser Object Model)是指浏览器对象模型,是JavaScript中与浏览器交互的一组对象的集合。

BOM提供了一系列的对象,用于操作浏览器窗口和浏览器本身。其中一些重要的BOM对象包括:

  1. `window`对象:代表浏览器窗口。它是BOM的顶层对象,可以访问和操作浏览器窗口的属性和方法,比如窗口的大小、位置、打开新的窗口等。
  2. `navigator`对象:提供有关浏览器的信息,比如浏览器的名称、版本、所使用的操作系统等。还可以通过`navigator`对象检测用户的浏览器类型和功能支持情况。
  3. `location`对象:代表当前页面的URL信息。可以通过`location`对象获取当前页面的URL、跳转到其他页面、修改页面的URL等。
  4. `screen`对象:提供了有关用户屏幕的信息,比如屏幕的宽度、高度、颜色深度等。

除了上述对象,BOM还提供了其他一些对象和API,用于处理浏览器的历史记录、cookie、定时器等功能。

我们可以通过使用上述的对象来直接对浏览器进行操作,就拿我们最常用的 window对象 来举例:

Window属性:

  • history:对history对象的只读引用

  • location:用于窗口或框架的Location对象

  • navigation:对Navigator对象的只读引用

Window方法:

  • alert():显示警告窗口

  • confirm():显示确认对话框

  • setInterval():周期的调用函数或计算表达式

  • setTimeout():指定毫秒数后调用函数或计算表达式


五.DOM对象集合

DOM(文档对象模型)在JavaScript中是一个重要的概念。它是浏览器用来表示网页文档的对象模型,通过DOM,JavaScript可以访问和操作网页中的元素和属性。

DOM以树状结构表示HTML文档的层次关系。每个HTML元素都被表示为一个DOM节点,节点之间的关系通过父子关系来描述。根节点是整个文档,它的子节点是HTML元素,而每个HTML元素又可以有自己的子节点。

JavaScript可以使用一些内置的方法和属性来操作DOM节点,常用的方法包括:getElementById():根据元素的id属性获取DOM节点。

  1. getElementsByClassName():根据元素的class属性获取DOM节点。
  2. getElementsByTagName():根据元素的标签名获取DOM节点。
  3. querySelector():使用CSS选择器来获取DOM节点。
  4. createElement():创建一个新的DOM元素节点。
  5. appendChild():将一个DOM节点添加为另一个节点的子节点。
  6. removeChild():从DOM树中移除一个节点。

除了以上方法,还有很多其他方法和属性可用于操作DOM。通过这些方法和属性,JavaScript可以读取和修改DOM节点的属性、样式和内容,还可以创建、删除和移动DOM节点。这样,JavaScript可以实现与用户交互、动态更新网页内容等功能。


六.事件监听

在JavaScript中,事件监听是一种常见的技术,用于在特定的DOM元素上监听特定的事件,并执行相应的代码。以下是一些常用的方法和语法:

使用addEventListener()方法添加事件监听器

element.addEventListener(event, function, useCapture);
  • element是要添加事件监听器的DOM元素。
  • event是要监听的事件名称,如clickmouseover等。
  • function是事件发生时要执行的函数。
  • useCapture是一个可选参数,指定事件是在捕获阶段还是冒泡阶段触发,默认为false(冒泡阶段)。

使用onX属性直接指定事件处理函数

element.onX = function;
  • element是要添加事件监听器的DOM元素。
  • X是事件的名称,如clickmouseover等。
  • function是事件发生时要执行的函数。
// 在按钮上添加点击事件监听器
var button = document.getElementById("myButton");
button.onclick = function() {console.log("Button clicked!");
};

使用removeEventListener()方法移除事件监听器

element.removeEventListener(event, function, useCapture);
  • element是要移除事件监听器的DOM元素。
  • event是要移除的事件名称。
  • function是要移除的事件处理函数。
  • useCapture是一个可选参数,指定事件是在捕获阶段还是冒泡阶段触发,默认为false(冒泡阶段)。
// 移除按钮上的点击事件监听器
button.removeEventListener("click", handleClick);



 本次的分享就到此为止了,希望我的分享能给您带来帮助,也欢迎大家三连支持,你们的点赞就是博主更新最大的动力!如有不同意见,欢迎评论区积极讨论交流,让我们一起学习进步!有相关问题也可以私信博主,评论区和私信都会认真查看的,我们下次再见

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

如若内容造成侵权/违法违规/事实不符,请联系多彩编程网进行投诉反馈email:809451989@qq.com,一经查实,立即删除!

相关文章

投屏软件Airserver优惠码来了,使用能减10元(有图有真相)

Airserver是一款非常实用的手机投屏到电脑软件。AirServer for Mac是一款能够通过本地网络将音频、照片、视频以及支持AIrPlay功能的第三方App&#xff0c;从 iOS 设备无线传送到 Mac 电脑的屏幕上&#xff0c;把Mac变成一个AirPlay终端的实用工具。 Airserver中文官网地址&…

【算法与数据结构】回溯算法、贪心算法、动态规划、图论(笔记三)

文章目录 七、回溯算法八、贪心算法九、动态规划9.1 背包问题9.2 01背包9.3 完全背包9.4 多重背包 十、图论10.1 深度优先搜索10.2 广度优先搜索10.3 并查集 最近博主学习了算法与数据结构的一些视频&#xff0c;在这个文章做一些笔记和心得&#xff0c;本篇文章就写了一些基础…

【C++】类和对象---友元,内部类,匿名对象详解

目录 友元 友元函数 友元类 内部类 匿名对象 ⭐友元 友元提供了一种突破封装的方式&#xff0c;有时提供了便利。但是友元会增加耦合度&#xff0c;破坏了封装&#xff0c;所以 友元不宜多用。 友元分为&#xff1a;友元函数和友元类。 ⚡友元函数 先看一个问题&#x…

使用 yarn 的时候,遇到 Error [ERR_REQUIRE_ESM]: require() of ES Module 怎么解决?

晚上回到家&#xff0c;我打开自己的项目&#xff0c;执行&#xff1a; cd HexoPress git pull --rebase yarn install yarn dev拉取在公司 push 的代码&#xff0c;然后更新依赖&#xff0c;最后开始今晚的开发时候&#xff0c;意外发生了&#xff0c;竟然报错了&#xff0c;…

Python流程控制有知道的吗?

流程控制是编程的核心概念之一&#xff0c;Python也不例外。在Python中&#xff0c;程序的流程控制结构主要包括顺序结构、选择结构和循环结构。这些结构让程序员能够更好地组织代码&#xff0c;使其按照特定的逻辑执行。 1.顺序结构 顺序结构是Python中最简单的流程控制结构&…

Android相机调用-libusbCamera【外接摄像头】【USB摄像头】 【多摄像头预览】

有的自定义系统&#xff0c;对于自己外接的USB摄像头&#xff0c;android原生的camera和camera2都无法打开&#xff0c;CameraX也用不了。这时候就要用libusbCamera&#xff0c;这个库可以打开摄像头&#xff0c;还可以多摄像头同时预览。本文主要是同时打开3个USB摄像头的项目…

Spring Boot应用集成Actuator组件以后怎么自定义端点暴露信息

一、 前言 在平时业务开发中&#xff0c;我们往往会在spring Boot项目中集成Actuator组件进行系统监控&#xff0c;虽然Actuator组件暴露的端点信息已经足够丰富了&#xff0c;但是特殊场景下&#xff0c;我们也需要自己暴露端点信息&#xff0c;此时应该怎么操作呢&#xff1…

爬虫知识--03

数据存mysql import requests from bs4 import BeautifulSoup import pymysql# 链接数据库pymysql conn pymysql.connect(userroot,password"JIAJIA",host127.0.0.1,databasecnblogs,port3306, ) cursor conn.cursor() cursor conn.cursor()# 爬数据 res request…

如何解决Nginx启动出现闪退问题?

哈喽&#xff0c;大家好&#xff0c;我是小浪。那么大家首次在启动nginx的时候&#xff0c;绝大部分同学会出现以下情况&#xff0c;就是我们双击nginx.exe文件之后&#xff0c;屏幕闪退一下就没了&#xff0c;然后我们访问localhost:8080提示404. 那么出现这种情况其实是我们…

NestJS入门7:增加异常过滤器

前文参考&#xff1a; NestJS入门1 NestJS入门2&#xff1a;创建模块 NestJS入门3&#xff1a;不同请求方式前后端写法 NestJS入门4&#xff1a;MySQL typeorm 增删改查 NestJS入门5&#xff1a;加入Swagger NestJS入门6&#xff1a;日志中间件 本文代码基于上一篇文章《…

深度学习基础(二)卷积神经网络(CNN)

之前的章节我们初步介绍了深度学习相关基础知识和训练神经网络&#xff1a; 深度学习基础&#xff08;一&#xff09;神经网络基本原理-CSDN博客文章浏览阅读924次&#xff0c;点赞13次&#xff0c;收藏19次。在如今的科技浪潮中&#xff0c;神经网络作为人工智能的核心技术之…

关于git子模块实践(一)

背景 在日常项目开发中&#xff0c;随着项目的迭代&#xff0c;不可避免的是主项目会引入到很多三方库&#xff0c;或者自研的一些模块。有一种场景&#xff0c;就是这些模块&#xff0c;是随着开发而进行迭代&#xff0c;且多个项目公用的&#xff0c;这种情况&#xff0c;在…

第3.3章:StarRocks数据导入——Stream Load

一、概述 Stream Load是StarRocks最为核心的导入方式&#xff0c;用户通过发送HTTP请求将本地文件或数据流导入至StarRocks中&#xff0c;其本身不依赖其他组件。 Stream Load支持csv和json两种数据文件格式&#xff0c;适用于数据文件数量较少且单个文件的大小不超过10GB 的场…

v-rep插件

v-rep官网插件汉化教程 官网教程 插件是什么 插件本质上就是遵循一定规范的API编写出来的程序&#xff0c;在v-rep中最终需要编译为动态库。 linux下是libsimXXXX.so&#xff1b; 其中XXXX是插件的名称。 请至少使用4个字符&#xff0c;并且不要使用下划线&#xff0c;因为…

kafka生产者2

1.数据可靠 • 0&#xff1a;生产者发送过来的数据&#xff0c;不需要等数据落盘应答。 风险&#xff1a;leader挂了之后&#xff0c;follower还没有收到消息。。。。 • 1&#xff1a;生产者发送过来的数据&#xff0c;Leader收到数据后应答。 风险&#xff1a;leader应答…

【机器学习】数据清洗——基于Numpy库的方法删除重复点

&#x1f388;个人主页&#xff1a;豌豆射手^ &#x1f389;欢迎 &#x1f44d;点赞✍评论⭐收藏 &#x1f917;收录专栏&#xff1a;机器学习 &#x1f91d;希望本文对您有所裨益&#xff0c;如有不足之处&#xff0c;欢迎在评论区提出指正&#xff0c;让我们共同学习、交流进…

PostgreSQL索引篇 | BTree

B-Tree索引 &#xff08;本文为《PostgreSQL数据库内核分析》一书的总结笔记&#xff0c;需要电子版的可私信我&#xff09; B树特点&#xff1a; 非叶子节点含一个或多个关键字值和子节点指针&#xff0c;不指向实际数据的存储位置所有关键字都是叶子节点&#xff0c;每个叶…

Python运算符你学会了吗?

1.算术运算符 &#xff08;加&#xff09;、-&#xff08;减&#xff09;、*&#xff08;乘&#xff09;、/&#xff08;除&#xff09;、%&#xff08;取余&#xff09;、//&#xff08;取整&#xff09;、**&#xff08;求幂&#xff09; a 12 b 3 c 7print(a b) # 15 …

关于Kinect 互动沙盘 深度图 Shader Graph 分层

把Kinect的深度图穿给Shader Graph using com.rfilkov.kinect; using UnityEngine; using UnityEngine.UI; public class GetDepthTex : MonoBehaviour { public Material Mat_SandTable; void Update() { Mat_SandTable.SetTexture("_MainTex"…

【openGL教程08】关于着色器(02)

LearnOpenGL - Shaders 一、说明 着色器是openGL渲染的重要内容&#xff0c;客户如果想自我实现渲染灵活性&#xff0c;可以用着色器进行编程&#xff0c;这种程序小脚本被传送到GPU的显卡内部&#xff0c;起到动态灵活的着色作用。 二、着色器简述 正如“Hello Triangle”一章…