JavaScript基本概念（第二周）

1_javascript的基本概念

Java和JavaScript的关系就好像老婆和老婆饼的关系，没有关系。

        非要说关系：都是编程语言。

       

        JavaScript是一门基于对象的编程（脚本）语言，主要用于开发交互式的网页。

        简称JS。

       

       

        一个完整的网页由三部分组成：

        A.  HTML   （网页的主体部分）

        B.  CSS     （美化的主体部分）

        C.  JavaScript （实现业务逻辑和页面控制）

        JS的三大组成：

        第一部分：核心语法  （JS代码）

        第二部分：DOM文档对象模型  （JS可以控制HTML元素进行相关的操作）

        第三部分：BOM 浏览器对象模型（JS可以控制浏览器元素进行相关的操作）

        浏览器元素：弹窗。浏览器的宽高，滚动条等等。

 

        JS的特点：

        1.  简单易用 （只需要用户安装浏览器即可使用，不需要像Java一样安装JDK编译工具）

        潜台词：无需编译即可运行。

       

        2.  跨平台    和上述一样。

       

        3.  支持面向对象

       

        4.  严格区分大小写

2_如何创建含有JS代码的HTML页面

在HTML代码中声明JS代码的三种方式

    1.行内式。忽略不计，

将JS代码放在HTML元素的内部，非常影响美观和可读性。

    2.嵌入式  （重点掌握）

嵌入式详解：

    1.将JS代码放在 “script标签内部即可”

    2.再将script标签放在body标签的最底部(推荐做法)

    3.外链式  （重点掌握）

    外链式详解：

    1.创建一个单独的js文件，一般将文件命名为  xxx.js

    2.在这个js文件直接写JS代码，无需再写script标签了

    3.在相对于的HTML代码中 引入这个外部JS，语法如下：

    只需要在script标签中通过src属性引入外部js的路径即可。

    注意事项：

如果这个标签式外链式的标签，标签内部不能再写js代码了

    如果JS的代码非常非常多，就推荐使用外链式，反之使用嵌入式。  行内式狗都不用。

3_异步加载的说明

由于HTML在浏览器的解析顺序式从上到下。

    那么如果将大量的JS代码放在body上方，就会导致

    浏览器再解析HTML网页的时候，将时间先花在加载JS代码上，

    就会导致网页一片空白。

    所以推荐将JS代码放在BODY下方。让浏览器先加载页面的内容，再加载JS代码。

    那么这样子也有弊端。如果说很多内容都和JS挂钩。

    所以就衍生出了异步加载JS代码：浏览器加载JS的同时不会影响HTML加载。

   

    为了减小JavaScript阻塞问题对页面造成的影响，

    可以使用HTML5为<script>标签新增的两个可选属性async和defer实现异步加载。

    所谓异步加载，指的是浏览器在执行加载JavaScript文件时不阻塞页面的加载和渲染。

   

    该知识点仅做了解。

    原因1：浏览器和计算机的执行速度已经非常快了，人的肉眼区分不了一丢丢时间差异带来的视觉效果。

    原因2：即使退一万步讲，真的影响到了，使用上述方法也无法得到有效解决。

    我们常见的处理方式：生成一个加载页面，提示用户“正在加载中…”。

4_js的最基本的代码

//第一行JS代码:仅仅用于弹窗.起到一个警告作用

            // alert("密码错误!!");

           

            //第二行JS代码:prompt("xxx").弹出一个让用户可以输入的询问窗口

            //注意,这个方法可以获取到用户输入的值.如何获取将在今天的第二节课进行讲解.

            // prompt("请输入你的账号");

           

           

            //第三行JS代码:confirm("xxx"),弹出一个询问框,用户可以选择确定或取消.

            //注意,这个方法可以获取到用户选择的值.如何获取将在今天的第二节课进行讲解.

            // confirm("你确定要退出系统吗？");

           

           

            //第四行代码:console.log("xxx")

            //主要用于将进行打印在控制台,方便程序员进行调试和BUG的检查.

            //通过F12可以开启浏览器的调试模式,点击console看到控制台信息.

            // console.log("进入控制台");

           

           

            //第五行代码:document.write("xxx")

            //用于将内容输出到html页面中

            document.write("你好啊");

5_js中的注释

这个<!-- 的是HTML注释

   

   

    //是JS的单行注释

   

    /*  

        这个是JS的多行注释

       

    */