文章目录

  • 编写第一个JS代码
  • 编译器的选择
  • 使用
  • 安装VScode
  • 安装 open in browser
  • 创建第一个项目
  • 编写第一个JS程序
  • 运行
  • 成功显示
  • alert()
  • document.write()
  • consolog.log()
  • 执行流程
  • 连接到外部文件
  • 总结


编写第一个JS代码

编译器的选择

小编在这里就延续python的啦，继续用VScode啦，可以去翻看其他的编译器，在这里就不一一列举啦。

使用

安装VScode

https://code.visualstudio.com/ 直接按照自己的版本选择就好。

安装 open in browser

javascript 创建项目 创建javascript文件怎么创建_前端

创建第一个项目

新建一个文件以.html结尾。

输入一个感叹号后，出现如下画面

javascript 创建项目 创建javascript文件怎么创建_javascript 创建项目_02


javascript 创建项目 创建javascript文件怎么创建_json_03


非常的人性！！！

编写第一个JS程序

javascript 创建项目 创建javascript文件怎么创建_前端_04


代码如下：

<!DOCTYPE html>
<html>
   <head>
       <meta charset="UTF-8">
       <title></title>
       <!-- JS代码需要编写到script标签中 -->
       <script type="text/javascript">//默认值也是text/javascript
           //通过此窗口发送指令
           alert("这是我的第一个JS代码");
       </script>
       <body>
       </body>
   </head>
</html>

运行

右键页面

javascript 创建项目 创建javascript文件怎么创建_前端_05

成功显示

javascript 创建项目 创建javascript文件怎么创建_json_06

一些快捷方法和注意事项

  1. 可以不关闭网页，直接修改代码内容，刷新显示，必须先保存，再运行
  2. ctrl+/ 一键注释
  3. 后面遇到了来加

alert()

作用：弹出警告弹出，并出现括号中的文字。

document.write()

向body中写入一段话

<!DOCTYPE html>
<html>
   <head>
       <meta charset="UTF-8">
       <title></title>
       <!-- JS代码需要编写到script标签中 -->
       <script type="text/javascript">//默认值也是text/javascript
        document.write("溏心蛋是个大帅比！")
       </script>
       <body>
       </body>
   </head>
</html>

效果：

javascript 创建项目 创建javascript文件怎么创建_前端_07

consolog.log()

向控制台输出一个内容
代码

<!DOCTYPE html>
<html>
   <head>
       <meta charset="UTF-8">
       <title></title>
       <!-- JS代码需要编写到script标签中 -->
       <script type="text/javascript">//默认值也是text/javascript
        document.write("溏心蛋是个大帅比！")
        console.log("溏心蛋到此一游！");
       </script>
       <body>
       </body>
   </head>
</html>

效果：

javascript 创建项目 创建javascript文件怎么创建_json_08

执行流程

自上而下
代码：

<!DOCTYPE html>
<html>
   <head>
       <meta charset="UTF-8">
       <title></title>
       <!-- JS代码需要编写到script标签中 -->
       <script type="text/javascript">//默认值也是text/javascript
        alert('这是我的第一个JS代码')
        document.write("溏心蛋是个大帅比！");
        console.log("溏心蛋到此一游！");
       </script>
       <body>
       </body>
   </head>
</html>

效果：

第一步：

javascript 创建项目 创建javascript文件怎么创建_前端_09


第二步（点击确定后）：

javascript 创建项目 创建javascript文件怎么创建_html_10

连接到外部文件

语法

<script type="text/javascript" src="文件名称"></script>

体验

javascript 创建项目 创建javascript文件怎么创建_javascript 创建项目_11


javascript 创建项目 创建javascript文件怎么创建_html_12


代码：

<!DOCTYPE html>
<html>
   <head>
       <meta charset="UTF-8">
       <title></title>
       <!-- JS代码需要编写到script标签中 -->
       <!-- 引入外部文件夹 -->
       <script type="text/javascript" src="wai.js"></script>
       <script type="text/javascript">//默认值也是text/javascript
        // alert('这是我的第一个JS代码')
        document.write("溏心蛋是个大帅比！");
        console.log("溏心蛋到此一游！");
       </script>
       <body>
       </body>
   </head>
</html>

运行结果

javascript 创建项目 创建javascript文件怎么创建_html_13


…自行体验

总结

基本用法
alert()
document.write()
console.log()
三个都是输出，且执行过程是从上到下，前两个可以直接呈现出来，第三个需要打开开发者工具才能显示出来。
连接到外部文件