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

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

前言


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("这是控制台输出的消息");


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


查看终端输出信息

b06d240e0f46449ba7f243ef9558f7f0.png

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

1、vscode中查看:

8c754fe0318c47e9bff671113ac1b98e.png

运行后,在vscode下面的调试控制台,就可以看到我们的打印的东西了!

2、浏览器中查看

1.按F12

d2f568d35dad4190911ea1dd574547e9.png

2.点击“打开开发工具”

3.点击控制台

086179cbb80a4ed48e0b55d060b9b603.png

我们可以看到我们打印的了Hello world了


1.3 alert()函数

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

javascript

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


执行上述代码时,将弹出一个对话框,显示消息"这是一个提示框"。

f75b0a282c3642528ab14acb649783fe.png

我们还可以点击“确定”关闭他!


二、变量的使用


在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()函数在控制台输出欢迎消息。

4a0a1ec762c2463c9d13cede98079c14.png

1300a7aa7ef44dd793c6d9e4ead344f2.png

可以看到,这里就可以输入,可以点击确定/取消,输入完成点击确定后,就返回给named变量,然后打印出来!

e22d58ea96154d02bbd7db393e03a83b.png

034918a3b86c4675becfa57d88ce008e.png

可以看到,这里也是打印出来了。

通过几节课的学习Javascript,可以看到,他非常的简单,Easy!


总结


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

相关文章
|
5月前
|
机器学习/深度学习 JavaScript 前端开发
JS进阶教程:递归函数原理与篇例解析
通过对这些代码示例的学习,我们已经了解了递归的原理以及递归在JS中的应用方法。递归虽然有着理论升华,但弄清它的核心思想并不难。举个随手可见的例子,火影鸣人做的影分身,你看到的都是同一个鸣人,但他们的行为却能在全局产生影响,这不就是递归吗?雾里看花,透过其间你或许已经深入了递归的魅力之中。
219 19
|
7月前
|
JavaScript
JS实现多条件搜索函数
JS封装的多条件搜索
|
8月前
|
资源调度 JavaScript 前端开发
前端开发必备!Node.js 18.x LTS保姆级安装教程(附国内镜像源配置)
本文详细介绍了Node.js的安装与配置流程,涵盖环境准备、版本选择(推荐LTS版v18.x)、安装步骤(路径设置、组件选择)、环境验证(命令测试、镜像加速)及常见问题解决方法。同时推荐开发工具链,如VS Code、Yarn等,并提供常用全局包安装指南,帮助开发者快速搭建高效稳定的JavaScript开发环境。内容基于官方正版软件,确保合规性与安全性。
6858 24
|
8月前
|
JavaScript 前端开发 开发者
JavaScript基础——JavaScript变量名称命名规范
JavaScript变量命名规范是编写高质量代码的重要部分。通过遵循基本规则、使用常见命名约定并应用最佳实践,可以提高代码的可读性和可维护性。希望本文能帮助开发者在日常编程中更好地理解和应用JavaScript变量命名规范,从而编写出更清晰、更可靠的代码。
472 11
|
9月前
|
JavaScript 前端开发
JavaWeb JavaScript ③ JS的流程控制和函数
通过本文的详细介绍,您可以深入理解JavaScript的流程控制和函数的使用,进而编写出高效、可维护的代码。
185 32
|
10月前
|
JavaScript 前端开发 容器
盘点JavaScript中所有声明变量的方式及特性
本文详细介绍了JavaScript中变量定义的多种方式,包括传统的`var`、`let`和`const`,以及通过`this`、`window`、`top`等对象定义变量的方法。每种方式都有其独特的语法和特性,并附有代码示例说明。推荐使用`let`和`const`以避免作用域和提升问题,谨慎使用`window`和`top`定义全局变量,不建议使用隐式全局变量。掌握这些定义方式有助于编写更健壮的JS代码。
207 11
|
8月前
|
JavaScript 前端开发 Java
详解js柯里化原理及用法,探究柯里化在Redux Selector 的场景模拟、构建复杂的数据流管道、优化深度嵌套函数中的精妙应用
柯里化是一种强大的函数式编程技术,它通过将函数分解为单参数形式,实现了灵活性与可复用性的统一。无论是参数复用、延迟执行,还是函数组合,柯里化都为现代编程提供了极大的便利。 从 Redux 的选择器优化到复杂的数据流处理,再到深度嵌套的函数优化,柯里化在实际开发中展现出了非凡的价值。如果你希望编写更简洁、更优雅的代码,柯里化无疑是一个值得深入学习和实践的工具。从简单的实现到复杂的应用,希望这篇博客能为你揭开柯里化的奥秘,助力你的开发之旅! 只有锻炼思维才能可持续地解决问题,只有思维才是真正值得学习和分享的核心要素。如果这篇博客能给您带来一点帮助,麻烦您点个赞支持一
|
12月前
|
Web App开发 JavaScript 前端开发
2024年5月node.js安装(winmac系统)保姆级教程
本篇博客为2024年5月版Node.js安装教程,适用于Windows和Mac系统。作者是一名熟悉JavaScript与Vue的大一学生,分享了Node.js的基本介绍、下载链接及简单安装步骤。安装完成后,通过终端命令`node -v`验证版本即可确认安装成功。欢迎关注作者,获取更多技术文章。
434 2
2024年5月node.js安装(winmac系统)保姆级教程
|
JavaScript 前端开发
JavaScript基础知识-函数的参数
关于JavaScript函数参数基础知识的介绍。
124 4
JavaScript基础知识-函数的参数
|
JavaScript 前端开发
JavaScript 函数参数
JavaScript 函数参数
103 3