• JavaScript 学习1.注释与 var 变量声明 上海


    前言

    JavaScript 是 Web 的编程语言。所有现代的 HTML 页面都使用 JavaScript。

    JavaScript 简介

    JavaScript 的学习分三个部分:
    1、核心(ECMAScript):JavaScript的核心,描述了语言的基本语法和数据类型。ECMAScript 是一套标准,定义了一种语言的标准与具体实现无关。
    2、文档对象模型DOM(Document Object Model): 用于操作页面的元素。一套操作页面元素的 API。DOM 可以把 HTML 看做是文档树,通过 DOM 提供的 API 可以对树上的节点进行操作。
    3、浏览器对象模型BOM(Browser Object Model): 操作的是浏览器。一套操作浏览器功能的 API。通过 BOM 可以操作浏览器窗口,比如:弹出框、控制浏览器跳转、获取分辨率等。

    调试

    JavaScript 是依赖于浏览器运行的,在浏览器中我们有以下常用的三种方式可以调试代码。

    方法一:直接写入 HTML 输出流

    <!DOCTYPE html>
    <html lang="en">
    <head>
        <meta charset="UTF-8">
        <title>Title</title>
    </head>
    <body>
    <script>
        document.write('hello world');
    </script>
    </body>
    </html>
    

    浏览器打开页面,会在页面上输出"hello world"

    或者用innerHTML 写入到元素文本内容

    <body>
    <p id="demo">demo</p>
    
    <script>
    document.getElementById("demo").innerHTML = "hello world";
    </script>
    </body>
    

    方法二:通过alter() 弹出框显示内容

    <head>
        <meta charset="UTF-8">
        <title>Title</title>
    </head>
    <body>
    <script>
        alert("hello world");
    </script>
    </body>
    </html>
    

    浏览器打开页面,在alert弹出框显示内容

    方法三:通过浏览器console调试,这种也是最常用的方式

    我们可以在<script> 里面添加 console.log() 输出内容

    <!DOCTYPE html>
    <html lang="en">
    <head>
        <meta charset="UTF-8">
        <title>Title</title>
    </head>
    <body>
    <script>
        console.log("hello world");
    </script>
    </body>
    </html>
    

    谷歌浏览器f12 后,查看console内容

    也可以直接在控制台输入调试代码

    清空日志可以点清空按钮,也可以快捷键ctr+L

    注释

    可以添加注释来对 JavaScript 进行解释,提高代码的可读性。

    单行注释以 // 开头

    <script>
    // 这段是在控制台调试    
    console.log('---------hello world--------');
    </script>
    

    也可以在行末 使用单行注释

    <script>
    console.log('---hello world---'); // 这段是在控制台调试  
    </script>
    

    多行注释以 /* 开始,以 */ 结尾

    <script>
    /*
      这是多行注释
      console.log() 是在控制台输出
     */
    console.log('---------hello world--------');
    </script>
    

    如果我们想暂时注掉某段代码,可以用多行注释, 以下代码段不会运行

    <script>
    /* 以下代码不会执行
    console.log('---------hello world--------');
    alert("hello ...");
     */
    </script>
    

    分号; 结束语句

    JavaScript 在每行代码结束应该加上分号。

    <script>
    var x = 1;    
    console.log("hello world");
    </script>
    

    虽然有时候不加分号也不会报错,习惯上分号; 结尾。

    声明 JavaScript 变量

    在 JavaScript 中我们使用 var 关键词来声明变量
    变量可以使用短名称(比如 x 和 y),也可以使用描述性更好的名称(比如 age, sum, totalvolume)。

    • 变量必须以字母开头
    • 变量也能以 $ 和 _ 符号开头(不过我们不推荐这么做)
    • 变量名称对大小写敏感(y 和 Y 是不同的变量)

    var 先声明后赋值

    当我们使用var 声明变量,没有赋值的时候,那么它是未定义(Undefined)

    <script>
    var user;         // 未赋值
    console.log(user);   // undefined
    </script>
    

    可以先声明后赋值, 赋值用等号=

    var user;         // 声明未赋值
    user = 'yoyo';   // 给变量赋值
    console.log(user);   // yoyo
    

    var 声明并赋值

    var 声明变量并赋值

    <script>
    var user= 'yoyo';
    console.log(user);  // 输出 yoyo
    </script>
    

    var user= 'yoyo';其实等价于

    var user;         // 声明未赋值
    user = 'yoyo';   // 给变量赋值
    

    var 一次声明多个变量

    一条语句声明多个变量, 多个变量中间用逗号隔开

    var user = 'yoyo', email = 'hello@qq.com', age = 20;
    console.log(user); // yoyo
    console.log(email); // hello@qq.com
    console.log(age); // 20
    

    当我们这样声明多个变量的时候, 只有变量c给赋值了

    var a, b, c = 'hello';
    console.log(a); // undefined
    console.log(b); // undefined
    console.log(c); // hello
    

    其实就是等价于

    var a;
    var b; 
    var c = 'hello';
    

    重新声明 JavaScript 变量

    如果重新声明 JavaScript 变量,该变量的值不会丢失, 只有当重新声明并赋值时,才会被替换掉。

    var user = "hello";
    console.log(user);   // hello
    var user;
    console.log(user)  // hello
    var user = "world";
    console.log(user);  // world
    

    未使用 var 定义的变量

    如果未使用var 直接定义的变量,它实际上是定义了全局对象 window 的一个属性,前面说了JavaScript 的学习分三个部分:核心(ECMAScript)、文档对象模型DOM、浏览器对象模型BOM。
    其中浏览器( Browser)对象模型 BOM 包含了以下对象

    • Window 对象
    • Navigator 对象
    • Screen 对象
    • History 对象
    • Location 对象

    未使用 var 直接定义的变量,就属于这里window对象的一个属性,看下面例子。

    <body>
    
    <script>
    // 如果不使用var 直接定义一个变量
    user = 'yoyo';
    console.log(user);
    </script>
    </body>
    

    未声明变量直接调用会报错

    调用一个未声明的变量会报错Uncaught ReferenceError: user is not defined

    <script>
    console.log(user);
    </script>
    

    于是在控制台 console 会看到报错

    有一种情况不会报错,那就是下面讲到的使用var 声明的变量会得到提升。

    JavaScript 声明提升

    JavaScript 中,变量及函数的声明都将被提升到函数的最顶部。JavaScript 中,变量可以在使用后声明,也就是变量可以先使用再声明。

    如以下我们先调用user变量,再用var声明,此时不会报错,因为函数声明和变量声明总是会被解释器悄悄地被"提升"到方法体的最顶部

    <script>
    // 先调用后声明
    console.log(user); // undefined
    var user;
    </script>
    

    解释器会先找到var user; 提升到方法体的最顶部,也就是等价于

    <script>
    var user;
    console.log(user);   // undefined
    </script>
    

    初始化的赋值不会提升

    var 声明的变量可以提升,但是它的赋值不会被提升。
    我们在先调用了变量,后面用var声明并赋值,此时赋值的内容不会提升,所以还是输出undefined

    <script>
    // 先调用后声明
    console.log(user);  // undefined
    var user = 'yoyo';  
    </script>
    

    其实就是等价于

    <script>
    var user;
    console.log(user); // undefined
    user = 'yoyo';   
    </script>
    

    只有 var 声明的变量可以提升,没用 var 声明的不会提升

    console.log(user); // undefined
    user = 'yoyo';
    

    这个会报错Uncaught ReferenceError: user is not defined

    在 2015 年以前,我们使用 var 关键字来声明 JavaScript 变量。
    在 2015 后的 JavaScript 版本 (ES6) 允许我们使用 const 关键字来定义一个常量,使用 let 关键字定义的限定范围内作用域的变量。

  • 相关阅读:
    第二节:依赖倒置原则和单一职责原则
    第一节:开闭原则和里氏替换原则
    leetcode 110 Balanced Binary Tree
    leetcode 102 Binary Tree Level Order Traversal
    leetcode 101 Symmetric Tree
    【产品】张小龙--微信背后的产品观
    【ML】目标检测及跟踪
    【设计】信息卡片设计
    【指标】游戏指标定义
    【GIT】windows本机搭建GIT服务器
  • 原文地址:https://www.cnblogs.com/yoyoketang/p/16266266.html
Copyright © 2020-2023  润新知