《JavaScript第一章》

一、什么是JavaScript

Java和JavaScript的关系就好像老婆和老婆饼的关系,没有关系。

非要说关系:都是编程语言。

JavaScript是Web开发领域中的一种功能强大的编程语言,主要用于开发交互式的网页。

简称JS。

二、网页的组成:

一个完整的网页由三部分组成:

  1. HTML   (网页的主体部分)
  2. CSS     (美化的主体部分)
  3. JavaScript (实现业务逻辑和页面控制)

以上的举例说明:

网页中最常见的无非就是登陆页面。

HTML无非就是账号框,密码框,登陆按钮。

CSS无非就是美化上述内容。

JS就是当用户点击登陆按钮,获取账号和密码框的内容,去后台进行校验,判断是否账号密码匹配,然后做出相对于的反馈。

三、JS的三大组成:

第一部分:核心语法  (JS代码)

第二部分:DOM文档对象模型  (JS可以控制HTML元素进行相关的操作)

第三部分:BOM 浏览器对象模型(JS可以控制浏览器元素进行相关的操作)

浏览器元素:弹窗。浏览器的宽高,滚动条等等。

四、JS的特点:

  1. 简单易用 (只需要用户安装浏览器即可使用)
  2. 跨平台    和上述一样。
  3. 支持面向对象

五、JS常见的开发工具

常见的两大开发工具

VSCode

HBuilderX

优点

1什么语言都可以用它编写

1.专注于前台设计

缺点

1.第一个优点导致的问题:界面设计不合理,安装的插件需要很多。需要联网等

2.功能较少

六、HBuilderX创建项目的HelloWorld

  1. 下载安装包并解压,将HbuilderX.exe生成快捷方式在桌面。
  2. 左上角:文件---新建---项目---普通项目---项目名称---存储路径---基本HTML项目

七、第一个拥有JS代码的HTML网页

之前讲过:网页由HTML,CSS,JS组成。所以绝大部分情况下,JS代码是放在HTML页面中。

绝少情况,暂不做了解。

案例1:打开网页,弹出一个警告框提示用户“请输入正确格式”;

<!DOCTYPE html>

<html>

<head>

<meta charset="utf-8" />

<title></title>

</head>

<body>

我的第一个HTML页面

<script>

alert("请输入正确的格式");

</script>

</body>

</html>

7.1上面的案例的总结分析:

总结1:JS代码必须放在<script>标签内部。

总结2:script不能交叉嵌套。

总结3:script标签的摆放的顺序可以随意。但是推荐放在body标签内部的最下方。

7.2分析总结3的原因

如果HTML页面中有大量的JS代码。导致需要加载时间较长。

由于JS代码的执行是从上到下。如果将JS代码放在HTML页面的上方。就会导致。执行JS的代码时间过长,导致JS下方的HTML代码未被加载。所以总结3的原因。

八、HTML页面书写JS代码的常见两种方式

JS代码和CSS代码非常类似,都可以在一个网页中拥有多个代码标签片段。

  1. 嵌入式:就是刚刚讲解的方法。将JS代码放在script标签中,将script标签放在HTML页面中。(和CSS代码很类似)适用于:JS代码较少。不会影响到我们阅读HTML代码。

  1. 外链式:适用于JS代码非常多,不适合放在HTML页面中,不然导致不方便阅读HTML代码。

如何使用外链式:

  1. 也是在适当的位置(body标签的最低部)引入script标签。
  2. 禁止在标签内部书写JS代码了
  3. 创建一个外部的JS文件了(后缀为.js文件)
  4. 这个外部js文件,就不要放script标签了。直接写代码
  5. 在A步骤中添加src=”xxx.js”路径即可使用。

九、多学一招:JavaScript异步加载

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

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

该知识点仅做了解。

原因1:浏览器和计算机的执行速度已经非常快了,人的肉眼区分不了一丢丢时间差异带来的视觉效果。

原因2:即使退一万步讲,真的影响到了,使用上述方法也无法得到有效解决。

我们常见的处理方式:生成一个加载页面,提示用户“正在加载中…”。

十、JS最基础的几行代码

  1. alert(“xxx”);作用:生成一个警告的弹窗
  2. prompt(“xxxx”); 生成一个询问框,用户可以输入值。然后点击确定和取消。

点击确定:JS需要收集用户输入的信息(第二章讲解)。点击取消:无事发生。

  1. confirm(“xxx”); 生成一个询问框,但是不需要输入,只需要选择确定或取消。

以上三个就是JS内置的3个弹窗。(只有3个)

根据不同场合使用不同的弹窗。

  1. document.write(“xxxx”); 作用:在HTML页面输入一段内容。一般使用场景:用户执行了什么操作,才会显示什么内容。

  1. console.log(“xxx”); 需要按一下F12才能打开浏览器的控制台。常用于调试BUG。

第一章的注意事项:

转义符:如果遇到特殊符号:需要对其进行转义操作。

/是斜杠,挨着shift的

\是反斜杠:挨着回车上面的   作为转义符使用。

JS中的注释

分为单行注释:  //xxx

多行注释:

/*

Xxx

Xxx

*/

  • 0
    点赞
  • 0
    收藏
    觉得还不错? 一键收藏
  • 1
    评论
评论 1
添加红包

请填写红包祝福语或标题

红包个数最小为10个

红包金额最低5元

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

抵扣说明:

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

余额充值