JS入门之输入输出

最新推荐文章于 2025-04-13 01:48:16 发布

&故里

最新推荐文章于 2025-04-13 01:48:16 发布

阅读量1.5k

点赞数 3

分类专栏：学习笔记文章标签： javascript js

本文链接：https://blog.youkuaiyun.com/qq_53738230/article/details/114597622

版权

学习笔记专栏收录该内容

8 篇文章

订阅专栏

JavaScript学习笔记

文章目录

JavaScript学习笔记
JavaScript的基本使用（一）
总结

JavaScript的基本使用（一）

一、JavaScript的引用方式（三种）

内嵌式：是将JS代码写在script标签内，并且script标签可放置于任何位置(推荐放在body底部，方便解析引擎先将重要代码解析)

//示例
<script type="text/javascript">  
    alert(‘hello world!’) //alert()方法为弹出一个警告对话框 
</script>

行内式：直接将代码写在HTML元素内（该方法问题较多，不推荐使用）

//示例
<button type="button" 
onclick="javascript:alert('hello world!')">click me</button>

外联式：将js代码写入外部js文件中，通过script标签内的src属性引入

//示例
<script src="./index.js" type="text/javascript"></script>
//推荐使用此方法，当项目内容过多是更便于管理

二、JS的基本输入/输出语句

alert():------创建一个警告对话框，并且输出括号内容

// 示例，输出字符串
alert('hello world')

// 示例，输出表达式
alert(6+6)

// 示例，输出变量
var name = '曾某'
alert('你好，我是'+name)

在这里插入图片描述

prompt()：创建一个提示对话框，用于收集用户输入，参数一为提示框文本内容，参数二为输入框的默认值（参数二可选）

// 示例
prompt('你最喜欢的颜色是', '红色')

// 有返回值，可将返回值存入变量再调用
var color = prompt('你最喜欢的颜色是', '红色')  
alert(color)

在这里插入图片描述

document.write()：直接在页面上输出内容，参数除了可以是字符串、表达式、变量，还可以是HTML标签代码

document.write('<h1>hello world</h1>')

在这里插入图片描述

console.log()控制台输出

//使用F12在浏览器中激活调试，然后在调试器菜单中选择“控制台”/“console”
var a = 1  
var b = 2  
var c = a + b  
console.log(c) //控制台输出语句

在这里插入图片描述

三、强化练习

在这里插入图片描述
代码如下

<!DOCTYPE html>
<html>

<head>
	<meta charset="utf-8" />
	<title></title>
</head>

<body>

	<script type="text/javascript">
		var name = prompt("你的姓名：")
		alert("你输入的姓名是：\n" + name)
		var sex = prompt("你的性别：")
		alert("你输入的性别是：\n" + sex)
		var age = prompt("你的年龄：", "19")
		alert("你输入的年龄是：\n" + age)
		document.write("<table border='1' <tr><th>姓名</th><th>性别</th><th>年龄</th></tr><tr><th>" + name + "</th><th>" + sex + "</th><th>" + age + "</th></tr></table>")
		console.log("資料已讀取，生成表格")
	</script>
</body>

</html>