JavaScript消息对话框(提示框,页面输出以及浏览器控制台打印)

本文介绍了JavaScript中常用的六种页面交互方法:页面输出、警告窗、确认框、提问框、打开新窗口及浏览器控制台打印。通过这些方法可以增强网页与用户的互动体验。

1. JavaScript 页面输出(Document.write):

<script type="text/javascript">
  document.write("I love JavaScript!"); //内容用""括起来,""里的内容直接输出。
</script>

2. JavaScript 警告窗(alert):

<script type="text/javascript">
   alert("Hello JavaScript!");
</script>

3. JavaScript 确认框(confirm):

<script type="text/javascript">
    var mymessage=confirm("你喜欢JavaScript吗?");
    if(mymessage==true)
    {   document.write("很好,加油!");   }
    else
    {  document.write("JS功能强大,要学习噢!");   }
</script>

4. JavaScript 提问框(prompt):

<script type="text/javascript">
  function rec(){
	var score; //score变量,用来存储用户输入的成绩值。
	score = prompt(str1, str2);
	if(score>=90)
	{
	   document.write("你很棒!");
	}
	else if(score>=75)
    {
	   document.write("不错吆!");
	}
  }

5. JavaScript 打开新窗口(Window.open):

<script type="text/javascript">
  function Wopen(){
      window.open('http://www.imooc.com', 'width = 600,height = 400,margin-top:100px');
  } 
</script>


6. JavaScript 浏览器控制台打印(console.info):

<script type="text/javascript">
       console.info('Hello JavaScript!');
</script>




第1关:JavaScript 语言介绍、注释及基本输出方式 100 学习内容 参考答案 记录 评论 任务描述 相关知识 JavaScript 语言简介 JavaScript 注释 搭建 JavaScript 的运行环境 JavaScript 输出 第 1 种:弹出对话框模式 第 2 种:控制台模式 第 3 种:页面输出模式 编程要求 测试说明 任务描述 要了解一门编程语言,要从输出开始。 本关任务:采用相关知识中介绍的任意一种方法输出Hello, JavaScript! ”。 相关知识 JavaScript 语言简介 JavaScript 诞生于1995年。在那个时代用户提交一个表单需要获取服务器端的反馈,这个时间大概十几秒,如果能在客户 qa 端完成一些基本的验证绝对是很大的进步。当时如日中天的 Netscape 公司,决定着手开发一种客户端语言解决简单的表单验证。就职于 Netscape 公司的布兰登·艾奇开始着手计划将1995年2月发布的 LiveScript 同时在浏览器和服务器中使用。Netscape 与 Sun 公司成立了一个开发联盟。Sun 公司正是 Java 的拥有着,而此时,Netscape 为了搭上媒体热炒 Java 的顺风车,临时把 LiveScript 改名为 JavaScript,所以从本质上来说 JavaScript 和 Java 没什么关系。 1997年,以 JavaScript1.1 为蓝本的建议被提交给了欧洲计算机制造商协会(ECMA,European Computer Manufactures Association),该协会指定39号技术委员会负责将其进行标准化,TC39 经过数月的努力完成了 ECMA-262——定义了一种名为 ECMAScript 的新脚本语言的标准。 现在开发人员常说的 JavaScript 包含三个部分:ECMAScript、浏览器对象模型 (BOM) 和文档对象模型 (DOM)JavaScript 注释 JavaScript 的注释与 JAVA 几乎相同,单行注释以//开头,在其后添加注释。多行注释以/*开头,以*/结尾,在中间添加注释。 /**************函数名:getAbsolute******************/ /**************功能:求一个整数的绝对值**************/ /**************作者:Bruce*************************/ /**************时间:2018年2月1日*******************/ function getAbsolute(a) { if(a < 0) { a = -a;//取a的相反数 } return a; } 养成良好的注释习惯是一个优秀的开发人员的必备素质,注释写的好不好能衡量开发人员的编程水平,一般来说,一个源代码文件需要有一个总体的注释,每一个函数也需要像上面一样的注释,对于难理解的句子,需要单行注释。 搭建 JavaScript 的运行环境 JavaScript 运行环境的搭建很简单,下载并安装任意一种浏览器就可以。 以下是运行一个 JavaScript 源代码的全过程: 新建一个文本编辑器,打开后输入 JavaScript 源代码,关闭时以 .js 结尾; 在 HTML 中调用刚刚建立的 JS 文件; 以浏览器方式打开 HTML 文件。 用 Windows 系统自带的文本编辑器不是很方便,推荐使用 Sublime,这是一个免费的集成开发环境,具有代码自动补全等很多优点。 JavaScript 输出 JavaScript输出有三种方式,如下: 第 1 种:弹出对话框模式 通过 alert() 函数弹出对话框,这是最常用的方式。在 script 标签下,调用 window.alert() 函数,括号内填入输出的内容。将下面的代码以文本编辑器编辑后改为 .html 后缀,然后用浏览器打开后即可弹出对话框。 <!DOCTYPE html> <html> <body> <script> window.alert("Hello,World!"); </script> </body> </html> 以浏览器方式打开刚刚建立的 HTMl 文件,在浏览器上面可以看到,如图1所示: 图1 图 1 这里的标签是 HTML 中的内容,关于 JavaScript 和 HTML 的关系,将在下一关介绍。 第 2 种:控制台模式 通过 console 输出控制台,在 script 标签下,调用 console.log() 函数,括号内填入输出的内容,以浏览器打开下面的代码后,按 F12 键即可在浏览器控制台中实现输出。 <!DOCTYPE html> <html> <body> <script> console.log("Hello,World!"); </script> </body> </html> 在浏览器控制台可以看到如图2所示的内容: 图22 除此之外,还有 console.error()、console.warn() 等方式实现输出,分别表示输出错误,输出警告。 第 3 种:页面输出模式 通过 document.write() 实现输出页面。在 document.write() 函数的括号中填入输出的内容即可。例子如下: <!DOCTYPE html> <html> <body> <script> document.write("Hello,World!"); </script> </body> </html> 浏览器页面输出如图3所示: 图3 图 3 此外,还有其他几种比较少用的输出方式,这里不做介绍,可参考相关文档。 编程要求 本关的编程任务是补全右侧代码片段中 Begin-End 中的代码,具体要求如下: 采用相关知识板块介绍的任意一种方法,实现输出Hello,JavaScript! ”。 本关涉及的代码文件 Hello.html 的代码框架如下: <!DOCTYPE html> <html> <head> <!-- 请在此处编写代码 --> <!---------Begin---------> <script> </script> <!---------End---------> </head> <body> </body> </html> 测试说明 测试过程: 平台将读取用户补全后的 Hello.html; 分析读取的代码,看是否能够实现输出Hello,JavaScript! ”; 正确则输出 TRUE,错误则输出 FALSE。 以下是测试样例: 测试输入: 无测试输入 预期输出: TRUE
最新发布
10-23
评论
添加红包

请填写红包祝福语或标题

红包个数最小为10个

红包金额最低5元

当前余额3.43前往充值 >
需支付:10.00
成就一亿技术人!
领取后你会自动成为博主和红包主的粉丝 规则
hope_wisdom
发出的红包
实付
使用余额支付
点击重新获取
扫码支付
钱包余额 0

抵扣说明:

1.余额是钱包充值的虚拟货币,按照1:1的比例进行支付金额的抵扣。
2.余额无法直接购买下载,可以购买VIP、付费专栏及课程。

余额充值