JavaScript入门_javascript基础入门-程序员宅基地

技术标签: css  JavaScript  前端  html  javascript  开发语言  

个人简介

个人主页:微风洋洋‍♂️
博客领域:编程基础,后端,大数据,信息安全
写作风格:干货,干货,还是tmd的干货
精选专栏【JavaScript】【HTML+CSS】【Java学习笔记】【Java必刷题】
支持洋锅:点赞、收藏、留言

好久不见,甚是想念!
大家好!

我是微风洋洋 今天这篇文章就是来和大家详细聊聊JavaScript入门,希望大家读完有所收获,那我辛苦码字也就值了。

一、引入方式

嵌入式

嵌入式就是使用<script>标签包裹JavaScript代码,直接编写到HTML文件中。

在这里插入图片描述

在这里插入图片描述

type属性用于告知浏览器脚本的类型。

type默认值为text/javascript(HTML5),可以省略type属性。


外链式

外链式是指将JavaScript代码保存到一个单独的文件中,通常使用“js”作为文件的扩展名,然后使用<script>标签的src属性引入文件中。

在这里插入图片描述


相对路径

在这里插入图片描述


绝对路径

在这里插入图片描述


URL地址

在这里插入图片描述

若自动使用当前页面协议,可写为 //js.test/file.js


相比嵌入式,外链式的优势可以总结为以下3点:

① 嵌入式会导致HTML与JavaScript代码混合在一起,不利用修改和维护。

② 嵌入式会增加HTML文件的体积,影响网页本身的加载速度,而外链式可以利用浏览器缓存 提高速度。

③ 外链式有利于分布式部署。网页中链接的js、css、图片等静态文件可以部署到CDN服务器 上,利用CDN的优势加快下载速度。


行内式

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

用法一

在这里插入图片描述

用法二

微风洋洋


注意

由于现代网页开发提倡结构、样式、行为的分离,即分离HTML、CSS、JavaScript三部分的代码,避免直接写在HTML标签的属性中,从而更有利于维护。因此在实际开发中不推荐使用行内式。


JavaScript异步加载

存在的问题:引入JavaScript代码时,页面的下载和渲染都会暂停,等待脚本执行完成后才会继续(内嵌式或外链式)。

解决的办法1:对于不需要提前执行的代码,将<script>标签放在<body>标签的底部,可以减少对整个页面下载的影响。

解决的办法2:可用HTML5为<script>标签新增的两个可选属性:async和defer。
微风洋洋

  • 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()函数并进行测试。

在这里插入图片描述


代码实现

	<!DOCTYPE html>
	<html>
	<head>
	<meta charset="UTF-8">
	<title>改变网页背景色</title>
	<script>
	function color(str) {
	document.body.style.backgroundColor = str;
	}
	</script>
	</head>
	<body>
	<input type="button" value="设为红色" onclick="color('red')">
	<input type="button" value="设为黄色" onclick="color('yellow')">
	<input type="button" value="设为蓝色" onclick="color('blue')">
	<input type="button" value="设为自定义颜色" onclick="color('#00ff00')">
	</body>
	</html>



九、动手实践

验证用户输入的密码

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

代码实现思路:

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

② 判断用户输入的密码。

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

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

如果觉得这篇文章对你有一丢丢启发的话,不妨 点赞、收藏、留言支持一下,你的支持将是我继续创作的最大动力。下一篇将介绍JavaScript基本语法,到时不见不散️️️

由于作者水平有限,如有错误和不准确之处在所难免,本人也很想知道这些错误,恳望读者批评指正!

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

版权声明:本文为博主原创文章,遵循 CC 4.0 BY-SA 版权协议,转载请附上原文出处链接和本声明。
本文链接:https://blog.csdn.net/qq_51547965/article/details/122861906

智能推荐

RAID0/1/5/6/10/50/JBOD如何选择_jbod ugood使用哪个好-程序员宅基地

文章浏览阅读9k次。曾经写过一遍文章讲解过RAID各版本的功能,但很多朋友明白了技术知识,但却不知道如何选择_jbod ugood使用哪个好

eclipse实现既能编写Java代码和又能编写python代码(eclipse实现编写python详细流程)_如何写python的同时又可以写java-程序员宅基地

文章浏览阅读1.2k次,点赞2次,收藏2次。此为原创,若转载,请注明!!!!问题提出大家是否有过这样的困惑,在大学期间电脑里装了很多的编程软件,那有没有一个能集成的勒?解决方案用eclipse即可实现既能编写Java、Java EE、还能编写python。同时再结合anaconda 3.5.2(python3.6)简直不要太爽。强烈推荐anaconda 3.5.2!!!! 可以查看我的另一博客教程进行安装anaconda安装详解...._如何写python的同时又可以写java

C# 三层架构编写员工信息管理系统_基于c#的员工信息管理系统-程序员宅基地

文章浏览阅读1.5k次。C# 三层架构编写员工信息管理系统首先感谢B站某up主的学习资源。DAL与数据库进行交互,获取数据。封装了三种获取数据的方法(1)获取整张表的数据(2)查找某个字段,并返回是否存在(3)用于增删改,返回受影响对象BLL调用DAL层数据,由于信息管理系统不需要对数据进行再处理,因此在此例中直接将数据传给UI层。UI数据进行显示本案例是基于三成架构和数据库的实战案例,具有查找员工信息,添加删除员工,绩效打分等功能。..._基于c#的员工信息管理系统

Vue项目首次加载慢的优化方法_vue首屏加载慢优化方案-程序员宅基地

文章浏览阅读5.5k次。Vue组件按需加载,用v-if代替v-show图片延迟加载,等页面主体加载好后,再加载_vue首屏加载慢优化方案

安卓打包APK so丢失,强制加入方法_apk应用安装好,少一个so,如果放讲去?-程序员宅基地

文章浏览阅读1.5k次。build.gradle文件里加入:android { //打包apk的时候添加.so文件 task nativeLibsToJar(type: Zip, description: "create a jar archive of the native libs") { destinationDir file("$projectDir/libs")_apk应用安装好,少一个so,如果放讲去?

Eclipse安装包 百度网盘_eclipse安装包百度网盘-程序员宅基地

文章浏览阅读2.8w次,点赞24次,收藏19次。我自己在官网下的一直有问题,打不开,分享一个百度云资源,永久有效链接:https://pan.baidu.com/s/1wqs9sTPVfBJTpYlu312kWw提取码:0c5p复制这段内容后打开百度网盘手机App,操作更方便哦网上很多教程,大部分不详细或者是有问题,我的收藏夹Java里有一个非常详细的教程..._eclipse安装包百度网盘

随便推点

Error: No such file or directory @ rb_sysopen_no such file or directory @ rb_sysopen - /users/dh-程序员宅基地

文章浏览阅读7.1k次,点赞4次,收藏3次。因为mac下的phpstorm需要用到PlantUML,然后需要brew install graphviz报错:==> Pouring [email protected]_1.big_sur.bottle.tar.gzError: No such file or directory @ rb_sysopen - /Users/*****/Library/Caches/Homebrew/downloads/8049a4964d208b824a1a66fcb90a9a07d6a17033b8_no such file or directory @ rb_sysopen - /users/dhadmin/library/caches/homeb

c语言给日期算星期,已知日期,算改日是星期几-程序员宅基地

文章浏览阅读388次。已知日期,算改天是星期几?我的思想是这样的:以公元0年1月1日星期天为基准,算出要求的日期与该日期的天数差,然后再对7求模。余数为0:星期天余数为1:星期一余数为2:星期二余数为3:星期三余数为4:星期四余数为5:星期五但是这个程序算出来的的星期数总会比当前星期数多1,麻烦各位帮我看看,谢谢。#include#include#include#include#includei..._c语言日期转星期

[实战Google深度学习框架]Tensorflow(7)自然语言处理_nlp sos_id-程序员宅基地

文章浏览阅读1.6k次,点赞3次,收藏3次。本篇blog主要以code+markdown的形式介绍tf这本实战书。(建议使用jupyter来学习)第九章 自然语言处理 9.1 语言模型的背景知识 9.2 神经语言模型 9.3 神经网络机器翻译 9.1 语言模型的背景知识9.1.1 语言模型简介把句子看成单词的序列,语言模型可以表示为一个计算的模型。 生成自然语言文本的应用依赖语言模型来优化输出文..._nlp sos_id

【汇智学堂】-Hadoop分布式集群准备工作-12(配置计算框架mapred-site.xml)_配置mapred-site.xml之前,有其他内容吗,-程序员宅基地

文章浏览阅读431次。配置计算框架mapred-site.xml步骤一:vim mapred-site.xml将下面的内容写入。<?xml version="1.0"?><?xml-stylesheet type="text/xsl" href="configuration.xsl"?> mapreduce.framework.name yarn ..._配置mapred-site.xml之前,有其他内容吗,

编译原理 实验4 语义分析(基于PL/0,使用C++代码编写)_编译原理语义分析实验代码-程序员宅基地

文章浏览阅读7.8k次,点赞12次,收藏117次。1 实验任务审查每一个语法结构的静态语义,即验证语法正确的结构是否有意义。此部分不再借助已有工具,需手写代码来完成。2 实验内容(1)实验要求你的程序需要对输入文件进行语义分析并检查错误进行输出。(2)输入格式一个包含源代码的文本文件,程序需要能够接收一个输入文件名作为参数。(3)输出格式要求通过标准输出打印程序的运行结果。对于那些没有语义错误的输入文件,你的程序不需要输出任何内容。对于那些存在语义错误的输入文件,你的程序应当输出相应的错误信息,这些信息包括错误类型、出错的行号以及说明文字,_编译原理语义分析实验代码

盛金公式(一元三次方程的解)-程序员宅基地

文章浏览阅读2.3k次,点赞2次,收藏3次。_盛金公式

推荐文章

热门文章

相关标签