美文网首页Web前端编程深究JavaScript
二十分钟学会Javascript初级知识

二十分钟学会Javascript初级知识

作者: 一只老辣鸡 | 来源:发表于2016-06-03 11:05 被阅读893次
    二十分钟学会Javascript初级语法,图片来自网络
    Javascript基本用法
    1. Javascript代码写在<script>标签内

      <script>
      //Javascript代码写在这里
      </script>
      
    2. Javascript代码可以写在body标签内

      <body>
          <script>
          //Javascript代码写在这里
          </script>
      </body>
      
    3. Javascript代码可以写在<head>标签内

      <head>
          <script>
          //Javascript代码写在这里
          </script>
      </head>
      
    4. Javascript代码可以写在外部的独立js文件内

      <head>
          <script src="xxx.js"></script>
      </head>
      

    <body><head>标签内的Javascript代码是不同的,在<head>标签内的JS代码在页面加载的时候就会运行,而在<body>内的JS代码只有在需要的时候才会执行。一般会把多个页面都是用到的JS代码放到独立的js文件中。

    Javascript显示数据的方法
    1. 使用弹出框window.alert()或者alert()方法。其中,window是Javascript的一个内置对象,可省略不写。
    2. 使用document.write()方法直接写入html源码。
    3. 使用console.log()方法将调试信息打印到浏览器控制台。
    Javascript字面量
    //数字字面量(Number)
    var a = 3.14;           //浮点数
    var b = 1;              //整数
    var c = 13e5;           //科学计数法
    
    //字符串字面量(String)
    var d = 'string';       //字符串
    var e = "string";       //字符串
    
    //数组和对象字面量(Array & Object)
    var f = [1,2,3];        //数组
    var g = {a:"a",b:"b"}   //对象
    
    //函数字面量(Function)
    var h = function(){};   //函数
    
    Javascript变量
    <script>
       var a = 1;          //这是一个全局变量
       b = 2;              //这是一个全局变量
    
       function f(){
          var c = 3;       //这是一个局部变量
          d = 4;           //这是一个全局变量
       }
    </script>
    

    注意,没有使用var关键字标识的字段都是全局变量,使用了var关键字标识的变量如果在方法内声明,则为局部变量,否则也为全局变量,主要观测其所在的作用域。

    Javascript语句标识符

    在Javascript中,也有类似于Java和C#等高级面向对象语法的语句标识符,主要有break/try...catch/continue/do...while/for/for..in/function/if...else/return/switch/throw/while/var

    Javascript代码折行

    使用\\可以对JS代码进行折行处理:

    document.write('hello \
    world');
    
    Javascript注释语法
    1. 使用//进行单行注释
    2. 使用/* ... */进行多行注释
    Javascript数据类型
    1. 字符串(String)类型
    2. 数字(Number)类型
    3. 布尔(Boolean)类型
    4. 数组(Array)类型
    5. 对象(Object)类型
    6. 空(Null)类型
    7. 未定义(Undefined)类型
    Javascript对象
    var obj = {         //创建对象
        a:"a",
        b:"b",
        c:2,
        method:function(){}
    }
    
    var d = obj.a;          //访问对象属性
    var e = obj.b;
    var f = obj.method;     //访问对象方法
    
    Javascript函数
    function a(){   //无返回值函数
        //...
    }
    
    function b(){   //有返回值的函数
        return 1;
    }
    
    var c = b();    //调用函数
    
    Javascript作用域
    1. 在Javascript中,对象和函数也是一种变量。
    2. 作用域是可访问变量、对象和函数的集合。
    3. 函数作用域:作用域在函数内修改。
    4. 变量在函数内声明,则其作用域为局部作用域。
    5. 全局变量有全局作用域,网页中所有的脚本和网页都可以使用。
    Javascript事件
    <some-HTML-element some-event='some JavaScript'>
    <some-HTML-element some-event="some JavaScript">
    

    常用的HTML事件有:onchange/onclick/onmouseover/onmouseout/onkeydown/onload

    绝对等于和绝对不等于
    1. ===表示绝对等于(值和类型都相等)
    2. !==表示绝对不等于(值或类型不相等)
    遍历对象的属性
    var person = {name:"Anderson",age:25}
    for(x in person){
       txt = txt + person[x];
    }
    
    Javascript typeof操作符
        typeof "Anderson"    //返回string
        typeof 3.14          //返回number
        typeof false         //返回boolean
        typeof [1,2,3,4]     //返回object
    
        var a;
        typeof a             //返回undefined
    
        a = null;
        typeof a             //返回null
    
        typeof undefined             // undefined
        typeof null                  // object
    
    Javascript 构造器属性
        "John".constructor                 // 返回函数 String()  { [native code] }
        (3.14).constructor                 // 返回函数 Number()  { [native code] }
        false.constructor                  // 返回函数 Boolean() { [native code] }
        [1,2,3,4].constructor              // 返回函数 Array()   { [native code] }
        {name:'John', age:34}.constructor  // 返回函数 Object()  { [native code] }
        new Date().constructor             // 返回函数 Date()    { [native code] }
        function () {}.constructor         // 返回函数 Function(){ [native code] }
    
        function isArray(myArray) {
            return myArray.constructor.toString().indexOf("Array") > -1;
    
        function isDate(myDate) {
            return myDate.constructor.toString().indexOf("Date") > -1;
        }
    }
    
    JavaScript 变量提升
    1. JavaScript 中,函数及变量的声明都将被提升到函数的最顶部。变量可以在使用后声明,也就是变量可以先使用再声明
    2. JavaScript 初始化不会提升
    函数提升(Hoisting)
    1. 提升(Hoisting)是 JavaScript 默认将当前作用域提升到前面去的的行为。
    2. 提升(Hoisting)应用在变量的声明与函数的声明。
    JavaScript 严格模式(use strict)
    1. "use strict" 指令在 JavaScript 1.8.5 (ECMAScript5) 中新增
    2. 它不是一条语句,但是是一个字面量表达式,在 JavaScript 旧版本中会被忽略
    3. "use strict" 的目的是指定代码在严格条件下执行。严格模式下你不能使用未声明的变量。
    href="#"与href="javascript:void(0)"的区别
    1. # 包含了一个位置信息,默认的锚是#top 也就是网页的上端。
    2. javascript:void(0), 仅仅表示一个死链接。
    3. 在页面很长的时候会使用 # 来定位页面的具体位置,格式为:# + id
    4. 如果你要定义一个死链接请使用 javascript:void(0)
    附录 文章更新日志
    2016-06-03 初稿
    2016-06-06 修正文章中的错别字
    2016-06-22 修正文章中的一处笔误
    

    相关文章

      网友评论

      • AndersonShao:太初级了,期待高阶内容
      • 你是我无法修复的bug:你好,请问你在简书和博客和csdn上都是使用的同一个md文档么?
        一只老辣鸡: @你是我无法修复的bug 语法是一样的,但是样式就不同了
      • wwz_hello:适合入门
        一只老辣鸡:@wwz_hello 是的
      • 归仓:Javascript注释语法纠正:
        js单行代码不是用单杆'/'来注释,而是双杆'//'来注释。(作者笔误吧^_^)
        一只老辣鸡:@微不足道_ 丫!写错了😣,多谢指出!
      • 爱鸽子的玉米君:哈哈今天过来学习,发现
        <script>
        //Javascript代码写在这里
        </scritp>
        闭合标签这里的script写错了哈,下面还有两处地方也是。

      本文标题:二十分钟学会Javascript初级知识

      本文链接:https://www.haomeiwen.com/subject/fowkdttx.html