• Day1-JS-前期知识


    一、基本用法

    HTML 中的脚本必须位于 <script> 与 </script> 标签之间。

    脚本可被放置在 HTML 页面的 <body> 和 <head> 部分中。    

    可以放在head、body也可以是外部的javascript

     二、JS的输出

         1、JavaScript 可以通过不同的方式来输出数据:

    • 使用 window.alert() 弹出警告框。
    • 使用 document.write() 方法将内容写到 HTML 文档中。
    • 使用 innerHTML 写入到 HTML 元素。
    • 使用 console.log() 写入到浏览器的控制台。

      2、如需从 JavaScript 访问某个 HTML 元素,您可以使用 document.getElementById(id) 方法。

         请使用 "id" 属性来标识 HTML 元素,并 innerHTML 来获取或插入元素内容:

    小知识:

        1、console.log主要是方便调试js代码时候用的

    三、JS的语法

    小知识:

        1、一般固定值称为字面量

        2、字符串(String)字面量 可以使用单引号或双引号:

        3、关键字:

          4、JavaScript 中,常见的是驼峰法的命名规则,如 lastName (而不是lastname)      

          驼峰命名:

        •      (1)全部小写:单词与单词间全部用下划线分割
        •      (2)大小写混合:每个单词的第一个字母大写,例:gongZuoNianXian

           

                               三种变量命名规则:

                                     var firstName='king';//小驼峰

                                     var FirstName='queen';//大驼峰

                                      var first_name='maizi';//下划线法

          5、一半都是用typeOf来判断一个数据类型的,但是 typeof 不能用来判断是 Array 还是Object,即对象和数组的判断要通过其他的方法

              比如: Array.isArray 方法 或者是    使用 instanceof 操作符

          6、JS语句标识符

          

          7、如果要对代码进行换行的话,要用 反斜杠 ""进行换行,比如”

    document.write("你好 
    世界!");

    但是不可以是这样:

    document.write 
    ("你好世界!");

          8、JavaScript 是脚本语言。浏览器会在读取代码时,逐行地执行脚本代码。而对于传统编程来说,会在执行前对所有代码进行编译。

           9、一个好的习惯:

     ----就是这个浏览器肯定是支持 <!-- -->的但是不一定支持jx脚本的,就是在-->的前面加上了“ //”也就是说如果这个浏览器是支持JS的话

      后面的--》是会被注释掉的,这个代码也就会被打印出来,反之是不会被打印出来的

            10、一个好的编程习惯是,在代码开始处,统一对需要的变量进行声明

             11、一个注意事项:像这样重新声明JS变量的话,变量carname的值依然是“Volvo”的

    var carname="Volvo";
    var carname;

            12、let和var的区别,(let主要是用在避免变量名会冲突的时候)--下面的例子就是,let主要是在声明的块中可以用,而var是范围更大

            它的作用域是在整个封闭的函数中的

    function varTest() {
        var x = 1;
        if (true) {
            var x = 2;       // 同样的变量!
            console.log(x);  // 2
        }
        console.log(x);  // 2
    }
    
    function letTest() {
        let x = 1;
        if (true) {
            let x = 2;       // 不同的变量    
            console.log(x);  // 2  
        }
        console.log(x);  // 1
    }  

               13、如果是const关键字的就是一个常量了,不能重新赋值的

                

             14、函数重名问题:

    JavaScript 允许重复定义函数

    JavaScript 没有重载这个概念,它仅依据函数名来区分函数。

    后定义的同名函数覆盖之前的,与参数无关。

    function test() {
        console.log("test");
    }
    test();     //输出 "test arg0 + undefined"
    
    function test(arg1) {
        console.log("test arg" + arguments.length + " + " + arg1);
    }
    test(1,2);  //输出 "test arg2 + 1"

            如果是变量和函数重名的话,变量会生效的

    var a = 100;
    function a() {
        return "function";
    }
    console.log(a);     //输出 100
    console.log(a());   
    /*
    报错
    Uncaught TypeError: a is not a function
        (anonymous function) @test.html:9
    */

    JS 中有两种函数,一种是普通函数,一种是函数对象。下面的这种就是“函数对象”,它实际上是声明一个匿名函数,然后将该函数的 init 方法赋值给该变量。

    var a = 100;
    var a = function() {
        return "function";
    }
    console.log(a);
    /* 
    输出
    function() {
        return "function";
    }
    */
    console.log(a());   //输出 "function"

    15、数据类型

    值类型(基本类型):字符串(String)、数字(Number)、布尔(Boolean)、对空(Null)、未定义(Undefined)、Symbol。

    引用数据类型:对象(Object)、数组(Array)、函数(Function)。

    注:Symbol 是 ES6 引入了一种新的原始数据类型,表示独一无二的值。

    ①数组的基本使用

    <!DOCTYPE html>
    <html lang="en">
    <head>
        <meta charset="UTF-8">
        <meta name="viewport" content="width=device-width, initial-scale=1.0">
        <title>Document</title>
    </head>
    <body>
        <script>
            var i;
            var cars = new Array();
            cars[0]="111";
            cars[1]="222";
            for(i=0;i<cars.length;i++)
            {
                document.write(cars[i]+"<br>");
            }
        </script>
    </body>
    </html>

    这里通过+"<br>"来引入换行符的

    ②对象的基本使用

    <!DOCTYPE html>
    <html lang="en">
    <head>
        <meta charset="UTF-8">
        <meta name="viewport" content="width=device-width, initial-scale=1.0">
        <title>Document</title>
    </head>
    <body>
        <script>
            var person={
                firstname:"c",
                lastname:"j",
                id:111
            };
            document.write(person.lastname+"<br>");
            document.write(person["lastname"]+"<br>");
        </script>
    </body>
    </html>

    对“对象的属性又两种寻址方式”:直接person.lastname 或者 person["lastname"]

    ③、Undefined 这个值表示变量不含有值。

    可以通过将变量的值设置为 null 来清空变量。

    ④、一般在对新的变量进行声明的话,都要用“new”来声明其类型

    var carname=new String;
    var x=      new Number;
    var y=      new Boolean;
    var cars=   new Array;
    var person= new Object;

    扩展:JavaScript 变量均为对象。当您声明一个变量时,就创建了一个新的对象。

  • 相关阅读:
    1124 vue路由配置初级实践&和npm run dev干嘛了
    1130 携程网焦点图+导航栏,flex布局实践
    1124 在vscode中快速创建vue模板
    122 携程网案例flex布局第三部分
    128 手撸轮播组件瞬时切换版本,布局部分
    1125 vscode自定义快捷键扩展选择单词等
    124 本地服务器搭建
    1128 defineProperty中getter和setter的用法
    2216 怎么快速打开powershell
    Visual Studio 2010的网站局域网发布功能(Publish)
  • 原文地址:https://www.cnblogs.com/SCAU-gogocj/p/13090609.html
Copyright © 2020-2023  润新知