JavaScript基本概念*1

在学习JavaScript之前,我们需要对以下知识点有所了解:

计算机常识

  • 计算机只能识别0和1
  • 计算机所能识别的指令都是由0和1组成的
  • 计算机中存储和操作的数据都是0和1

计算机程序是什么?

  • 一组计算机能识别和执行的指令(机器语言)
  • 程序是为了告诉计算机"做某件事或解决某个问题"而用"计算机语言编写的命令序列(语句)"
  • 只要让计算机执行这个程序,计算机就会自动地、有条不紊地进行工作,计算机的一切操作都是由程序控制的,离开程序计算机将一事无成

什么是编程语言?

  • 编程语言是人和计算机交流的工具,工程师通过编程语言基于计算机去开发一款款软件
  • 编程语言就是一门语言,只不过语法比较特殊,我们得学习之后才能用这门语言来开发相应的东西
编程语言的分类

  • 编程语言主要有机器语言、汇编语言、高级语言。
  •  JavaScript就是一门高级语言

什么是JavaScript
  • JavaScript是一种脚本语言,其源代码在发往客户端运行之前不需经过编译,而是将文本格式的字符代码发送给浏览器由浏览器解释运行。
JavaScript组成

ECMAScript:JavaScript的语法标准DOM: JavaScript操作网页上的元素的APIBOM: JavaScript操作浏览器的部分功能的API

JavaScript的使用场景
  • 随着JavaScript这门语言的完善,我们可以用它来进行前端开发、后端开发和移动端开发。当然,学习这门语言最开始的突破口在于前端开发。我们一起看看在前端领域它能做什么吧!
    • 客户端数据计算
    • 客户端表单合法性验证
    • 浏览器对象的调用
    • 浏览器事件的触发
    • 网页特殊显示效果制作
    • ....

JavaScript书写格式

  • 和CSS书写格式一样, JavaScript也有三种书写格式, 分别是"行内式"、"内嵌式"、"外链式"
  • 和CSS书写格式一样, JavaScript三种书写格式中也推荐大家使用"外链式", 遵守结构、样式、行为分离

  • 行内式格式(不推荐)
<div onclick="alert('hello world');">我是div</div>

  • 内嵌式格式
</body>
... ...
<script type="text/javascript">
       alert("hello world");
</script>
</body>
  • 内嵌式注意点
    • 通常将js代码放在body的最后, 因为HTML是从上至下加载, 而js代码通常是给标签添加交互(操作元素), 所以需要先加载HTML, 否则如果执行js代码时HTML还未被加载, 那么js代码将无法添加交互(操作元素);
    • HTML页面中出现<script>标签后,就会让页面暂停等待脚本的解析和执行。无论当前脚本是内嵌式还是外链式,页面的下载和渲染都必须停下来等待脚本的执行完成才能继续, 所以如果把js代码写在head中, 那么js代码没有执行完毕之前后续网页无法查看
    • 如果不愿意把js代码放在body的最后, 也可以放在head标签中, 但是为了保证执行js代码时HTML一定已经被加载了, 那么需要添加一些额外代码.(不推荐)
<head>
    <script>
        window.onload = function () { // 必须添加这句
            alert("hello world");
        }
    </script>
</head>

  • 外链式格式
<script type="text/javascript" src="01-js书写格式.js"></script>
  • 外链式注意点
    • 外链式的script代码块中不能编写js代码, 即便写了也不会执行
<script type="text/javascript" src="01-js书写格式.js">
    alert("hello world"); // 不会被执行
</script>
  • 由于每次加载外链式的js文件都会发送一次请求, 这样非常消耗性能, 所以在企业开发中推荐将多个JS文件合成为一个JS文件,以提升网页的性能和加载速度


使用JavaScript在网页中输出一句话


  • 方式一

  在网页中弹出显示框,显示信息

  <script>
        alert("Hello,JavaScript!"); 
  </script>

  • 方式二
    在控制台输出消息,一般用来调试程序

       <script>
             console.log("Hello,JavaScript!"); 
             console.warn("警告输出!"); 
             console.error("错误输出!"); 
       </script>
    
  • 方式三
    在网页中弹出输入框,一般用于接收用户输入的信息

      <script>
            prompt("Hello,JavaScript!"); 
      </script>
    
  • 方式四
    在网页中弹出提示框,显示信息,该方法一般与if判断语句结合使用

     <script>
           comfirm("Hello,JavaScript!"); 
     </script>
    
  • 注意事项

    1. 编写Javascript注意语法规范,一行代码结束后必须在代码最后加上;
      如果不写分号,浏览器会自动添加,但是会消耗一些系统资源;
      此外,容易加错分号,所以在开发中分号必须要写。

    2. 在JavaScript中是严格区分大小写的

         comfirm("Hello,JavaScript!");   // 正确
         COMFIRM("Hello,JavaScript!");   // 错误 
      
    3. JavaScript中会忽略多个空格和换行

       console.log
       (
           "Hello,JavaScript!"
       );  
      

JavaScript中注释语法

  • 什么是注释?

    • 注释是就是注解、解释的意思; 在JavaScript中它可以用来解释某一段程序或者某一行代码是什么意思,方便开发者之间的交流;
    • 注释可以是任何文字,包括中文、英文和各种字符;
    • 在开发工具中注释一般是灰色或者绿色
  • 为什么要写注释?

    • 方便自己,方便他人(便于检查代码,排除错误)
  • 如何写注释?

    • 单行注释

         // 单行注释
         var name;
      

      使用范围:任何地方都可以写注释:函数外面、里面,每一条语句后面
      作用范围: 从第二个斜线到这一行末尾
      快捷键:Ctrl+/

    • 多行注释

         /*多行注释*/
         var name;
      

      使用范围:任何地方都可以写注释:函数外面、里面,每一条语句后面
      作用范围: 从第一个/到最近的一个/ 之间

  • 注释使用注意

    • 单行注释可以嵌套单行注释、多行注释
      // 南京
      // 南京 // 南京
      // /* 南京 */
    • 多行注释可以嵌套单行注释
      /*
      // author:bob
      // intro:It's very good
      */
    • 多行注释不能嵌套多行注释

猜你喜欢

转载自blog.csdn.net/FengyCoder/article/details/79401297