JavaScript学习

本文详细介绍了JavaScript的基础知识,包括其作为Web开发中用于增强交互性的编程语言的角色,以及JavaScript的三大组成部分:HTML、CSS和JavaScript。讨论了JavaScript的特点,如脚本语言、可跨平台和面向对象,并探讨了JavaScript在浏览器中的执行机制。文章还详细讲解了JavaScript的引入方式,如嵌入式、外链式和行内式,并分析了它们各自的优缺点。此外,文章还阐述了JavaScript中的输出语句、注释、数据与运算,以及事件处理,特别是对Ajax异步加载进行了深入解析,探讨了其工作流程和优势。
摘要由CSDN通过智能技术生成

JavaScript学习
一、JavaScript入门
JavaScript:是Web开发领域中的一种功能强大的编程语言。
作用:主要用于开发交互式的Web页面,使网页的互动性更强,用户体验更好。
Web页面是由多个网页组成的。
网页制作涉及的技术:HTML、CSS和JavaScript。
HTML代表了结构,结构是网页的骨架,从语义的角度,描述页面结构。
CSS代表了样式,样式是网页的外观,从审美的角度,美化页面。
JavaScript代表行为,行为是网页的交互逻辑,从交互的角度,提升用户体验。
特点:JavaScript内嵌于HTML网页中,通过浏览器内置的JavaScript引擎直接编译,把一个原本只用来显示的页面,转变成支持用户交互的页面程序。是一种可以嵌入到网页中的编程语言,用来控制浏览器的行为。
JavaScript的用途已经不仅局限于浏览器了,Node.js的出现使得开发人员能够在服务器端编写JavaScript代码,使得JavaScript的应用更加广泛。
1、JavaScript的特点
脚本语言
脚本(Script)简单地说就是一条条的文本命令,按照程序流程执行。
脚本语言与非脚本语言的区别:非脚本语言一般需要编译、链接,生成独立的可执行文件后才能运行。
脚本语言依赖于解释器,只在被调用时自动进行解释或编译。
可跨平台
几乎所有的浏览器,包括手机等各类移动设备。特点:JavaScript语言不依赖操作系统,仅需要浏览器的支持。
支持面向对象
面向对象是软件开发中的一种重要的编程思想,其优点非常多。基于面向对象思想诞生了许多优秀的库和框架,可以使JavaScript开发变得快捷和高效,降低了开发成本。
2、浏览器
浏览器 :是访问互联网中各种网站所必备的工具。
在这里插入图片描述
浏览器内核:负责将取得的网页内容(如HTML、CSS等)进行解析和处理,然后显示到屏幕中。
JavaScript引擎:用于解析JavaScript语言,通过执行代码来实现网页的交互效果。

在编写JavaScript代码时,应注意基本的语法规则,避免程序出错。具体如下。
JavaScript严格区分大小写,在编写代码时一定注意大小写的正确性。
JavaScript代码对空格、换行、缩进不敏感,一条语句可以分成多行书写。
如果一条语句结束后,换行书写下一条语句,后面的分号可以省略。
2、JavaScript引入方式
1-嵌入式
嵌入式就是使用

2-外链式
外链式是指将JavaScript代码保存到一个单独的文件中,通常使用“js”作为文件的扩展名,然后使用

相比嵌入式,外链式的优势可以总结为以下3点:
嵌入式会导致HTML与JavaScript代码混合在一起,不利用修改和维护。
② 嵌入式会增加HTML文件的体积,影响网页本身的加载速度,而外链式可以利用浏览器缓存提高速度。
③ 外链式有利于分布式部署。网页中链接的js、css、图片等静态文件可以部署到CDN服务器上,利用CDN的优势加快下载速度。
3-行内式
行内式是将JavaScript代码作为HTML标签的属性值使用。
test

JavaScript异步加载:
存在的问题:引入JavaScript代码时,页面的下载和渲染都会暂停,等待脚本执行完成后才会继续(内嵌式或外链式)。
解决的办法1:对于不需要提前执行的代码,将

// 方式二:defer

async异步加载,即先下载文件,不阻塞其他代码执行,下载完成后再执行。
defer用于延后执行,即先下载文件,直到网页加载完成后再执行。
共同点:即使文件下载失败,也不会阻塞后面的JavaScript代码执行。
3、常用输出语句
alert() 警告框
console.log() 控制台输出
document.write()文档页面输出
4、注释
概念:注释可便于代码的可读性,在程序解析时会被JavaScript解释器忽略。
分类:单行注释、多行注释。
表示方式:单行注释使用“//”、多行注释使用“/* /”。
5、数据与运算
1-数学运算
JavaScript支持加(+)减(-)乘(
)除(/)四则运算。
小括号可以改变优先顺序。
2-比较两个数字的大小
比较的结果是true或false,这是一种布尔类型的值,表示真和假。
如果比较结果为true,表示成立;如果比较结果为false,表示不成立。
3-使用字符串保存数据
当需要在警告框中输出“Hello”时,为了在代码中保存“Hello”这个数据,就需要用到字符串这种数据类型。
在JavaScript中,使用单引号或双引号包裹的数据是字符串。
使用“==”运算符可以比较两个字符串是否相同。
字符串与数字的拼接:
“+”运算符的操作数只要有一个是字符串,就表示字符串拼接。
“+”运算符的操作数全部为数字时,表示相加。
4-使用变量保存数据
场景:当一个数据需要多次使用时,可以利用变量将数据保存起来。
概念:变量是保存数据的容器,每一个变量都有唯一的名称。
定义:利用var关键字定义。
5-函数
函数的用途:
提出问题:代码量增多,维护困难、条理不清、阅读困难。
解决办法:代码应该模块化、组件化,才能更好的维护。
实现方式:常将一些常用的功能模块编写成函数,通过调用函数来完成任务。
函数执行后可返回一个表示执行结果的值
函数支持传入一个或多个参数,多个参数可使用逗号分隔。
自定义函数:
除直接调用JavaScript内置的函数,用户还可自己定义函数,用于封装代码。
6-对象
1-window对象
window对象是JavaScript与浏览器之间交互的主要接入点。
提供了用于JavaScript脚本控制浏览器的一些接口。
2-document对象
document对象是window对象的属性之一,主要用于与网页文档进行交互。
3-String对象
在代码中直接定义的字符串,就可以作为对象来使用。
String对象用于对字符串进行处理。
4-自定义对象
除了直接使用JavaScript中的内置对象,用户也可以自己创建一个自定义对象。
// 创建对象
var stu = {}; // 创建一个名称为stu的空对象
// 添加属性
stu.name = ‘小明’; // 为stu对象添加name属性
stu.gender = ‘男’; // 为stu对象添加gender属性
stu.age = 18; // 为stu对象添加age属性
// 访问属性
alert(stu.name); // 访问stu对象的name属性,输出结果:小明
// 添加方法
stu.introduce = function () {
return ‘我叫’ + this.name + ‘,今年’ + this.age + ‘岁。’;
};
// 调用方法
alert(stu.introduce()); // 输出结果:我叫小明,今年18岁。
7、事件
概念 :事件是指可以被JavaScript侦测到的交互行为。
举例:在网页中滑动、点击鼠标,滚动屏幕,敲击键盘等。
用处:当发生事件以后&#x

评论 1
添加红包

请填写红包祝福语或标题

红包个数最小为10个

红包金额最低5元

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

抵扣说明:

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

余额充值