百度360必应搜狗淘宝本站头条
头像打包下载acmecadconverter_8.52绿色版mysql 昨天的日期个人网站源码word文档批量处理大师破解版
当前位置：网站首页 > 技术教程 > 正文

JavaScript中必须掌握的基本知识（javascript的用法）

csdh11 2025-02-03 12:09 17 浏览

一.简介

JavaScript（JS）是一门高级的、解释型的动态编程语言。用于 HTML或web应用，可被浏览器直接执行。

完整的JavaScript包括以下几个部分：

  1. ECMAScript，描述了该语言的语法和基本对象
  2. 文档对象模型（DOM），描述处理网页内容的方法和接口
  3. 浏览器对象模型（BOM），描述与浏览器进行交互的方法和接口

JavaScript的基本特点：

  • 是一种解释性脚本语言（代码不进行预编译）。
  • 主要用来向HTML页面添加交互行为。
  • 可以直接嵌入HTML页面，但写成单独的js文件有利于结构和行为的分离。

JavaScript常用来完成以下任务：

  • 嵌入动态文本于HTML页面
  • 对浏览器事件作出响应
  • 读写HTML元素
  • 在数据被提交到服务器之前验证数据
  • 检测访客的浏览器信息
  • 控制cookies，包括创建和修改等


二.用法

1.嵌入HTML

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

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

<!DOCTYPE html>
<html>
<head>
<script>
document.write("hello world");
</script>
</head>
<body>
.
<script>
document.write("hello world");
</script>
.
</body>
</html>

如果 <script> 放在 body 中，建议放在底部。因为浏览器会按照代码在文件中的顺序解析 HTML。如果先加载的 JavaScript 期望修改其下方的 HTML，那么它可能由于 HTML 尚未被加载而失效。所以，要将 JavaScript 代码放在 body 中，应置于 HTML 页面底部。


2.外部js脚本

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

外部 JavaScript 文件的文件扩展名是 .js。外部文件不使用 <script> 标签，直接写 javascript 代码。

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

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


3.在console调试

可以进入浏览器中console，如chrome F12 进入console，以命令行的形式输入js命令


4.事件触发

把 JavaScript 代码放入函数中，在事件发生时调用该函数。

<button type="button" onclick="myFunction()">按钮</button>
<script>
function myFunction()
{
    alert("hello");
}
</script>


三.变量

JavaScript 使用关键字 var 来定义变量， 使用等号来为变量赋值

也可以使用let,const来定义，这三者的区别是：var与let涉及块级作用域，let 命令只在所在的代码块 {} 内有效，具体参考这里；const定义一个只读常量

一般用var即可，let更推荐

var a;   //声明
var a = 10;  //初始化
a = 20 ;   //赋值

注意: 在JavaScript中，所有代码指令都会以分号结尾 (;)

JavaScript中数据类型主要有:

变量

解释

示例

String

字符串（一串文本）。字符串的值必须将用引号（单双均可，必须成对）扩起来。

var name = "John";

字符访问:name[0] name[1]

Number

数字。JavaScript 只有一种数字类型。数字可以带小数点，也可以不带

let x1=34.00;
let x2=34;

Boolean

布尔值（真 / 假）。 true/false 是 JS 里的特殊关键字，无需引号。

let x=true;
let y=false;

Array

数组，用于在单一引用中存储多个值的结构。

let cars=["Saab","Volvo","BMW"];

元素引用方法：cars[0],cars[1]

Object

对象，JavaScript 里一切皆对象，一切皆可储存在变量里。

对象由花括号分隔。在括号内部，对象的属性以名称和值对的形式 (name : value) 来定义。属性由逗号分隔

let person={firstname:"John", lastname:"Doe", id:5566};

let newObject = document.querySelector('h1');

对象属性访问:object.AttributesName object[''AttributesName'']

算数运算符主要有:

+ 加法

- 减法

* 乘法

/ 除法

% 取模

++自增

--自减


比较运算符主要有:

==等于

=== 绝对等于（值和类型均相等）

!= 不等于

!== 不绝对等于（值和类型有一个不相等，或两个都不相等）

> 大于

< 小于

>= 大于或等于

<= 小于或等于

在常规的比较中，数据类型是被忽略的

var x = 10;
var y = "10";
if (x == y) //返回true，所以要用===


四.基本语法

1.条件语句

if 语句只有当指定条件为 true 时，该语句才会执行代码。

if (condition)
{
    当条件为 true 时执行的代码
}

使用 if....else 语句在条件为 true 时执行代码，在条件为 false 时执行其他代码。

if (condition)
{
    当条件为 true 时执行的代码
}
else
{
    当条件不为 true 时执行的代码
}

使用 if....else if...else 语句来选择多个代码块之一来执行。

if (condition1)
{
    当条件 1 为 true 时执行的代码
}
else if (condition2)
{
    当条件 2 为 true 时执行的代码
}
else
{
  当条件 1 和 条件 2 都不为 true 时执行的代码
}

三目运算

let variablename = (condition)?value1:value2 
condition成立则variablename = value1 否则value2


2.循环语句

JavaScript 支持不同类型的循环：

  • for - 循环代码块一定的次数
  • for/in - 循环遍历对象的属性
  • while - 当指定的条件为 true 时循环指定的代码块
  • do/while - 同样当指定的条件为 true 时循环指定的代码块

for 循环

for (语句 1; 语句 2; 语句 3)
{
    被执行的代码块
}

//语句 1 （代码块）开始前执行

//语句 2 定义运行循环（代码块）的条件

//语句 3 在循环（代码块）已被执行之后执行

for/in遍历

for (x in 可遍历对象)  // x 为属性名
{
    执行代码块
}

while 循环会在指定条件为真时循环执行代码块。

while (条件)
{
    需要执行的代码
}

do/while 循环是 while 循环的变体。该循环会在检查条件是否为真之前执行一次代码块，然后如果条件为真的话，就会重复这个循环。

do
{
    需要执行的代码
}
while (条件);


3.函数语法

函数就是包裹在花括号中的代码块，前面使用了关键词 function：

function functionname()
{
    // 执行代码
}

加上形参

function myFunction(var1,var2)
{
代码
return var3  //使用 return 语句时，函数会停止执行，并返回指定的值
}

匿名函数，函数存储在变量中，不需要函数名称，通常通过变量名来调用。

var x = function (a, b) {return a * b};
var z = x(4, 3);


4.异常判断

try 语句允许我们定义在执行时进行错误测试的代码块。

catch 语句允许我们定义当 try 代码块发生错误时，所执行的代码块。

JavaScript 语句 try 和 catch 是成对出现的。

finally 语句不论之前的 try 和 catch 中是否产生异常都会执行该代码块。

try {
    ...    //异常的抛出
} catch(e) {
    ...    //异常的捕获与处理
} finally {
    ...    //结束处理
}


五.DOM对象

在浏览器中，页面被加载的时候，会自动生成这个页面的DOM对象（document）

DOM对象是一个树模型

可以通过这个对象：

  • JavaScript 能够改变页面中的所有 HTML 元素
  • JavaScript 能够改变页面中的所有 HTML 属性
  • JavaScript 能够改变页面中的所有 CSS 样式
  • JavaScript 能够对页面中的所有事件做出反应

1.查找HTML元素

通过id查找

var x=document.getElementById("intro");

//如果找到该元素，则该方法将以对象（在 x 中）的形式返回该元素。

//如果未找到该元素，则 x 将包含 null。

通过标签查找

var y=document.getElementsByTagName("div");

//如果有多个同类标签，则返回多个对象的数组

通过类名查找

var x=document.getElementsByClassName("intro");

因为查找返回的元素也是对象，所以可以对它再进行查找

var x=document.getElementById("main");
var y=x.getElementsByTagName("p");

//本例查找 id="main" 的元素，然后查找 id="main" 元素中的所有 <p> 元素


2.修改HTML元素

改变HTML输出流

document.write();

//如果在文档(DOM)加载完成之后使用则会覆盖该文档

修改 HTML 内容

document.getElementById(id).innerHTML=新的 HTML内容

改变 HTML 元素的属性

document.getElementById(id).attribute=新属性值


3.DOM事件

事件可以是浏览器行为，也可以是用户行为，当事件触发时，可以执行对应的js代码

常见事件

事件

描述

onchange

HTML 元素改变

onclick

用户点击 HTML 元素

onmouseover

用户在一个HTML元素上移动鼠标

onmouseout

用户从一个HTML元素上移开鼠标

onkeydown

用户按下键盘按键

onload

浏览器已完成页面的加载

HTML 元素中可以添加事件属性，并添加 JavaScript 代码，当此元素的事件被触发时，就会触发执行js代码

<button onclick="getElementById('demo').innerHTML=Date()">现在的时间是?</button>
<p id="demo"></p>

也可以由DOM对象分配事件，因为事件也是html的一个属性

<script>
document.getElementById("myBtn").onclick=function(){displayDate()};
</script>

addEventListener() 方法

element.addEventListener("click", function(){ alert("Hello World!"); });

语法为

element.addEventListener(event, function, useCapture);

第一个参数是事件的类型 (如 "click" 或 "mousedown").

第二个参数是事件触发后调用的函数。

第三个参数是个布尔值用于描述事件是冒泡还是捕获。该参数是可选的。

详细的事件类型参考https://developer.mozilla.org/zh-CN/docs/Web/Events,注意与在元素属性中的事件是不同的

相关推荐

探索Java项目中日志系统最佳实践:从入门到精通

探索Java项目中日志系统最佳实践：从入门到精通在现代软件开发中，日志系统如同一位默默无闻却至关重要的管家，它记录了程序运行中的各种事件，为我们排查问题、监控性能和优化系统提供了宝贵的依据。在Java...

用了这么多年的java日志框架，你真的弄懂了吗?

在项目开发过程中，有一个必不可少的环节就是记录日志，相信只要是个程序员都用过，可是咱们自问下，用了这么多年的日志框架，你确定自己真弄懂了日志框架的来龙去脉嘛？下面笔者就详细聊聊java中常用日志框架的...

物理老师教你学Java语言(中篇)（物理专业学编程）

第四章物质的基本结构——类与对象...

一文搞定!Spring Boot3 定时任务操作全攻略

各位互联网大厂的后端开发小伙伴们，在使用SpringBoot3开发项目时，你是否遇到过定时任务实现的难题呢？比如任务调度时间不准确，代码报错却找不到方向，是不是特别头疼？如今，随着互联网业务规模...

你还不懂java的日志系统吗 ?（java的日志类）

一、背景在java的开发中，使用最多也绕不过去的一个话题就是日志，在程序中除了业务代码外，使用最多的就是打印日志。经常听到的这样一句话就是“打个日志调试下”，没错在日常的开发、调试过程中打印日志是常干...

谈谈枚举的新用法--java（java枚举的作用与好处）

问题的由来前段时间改游戏buff功能，干了一件愚蠢的事情，那就是把枚举和运算集合在一起，然后运行一段时间后buff就出现各种问题，我当时懵逼了！事情是这样的，做过游戏的都知道，buff，需要分类型，且...

你还不懂java的日志系统吗（javaw 日志）

一、背景在java的开发中，使用最多也绕不过去的一个话题就是日志，在程序中除了业务代码外，使用最多的就是打印日志。经常听到的这样一句话就是“打个日志调试下”，没错在日常的开发、调试过程中打印日志是常干...

Java 8之后的那些新特性(三):Java System Logger

去年12月份log4j日志框架的一个漏洞，给Java整个行业造成了非常大的影响。这个事情也顺带把log4j这个日志框架推到了争议的最前线。在Java领域，log4j可能相对比较流行。而在log4j之外...

Java开发中的日志管理:让程序“开口说话”

Java开发中的日志管理：让程序“开口说话”日志是程序员的朋友，也是程序的“嘴巴”。它能让程序在运行过程中“开口说话”，告诉我们它的状态、行为以及遇到的问题。在Java开发中，良好的日志管理不仅能帮助...

吊打面试官(十二)--Java语言中ArrayList类一文全掌握

导读...

OS X 效率启动器 Alfred 详解与使用技巧

问：为什么要在Mac上使用效率启动器类应用？答：在非特殊专业用户的环境下，（每天）用户一般可以在系统中进行上百次操作，可以是点击，也可以是拖拽，但这些只是过程，而我们的真正目的是想获得结果，也就是...

Java中 高级的异常处理（java中异常处理的两种方式）

介绍异常处理是软件开发的一个关键方面，尤其是在Java中，这种语言以其稳健性和平台独立性而闻名。正确的异常处理不仅可以防止应用程序崩溃，还有助于调试并向用户提供有意义的反馈。...

【性能调优】全方位教你定位慢SQL，方法介绍下!

1.使用数据库自带工具...

全面了解mysql锁机制(InnoDB)与问题排查

MySQL/InnoDB的加锁，一直是一个常见的话题。例如，数据库如果有高并发请求，如何保证数据完整性？产生死锁问题如何排查并解决？下面是不同锁等级的区别表级锁：开销小，加锁快；不会出现死锁；锁定粒度...

看懂这篇文章，你就懂了数据库死锁产生的场景和解决方法

一、什么是死锁加锁（Locking）是数据库在并发访问时保证数据一致性和完整性的主要机制。任何事务都需要获得相应对象上的锁才能访问数据，读取数据的事务通常只需要获得读锁（共享锁），修改数据的事务需要获...

一周热门
最近发表
标签列表