课程主题 认识 JavaScript-网页客户端技术 课程-1728974160578.pptx

网页客户端技术课程现代殡葬技术与管理专业群教学资源库主讲人：严志课程主题：认识JavaScript

什么是JavaScript01第一个JavaScript程序02JavaScript输出03实例04一认识JavaScript

一般的编程语言都存在输出和显示数据的语句或者函数，但是JavaScript没有任何打印或者输出的函数，JavaScript通过以下四种不同的方式来输出数据：使用window.alert()输出警告框；使用document.write()方法将内容写到HTML文档中；使用innerHTML写入到HTML元素；使用console.log()写入到浏览器的控制台。JavaScript的输出一认识JavaScriptJavaScript输出03

（01）使用window.alert()输出警告框在JavaScript中为了方便信息输出，JavaScript提供了具有独立的对话框信息输出alert()方法。alert()方法是window对象的一个方法，因此在使用时，不需要写window窗口对象名，而是直接使用就行了。它主要用途用在输出时产生有关警告提示信息或提示用户，一旦用户按“确定”钮后，方可继续执行其他脚本程序。一认识JavaScriptJavaScript输出03

一认识JavaScriptJavaScript输出03（01）使用window.alert()输出警告框

一认识JavaScriptJavaScript输出03上述代码可能出现另外一种情况，在当前的HTML文档已经加载完成之后，再执行document.write方法，则整个HTML页面之前的内容将被覆盖重，如图代码所示：（01）使用window.alert()输出警告框

（02）使用innerHTML写入到HTML元素代码说明：左边代码中的document.getElementById(id)方法用来从JavaScript中访问某个HTML元素，其中id属性用来标识需要访问的HTML元素，并innerHTML来获取或插入元素内容，所以h1id=demo就是用于在HTML文档中的标识一个HTM元素的一个唯一id值，用于在JavaScript中找到需要操作的HMTL元素。一认识JavaScriptJavaScript输出03

（03）使用console.log()写入到浏览器的控制台代码说明：此输出数据的方式无法直接通过访问该HTML文档看到数据的输出，需要浏览器支持调试，才可以使用console.log()方法在浏览器中显示JavaScript值。步骤：浏览器访问该HTML文档，然后在浏览器中按下F12键来启用调试模式，在调试窗口中点击“Console”菜单，方可看到数据的输出。一认识JavaScriptJavaScript输出03

（03）使用console.log()写入到浏览器的控制台例3-1使用JavaScript编程实现单击按钮改变段落内容要求如下：初始界面如图1-1所示；单击页面中的“点击这里”按钮后，显示如图1-2所示的页面。图1-2段落内容改变后页面图1-1初始页面一认识JavaScript实例04

（03）使用console.log()写入到浏览器的控制台操作提示：在vscode中，编写上述HTML代码，保存为example1_1.html，然后在浏览器中浏览该网页，如图1-1所示，执行单击按钮之后，效果如图1-2所示；掌握行内JavaScript脚本的编写方法。一认识JavaScript实例04

操作提示：在vscode中，编写上述HTML代码，保存为example1_2.html，然后在浏览器中浏览该网页，如图1-1所示，执行单击按钮之后，效果如图1-2所示；掌握内部JavaScript脚本的编写方法。实例04一认识JavaScript

方法三：JavaScript脚本代码：functionchangeContent(){document.getElementById(demo).innerHTML=单击按钮改变了段落的内容;}HTML代码一认识JavaScript实例04

本节知识点了解JavaScript的发展；script与/script之间编写JavaScript脚本；scriptsrc=”***.js”与/script之间用于引用外部JavaScript文件***.js；行内JavaScript脚本的使用；JavaScript的输出。实例04一认识JavaScript

感谢聆听，批评指导