HXC博客
  •  首页
  •  游戏/动漫
  •  日记/生活
  •  程序员式幽默
  •  闲言碎语
  •  博客大计事
  •  留言板
  • 
    js基础巩固笔记(一)
     作者:胡新春  发布时间:2018-05-29 15:16:20  访客:411

    一、正则表达式中的直接量字符


    \o NUL字符 \u0000

    \t 制表符  \u0009

    \n 换行符  \u000A

    \v 垂直制表符 \u000B

    \f 换页符     \u000C

    \r 回车符     \u000D

    \uxxxx 由十六进制数指定的ubicode字符

    \cX控制字符^X



    二、正则表达式的字符类


    [ ] 匹配方括号内的任意字符

    [^ ] 不包括方括号内的任意字符  ^ 匹配否定字符 例如:/[^abc]/  将匹配abc窗外的所有字符

    . 除换行符和其他Unicode行终止符之外的任意字符

    \w 任何ASCII字符组成的单词 等价于[a-zA-Z0-9]

    \W 任何非ASCII字符组成的单词 等价于p[^a-zA-Z0-9]

    \s 任何Unicode空白符

    \S 任何非Unicode空白符

    \d 任何ASCII数字 等价于[0-9] 例如一个2位数 /[\d\d]/

    \D 任何非ASCII数字 等价于[^0-9]


    三、正则表达式的重复字符语法


    {n,m} 匹配前一项至少n次,不超过m

    {n,}  匹配前一项项至少n次或者更多

    {n}   匹配前一项n次

    ?    匹配前一项0次或者1次 等价于{0,1}

    *     匹配前一项0次或者多次 等价于{0,}

    +     匹配前一项1次或者多次 等价于{1,}


    四、正则表达式的选择、分组和引用字符


    |     分隔供选字符 /ab|cd/ 表达的意思是可以匹配ab 或者匹配cd

    ( )   组合,将几个项组合为一个单元


    五、正则表达式中的锚字符


    ^     匹配字符串的开头

    $     匹配字符串结尾

    \b    匹配单词边界

    \B    匹配非单词边界


    六、正则表达式的修饰符


    i     执行不区分大小写的匹配

    g     全局匹配,即查找全部匹配

    m     多行匹配模式


    七、用于模式匹配的string 方法

     search() 方法,返回第一个与之匹配的字符串位置,如匹配不到返回-1  ,例如:"javascript".search(/script/i);返回结果为4。


    replace() 方法,执行检索与替换,第一个参数为正则表达式,第二个参数为要进行替换的字符串,如果带修饰符g,则替换所有匹配到的子窜,若不带,替换第一个;如第一个参数为字符串,则直接搜索该字符串。例子:"javascriptJAVASCRIPT".replace(/javascript/gi,"JavaScript"); 输出结果为:JavaScriptJavaScript。


    match()  方法,唯一参数为数组,返回结果为数组;如果加修饰符g,则返回所有匹配结果。例如"hello,world 今天是2018年5月15日".match(/\d+/g) 输出结果为:["2018","5","15"]


    split()  读音:“思不累特” 方法,参数可以是正则表达式,将字符串拆分成子串组成的数组。例子:"h,u,x,i,n".split(/,/);以逗号分隔字符串,输出结果为:["h","u","x","i","n"] 。


    RegExp() 带有2个参数,用以创建新RegExp对象,需要注意使用\做转义字符,RegExp()多用于动态创建正则表达式




    javascript运算符


    1.常用运算符 + - * / %

    2.由Math对象定义的函数和常量实现的


    Math.pow(2,3)    // =>结果8 ;2的3次幂

    Math.round(.2)   // =>结果0 ;四舍五入

    Math.ceil(.6)    // =>结果:1 ;向上求整

    Math.floor(.6)   // =>结果:0 ;向下取整

    Math.abs(-4)     // =>结果:4 ;取绝对值

    Math.max(x,y,z)  // 返回最大值

    Math.min(x,y,z)  //返回最小值

    Math.random()    //生成一个大于等于0小于1的伪随机数

    Math.PI          //圆周率

    Mtah.E //自然对数的底数

    Math.sqrt(4)     // =>结果:2 ;开平方

    Math.pow(8, 1/3) // =>结果:2 ;开立方根

    Math.sin() //三角函数

    Math.log()       //10的自然对数

    Math.exp() //e的三次幂




    日期对象的简单使用

    new Date()     //当前时间和日期

    new Date().getFullYear()   //=>2018  获取整年

    new Date().getMonth()      //=> 如现在是5月,输出为4;从0开始计数的月份

    new Date().getDay()        //得到星期几 0-星期日 5星期一 4-星期二 3-星期三 2-星期四 1

    new Date().getHours()      //当前时间

    new Date().getUTCHours()   //使用UTC表示小时的时间





    常用的转义字符

    \o NUL字符 \u0000

    \t 制表符  \u0009

    \n 换行符  \u000A

    \v 垂直制表符 \u000B

    \f 换页符     \u000C

    \r 回车符     \u000D

    \" 双引号

    \\ 反斜线

    \uxxxx 由十六进制数指定的ubicode字符


    字符串的使用


    var s="hello world"  //定义一个字符串

    s.charAt(0)          //=> h ;第一个字符串

    s.charAt(s.length-1) //=> d ;最后一个字符

    s.substring(1,5)     //=> hello ;1-5个字符

    s.indexOf("e")       //=> 2; 字符首次出现的位置

    s.lastIndexOf("l")   //=> 2; 字符最好出现的位置

    s[0]                 //=>h ;第一个字符

    s[s.length-1] //=>d ; 最后一个字符 





     全局对象:全局对象的属性是全局定义的符号,javascript程序可以直接使用。

     包装对象:字符串、数值、布尔值三种原始类型的值,在一定条件下会自动转化成对象,因此被称为原始类型的包装值。

     类型转换:当javascript期望使用一个布尔值时,你可以提供任意类型的值,javascript将会自行转换。


     ==   在判断2个值相当之前可以做类型转化

     "0" == 0      //比较之前将字符串转换成数字

     0  ==  false  //在比较之前布尔值转化成数字


     ===   在判断相等时并未做任何类型转化

     在JavaScript中"=","==","==="运算符应该理解为,赋值,相等,恒等。


     toFixed()     //根据小数点后指定的位数将数字转化成字符串

     toExponential()//使用指数计数法将数字转化成字符串

     toPrecision()  //根据指定的有效数字为将数字转化成字符串

     例子:

          var n=123456.789;

          n.toFixed(1); =>"123456.7" //进行四舍五入后保留一位小数

          n.toExponential(1); =>"1.2e+5"  //使用指数计数法表示

          n.toPrecision(4); =>"1.235e+5"  //使用指数计数法表示



    parseInt(),parseFloat()


    作用域:变量的作用域包括2种,局部变量和全局变量。

    作用域链:根据内部函数可以访问外部函数这种机制,用链是查找决定哪些函数可以被内部函数访问。





    表达式


    保留字构成的原始表达式

    true    //返回一个布尔值

    null    //返回一个值,空

    this    //返回当前对象。  当在一个方法体内,this 返回调用这个方法的对象


    对象和数组的初始化表达式


    数组的元素是逗号分隔的表达式的值,并可以嵌套

    调用表达式:调用函数或方法的表达式。

    对象创建表达式:创建一个对象并调用一个人函数(这个函数成为构造函数),初始化新对象属性。new Object();



    数组Array


    join()方法与split()方法逆向;将数组中所有元素都转化为字符串并连接到一起,并放回最后生成的字符串, 可以指定一个分隔符,不指定则使用“ ,”分隔。例子:[1,2,3].join(); =>"1,2,3".

    reverse()将数组中的元素倒序。例子:[1,2,3].reverse(); =>[3,2,1] .

    sort()方法将数组中的元素进行排序,并返回(一般情况以字母表顺序)例子:["b","a","c"].sort() =>["a","b","c"]

    concat()  创建并返回一个新数组,如果自身是数组则链接的是新数组。例子:[1,2,3].concat(4,5); => [1,2,3,4,5]

    slice()返回一个数组的片段或者子数组,例子:[1,2,3,4,5].slice(0,3); => [1,2,3]

    splice()方法是在数组找那个插入或删除元素的通用方法

    push()方法 在数组尾部添加一个或多个元素

    pop()方法  删除数组的最后一个元素

    unshift()和shift()非常类试push()和pop(),unshhift在数组头部插入,shift删除数组第一个宿主。

    tostring()将数组每个元素转化成字符串,用","分隔,例如:[1,2,3].toString(); =>"1,2,3";

    forEach() 重头到尾遍历数组,为每个元素调用指定函数。

    map()方法将调用数组的每个元素给指定的函数,它包含该函数的返回值。

    filter()返回的元素是调用的数组的一个子集。

    every() 针对数组中的所有元素的判断,例如:[1,2,3,4].every(function(x){return x<6}); => true; 数组中所有的值都小于6.

    some() 方法寓意数组中存在满足条件则返回true。

    reduce()和reduceRight()方法使用指定的函数将数组元素进行组合生成单个值。




    函数


    函数的调用方式:作为函数、作为方法、作为构造函数、通过它们的call()和apply()方法。

    方法调用:定义对象o ;调用为o.f(); 在像这样的方法调用里,this引用该对象。

    构造函数调用:如果函数或者方法调用之前带有new ,它就是构造函数调用。

    间接调用:javascript中的函数也属于方法。call()和apply()可以用来间接的用函数。

    闭包:函数对象可以通过作用域链相互链接起来,函数体内部的变量可以保存在作用域里面,这种特性在计算机文献里称为闭包。从技术角度讲所有的函数都是闭包。

    sort()方法可以接受一个函数作为参数,用来处理排序操作。





    常量和局部变量


    可以使用const关键词来定义常量。

    关键词let的4种用处:

    1.可以作为变量什么和var一样

    2.在for/in循环中,作为var的替代方案。

    3.在语句块中定义一个新变量,并显示指定它的作用域。

    4.定义一个表达式内部作用域中的变量,这个变量只在表达式中有用。

    console.log() //调试输出到控制台





    客户端javascript


    Localtion指定当前显示在窗口中的URL

    window.localtion="http://www.huxinchun.com" //跳转至新的页面

    setTimeout()  //定时器

    onload()  //当文档载入完成时执行一个行数


    客户端时间线


    1.创建Document对象,解析web页面

    2.无async和defer属性时,执行行内或者外部脚本

    3.遇到async属性的<script>开始下载脚本,并继续解析文档

    4.文档解析完毕

    5.所有有defer属性的脚本,会按照在文档中出现的顺序执行,异步脚本可能也在这段时间内执行

    6.程序执行从同步脚本阶段转换到异步事件驱动阶段。

    7.文档已经完全解析完成,但还有图片等其他内容载入

    8.从此刻起,会调用异步事件,以异步响应用户输入事件,网络事件,计时器过期等。


    createElement()  //通过指定名称创建一个参数

    createTextNode() //创建文本节点

    appendChild()    //向节点添加最后一个节点

    insertBefore()   //向列表中插入一个新项

    ***********************************************************

    //向文本中增加超链接的小例子

    function addElement () { 

      var newScript = document.createElement("a");//创建a元素 

      newScript.href = "http://www.baidu.com";//添加链接属性

      newScript.target='_blank'; //追加新窗口打开属性

      var text=document.createTextNode("百度"); //添加链接文字

      document.body.appendChild(newScript); //输出开始a标签

      newScript.appendChild(text);//输出文本

      document.body.appendChild(newScript);//输出结束a标签

    }

    ************************************************************

    onload() //当文档载入完成时调用一个函数






    javascript不能做什么


    1、javascript没有权限来写入或删除客户计算机生的任意文件或者列出任意目录(非绝对)。

    2、javascript没有任何通用的网络能力(非绝对)。

    3、限制打开新窗口(一般用于响应鼠标单击事件)。

    4、HTML FileUPload元素的value属性是只读的。

    5、脚本不能读取从不同服务器载入的文档(同源策略)。


    同源策略


    同源策略是对javascript能够操作哪些web内容的一条限制,脚本只能读取和所属文档来源相同的窗口和文档属性。脚本本身的来源和同源策略并不相关,相关的是脚本所嵌入的文档来源。

    使用http协议载入的文档和使用https协议载入的文档来源不同。


    不严格的同源略


    例如从new.ex.com和从old.ex.com载入的文档脚本中把他们的document.domailn属性都设置为

    “ex.com”,这样一来这些文档都具有同源性,可以互相读取属性。


    防止XSS攻击


    通常,防止XSS攻击的方式是,在使用任何不可信数据来动态创建文档之前,从中移除HTML标签。

    例子:name=name.replace(/</g,"&lt;").replace(/>/g,"&gt;"); //可以使用它来移除<script>两边的尖括号。




    windows对象


    计时器

    setInterval(strar,600) // 在指定时间间隔循环执行

    setTimeout(star,600)   // 在指定时间之后执行

     

    载入新文档

    location.replace() //载入相对路径,用于超链接中

    location="http://www.huxinchun.com" //使用浏览器跳转至新的页面

    loacation="#top" //跳转至锚点位置

    location.search="" //跳转至下一页

    浏览历史

    back()     //后退

    forward()  //向前

    history.go(-2)  //后退2步


    浏览器和屏幕信息

    navigator.online  //浏览器是否在离线状态下

    geolocation       //确定用户地理位置的属性

    javaEnabled()     //可以运行java时返回true

    cookieEnable()    //可以永久的保存cookie时返回true

    appName           //浏览器全称

    appVersion        //浏览器产商和版本信息

    userAgent         //包含appVersion的所有信息并更多细节

    platform          //运行浏览器的操作系统


    屏幕

    window.screen     //提供有关窗口显示的大小和可选的颜色数量信息


    对话框

    alert()            //向用户显示一条信息并等待 关闭

    confirm()          //显示一条信息并等待 确认/取消

    promopt()          //等待用户输入字符串并放回那个字符串


    confirm()和promopt()会产生阻塞,在关掉窗口之前不会放回数据

    window.open()       //载入指定url到新的或者指定的窗口中

    例子:var w =window.open("index.html","index","width=400,height=350,status=yes,resizable");

    window.close()      //关闭窗口


    document.getElementById()        //通过id选取元素

    document.getElementsByName()     //通过名字选取元素

    document.getElementsByTagName()  //通过标签名来选取元素

    document.getElementsByClassName()//通过css类来选取元素

    如今的web浏览器依赖于对文档开头<!DOCTYPE>声明的严格程度来选择“怪异模式”或者“标准模式”,怪异模式是为了向后兼容而存在的。


    点评一下

    
    程序:HXC博客v2.0 主题:HXC博客前端Funs主题     程序下载
    博客平稳运行2年+