美文网首页
Javascript学习笔记

Javascript学习笔记

作者: 赫赫骑大马 | 来源:发表于2018-08-28 12:59 被阅读0次

写了好几年代码之后发现积累跟沉淀的东西太少了,不能再犯懒了!!

1.ECMASCRIPT&DOM&BOM -- javascript的三大组成部分

ECMASCRIPT: ECMA(European Computer Manufacturers Association 欧洲计算机制造商协会)。
ECMASCRIPTS是ECMA定制的标准化脚本语言,ECMA-262标准。javascript是标准化的实现。
2015年6月17日,ECMAScript 6发布正式版本,即ECMAScript 2015

DOM:文档对象模型(document object model) 针对 XML 但经过扩展用于HTML的应用程序编程接口。
DOM把整个网页页面映射成为一个多层节点结构,HTML,XML页面中每个组成部分都是某类型的节点。

BOM:浏览器对象模型(browser object model) 针对BOM可以让开发者控制浏览器显示页面以外的部分。
BOM只处理浏览器窗口跟框架。

2.在HTML中使用javascript

使用<script></script>元素来引入javascript。
<script>中的6种属性:
async:可选。表示应该立即下载脚本,但是不应妨碍页面中的其他操作。只对外部脚本有效。

    <html>
<head>
    <meta charset="UTF-8"/>
    <title>aaa</title>
</head>
<body>

</body>

<script type="text/javascript" src="test.js" async="async"></script>
<script type="text/javascript" src="test2.js" async="async"></script>
    </html>
    async属性不能保证脚本加载的顺序,以上两个js脚本程序无法确定哪个会先加载,因此,需要确保脚本之间没有互相依              赖。

    charset:可选。表示通过src制定代码的字符集。基本没人使用。
    defer:可选。表示脚本可以延迟到整个页面加载完成之后再执行。只对外部脚本有效。
    language:已放弃。
    src:可选。表示包含要执行代码的外部文件。如果加载为外部文件,则必须。可包含跨域外部文件。
    type:可选。看成是language的替代属性。并不是必须,大多数是 text/javascript

javascript默认从页面顶端开始向下加载。

<script></script>标签内不能出现</script>

最优加载方式:1.将所有<script>标签放置在页面的底部,紧靠</body> 的上方。可以保证页面在脚本运行之前完成解析。
2.将脚本成组打包,页面的<script>标签越少,页面的加载速度越快,响应也更迅速。

3.语法部分

    所有的变量,函数名,操作符,都区分大小写。
    标识符:只变量,函数,属性的名字,或者函数的参数。可以是一个或者多个字符。
    标识符规则:第一个字符必须是 字母,下划线(_),美元符($)。其他字符可以是字母,下划线,美元符,或者数字。
    按照惯例,采用驼峰大小写格式,firstSecond/myCar/doSomeThingImportant
    语句:采用分号结尾  var sum = a + b;
    关键字&保留字 略。

    变量:松散类型,可以用来保存任何数据。使用 var 关键字来定义变量。 var message = 1;
    var message;类似这种没有经过初始化的变量,会保存一个特殊的值--undefined。
    注意:使用 var 定义的变量,将成为定义该变量作用域中的局部变量。也就是说,如果在函数中使用var 来定义的变量,在函数执行之后,会被销毁。
    function test(){
        var message = 'hello world';
    }
    test();
    alert(message);//会报错

    省略 var 操作符 可以定义全局变量
    function test(){
        message = 'hello world';
    }
    test();
    alert(message);//有效   不推荐

     使用一条语句定义多个变量
    var message = 'hello',
          message2 = 'world',
          message3 = '哈哈哈';

    数据类型: 共有五种数据类型, Undefined,Null,Boolean,Number,String。还有一种复杂数据类型 Object
    Object本质上是一组无序的名值对组成。
    typeof 操作符 来检测变量类型,是操作符不是函数,所以后面的括号不是必须的。
    typeof message 等同于 typeof(message)
    返回字符串:“undefined” -- 未定义。
                      “boolean” -- 布尔值。
                      “string” --   字符串。
                      “number” -- 数值。
                      “object” -- 对象或者null。
                      “function” -- 函数。

    特例: alert(typeof null); 返回 object,因为null被认为是一个空的对象引用。

    Undefined类型:只有一个值,undefined。var 变量 但是并没有赋值,则是 undefined。
    undefined 与 未定义变量不同。
    例子:var a = 'HELLO';
             //var b = 'nihao';
              alert(a); // undefined
              alert(b); //报错
      对未初始化的变量进行 typeof 会返回 undefined,对未定义的变量进行 typeof 同样会返回 undefined。
              var a = 'HELLO';
             //var b = 'nihao';
              alert(typeof a); // undefined
              alert(typeof b); //undefined

     Null类型:第二个只有一个值的类型,null。 null值表示一个空对象指针。因为 进行 typeof 操作会 返回 object。
     如果定义的变量准备在将来使用,最好将初始化的值设置为null。这样,只要检查 null值 就可以知道相应的变量是否已经报错了一个对象的引用,
    var car = null;
    if(car != null)
    {
          //do some thing...
    }

    实际上,undefined 值 是派生自 null 值的,所以,他们的相等性测试会返回 true。
    alert(undefined == null);//true

    Boolean类型:只有两个字面值 true false。这两个值与数字值不是一回事。两个字面值区分大小写,True False 都不是Boolean类型,只是标识符。可以通过Boolean(aaa)来转换一个值为Boolean类型。
    数据类型转换:    Boolean   true 为 true  false 为 false。
                             String  任何非空字符串 为 true  ""空字符串 为 false。
                             Number  任何非0数字值包括无穷大  为 true  0和NaN 为 false。
                             Object  任何对象 为 true  null 为false。
                             Undefined  n/a 为 true  undefined 为 false
    例:var aa = 'aaaaa';
          if(aa)
           {
              alert(' true');
           }
    Number类型:是数字值对应的引用类型。要创建Number对象,可以调用Number构造函数时向其中传递相对应的值。
    例:var numberObject = new Number(10);
    与Boolean类型一样,Number类型也重写了valueOf() toLocaleString() toString()方法。 重写后,valueOf()返回对象表示的基本类型的数值,另外两个方法返回字符串形式的数值。还可以为 toSting()方法传递一个表示基数的参数,告诉他表示几进制数值的字符串形式。
    例:var num = 10;
    alert(num.toString()) //10
    alert(num.toString(2))//二进制 1010
    
    除了继承的方法外,Number类型还提供了一些用于将数值格式化为字符串的方法。
    例:var num = 10;  alert(num.toFixed(2))// “10.00”   表示显示几位小数,用0填补空位
    如果数值本身包含的小数位数比指定的多,接近指定的最大小数位的值会舍入
    例:var num = 10.005;alert(num.toFixed(2)) // 10.01

    toPrecision()返回固定大小的格式,也可能返回指数格式。
    例:var num = 99;
          alert(num.toPrecision(1))//"1e+2"
          alert(num.toPrecision(2)) //"99"
          alert(num.toPrecision(3)) // "99.0"

     与Boolean类型 类似,Number对象也以后台方式为数值提供重要功能。
     不建议直接实例化Number类型,原因与显示创建Boolean对象一样,具体来讲,使用 typeof 和 instanceof 操作符测试基本类型数值与引用类型数值时,得到的结果不同。
     例:var numberObject = new Number(10);
           var numberValue  = 10;
          alert(typeof numberObject) // "object"
          alert(typeof numberValue) // "number"
          alert(numberObject instanceof Number)//true
          alert(numberValue instanceof Number) //false

        String类型:字符串的对象包装类型,使用String构造函数来创建
        例:var stringValue = new String("hello world");
        String对象的方法,也可以在所有基本的字符串值中访问到 valueOf() toLocaleString()toSting()都返回对象表示的基本上字符串值。
        String类型的每个实例,都有一个length属性,表示字符串中包含多少个字符。
        例:var stringValue = new String("hello world");
              alert(stringValue.length)//11  空格也算字符
         即使字符串中包含双字节字符,每个字符也仍然算一个字符。
          一·字符方法:用于访问字符串中特定字符的方法:charAt()  charCodeAt() 这两个方法都基于一个参数,即基于 0 字符的位置.
          例:var stringValue = ‘hello world’;
                alert(stringValue.charAt(1))// "e" 
                alert(stringValue.charCodeAt(1))// 101
                alert(stringValue[1])// "e"   IE7 或者更早版本返回 undefined
           二·字符串操作方法: concat() 用于将一个或多个字符串拼接起来,返回拼接得到的新字符串。
           例:var string1 = "hello";
                 var res = string1.concat("world");
                 alert(res);//"helloworld"
            concat()方法拼接字符串,原字符串值不变,可以传任意多个参数进行拼接。
            大多数情况下 用 "+",简易。
            slice() substr() substring() 这三个方法都返回被操作字符串的一个子字符串,而且也都接受一个或者两个参数。第一个参数指定 子字符串的开始位置,第二个参数指定子字符串的结束位置。 其中 substr()的第二个参数指定返回的字符串个数。如果没有给这些方法传递第二个参数,则将字符串的长度作为结束位置。
              例: var stringValue = 'hello world';
                   alert(stringValue.slice(3)); // 'lo world'
                   alert(stringValue.substr(3)); // 'lo world'
                   alert(stringValue.substring(3)); // 'lo world'

                   alert(stringValue.slice(3, 7)); // 'lo w'
                   alert(stringValue.substr(3, 7)); // 'lo worl' 
                   alert(stringValue.substring(3, 7)); // 'lo w' 
              如果参数是负值:
              例:var stringValue = 'hello world';
                    alert(stringValue.slice(-3)); // 'rld'   slice()传入负值会将负值与字符串长度相加,
                    alert(stringValue.substring(-3)); // 'hello world'  substring()会将全部负值转换为0
                    alert(stringValue.substr(-3)); // 'rld'  substr() 将负的第一个数与字符串长度相加,第二个转换为0

               三·字符串位置方法:indexOf()  lastIndexOf()这两个方法都是从一个字符串中搜索给定的子字符串的位置,如果没有,返回-1。区别: indexOf从头开始找  lastIndexOf 从后开始找
               例:var stringValue = 'hello world';
                     alert(stringValue.indexOf(‘o’))// 4
                     alert(stringValue.lastIndexOf(‘o’))//7
                如果子字符串只出现一次,两个返回值相同。两个方法都可以传第二个参数 指定开始查找位置,

相关文章

网友评论

      本文标题:Javascript学习笔记

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