【JavaScript保姆级教程】输出函数和初识变量

文章目录

  • 前言
  • 一、输出内容
    • 1.1 document.write()函数
    • 1.2 console.log()函数
      • 查看终端输出信息
    • 1.3 alert()函数
  • 二、变量的使用
    • 1.1 变量的声明
    • 1.3变量的赋值
    • 1.4 变量的声明和赋值
  • 三、输入提示框的使用
  • 总结


前言

JavaScript是一种强大的脚本语言,广泛应用于网页开发和应用程序编写。本文将全面介绍JavaScript中输出内容的方法,包括使用document.write()函数、调试工具如console.log()和对话框函数如alert(),以及变量的声明和赋值。此外,我们还将探索输入提示框prompt()函数的使用方法。深入理解这些概念和技术,将为您在JavaScript编程中提供帮助。


一、输出内容

在JavaScript中,我们可以使用不同的方法输出内容到浏览器或开发工具的控制台。

1.1 document.write()函数

document.write()函数用于将内容直接写入HTML文档中。这个函数可以在运行时向页面添加内容。示例代码如下:
html

<!DOCTYPE html>
<html>
<head><title>JavaScript示例</title>
</head>
<body><script>document.write("我是div标签");</script>
</body>
</html>

执行上述代码时,将向浏览器输出"我是div标签"。

1.2 console.log()函数

console.log()函数用于在控制台打印消息,可以帮助我们进行调试和输出结果。示例代码如下:
javascript

console.log("这是控制台输出的消息");

执行上述代码时,消息"这是控制台输出的消息"将出现在开发工具的控制台中。

查看终端输出信息

在这里插入图片描述

首先写一个log打印函数,然后我们运行他!

1、vscode中查看:
在这里插入图片描述
运行后,在vscode下面的调试控制台,就可以看到我们的打印的东西了!

2、浏览器中查看
1.按F12
在这里插入图片描述
2.点击“打开开发工具”

3.点击控制台
在这里插入图片描述
我们可以看到我们打印的了Hello world了

1.3 alert()函数

alert()函数用于在浏览器中显示一个带有确认按钮的对话框。这个函数通常用于向用户显示重要信息或要求用户进行操作。示例代码如下:
javascript

alert("这是一个提示框");

执行上述代码时,将弹出一个对话框,显示消息"这是一个提示框"。
在这里插入图片描述
我们还可以点击“确定”关闭他!

二、变量的使用

在JavaScript中,变量用于存储和操作数据。变量可以被声明和赋值。

1.1 变量的声明

可以使用let关键字来声明一个变量。示例代码如下:
javascript

var x

上述代码声明了一个名为x的变量。

1.3变量的赋值

可以使用赋值操作符=将值赋给变量。示例代码如下:
javascript

x = 5

上述代码将值5赋给变量x。

1.4 变量的声明和赋值

还可以在声明变量的同时进行赋值操作。示例代码如下:
javascript

let y = 10

上述代码声明了一个名为y的变量,并将值10赋给它。

三、输入提示框的使用

prompt()函数用于显示一个带有输入框和确认按钮的对话框,以便用户输入数据。示例代码如下:

javascript

let name = prompt("请输入您的姓名:");
console.log("欢迎您," + name + "!");

上述代码将弹出一个对话框,要求用户输入姓名,并将输入的姓名存储在变量name中。然后,通过console.log()函数在控制台输出欢迎消息。
在这里插入图片描述
在这里插入图片描述
可以看到,这里就可以输入,可以点击确定/取消,输入完成点击确定后,就返回给named变量,然后打印出来!
在这里插入图片描述
在这里插入图片描述

可以看到,这里也是打印出来了。
通过几节课的学习Javascript,可以看到,他非常的简单,Easy!


总结

本文深入探讨了JavaScript中输出内容的几种方法,包括使用document.write()将内容写入HTML文档、使用console.log()在控制台打印消息和使用alert()显示对话框。同时,我们还学习了变量的声明和赋值,以及使用prompt()函数获取用户输入。这些知识将为您在JavaScript编程中提供更多灵活性和功能。通过熟练掌握这些概念和技术,您将能够开发出交互性强的网页和应用程序。 JavaScript的广泛应用领域使得深入了解该语言的重要性不可忽视。通过不断学习和实践,您将能够利用JavaScript构建出更加强大和创新的应用。

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

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

相关文章

C++DAY10 结构体·定义与使用

结构体的作用&#xff1a; 结构体属于用户自定义的数据类型&#xff0c;允许用户储存不同的数据类型。 #include<iostream> using namespace std;//结构体的语法 //struct 结构体名 { 结构体成员列表 }; struct Student {//成员列表//姓名string name;//年龄int age;/…

git 提交冲突

提示&#xff1a;您有偏离的分支&#xff0c;需要指定如何调和它们。您可以在执行下一次 提示&#xff1a;pull 操作之前执行下面一条命令来抑制本消息&#xff1a; 提示&#xff1a; 提示&#xff1a; git config pull.rebase false # 合并 提示&#xff1a; git config pull.…

文件批量重命名:自定义命名与扩展名更改

你是否曾经需要批量更改文件名称和类型&#xff1f;如果你有大量文件需要重命名和更改类型&#xff0c;那么今天我们将向你介绍一种简单的方法来轻松批量更改文件名称和类型。无论你是需要将一个文件夹中的所有图片改为另一种格式&#xff0c;还是需要将一个文件夹中的所有文档…

【基于多输出方向的同步异步日志系统】

本项目涉及的到所有源码见以下链接&#xff1a; https://gitee.com/ace-zhe/wz_log 一、项目简介 1.日志的概念&#xff08;白话版&#xff09; 日志类似于日记&#xff0c;通常是指对完成某件事情的过程中状态等的记录&#xff0c;而计算机中的日志是指日志数据&#xff0c…

轻松学习 Spring 事务

文章目录 一. Spring事务简介二. Spring事务使用1. 编程式事务2. 声明式事务 三. Transactional的使用1. 参数作用2. 事务失效的场景3. Transactional工作原理 四. Spring 事务的隔离级别五. Spring事务传播机制 一. Spring事务简介 在之前的博客已经介绍了在 Spring 环境中整…

结构体变量的初始化和引用

任务描述 本关任务&#xff1a;从键盘输入两个学生的学号&#xff0c;姓名和成绩&#xff08;整数&#xff09;&#xff0c;分别存入结构体中&#xff0c;输出成绩较高的学生的学号&#xff0c;姓名和成绩。 相关知识 结构体类型用于描述由多个不同数据类型的数据构成的复合…

浅析安防监控系统/AI视频智能分析算法:河道水文水位超标算法应用

传统的水位水尺刻度尺位监测中&#xff0c;所采用的人工读数方式&#xff0c;效率较为低下且 人工成本较高&#xff0c;不利于作业流程的数字化。尽管感应器检测会自动对水位的模拟输入进行筛选&#xff0c;但是由于成本、使用场景要求高、后续日常维护复杂等多种因素&#xff…

Pytorch实现图像语义分割(初体验)

Pytorch实现图像语义分割&#xff08;初体验&#xff09; 这些天在学习图像语义分割相关的知识&#xff0c;并简单写了篇概述。原本想先看几篇经典论文&#xff0c;如全卷积网络FCN&#xff0c;奈何英语水平有限&#xff0c;翻译起来实在费劲。想来不如先直接体验一下语义分割…

vscode c++解决包含头文件红色波浪线问题

安装c/c插件后&#xff0c;按ctrlshiftp&#xff0c; 点击打开了c_cpp_properties.json文件&#xff0c;对其中的IncludePath进行编辑&#xff0c;示例如下&#xff1a; "includePath": ["${workspaceFolder}/**","${workspaceFolder}/include/**&q…

Gin 打包vue或react项目输出文件到程序二进制文件

Gin 打包vue或react项目输出文件到程序二进制文件 背景解决方案1. 示例目录结构2. 有如下问题要解决:3. 方案探索 效果 背景 前后端分离已成为行业主流&#xff0c;vue或react等项目生成的文件独立在一个单独目录&#xff0c;与后端项目无关。 实际部署中&#xff0c;通常前面套…

JDK9特性——模块化REPL工具

文章目录 前言模块化模块化案例 可交互的REPL工具 前言 谈到Java9大家往往第一个想到的就是Jigsaw项目&#xff08;后改名为Modularity&#xff09;。众所周知&#xff0c;Java已经发展超过20年(95年最初发布)&#xff0c;Java和相关生态在不断丰富的同时也越来越暴露出一些问…

嵌入式入门教学——模电基础概念

目录 1、模拟信号和模拟电路 2、研究领域 3、常用术语 3.1、共价键 3.2、电场 3.3、温度的电压当量 3.4、动态信号 3.5、直流电流和交流电流 3.6、内阻 3.7、信号频率 3.8、电容 3.9、电感 3.10、相位 3.11、信号失真 3.12、电导 3.13、跨导 3.14、电位 3.15…

瑞萨MCU入门教程(非常详细的瑞萨单片机入门教程)

瑞萨MCU零基础入门系列教程 前言 得益于瑞萨强大的MCU、强大的软件开发工具(e studio)&#xff0c;也得益于瑞萨和RA生态工作室提供的支持&#xff0c;我们团队编写了《ARM嵌入式系统中面向对象的模块编程方法》&#xff0c;全书37章&#xff0c;将近500页: 讲解面向对象编程…

动态规划问题

看一遍就理解&#xff1a;动态规划详解 - 什么样的问题可以考虑使用动态规划解决呢&#xff1f; 如果一个问题&#xff0c;可以把所有可能的答案穷举出来&#xff0c;并且穷举出来后&#xff0c;发现存在重叠子问题&#xff0c;就可以考虑使用动态规划。 比如一些求最值的场景…

linux————ansible

一、认识自动化运维 自动化运维: 将日常IT运维中大量的重复性工作&#xff0c;小到简单的日常检查、配置变更和软件安装&#xff0c;大到整个变更流程的组织调度&#xff0c;由过去的手工执行转为自动化操作&#xff0c;从而减少乃至消除运维中的延迟&#xff0c;实现“零延时”…

多线程回顾、集合Collection、Set、List等基本知识

多线程回顾 问: 多线程的两种创建方式? 继承Thread类实现Runnable接口线程池Callable 问:多线程通常会遇到线程安全问题? 什么情况下会遇到线程安全问题? 答:一个数据被多个线程访问(有读有写) 解决这个问题的方式? SE:同步锁 synchronized A : 同步代码块 B : 同步方法…

VisualStudio Code 支持C++11插件配置

问题 Visual Studio Code中的插件: Code Runner 支持运行C、C、Java、JS、PHP、Python等多种语言。 但是它不支持C11特性的一些使用&#xff0c;比如类似错误&#xff1a; binarySearch.cpp:26:17: error: non-aggregate type ‘vector’ cannot be initialized with an ini…

Python怎样写桌面程序

要编写Python桌面应用程序&#xff0c;可以使用以下几种方法&#xff1a; 1.使用Tkinter模块&#xff1a;Tkinter是Python自带的GUI工具包之一&#xff0c;可以使用它来创建基本的GUI界面。例如&#xff0c;可以创建一个简单的窗口&#xff0c;添加按钮、文本框等控件&#xf…

【Excel函数】Excel的Len函数求对象的字符数

在Excel中&#xff0c;LEN函数用于计算文本字符串中的字符数。它的语法如下。 LEN(text) 其中&#xff0c;text是要计算字符数的文本字符串。 例如&#xff0c;如果你想计算单元格A1中文本的字符数&#xff0c;可以使用以下公式&#xff1a; A2len(a1) 结果将返回单元格A1中文…

【深度学习】 Python 和 NumPy 系列教程(十):NumPy详解:2、数组操作(索引和切片、形状操作、转置操作、拼接操作)

目录 一、前言 二、实验环境 三、NumPy 0、多维数组对象&#xff08;ndarray&#xff09; 1. 多维数组的属性 1、创建数组 2、数组操作 1. 索引和切片 a. 索引 b. 切片 2. 形状操作 a. 获取数组形状 b. 改变数组形状 c. 展平数组 3. 转置操作 a. 使用.T属性 b…