第1章 初识JavaScript

news2024/11/23 15:49:50

学习目标

  • 了解JavaScript基本概念，能够说出JavaScript的作用、由来、组成和特点

  • 熟悉常见浏览器的特点，能够说出浏览器的组成以及作用

  • 掌握下载和安装Visual Studio Code编辑器，能够独立完成编辑器的下载和安装

  • 掌握JavaScript代码引入方式，能够通过行内式、内嵌式、外链式引入JavaScript代码

  • 掌握JavaScript常用的输入输出语句，并能够灵活运用

  • 掌握JavaScript注释的使用，能够合理运用单行注释、多行注释增强代码的可读性

HTML（Hypertext Markup Language，超文本标记语言）、CSS（Cascading Style Sheets，串联样式表）和JavaScript是开发网页所必备的技术，大家在掌握HTML和CSS技术之后，已经能够编写出各式各样的网页，但若想让网页具有良好的交互性，还要使用JavaScript。本章将介绍JavaScript的基本概念、开发工具和基本使用，让读者对JavaScript有一个初步的认识。

1.1 JavaScript基本概念

1.1.1 JavaScript概述

JavaScript是Web开发领域中的一种功能强大的编程语言，主要用于开发交互式的网页。我们在计算机、手机等设备上浏览的网页，其多数交互逻辑都可以通过JavaScript实现。

HTML结构:决定网页的结构和内容，相当于人的身体

CSS样式：决定网页呈现给用户的模样，相当于人的衣服、妆容

JavaScript行为：实现业务逻辑和页面控制，相当于人的各种动作

JavaScript可以实现哪些常见的交互效果？

轮播图：通过JavaScript实现每隔一段时间自动切换图片的效果。

地图：通过JavaScript实现地图的放大、缩小、滚动等效果。

选项卡：通过JavaScript实现选项卡的切换效果。

表单验证：用户填写表单时，通过JavaScript检查用户填写的格式是否正确，如果格式有误，则提示用户更正。

JavaScript还可以实现网页从服务器动态获取数据，例如，用户在百度搜索引擎网站中进行搜索时，在输入框中输入几个字以后，网页会智能感知用户接下来要搜索的内容。

1.1.2 JavaScript的由来

JavaScript语言和Java语言名称比较相似，这是因为网景公司在为JavaScript命名时，考虑到该公司与Java语言的开发商Sun公司（2009年被Oracle公司收购）的合作关系。但实际上，JavaScript和Java只是名字相似，本质上是完全不同的两种语言。

ECMA国际是一个国际性会员制的信息和电信标准组织，该组织发布了ECMA-262标准文件，规定了浏览器脚本语言的标准，并将这种语言称为ECMAScript。JavaScript和JScript可以理解为ECMAScript的实现和扩展。

1.1.3 JavaScript的组成

JavaScript是由ECMAScript、DOM、BOM这3部分组成的。

ECMAScript：规定了JavaScript的编程语法和基础核心内容，是所有浏览器厂商共同遵守的一套JavaScript语法工业标准。

DOM：文档对象模型，是W3C组织制定的用于处理HTML文档和XML文档的编程接口，它提供了对文档的结构化表述，并定义了一种方式使程序可以对该结构进行访问，从而改变文档的结构、样式和内容。

BOM：浏览器对象模型，是一套编程接口，用于对浏览器进行操作，如刷新页面、弹出警告框、控制页面跳转等。

1.1.4 JavaScript的特点

1.2 JavaScript基本使用

1.3.1 JavaScript初体验

本案例需要实现当网页打开时自动弹出一个警告框，警告框的内容为“Hello JavaScript”。

<!DOCTYPE html>
<html>
<head>
  <meta charset="UTF-8">
  <title>Document</title>
</head>
<body>
  <script>
    alert('Hello JavaScript');
  </script>
</body>
</html>

JavaScript代码严格区分大小写。另外，JavaScript代码对空格、换行、缩进不敏感，一条语句可以分成多行书写。

1.3.2 JavaScript代码引入方式

掌握JavaScript代码引入方式，能够通过行内式、内嵌式、外链式引入JavaScript代码

行内式：行内式是将JavaScript代码作为HTML标签的属性值使用。

<a href="javascript:alert('Hello');">test</a>

行内式的缺点如下：

可读性较差，尤其是在HTML中编写大量JavaScript代码时，不方便阅读。

在遇到多层引号嵌套的情况时，引号非常容易混淆，导致代码出错。

嵌入式：也称为内嵌式，使用script标签包裹JavaScript代码，直接编写到HTML文件中， 通常将其放到head标签或body标签中。

<script>
  JavaScript代码
</script>

script标签的type属性用于告知浏览器脚本类型， HTML5中该属性的默认值为“text/javascript”，因此在使用HTML5时可以省略type属性。

外链式：或外部式，是将JavaScript代码写在一个单独的文件中，一般使用“.js”作为文件的扩展名，在HTML页面中使用script标签的src属性引入“.js”文件。

外链式适合JavaScript代码量比较多的情况。

外链式相比嵌入式，具有以下3点优势：

外链式存在于独立文件中，有利于修改和维护，而嵌入式会导致HTML与JavaScript代码混合在一起。

外链式可以利用浏览器缓存提高速度。

外链式有利于HTML页面代码结构化，把大段的JavaScript代码分离到HTML页面之外，既美观，也方便文件级别的代码复用。

浏览器执行JavaScript代码时，无论使用嵌入式还是外链式，页面的加载和渲染都会暂停，等待脚本执行完成加载后才会继续。为了尽可能减少对整个页面的影响，建议将不需要提前执行的<script>标签放在<body>标签内的底部位置。

为了减小JavaScript阻塞问题对页面造成的影响，可以使用HTML5为<script>标签新增的两个可选属性async和defer实现异步加载。

所谓异步加载，指的是浏览器在执行加载JavaScript文件时不阻塞页面的加载和渲染。

async用于异步加载，即先下载文件，不阻塞其他代码执行，下载完成后再执行，
示例代码如下。

<script src="file.js" async></script>

defer用于延后执行，即先下载文件，直到网页加载完成后再执行， 示例代码如下。

<script src="file.js" defer></script>

Example02.js

alert('Hello JavaScript');

<!DOCTYPE html>
<html>
<head>
  <meta charset="UTF-8">
  <title>Document</title>
</head>
<body>
  <script src="Example02.js"></script>
</body>
</html>

1.3.3 常用输入输出语句

常用输入输出语句

类型语句描述
输入prompt()用于在浏览器中弹出输入框，用户可以输入内容
输出alert()用于在浏览器中弹出警告框
document.write()用于在网页中输出内容
console.log()用于在控制台中输出信息

document.write()的输出内容中如果含有HTML标签，会被浏览器解析。

<!DOCTYPE html>
<html>
<head>
  <meta charset="UTF-8">
  <title>Document</title>
</head>
<body>
  <script>
    document.write('我是document.write()语句！');
  </script>
</body>
</html>

console.log()的输出结果需要在浏览器的控制台中查看。

<!DOCTYPE html>
<html>
<head>
  <meta charset="UTF-8">
  <title>Document</title>
</head>
<body>
  <script>
    console.log('我是console.log()语句！');
  </script>
</body>
</html>

在Chrome浏览器中按F12键（或在网页空白区域右击，在弹出的菜单中选择“检查”）启动开发者工具。

切换到“Console”（控制台）面板，即可看到控制台的输出结果。

利用prompt()语句可以实现在页面中弹出一个带有提示信息的输入框。

 

<!DOCTYPE html>
<html>
<head>
  <meta charset="UTF-8">
  <title>Document</title>
</head>
<body>
  <script>
    str=prompt('请输入姓名：');
    alert(str);
  </script>
</body>
</html>

若输出的内容中包含JavaScript结束标签，需要使用“\”对结束标签的“/”进行转义，即“<\/script>”。

document.write('<script>alert(123);<\/script>');

在浏览器控制台中执行代码的步骤：

（1）首先进入控制台，从控制台中可以看到一个闪烁的光标，此时可以输入代码。

（2）按下回车键，即可看到JavaScript代码的运行结果。

1.3.4 JavaScript注释

使用注释可以增强代码的可读性。

JavaScript中注释的分类如下：

单行注释：以“//”开始，到该行结束之前的内容都是注释。

多行注释：以“/”开始，以“/”结束。多行注释中可以嵌套单行注释，但不能再嵌套多行注释。

本章小结

本章首先介绍了什么是JavaScript，以及JavaScript的用途、由来、组成和特点，然后讲解了浏览器和代码编辑器相关的内容，最后讲解了JavaScript的基本使用，包括JavaScript初体验、JavaScript引入方式、常用输入输出语句和JavaScript注释。希望读者通过本章的学习，掌握JavaScript的基础知识，能够编写简单的JavaScript程序。

 

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

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

相关文章

【forwardRef与useImperativeHandle】

【forwardRef与useImperativeHandle】

1、 2、 3、 4、代码 1、index.tsx代码 import React, {useRef, useEffect} from react import MyInput from "./InputItem";export default function Index() {const ref useRef<any>(null);useEffect(() > {ref.current?.focus();}, [])return (<&…
阅读更多...
安达发|APS计划与排程软件之超级BOM功能

安达发|APS计划与排程软件之超级BOM功能

在制造业中&#xff0c;物料清单&#xff08;BOM&#xff09;是一个重要的概念&#xff0c;它描述了产品的组成结构和各个部件之间的关系。随着制造业的发展&#xff0c;对于生产计划和排程的要求也越来越高&#xff0c;因此APS&#xff08;高级计划与排程&#xff09;软件应运…
阅读更多...
2023年，To B资本航船走向哪了？

2023年，To B资本航船走向哪了？

国内To B领域在去掉泡沫、结束资本狂欢之后&#xff0c;投资决策愈加理性。但与此同时&#xff0c;下滑的步伐正在放慢&#xff0c;交易数量和金额的降低逐渐放缓&#xff0c;市场逐渐走向稳定。 作者|斗斗 编辑|皮爷 出品|产业家 2023年&#xff0c;在一众业内人士的眼中&…
阅读更多...
openai API key 提示你的卡被拒绝怎么办？

openai API key 提示你的卡被拒绝怎么办？

openai API key 对于IP的要求非常的严格&#xff0c;以前你开腾讯云、阿里云的服务器都可以绑定、现在就不行了&#xff0c;一定要纯净的IP才可以绑定 一、排除法 1、首先确保自己的账号是没有被封的&#xff0c;可以正常使用的 2、确保银行卡是可以支持openai的银行卡 3、…
阅读更多...
IDEA的lombok失效导致工程代码编译build失败的问题处理

IDEA的lombok失效导致工程代码编译build失败的问题处理

今天也是奇了怪了&#xff0c;打包工程&#xff0c;编译始终失败&#xff0c;明明代码符号存在的 解决办法就是&#xff1a;-Djps.track.ap.dependenciesfalse
阅读更多...
嵌入式（八）电源低功耗管理 | 五种运行模式 模式转换 睡眠定时器唤醒

嵌入式（八）电源低功耗管理 | 五种运行模式 模式转换 睡眠定时器唤醒

文章目录 1 低功耗基本介绍1.1 五种运行模式 2 低功耗控制相关寄存器3 睡眠唤醒实现方式3.1 系统睡眠定时器唤醒 1 低功耗基本介绍 对于嵌入式系统而言&#xff0c;一个非常重要的内容就是低功耗&#xff0c;尽可能减少电量损耗&#xff0c;然后获得更多的续航时间 当然功耗越…
阅读更多...
UG装配-布置

UG装配-布置

UG装配中&#xff0c;当一个产品在不同情况下具有不同的形态的时候&#xff0c;为了快速进行展示&#xff0c;我们可以使用布置命令. 我们可以直接在工具栏布置中&#xff0c;或者在装配导航器中右键单击装配体&#xff0c;选择布置-编辑&#xff0c;添加不同不同的布置页面 使…
阅读更多...
模拟算法（模拟算法 == 依葫芦画瓢）万字

模拟算法（模拟算法 == 依葫芦画瓢）万字

模拟算法 基本思想引入算法题替换所有的问号提莫攻击Z字形变换外观数列数青蛙 基本思想 模拟算法 依葫芦画瓢解题思维要么通俗易懂&#xff0c;要么就是找规律&#xff0c;主要难度在于将思路转换为代码。 特点&#xff1a;相对于其他算法思维&#xff0c;思路比较简单&#x…
阅读更多...
Docker简介、基本概念和安装

Docker简介、基本概念和安装

Docker简介、基本概念和安装 1.docker简介 1.1 什么是docker Docker 最初是 dotCloud 公司创始人 Solomon Hykes (opens new window)在法国期间发起的一个公司内部项目&#xff0c;它是基于 dotCloud 公司多年云服务技术的一次革新&#xff0c;并于 2013 年 3 月以 Apache 2…
阅读更多...
Power BI - 5分钟学习修改数据类型

Power BI - 5分钟学习修改数据类型

每天5分钟&#xff0c;今天介绍Power BI修改数据类型 Power BI加载数据时&#xff0c;会尝试将源列的数据类型转换为更高效的存储、计算和数据可视化的数据类型。 例如&#xff0c;如果从Excel导入的值的列没有小数值&#xff0c;Power BI Desktop会将整个数据列转换为整数数据…
阅读更多...
HCIA-Datacom题库（自己整理分类的）_17_简单的命令判断【11道题】

HCIA-Datacom题库（自己整理分类的）_17_简单的命令判断【11道题】

1.华为AR路由器的命令行界面下&#xff0c;save命令的作用是保存当前的系统时间。 解析&#xff1a;Save保存配置 2.VRP界面下&#xff0c;使用命令delete vrpcfg.zp删除文件&#xff0c;必须在回收站中清空&#xff0c;才能彻底删除文件。√ 解析&#xff1a;delete删除到回…
阅读更多...
“高端”的位运算

“高端”的位运算

王有志&#xff0c;一个分享硬核Java技术的互金摸鱼侠加入Java人的提桶跑路群&#xff1a;共同富裕的Java人 原计划迭代作为预备知识的收尾&#xff0c;不过在解2的幂和4的幂时&#xff0c;想到关于数字2的问题可以通过位运算去解决&#xff0c;因此补充了关于位运算的内容。 …
阅读更多...
Spring循环引用和三级缓存

Spring循环引用和三级缓存

前言 Spring 解决 Bean 之间的循环引用关系用到了三级缓存&#xff0c;那么问题来了。三级缓存是怎么用的&#xff1f;每一层的作用是什么&#xff1f;非得用三级吗&#xff1f;两级缓存行不行&#xff1f; 理解循环引用 所谓的“循环引用”是指 Bean 之间的依赖关系形成了一…
阅读更多...
什么事“网络水军”？他们的违法活动主要有四种形式

什么事“网络水军”？他们的违法活动主要有四种形式

我国治理网络水军&#xff0c;包括造谣引流、舆情敲诈、刷量控评、有偿删帖等各类“网络水军”等违法犯罪活动已经许久。 日前&#xff0c;官方召开新闻发布会&#xff0c;公布了相关的一些案件进程&#xff0c;今年已累计侦办相关案件339起&#xff0c;超过历年的全年侦办案件…
阅读更多...
开启Android学习之旅-6-实战答题App

开启Android学习之旅-6-实战答题App

不经过实战&#xff0c;看再多理论&#xff0c;都是只放在笔记里&#xff0c;活学活用才是硬道理。同时开发应用需要循序渐进&#xff0c;一口气规划300个功能&#xff0c;400张表&#xff0c;会严重打击自己的自信。这里根据所学的&#xff0c;开发一个答题App。 题库需求分析…
阅读更多...
Linux 系统之部署 ZFile 在线网盘服务

Linux 系统之部署 ZFile 在线网盘服务

一、ZFile 介绍 1&#xff09;ZFile 简介 官网&#xff1a;https://www.zfile.vip/ GitHub&#xff1a;https://github.com/zfile-dev/zfile ZFile 是一款基于 Java 的在线网盘程序&#xff0c;支持对接 S3、OneDrive、SharePoint、又拍云、本地存储、FTP 等存储源&#xff0…
阅读更多...
精彩推荐 |【Java技术专题】「重塑技术功底」攻破Java技术盲点之剖析动态代理的实现原理和开发指南（中）

精彩推荐 |【Java技术专题】「重塑技术功底」攻破Java技术盲点之剖析动态代理的实现原理和开发指南（中）

攻破Java技术盲点之剖析动态代理的实现原理和开发指南 前提介绍技术回顾回顾问题分析代理对象实现了什么接口代理对象的方法体是什么 CGLIB动态代理CGLIB的原理继承方式 为什么要用CGLIB建立被代理的类cglib拦截器类测试类易错点&#xff1a;CGLIB的invoke和invokeSuper的区分i…
阅读更多...
【2024最新-python3小白零基础入门】No1.python简介以及环境搭建

【2024最新-python3小白零基础入门】No1.python简介以及环境搭建

文章目录 一 python3 简介二 python语言的特点三 python安装四 安装开发工具-pycharm五 新建一个python项目1.新建项目2 配置虚拟环境3 运行项目 一 python3 简介 Python 是一个高层次的结合了解释性、编译性、互动性和面向对象的脚本语言。 Python 的设计具有很强的可读性&a…
阅读更多...
系分笔记数据库技术之数据库安全措施

系分笔记数据库技术之数据库安全措施

文章目录 1、概要2、数据库的保护措施3、数据库的故障4、备份和日志5、总结 1、概要 数据库设计是考试重点&#xff0c;常考和必考内容&#xff0c;本篇主要记录了知识点&#xff1a;数据库故障及解决、数据库安全保护措施和数据库备份及恢复。 2、数据库的保护措施 数据库安全…
阅读更多...
学习笔记——C++二维数组

学习笔记——C++二维数组

二维数组定义的四种方式&#xff1a; 1&#xff0c;数据类型 数组名[ 行数 ][ 列数 ]&#xff1b; 2&#xff0c;数据类型 数组名[ 行数 ][ 列数 ]{{数据1&#xff0c;数据2}&#xff0c;{数据3&#xff0c;数据4}}&#xff1b; 3&#xff0c;数据类型 数组名[ 行数…
阅读更多...
推荐文章
最新文章

Copyright @ 2022~2023