1.什么是JavaScript

1.JavaScript 是什么？

1.是一种运行在客户端（浏览器）的编程语言，实现人机交互效果。

2.作用

1.网页特效 (监听用户的一些行为让网页作出对应的反馈)

2.表单验证 (针对表单数据的合法性进行判断)

3.数据交互 (获取后台的数据, 渲染到前端)

4.服务端编程 (node.js)

3. JavaScript的组成有什么？

1.ECMAScript:

1.规定了js基础语法核心知识。

2.比如：变量、分支语句、循环语句、对象等等

2.Web APIs :

1.DOM 操作文档，比如对页面元素进行移动、大小、添加删除等操作

2.BOM 操作浏览器，比如页面弹窗，检测窗口宽度、存储数据到浏览器等等

3.权威网站 :MDN(developer.mozilla.org/zh-CN/ )

2.JavaScript 基本概念

javaScript组成：ecmascript（基础语法）：规定了js基础语法核心知识如：变量、分支、循环语句、对象等

web apls：DOM 操作文档，控制页面机进行移动、大小、添加删除等；

BOM 操作浏览器，页面弹窗、检测窗口宽度，存储数据到浏览器；

DOM属于BOM

JavaScript：运行在客户端浏览器的编程语言，实现人机交互的效果

javascript：网页特效，用户点击网页时网页所作出的反应；表单验证，针对表单的数据合法性进行判断；数据交互，获取后台数据，渲染到前端页面；服务端编程（node.js）

运行环境：

谷歌浏览器运行环境： DOM、BOM、xhr、内置对象 -> 待执行的js代码 -> v8引擎

noode.js运行环境： fs、path、其他、api、内置对象 -> 待执行的js代码 -> v8引擎

1648035716078

3.JavaScript 书写位置

JavaScript三种添加方式：内部、内联、外部

1.内部:

1.直接写在html文件里，用script标签包

2.script标签写在上面

!<!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>
    <style>
        *{
            margin: 0;
            padding: 0;
            box-sizing: border-box;
        }
    </style>
</head>
<body>
    



    <!-- 1.内部  javascript
        直接写在html文件里面    用scripl 标签包住
        规范：script 标签 写在 </body> 上面
        拓展：alert（'你好,js'） 页面弹出警告对话框
     -->
     <script>
        //  alert("你真好你真棒你潮吧,js")
         alert('你好 js 我呸');
     </script>
</body>
</html>

2.外部

1.代码写在以.js结尾的文件里

2.通过script标签，引入到html页面中。

<!DOCTYPE html>
<html lang="en">
  <head>
    <meta charset="UTF-8" />
    <meta
      name="viewport"
      content="width=device-width, initial-scale=1.0,maximum-scale=1,minimum-scale=1,user-scalable=no"
    />
    <title>03-外部js.html</title>
    <style>
      * {
        margin: 0;
        padding: 0;
        box-sizing: border-box;
      }
    </style>
  </head>
  <body>


    <script src="./day07/js/03.js"> </script>
  </body>
</html>

3.内联：

1.代码写在标签内部

2.注意：此处作为了解即可，但是后面vue框架会用这种模式


<!DOCTYPE html>
<html lang="en">
  <head>
    <meta charset="UTF-8" />
    <meta
      name="viewport"
      content="width=device-width, initial-scale=1.0,maximum-scale=1,minimum-scale=1,user-scalable=no"
    />
    <title>04-内联js.html</title>
    <style>
      * {
        margin: 0;
        padding: 0;
        box-sizing: border-box;
      }
    </style>
  </head>
  <body>
    <!-- 不常用  编写代码的体验不好，很容易写错，  了解一下即可 -->
    <button onclick="alert('过万啦')">点击我 我就月薪过万</button>
    <button onclick='alert("也过万啦")'>点击我 我就月薪过万</button>
    <div onclick='alert("也过万啦")'>我来啦</div>
  </body>
</html>

4.JavaScript的注释

1.单行注释

1.符号：//

2.作用：//右边这一行的代码会被忽略

3.快捷键：ctrl + /

2.多行注释

1.符号：/* */

2.作用：在/*和 */ 之间的所有内容都会被忽略

3.快捷键：shift + alt + A

<!DOCTYPE html>
<html lang="en">
  <head>
    <meta charset="UTF-8" />
    <meta
      name="viewport"
      content="width=device-width, initial-scale=1.0,maximum-scale=1,minimum-scale=1,user-scalable=no"
    />
    <title>05-js注释.html</title>
    <style>
      * {
        margin: 0;
        padding: 0;
        box-sizing: border-box;
      }
    </style>
  </head>
  <body>
    <script>
      // ctrl  + /      " // "

      // shift+alt+a     "  /**/ "

      // alert("呵呵你好")
    </script>
  </body>
</html>

5.JavaScript 结束符 : ;

1.代表语句结束

2.英文分号 ;

3.可写可不写（现在不写结束符的程序员越来越多）

4.换行符（回车）会被识别成结束符 ,所以一个完整的语句，不要手动换行

5.因此在实际开发中有许多人主张书写 JavaScript 代码时省略结束符

6.但为了风格统一，要写结束符就每句都写，要么每句都不写（按照团队要求.）

<!DOCTYPE html>
<html lang="en">
  <head>
    <meta charset="UTF-8" />
    <meta
      name="viewport"
      content="width=device-width, initial-scale=1.0,maximum-scale=1,minimum-scale=1,user-scalable=no"
    />
    <title>06-结束符.html</title>
    <style>
      * {
        margin: 0;
        padding: 0;
        box-sizing: border-box;
      }
    </style>
  </head>
  <body>
    <script>

      /* 
      现代好的 前端项目的开发流程
      1 对代码统一做好公共的设置 
        这个设置 会强制帮我们来格式化 这个团队的代码 
        比如 ：  alert( "你好"    ) => 自动被格式化 alert("你好")  
        比如 ：  alert("你好")  =>  alert("你好");
        比如 ：  alert("你好");  =>  alert("你好")

      2 综上所述 在企业开发中 有工具强制帮我们做统一的格式化  你加不加都无所谓 不影响 

      3 吃饭 左手拿筷子还是右手 

      4 你开心就好 

      5 我自己 写后端代码 后端 要加上分号！ 

      tab
       */

    </script>
  </body>
</html>

01-JavaScript的基本介绍