JavaScript中必须掌握的基本知识 javascript需要掌握哪些
zhezhongyun 2024-12-20 19:46 62 浏览
一.简介
JavaScript(JS)是一门高级的、解释型的动态编程语言。用于 HTML或web应用,可被浏览器直接执行。
完整的JavaScript包括以下几个部分:
- ECMAScript,描述了该语言的语法和基本对象
- 文档对象模型(DOM),描述处理网页内容的方法和接口
- 浏览器对象模型(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; |
Boolean | 布尔值(真 / 假)。 true/false 是 JS 里的特殊关键字,无需引号。 | let x=true; |
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,注意与在元素属性中的事件是不同的
相关推荐
- 怎样设置EditText内部文字被锁定不可删除和修改
-
在做项目的时候,我曾经遇到过这样的要求,就是跟百度贴吧客户端上的一样,在回复帖子的时候,在EditText中显示回复人的名字,而且这个名字不可以修改和删除,说白了就是不可操作,只能在后面输入内容。在E...
- iOS的布局体系-流式布局MyFlowLayout
-
iOS布局体系的概览在我的CSDN博客中的几篇文章分别介绍MyLayout布局体系中的视图从一个方向依次排列的线性布局(MyLinearLayout)、视图层叠且停靠于父布局视图某个位置的框架布局(M...
- 浏览器滚动条hover时变粗、改变颜色
-
今天应UED的要求对项目的滚动条进行美化,原生的滚动条虽然很实用,但确实不美观。用了一些css美化后::-webkit-scrollbar{height:9px;width:9...
- QML控件类型:ComboBox、Control(qml buttongroup)
-
Control一、描述Control是所有控件通用功能的抽象基类型。它从窗口系统接收输入事件,并在屏幕上绘制自身。二、控件布局控件的implicitWidth和implicitHeight通...
- 学习CSS布局:简单表格布局代码示例
-
性能优化-学习CSS布局:简单表格布局代码示例CSS是现代Web设计和开发的必备技能之一。而表格布局是Web页面中常用的布局之一,用于展示数据和信息。在这篇文章中,我们将介绍如何使用CSS创建一个简单...
- UE5之UMG基础第1篇:统一网格面板(ue5 新功能)
-
目标:记录和学习UE5的UMG方法制作UI,使用UniformGridPanel制作效果如下:步骤1.增加前言:UniformGridPanel统一网格面板,就是所有子元素大小和间隔等统一,这种效果...
- JS的 DOM 尺寸与位置属性(js设置dom属性)
-
#头条深一度-深度阅读计划#在JavaScript开发中,操作DOM元素的尺寸和位置是常见的任务,尤其是在实现动画、布局调整或响应式设计时。本文将全面解析JavaScript中与DOM...
- SpriteJS:图形库造轮子的那些事儿
-
从2017年到2020年,我花了大约4年的时间,从零到一,实现了一个可切换WebGL和Canvas2D渲染的,跨平台支持浏览器、SSR、小程序,基于DOM结构和支持响应式的,高...
- 理解CSS中的百分比单位:相对尺寸的核心规则
-
在CSS中,百分比(`%`)是一种灵活且强大的相对单位,但其具体行为常让开发者感到困惑。本文将深入解析百分比单位的计算规则,帮助你彻底掌握其背后的逻辑。一、百分比的核心:参考系(包含块)百分比的值始...
- 36个工作中常用的JavaScript函数片段「值得收藏」
-
作者:Eno_Yao转发链接:https://segmentfault.com/a/1190000022623676前言如果文章和笔记能带您一丝帮助或者启发,请不要吝啬你的赞和收藏,你的肯定是我前进的...
- 如何使用css完成视差滚动效果?(css 视距)
-
视差滚动(ParallaxScrolling)是指多层背景以不同的速度移动,形成立体的运动效果,带来非常出色的视觉体验我们可以把网页解刨成:背景层、内容层、悬浮层使用css形式实现视觉差滚动效果的方...
- vant-List 列表(vant select)
-
引入importVuefrom'vue';import{List}from'vant';Vue.use(List);基础用法List组件通过lo...
- Vue3问题:如何使用WangEditor富文本?能自定义才是真的会用!
-
笔者|大澈大家好,我是大澈!今天的问题,来自于上周末问题留言的朋友嘻嘻哈哈。欢迎大家在周末的问题留言推文中,积极进行问题留言,把这周工作日遇到的问题,分享给大家瞧瞧,或者直接进问答群,一起交流唠...
- 微信小程序开发极简入门(二):样式,页面,数据
-
前文:微信小程序开发极简入门(一)样式wxss:/**放在页面的wxss**/.scrollarea{flex:1;overflow-y:hidden;}.idx_view{...
- AI+Code驱动的M站首页重构实践:从技术债务到智能化开发
-
本文分享了阿里巴巴找品M站首页重构项目中AI+Code提效的实践经验。面对M站技术栈陈旧、开发效率低下的挑战,我们通过楼层动态化架构重构和AI智能脚手架,实现了70%首页场景的标准化覆盖+30%的...
- 一周热门
- 最近发表
- 标签列表
-
- HTML 教程 (33)
- HTML 简介 (35)
- HTML 实例/测验 (32)
- HTML 测验 (32)
- JavaScript 和 HTML DOM 参考手册 (32)
- HTML 拓展阅读 (30)
- HTML文本框样式 (31)
- HTML滚动条样式 (34)
- HTML5 浏览器支持 (33)
- HTML5 新元素 (33)
- HTML5 WebSocket (30)
- HTML5 代码规范 (32)
- HTML5 标签 (717)
- HTML5 标签 (已废弃) (75)
- HTML5电子书 (32)
- HTML5开发工具 (34)
- HTML5小游戏源码 (34)
- HTML5模板下载 (30)
- HTTP 状态消息 (33)
- HTTP 方法:GET 对比 POST (33)
- 键盘快捷键 (35)
- 标签 (226)
- HTML button formtarget 属性 (30)
- CSS 水平对齐 (Horizontal Align) (30)
- opacity 属性 (32)