【JavaScript】JavaScript基本使用方法

news2024/9/22 6:19:35

如何回复程序员发来的短信:Hello world

—hello nerd.


前言:

大家好,我是程序猿爱打拳。今天我给大家讲解的是初识JavaScript中基本组成成分、引入方法、输入输出语句,并用源码与效果图的方式展示给大家。


目录

1.JavaScript组成

2.JavaScript代码初体验 

3.JavaScript代码引入方式

3.1行内式

3.2.嵌入式

3.3.外链式 

4.输入输出语句

4.1prompt()语句

4.2alert()语句

4.3document.write()语句

4.4console.log()语句

5.JavaScript注释

5.1单行注释

5.2多行注释


1.JavaScript组成

JavaScript由ECMAScript、DOM、BOM这三部分组成。

  • ECMAScript:规定了JavaScript的编程语法与基础核心内容,是所有浏览器都遵循的语法标准。
  • DOM:是万维网制定的用于处理HTML文档和XML文档的编程接口。
  • BOM:浏览器对象模型,也是一套编程接口,一般进行刷新页面、弹出警告框、跳转页面等。

2.JavaScript代码初体验 

在浏览器中输出Hello World。

<!DOCTYPE html>
<html>
	<head>
		<meta charset="utf-8">
		<title></title>
	</head>
	<body>
		<script >
			document.write('Hello World');
		</script>
	</body>
</html>

显示结果:

如何实现的,下面我就来一一讲解。


3.JavaScript代码引入方式

首先在编写JavaScript代码时,我们需要先引入JavaScript代码。有三种引入方式分别为行内式嵌入式外链式


3.1行内式

行内式我们理解为直接在一行内进行编写,例如我点击一个名为"网站"的链接打印出一个警告框提示"本站为私人网站请自行离开"。

<a href="javascript:alert('此网站为私人网站请自行离开');">网站</a>

显示结果:

注意:

1.<a></a>标签是定义超链接,用于从一张页面链接到另一张页面。

2.href 属性是 <a></a>标签的重要属性,它指向的是链接的目标。


3.2.嵌入式

嵌入式我们理解为,使用<script></script>标签包裹的JavaScript代码。例如我要编写一个提示框询问"今天你过的开心吗?"

<script>
	prompt('今天你过的开心吗?','yes');
</script>

窗口显示为:

注意:

1.<script></script>标签为JavaScript主要标签,<script> 标签用于定义客户端脚本,也可以使用src属性实现外部链接。

2.prompt()语句为输入语句,在浏览器中弹出输入框,用户也可以输入内容。


3.3.外链式 

将JavaScript代码单独写在一个后缀为.js的文件中,然后在HTML页面中使用src属性来引入这个.js文件。就能实现外链式的用法,一般当代码足够多时我们会用到该引入方式。

例如我在.js文件里面写入一句"Hello World",并使用外链式在浏览器中显示出来:

//.html文件下
<script src="teset.js"></script>
//.js文件下
document.write('Hello World');

输出结果:

注意:

1.document.write()语句为输出语句,用于在网页中输出内容。


4.输入输出语句

JS中的输入语句不同于C中的scanf和Java中Sout,JS基本的输入输出语句对应下表:

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

4.1prompt()语句

prompt语句使用效果就是在网页打开时弹出一个带有提示信息的输入框,如提示"今天你学习了吗?"

<script >
	prompt('今天你学习了吗?');
</script>

显示效果:

如果你想让输入框有一个默认的值,你可以在()里再用,号分割出另一段话,如输入框默认显示"学习了"。当然这个默认的文字可以进行修改

<script >
	prompt('今天你学习了吗?','学习了');
</script>

显示效果:


4.2alert()语句

alert语句我们在上面的行内式介绍中已经讲解到了,使用alert与编写代码实现的效果是弹出一个警告框,例如弹出一个"不好好学习就找不到好offer"的警告。

<script >
	alert('不好好学习就找不到好offer');
</script>

显示效果:


4.3document.write()语句

document.write语句会直接将你打出的内容显示在浏览器页面中,默认为左上角显示。例如在页面显示"我是帅哥"。

<script >
	document.write('我是帅哥');
</script>

显示效果:


4.4console.log()语句

console.log语句就与上述几个语句有些许不同了,它是在控制台中输出内容的。首先我们要先打开控制台,查看控制台我们直接按F12即可。

不知有没有小伙伴,在浏览网页时有没有不小心按到那个按键然后页面显示了一大堆看不懂的代码,这就是你误按F12造成的结果。

 言归正传,例如我要使用console.log()语句在控制台中显示"我今天好好学习了,我真棒!"

<script >
	console.log('我今天好好学习了,我真棒!');
</script>

显示效果:


5.JavaScript注释

JS分为两种注释方法,分为单行注释多行注释


5.1单行注释

单行注释,与C、Java中一样使用'//'来进行注释,用法如下程序所示。

<script >
	console.log('我今天好好学习了,我真棒!');//在控制台输入文本信息
</script>

5.2多行注释

多行注释,我们以/*开头,*/结尾。例如我写了一大串代码突然我不想用了,我可以使用这种方式进行屏蔽。

<script >
	/*console.log('我今天好好学习了,我真棒!');
	alert('Hello World');
	document.write('输出内容');*/
</script>

我们可以看到/**/内的内容都变成了灰色。当然你也可以使用Ctrl+/来实现快速的屏蔽效果。


重点总结:

1.JavaScript是由ECMAScript、DOM、BOM这三部分组成。

2.JavaScript代码引入方式有行内式、嵌入式、外链式三种引入方式。

3.输入语句为prompt(),输出语句为alert()、document.write()、console.log()。

4.JavaScript区分大小写,并且每一段程序结束时要加上;号这点和C语言、Java是一样的。

5.JavaScript输出内容时可以用英文双引号""也可用英文单引号''。


以上就是本次博文的全部内容,感谢您的耐心阅读。

 Never Give Up

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

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

相关文章

手机文字转语音软件哪个好用?超火的两款好用的文字转语音软件

有很多小伙伴对短视频配音比较感兴趣&#xff0c;但方方面面了解得不多&#xff0c;比如&#xff1a;配音有哪几种方法&#xff1f;需要注意些什么&#xff1f;用手机就可以操作么&#xff1f;好用的文字转语音软件有哪些&#xff1f;这篇文&#xff0c;小编就带大家简单了解一…

(C语言篇)扫雷的实现

文章目录 一、开始时的基本思维&#xff1a;二、进入游戏的逻辑(test.c文件中实现)三、游戏的编写 1. 初始化棋盘 I. test.cII. game.hIII. game.c 2.打印棋盘 I. test.cII. game.hIII. game.c 3.布置雷 I. test.cII. game.hIII. game.c 4.排查雷 I. test.cII. game.hIII. gam…

Java集合学习之Map

1.什么是Map Java里的Map接口是一个集合根接口&#xff0c;表示一个 键值对&#xff08;Key-Value&#xff09; 的映射。 简单来说就是键和值是一对的&#xff0c;每一个 Key都有唯一确定的 Value对应。 其中要求 键&#xff08;Key&#xff09; 唯一&#xff0c;因为是按照…

宏观经济研究:全国各省、地级市-社会融资规模增量数据(包含总额及8类明细)2013-2021年

数据来源&#xff1a;中国人民银行 时间跨度&#xff1a;2013-2021年&#xff0c;季度数据&#xff08;累计数&#xff09; 区域范围&#xff1a;全国31省份 数据字段&#xff1a; 31个省市社会融资规模增量数据&#xff0c;包含社会融资总额以及8类明细&#xff08;人民币…

12-Composer的配置与使用详解

1、自定义类与非类的自动加载与测试 # composer> php 包管理工具 &#xff0c;类似npm1.自己写的类&#xff0c;函数&#xff0c;接口&#xff0c;常量等全局成员&#xff0c;通过自动加载来实现按需加载 2.自己写的代码&#xff0c;有哪些依赖&#xff0c;用到了哪些外部成…

MySQL数据库调优————GROUP BY及DISTINCT优化

GROUP BY 三种处理GROUP BY的方式 松散索引扫描&#xff08;Loose Index Scan&#xff09;紧凑索引扫描&#xff08;Tight Index Scan&#xff09;临时表&#xff08;Temporary table&#xff09; 三种方式的性能一次递减 松散索引扫描 无需扫描满足条件的所有索引键即可返…

基于SSM,Spring, BootStrap 毕业设计管理系统的设计与实现

目录 一.前言介绍 二、主要技术 2.1 SSM框架介绍 2.2 MYSQL数据库 2.3 持久层框架MyBatis 2.4 前端框架BootStrap 三. 系统设计 3.1 系统架构设计 3.2 系统功能模块 3.2.1 学生模块 3.2.2 教师模块 3.2.3 管理员模块 四、数据库设计 4.1 数据分析 4.2 概念设计 …

SpringBoot搭建SpringMVC项目

前言据我的了解&#xff0c;现在不管是大公司或是小公司&#xff0c;如果使用java开发一个web项目&#xff0c;大部分都会选择使用SpringBoot&#xff0c;关于Springboot的好处&#xff0c;就不在这里过多赘述&#xff0c;总之Springboot有一套完整的生态&#xff0c;从项目构建…

Java【七大排序】算法详细图解,一篇文章吃透

文章目录一、排序相关概念二、七大排序1&#xff0c;直接插入排序2&#xff0c;希尔排序3&#xff0c;选择排序4&#xff0c;堆排序5&#xff0c;冒泡排序5.1冒泡排序的优化6&#xff0c;快速排序6.1 快速排序的优化7&#xff0c;归并排序三、排序算法总体分析对比总结提示&…

多层感知机

多层感知机理论部分 本文系统的讲解多层感知机的pytorch复现&#xff0c;以及详细的代码解释。 部分文字和代码来自《动手学深度学习》&#xff01;&#xff01; 目录多层感知机理论部分隐藏层多层感知机数学逻辑激活函数1. ReLU函数2. sigmoid函数3. tanh函数多层感知机的从零…

Allegro如何快速把推挤的走线变平滑操作指导

Allegro如何快速把推挤的走线变平滑操作指导 Allegro有个非常强大的功能,推挤命令,可以快速的让走线以不报DRC的形式避让目标 推挤后的效果如下图 但是走线不够平滑,如果每一段都去再推一下比较费时间,下面介绍allegro本身自带的优化类似走线的功能 具体操作如下 点击Rout…

sklearn学习-朴素贝叶斯

文章目录一、概述1、真正的概率分类器2、sklearn中的朴素贝叶斯二、不同分布下的贝叶斯1、高斯朴素贝叶斯GaussianNB2、探索贝叶斯&#xff1a;高斯朴素贝叶斯擅长的数据集3、探索贝叶斯&#xff1a;高斯朴素贝叶斯的拟合效果与运算速度总结一、概述 1、真正的概率分类器 算法…

计算机组成与体系结构

目录 1.计算机结构 2.寻址方式 3.CISC与RISC 4.流水线 1.计算机结构 运算器 算术逻辑单元ALU&#xff1a;数据的算术运算和逻辑运算累加寄存器AC&#xff1a;通用寄存器&#xff0c;为ALU提供一个工作区&#xff0c;用在暂存数据数据缓存寄存器DR&#xff1a;写内存中&…

Linux LVM逻辑卷

目录 LVM逻辑卷 什么是LVM LVM常用术语 管理逻辑卷相关命令 创建LVM逻辑卷 LVM扩容 LVM缩小 LVM快照卷 删除LVM LVM逻辑卷 什么是LVM LVM&#xff08;Logical Volume Manager&#xff09;逻辑卷管理器&#xff0c;是一种硬盘的虚拟化技术&#xff0c;能够实现用户对硬…

基于微信小程序的校园顺路代送小程序

文末联系获取源码 开发语言&#xff1a;Java 框架&#xff1a;ssm JDK版本&#xff1a;JDK1.8 服务器&#xff1a;tomcat7 数据库&#xff1a;mysql 5.7/8.0 数据库工具&#xff1a;Navicat11 开发软件&#xff1a;eclipse/myeclipse/idea Maven包&#xff1a;Maven3.3.9 浏览器…

还真不错,今天 Chatgpt 教会我如何开发一款小工具开发(Python 代码实现)

上次使用 Chatgpt 写爬虫&#xff0c;虽然写出来的代码很多需要修改后才能运行&#xff0c;但Chatgpt提供的思路和框架都是没问题。 这次让 Chatgpt 写一写GUI程序&#xff0c;也就是你常看到的桌面图形程序。 由于第一次测试&#xff0c;就来个简单点的&#xff0c;用Python…

Linux命令之grep

Linux grep是一个非常强大的文本搜索工具。按照给定的正则表达式对目标文本进行匹配检查&#xff0c;打印匹配到的行。grep命令可以跟其他命令一起使用&#xff0c;对其他命令的输出进行匹配。 grep语法如下&#xff1a; grep [options] [pattern] content 文本检索 grep可以对…

51单片机蜂鸣器的使用

提示&#xff1a;文章写完后&#xff0c;目录可以自动生成&#xff0c;如何生成可参考右边的帮助文档 文章目录前言一、有源蜂鸣器和无源蜂鸣器的区别二、代码编写总结前言 本文旨在介绍如何使用51单片机驱动蜂鸣器。 一、有源蜂鸣器和无源蜂鸣器的区别 有源蜂鸣器是一种电子…

easyExcel 写复杂表头

写模板 模板图片&#xff1a; 实体类&#xff08;这里没有用Data 是因为Lombok和easyExcal的版本冲突&#xff0c;在导入读取的时候获取不到值&#xff09; package cn.iocoder.yudao.module.project.controller.admin.goods.vo;import com.alibaba.excel.annotation.ExcelI…

编译安装MySQL

MySQL 5.7主要特性 随机root 密码&#xff1a;MySQL 5.7 数据库初始化完成后&#xff0c;会自动生成一个 rootlocalhost 用户&#xff0c;root 用户的密码不为空&#xff0c;而是随机产生一个密码。原生支持&#xff1a;Systemd 更好的性能&#xff1a;对于多核CPU、固态硬盘、…