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

news2024/12/24 8:47:54

文章目录

  • 前言
  • 一、输出内容
    • 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.coloradmin.cn/o/1015680.html

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

相关文章

Linux中swap几乎耗尽,但物理内存还有空余的现象

故障现象&#xff1a; 产生此现象的原因&#xff1a; swappiness 配额设置了偏高的值。 还有一个潜在的因素是某个程序因其自身对内存管理的缺陷&#xff0c;形成了zombie进程、且为及时关闭的处理任务还在持续消耗Mem及swap。 解决办法&#xff1a; 调低swappiness 配额值&…

数据库连接工具Chat2DB介绍

1、Chat2DB介绍 Chat2DB 是一款有开源免费的多数据库客户端工具&#xff0c;支持windows、mac本地安装&#xff0c;也支持服务器端部署&#xff0c;web网页访问。和传统的数据库客户端软件Navicat、DBeaver 相比Chat2DB集成了AIGC的能力&#xff0c;能够将自然语言转换为SQL&a…

阿里云 服务器配置端口号阿里云网页开放的一个新端口后,重启防火墙,端口未启动

问题&#xff1a; 阿里云网页开放的一个新端口后&#xff0c;重启防火墙&#xff0c;端口未启动&#xff0c;之前配置的也都停止了。 解决&#xff1a; 原因可能是阿里的服务控制了&#xff0c;只能一个个端口开启了。把新配置新端口也单独启用。 开启80端口指令 firewall-cm…

【AIGC】Stable Diffusion Prompt 每日一练0916

一、前言 1.1 写在前面 本文是一个系列&#xff0c;有点类似随笔&#xff0c;每天一次更新&#xff0c;重点就Stable Diffusion Prompt进行专项训练&#xff0c;本文是第022篇《Stable Diffusion Prompt 每日一练0916》。上一篇《Stable Diffusion Prompt 每日一练0915》 1.…

查询linux系统中的cup和内存占用率?如何能够降低程序的cpu或者内存的占用率?

查询linux系统中的cup和内存占用率?如果查到具体是哪一个进程的cup占用率比较多&#xff0c;你会怎么做&#xff1f;如何能够降低程序的cpu或者内存的占用率? 要查询Linux系统中的CPU和内存占用率&#xff0c;您可以使用top命令&#xff0c;它可以显示系统的总体运行状态和每…

怒刷LeetCode的第1天(Java版)

目录 第一题 题目来源 题目内容 解决方法 方法一&#xff1a;暴力枚举 方法二&#xff1a;哈希表 第二题 题目来源 题目内容 解决方法 方法一&#xff1a;动态规划 第三题 题目来源 题目内容 解决方法 方法一&#xff1a;模拟 第一题 题目来源 两数之和 - 力…

【python爬虫—星巴克产品】

文章目录 需求爬取星巴克产品以及图片&#xff0c;星巴克菜单 python爬虫爬取结果 需求 爬取星巴克产品以及图片&#xff0c;星巴克菜单 网页分析&#xff1a; 首先&#xff0c;需要分析星巴克官方网站的结构&#xff0c;了解菜单栏的位置、布局以及菜单项的标签或类名等信息…

开源AI家庭自动化助手-手机控制家庭智能家居服务

产品简介 将本地控制和隐私放在首位的开源家庭自动化。由全球开发者和 DIY 爱好者社区提供支持。非常适合在 Raspberry Pi 或本地服务器上运行。 功能介绍 1. 控制面板在控制面板&#xff0c;你可以查看家庭的灯光&#xff0c;温度&#xff0c;门铃&#xff0c;音响&#xf…

激光切割机加工过程中产生毛刺的原因及解决方案

激光切割设备在进行工件加工时产生了大量的工件毛刺。很多人认为是设备质量问题&#xff0c;然而事实并非如此。 毛刺是指在金属制品加工过程中遗留在金属表面的超量残渣颗粒。加工的工件出现毛刺&#xff0c;那么即被认为是次品。 当使用激光切割设备加工工件时&#xff0c;如…

第一类曲面积分:曲面微元dσ与其投影面积微元dxdy之间的关系推导

第一类曲面积分&#xff1a;曲面微元dσ与其投影面积微元dxdy之间的关系推导 本篇博客精简自本人关于曲面积分的博客&#xff1a;详情见&#xff1a;曲面积分(Surface Integral) 曲面参数化&#xff08;曲面上的每个点都使用起点为原点、终点为该曲面上的点的向量表示&#x…

介绍Spring Security框架,以及如何使用它实现应用程序的安全性

文章目录 什么是 Spring Security&#xff1f;Spring Security 的工作原理如何使用 Spring Security 构建安全的应用程序步骤 1&#xff1a;添加 Spring Security 依赖步骤 2&#xff1a;配置 Spring Security步骤 3&#xff1a;配置安全性规则步骤 4&#xff1a;创建用户和角色…

解决mybatis-plus不能俩表联查分页之手动写分页

public class MyPageHelper {// 调用pageInfo插件内的方法 开启分页 需要传入一个起始页的值和每页显示的条数public static void startPage(PageRequest pageRequest) {PageHelper.startPage(pageRequest.getPageNum(),pageRequest.getPageSize());}// 封装结果集public stati…

从零开始的PICO开发教程(4)-- VR世界 射线传送、旋转和移动

从零开始的PICO开发教程&#xff08;4&#xff09;-- VR世界 射线传送、旋转和移动 文章目录 从零开始的PICO开发教程&#xff08;4&#xff09;-- VR世界 射线传送、旋转和移动一、前言1、大纲 二、VR射线移动功能实现与解析1、区域传送&#xff08;1&#xff09;新建 XR Orig…

linux下使用crontab定时器,并且设置定时不执行的情况,附:项目启动遇到的一些问题和命令

打开终端&#xff0c;以root用户身份登录。 运行以下命令打开cron任务编辑器&#xff1a; crontab -e 如果首次编辑cron任务&#xff0c;会提示选择编辑器。选择你熟悉的编辑器&#xff0c;比如nano或vi&#xff0c;并打开相应的配置文件。 在编辑器中&#xff0c;添加一行类…

SpringMVC工程之非web部分代码复用,并独立运行

文章目录 概述一、独立运行前提二、实现步骤1. WebApplicationContext上下文配置文件定义2.servletContext上下文配置文件3. 定义独立运行的类main方法4. 开发环境运行main结果5. class文件运行6. jar运行&#xff08;推荐&#xff09; 概述 springMVC是位于spring web端的一个…

BeanFactory和ApplicationContext功能

IDEA中双击shift&#xff0c;搜索一切 使用ctrl f12打开当前文件的结构图&#xff0c;显示了当前文件的层次结构&#xff0c;包括类、方法、变量等。 BeanFactory接口功能 表面上只有getBean实际上IOC、DI、以及Bean的生命周期的各种功能&#xff0c;都有其实现类&#xff08…

视频讲解|1033含sop的配电网重构(含风光可多时段拓展)

目录 1 主要内容 程序特点 讲解重点 2 视频链接 1 主要内容 该视频为含sop的配电网重构matlab代码讲解&#xff0c;对应资源下载链接为含sop的配电网重构&#xff08;含风光|可多时段拓展&#xff09;&#xff0c;程序主要内容是&#xff1a;针对含sop的配电网重构模型&…

【AI】推理引擎的模型转换模块

在推理引擎架构中&#xff0c;API 接口下来就是模型转换&#xff0c;狭义的模型转换是指将各种框架的模型转换为统一的格式&#xff0c;即模型格式转换&#xff1b;广义的模型转换则还包括图优化部分&#xff0c;因为不同的框架提供的算子不同&#xff0c;且类型太多&#xff0…

强大的 HTTP 请求工具:axios 打造前后端通信利器 | 开源日报 0916

axios/axios Stars: 101.2k License: MIT axios 是一个基于 Promise 的 HTTP 客户端&#xff0c;适用于浏览器和 node.js。 它具有以下核心优势&#xff1a; 支持在浏览器中进行 XMLHttpRequest在 node.js 中发起 http 请求支持 Promise API拦截请求和响应&#xff0c;并对数…

rust String 和 str 区别

1 String / &String String 类型的变量本质是一个存放在栈上的胖指针&#xff08;当然调用过程中&#xff0c;不用显示地按指针那样处理&#xff09;&#xff0c;共有三个字段&#xff1a; 1 pointer: 指向实际字符串值的地址&#xff0c;值是存放在堆上可变字节缓冲区&a…