JavaScript入门,web前端开发自学网

29 阅读8分钟
  • async异步加载,即先下载文件,不阻塞其他代码执行,下载完成后再执行。

  • defer用于延后执行,即先下载文件,直到网页加载完成后再执行。

  • 共同点:即使文件下载失败,也不会阻塞后面的JavaScript代码执行。

二、常用输出语句

=======================================================================

在这里插入图片描述

在这里插入图片描述

在这里插入图片描述

三、注释

===================================================================

概念:注释可便于代码的可读性,在程序解析时会被JavaScript解释器忽略。

分类:单行注释、多行注释。

表示方式:单行注释使用“//”、多行注释使用“/* */”。

单行注释:以“//”开始,到该行结束或JavaScript标记结束之前的内容都是注释。

在这里插入图片描述

多行注释:多行注释以“/”开始,以“/”结束,它们之间的内容为多行注释。

在这里插入图片描述

  • 多行注释中可以嵌套单行注释。

  • 多行注释中不能再嵌套多行注释。

四、数据与运算

======================================================================

数学运算

  • JavaScript支持加(+)减(-)乘(*)除(/)四则运算。

  • 小括号可以改变优先顺序。

在这里插入图片描述

比较两个数字的大小

  • 比较的结果是true或false,这是一种布尔类型的值,表示真和假。

  • 如果比较结果为true,表示成立;如果比较结果为false,表示不成立。

在这里插入图片描述

使用字符串保存数据

  • 当需要在警告框中输出“Hello”时,为了在代码中保存“Hello”这个数据,就需要用到字符串这种数据类型。

  • 在JavaScript中,使用单引号或双引号包裹的数据是字符串。

在这里插入图片描述

比较两个字符串是否相同

使用“==”运算符可以比较两个字符串是否相同。

微风洋洋

字符串与数字的拼接

  • “+”运算符的操作数只要有一个是字符串,就表示字符串拼接。

  • “+”运算符的操作数全部为数字时,表示相加。

在这里插入图片描述

根据比较结果执行不同的代码

if…else语句用于需要根据比较的结果,来执行不同的代码。

在这里插入图片描述

使用变量保存数据

场景:当一个数据需要多次使用时,可以利用变量将数据保存起来。

概念:变量是保存数据的容器,每一个变量都有唯一的名称。

定义:利用var关键字定义。

在这里插入图片描述

五、函数

===================================================================

函数的用途

提出问题:代码量增多,维护困难、条理不清、阅读困难。

解决办法:代码应该模块化、组件化,才能更好的维护。

实现方式:常将一些常用的功能模块编写成函数,通过调用函数来完成任务。

举例说明:alert()就是一个函数。

函数执行后可返回一个表示执行结果的值,下面以prompt()函数为例进行演示。

在这里插入图片描述

函数的参数

函数支持传入一个或多个参数,多个参数可使用逗号分隔。

在这里插入图片描述

自定义函数

除直接调用JavaScript内置的函数,用户还可自己定义函数,用于封装代码。

在这里插入图片描述

六、对象

===================================================================

window对象

window对象是JavaScript与浏览器之间交互的主要接入点。

提供了用于JavaScript脚本控制浏览器的一些接口。

举例:弹出警告框、输入框,或者更改网页文档内容等效果。

在这里插入图片描述

document对象

document对象是window对象的属性之一,主要用于与网页文档进行交互。

在这里插入图片描述

String对象

  • 在代码中直接定义的字符串,就可以作为对象来使用。

  • String对象用于对字符串进行处理。

在这里插入图片描述

自定义对象

除了直接使用JavaScript中的内置对象,用户也可以自己创建一个自定义对象。

在这里插入图片描述

在这里插入图片描述

七、事件

===================================================================

概念 :事件是指可以被JavaScript侦测到的交互行为。

举例:在网页中滑动、点击鼠标,滚动屏幕,敲击键盘等。

用处:当发生事件以后,可以利用JavaScript编程来执行一些特定的代码,从而实现网页的交互效果。

在这里插入图片描述

八、【案例】改变网页背景色

============================================================================

代码实现思路:

  1. 编写网页,提供按钮。

  2. 为按钮添加点击事件。

  3. 根据color()函数传递的不同参数设置网页的背景色。

  4. 编写color()函数并进行测试。

在这里插入图片描述

代码实现

改变网页背景色

九、动手实践

=====================================================================

验证用户输入的密码

本案例用于验证用户输入的密码是否正确。

代码实现思路:

① 通过输入框获取用户输入的密码。

② 判断用户输入的密码。

③ 若输入正确,则提示“密码输入正确!”,否则提示“密码输入错误!”。

请小伙伴们自己动手试一试!

如果觉得这篇文章对你有一丢丢启发的话,不妨 点赞👍、收藏⭐、留言💬支持一下,你的支持将是我继续创作的最大动力。下一篇将介绍JavaScript基本语法,到时不见不散❤️❤️❤️ 由于作者水平有限,如有错误和不准确之处在所难免,本人也很想知道这些错误,恳望读者批评指正!

最后,关注即可提高学习效率。Perfect!

最后前端到底应该怎么学才好?

如果你打算靠自己摸索自学,那么你首先要了解学习前端的基本大纲,这是你将要学习的主要内容,理解以及掌握好这些内容,便可以找到一份初级的前端开发工作。你还需要有一套完整的前端学习教程,作为初学者最好的方式就是看视频教程学习,初学者容易理解接受。

不要选择买书学习,这样的方式没有几个人能学会,基本都是看不下去书,也看不懂书。如果喜欢看书的学弟,可以买一些经典的书籍作为辅助即可,主要还是以看教程为主。每天抽出固定几个小时学习,做好长期学习的准备。学习编程并不是每天光看视频,你学习编程最重要的目的是为了编写软件产品,提供给大众使用,所以用手写出代码实现功能才是我们要做的事情。

在这里插入图片描述

在这里插入图片描述

在这里插入图片描述

在这里插入图片描述 开源分享:docs.qq.com/doc/DSmRnRG…