/*P5-简介-第一个应用程序*/
//首先打开一个目录，是工作空间文件夹
//点击"Open Folder"按钮,在打开的文件夹选择窗口，选择一个合适的文件夹作为程序文件的存放位置
//然后点击资源管理器侧边栏，点击小文件图标(带加号的文件图标)，新建一个文件，命名“index.html”
//同样操作新建另一个文件，命名为“index.js”
//然后在文件列表中，点击‘index.html’文件，会响应打开一个编辑窗口，标签名就是刚才点击的“index.html”文件
//在编辑窗口输入英文感叹号，并按tab键，自动补全必要的html代码，这个html模板代码就是我们今后课程中唯一需要的html代码
//VH：html代码结构中有<body></body>是一对标签。
//我们写JS代码，可以在body便签中间，定义一个script标签，方式是输入script紧接着按tab补全，自动写成<script></script>一对代码。
//咱们可以直接在script标签中间写代码，
//比如打印(console控制台窗口输出的意思)一下"Hello world"，打印咱们用console.log("hello world")
//双引号的意思，可以想象成我们在说话，所以，让浏览器说话，咱们也用双引号把文字括起来。
//然后我们在编辑窗口内右击，点击菜单中的“Open With Live Server”，这时live server插件就会把html文件运行在一个服务器(程序)里面，并通过浏览器访问html文件
//在自动打开的浏览器(一般是系统默认的浏览器打开)，在浏览器页面窗口中是空白，没有任何信息，因为我们没有写额外能显示的html代码
//我们可以在浏览器窗口空白处右击，选择inspect(审查元素)，打开开发者工具窗口，在console窗口，"hello world"已经打印出来。
//在console标签下面一行图标有个类似⑦的图标，点击可以情况控制台已打印的信息
//如果此时刷新浏览器页面，控制台中又会显示刚才的打印结果"heloo world"
//回到HTML编写窗口，我们一般不推荐这么写JS代码。这么写的代码，只会在这个HTML中生效。
//如果我想在另一个HTML网页中马上使用，不能够复用。（除非把JS代码原样复制过去）
//所以，我们把JS代码写在一个单独的文件里，然后在HTML文件里面引用它。
//我们把script标签对中间的代码删除，在第一个script标签里写src = "index.js"，就可以引用index.js文件中的JS代码,样式如下：
//<script src="./index.js">
//在左边资源管理器列表中打开index.js文件，在编辑窗口中输入
console.log("Hello World");
//保存文件，在浏览器的console窗口，就会打印出"Hello World"字符串.
//另外，还可以使用浏览器自带的组件来显示运行的结果，
//使用浏览器提供的函数alert(),功能是通过浏览器提供的提示框组件显示出我们给的值(需要展示的信息)
//我们写alert()，然后把需要展示的字符串信息写在()内，注意字符串需要用引号包裹
alert("Hello World");
//保存代码，浏览器就会弹出一个提示框，里面直接显示Hello World,没有引号。因为引号是告诉程序这是字符串的作用，不包含在字符串内。
//点击提示框内的"OK"按钮，就可以关闭提示框。
//好的，上面就是我们的第一个JS应用程序，后面我们会一点一点讲JS的基本语法。以下是index.html文件代码，峰华老师的教程中使用index.html和index.js来演示。同学在练习的时候，可以在index.html同级目录新建index.js文件，把笔记中每个.js文件内容复制到index.js中使用。
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<meta http-equiv="X-UA-Compatible" content="IE=edge">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<title>Document</title>
</head>
<body>
<script src="./index.js" type="module">
</script>
</body>
</html>
扫一扫 手机查看