zoukankan      html  css  js  c++  java
  • JavaScript基础

    一、基本规则

           1.JavaScript 是 Web 的编程语言,所有现代的 HTML 页面都使用 JavaScript,是一种轻量级的编程语言。

           2.语句都以分号结束,但分号也可以省略;

           3.脚本必须位于HTML的<script></script>标签内,可放在<head>和<body>标签内;但通常都放在<head>或者是页面底部;

           4.数据类型有Number,String,Boolean,Array([]),Object,变量用关键字var来进行声明;

           5.输出方法:

        document.write(“string")      直接写入HTMLl输出流;
        window.alert("string")        弹出警告框;
        console.log("string")         写入到浏览器控制台,主要用于调试程序使用;
        innerHTML                     写入到 HTML 元素,一般需要先定位到某一元素;

           6.//注释; /*多行注释*/

           7.JavaScript区分大小写,一般命名用驼峰;

           8.对于一行代码跨多行可用转义字符来进行连接;

           9.脚本语言是逐行执行的,而不是像C语言一样会先把所有的代码都编译一次再执行;

           10.debugger;        此语句相当于断点,脚本会在此处停止执行;

    二、运算符

           1.赋值:= += -= *= /= %=

           2.算术:+ - * / % ++ --

           3.比较:== != > <  >= <= === !==

           4.逻辑:&& || !

           5.条件:? :

           (同类型比较==和===一样,不同类型比较==会将两种类型转换为同一类型后对值进行比较,===的结果就是不等;

           数值与null相加不影响结果,string与null相加结果为null;)    

    三、声明

    1.无论常量还是变量,使用前都应该先用var声明,同时也可以直接赋值。

           也可以用new来声明变量类型(例:var a = new Number;)

           同时声明多个变量用逗号隔开;

    2.令一个变量值等于null,那么这个变量就是undefined;     

    3.数组的声明有四种方式:

    var ar = new Array('a','b');
    var ar = ['a','b'];
    var ar = new Array();
    var ar = [ ];

    4.object声明(object是拥有属性和方法的数据,是一个容器)

           var ob = {name:"x",name2:"y"};

           可通过ob.name或者ob["name"]两种方式来获取name的值x;如果name的值是一个方法则需要在使用name(),如果不加括号则会得到方法的语句而不是方法运行的结果;

           常用两种创建对象方式:

        1)function ob(){
            var obj = new Object();
            obj.name = "x";
            obj.name2 = "y";
            return obj;
        }
        2)function ob(){
            this.name = "x";
            this.name2 = "y";
        }

           (对象的创建时可以有构造函数,类似于class的构造函数;)      

    5.变量提升:JavaScript变量可以先使用后声明,因为函数及变量的声明在运行时都被被提升到函数的最顶部;但只会提升只声明的变量,如果声明同时初始化了则不会被提升;

    "use strict";           

    6.严格模式,在1.8.5中新增,如果使用此模式,则不允许使用未声明的变量;不允许删除变量、变量重名、使用八进制、使用转义字符;只能用在脚本或者一个函数的开头;

    7.javaScript中很多时候要避免使用new关键字;  

    四、数据类型:

    (一)Number           

    既可以表示小数也可以表示整数,所有的数据都是64位的;以0开头为八进制,0x表示十六进制;

    属性有:

    MAX_VALUE
    MIN_VALUE
    NEGATIVE_INFINITY
    POSITIVE_INFINITY
    NaN
    prototype
    constructor

    方法有:

    toExponential()
    toFixed()
    toPrecision()
    toString()
    valueOf()

    (二)字符串(string)

           1.可以使用单引号或者双引号包围;

           2.字符串其实是个数组,可用[0]索引来取得每一个位置的元素;

           3.可用length属性来计算一个字符串的长度(如:st.length)

           4.可使用+号来连接两个字符串为一个;

           5.属性:

           length

           prototype

           constructor

           6.字符串方法:

        charAt(int)                返回指定索引位置字符;
        charCodeAt(int)            返回指定索引位置字符的Unicode值;
        concat(str1,str2,..)       连接两个或多个字符串,也可使用+号;
        fromCharCode()             将Unicode编码转换为字符;
        indexOf()                  返回指定字符串值在字符串中首次出现的位置;
        lastIndexOf()              指定字符串值在字符串中最后一次出现的位置;
        match(reg)                 查找到一个或多个正则表达式的匹配;
        search()                   查找一个字符串或正则表达式,找到则返回第一个字符的位置索引,未找到则返回-1;
        replace(str1,str2)         用str2替换原字符串中的str1;
        slice(startInt,endInt)     返回一个字符串指定索引之间的字符串,包含startInt位置字符,不包含endInt位置字符,endInt可选,如不给定则默认到字符串结尾;
        splite()                   把字符串按关键字分割,分割内容不包含关键字;
        substr(startInt,length)    返回从指定位置开始,到指定长度的字符串,如果没给定lengh,则默认到字符串结尾;    
        substring(from,to)         同slice();
        toLowerCase()              转换为小写;
        toUpperCase()              转换为大写;
        trim()                     去除字符串两边空白;
        valueOf()                  返回某个字符串对象变量的值;
        
        anchor()                   创建html锚;
        big()                      大号字体;
        small()                    小号字体;
        blink()                    闪烁字体;
        bold()                     粗体;
        fixed()                    以打字机文本显示;
        fontcolor()                字体颜色;
        fontsize()                 字体大小;
        italics()                  斜体;
        link()                     链接样式;
        strike()                  删除线;
        sub()                      以下标显示;
        sup()                      以上标显示;

    (三)数据类型转换(显式)

    String(N)          将数据转换为字符串类型,数字等的方法toString()也是相同的作用;

    Number(S)            将数据转换为数字类型;

    (如果没有进行类型转换而将两各不同的数据类型进行运算时,javaScript会自动隐式的进行数据类型的转换;)

    typeof varName             返回varName的数据类型,不过数组返回的类型是object;

    varName.constructor;  返回所有变量的构造函数(如数值的为Number())

    null和undefined值相同,都可以用来清空变量的值,但类型不同,null的类型是object,undefined类型是undefined;

    五、结构语句

    1.if...else...

    格式:

    if(condition){
        section;
    }
    else if(condition){
        section;
    }
    else{
        section;
    }
    除了if的结构都是可选的;)

    2.switch语句

        switch(n)
        {
            case 0:
            break;
            case 1:
            break;
            ...
            default:
        }

    3.for循环

        for(var i=0;i<n;i++)
        {
            suitcase;
        }

    4.for...in循环(遍历对象属性)

        for(x in objectX)
        {
            suitcase;
        }

    5.while循环

        while(condition)
        {
            suitcase;
        }

    6.do...while循环

        do
        {
            suitcase;
        }while(condition);

    所有循环都可以使用continue来跳出当前循环,使用break来跳出整个循环.

    六、函数

    1.格式:

    function functionName(parameters){

           setion;

    }

    (参数不需要类型;

    函数可以有返回值,返回值使用return;)

    2.作用域:

    JavaScript分全局作用域和局部作用域,函数内定义的变量为局部变量,函数外定义的为全局变量,全局变量是window对象,所有变量名都可以使用window.varName;

    如果把值赋给尚未声明的变量,该变量将被自动作为全局变量声明。

    3.匿名函数:可以在function后边省略掉函数名;在定义时就已调用;

    4.自调函数:即会自动调用的函数,相当于函数定义后不需要其他调用就会自己运行一次。函数体需被包围在()内,后边再接一个()来表明这是一个自调函数;

    格式示例:(function(){var x = "hello!";})();

    5.如果在调用函数时未给定需要的参数,那么这个参数在使用时就是undefined类型数据;可用x = x || 0 来设定未给参数值的情况,或使用x === undefined来进行判断;

    函数有一内置arguments对象,是一个包含所有参数的数组;

    6.异常处理:

    抓取:try{}catch{}

    抛出:throw  exception       (exception可以是string,number,boolean,object)

    七、正则表达式

    1.格式:/pattern/modifiers

    2.修饰符:

    i        不区分大小写;
    g        全局匹配,即匹配所有的项而非只是第一项;
    m        多行匹配;

    3.主体规则:

    []        范围
    [^]       匹配不是范围内的结果;
    (x|y)     匹配x,y;
    
    .         匹配除换行符和结束符外的任何字符;
    w        匹配字母;
    W        匹配非字母;
    d        匹配数字;
    D        匹配非数字;
    s        匹配空白字符;
    S        匹配非空白字符;
            匹配单词边界;
    B        匹配非边界;
    0        匹配null字符;
    
            匹配换行符;
    f        匹配换页符;
    
            匹配回车符;
    	        匹配制表符;
    v        匹配垂直制表符;
    xxx      匹配以八进制数xxx规定的字符;
    xdd      匹配以十六进制数dd规定的字符;
    uxxxx    匹配以十六进制数xxxx规定的Unicode字符;
    
    {X,Y}     匹配最少X最多Y个的结果,可省略Y表示最少X次,可省略逗号和Y表示X次;
    *         匹配0至多个;
    +         匹配1至多个;
    ?         匹配0至1个;
    ^         开头;
    $         结尾;
    ?=        匹配其后为指定内容的字符串;
    ?!        匹配其后不为指定内容的字符串;

    4.RegExp

    是一个包含属性和方法的正则表达式对象,实例时应使用new RegExp("pattern","modifiers");

    常用方法:

    stringName.match(reg)            从字符串中查找匹配字符,返回匹配到的字符串;
    stringName.search(reg)           从字符串中查找匹配字符,返回匹配字符的起始位置;
    stringName.replace(reg,string)   从字符串中替换匹配字符;
    reg.test(string)                 一个正则表达式在字符串中是否有匹配结果,如果有则返回true;
    reg.exec(string)                 一个正则表达式在字符串中是否有匹配结果,如果有则返回匹配结果数组;
    reg.compile()                    编译正则表达式;

    八、事件

    指浏览器或者用户的行为;

    1.常见HTML事件:

        onchange          HTML元素改变;
        onload            浏览器加载页面完成时;
        onclick           用户点击时;
        onmouseover       鼠标在一个HTML元素上时;
        onmouseout        鼠标在一个HTML元素上移开时;
        onkeydown         按下键盘时;
        (更多可见HTML文档的事件)

    2.键盘鼠标事件对象:

        altKey             返回事件被触发时,alt是否被按下;
        ctrlKey            返回ctrl键是否被按下;
        shiftKey           返回shift键是否被按下;
        metaKey            返回meta键是否被按下;
        button             返回哪个鼠标按钮被点击;
        clientX            返回指针的水平位置;
        clientY            返回指针的垂直位置;
        location           返回按键在设备上的位置;
        key                返回按下按键的标识符;
        charCode           返回onkeypress事件触发键值字母代码;
        keyCode            返回onkeypress事件触发的键值字符代码;
        which              返回onkeypress事件触发的键值字符代码;
        relatedTarget      返回与事件的目标节点相关的节点;
        screenX            返回某个事件被触发时鼠标指针的水平坐标;
        screenY            返回某个事件被触发时鼠标指针的垂直坐标;

    九、其他

    1.元素定位:

    document.getElementById(" ");

    document.getElementByTagName(" ");

    document.getElementByClassName(" ");

    document是在全局范围内查找,也可以使用一个变量或者范围;

    如果要在查找一个元素之后改变元素的内容,可以使用innerHTML来实现,例:document.getElementById("xx")="示例内容";

    也可改变元素的属性,只要在后边加上相应的.attribute = newAttributeValue即可将原属性值改为新的值;

    document.getElementById(id).style.property=新样式   改变元素样式;

    2.监听:

    element.addEventListener(event, function, useCapture);

    用于向指定元素添加事件句柄,添加的事件句柄不会覆盖已存在的事件句柄,你可以向一个元素添加多个事件句柄。可以向任何 DOM 对象添加事件监听,不仅仅是 HTML 元素。

    其中的event不要使用on前缀 ;

    element.removeEventListener();方法可用来移除由addEventListener()方法添加的事件句柄;

    3.创建新的元素:

    var para=document.createElement("p");

    var node=document.createTextNode("这是一个新段落。");

    para.appendChild(node); //追加这个元素的文本节点;

    element.appendChild(para); //在已存在元素后添加新元素;

    para.removeChild(child);  //移除para元素的子元素child;

    4、eval()      将字符串作为脚本代码来执行。

  • 相关阅读:
    【转】js竖状伸缩导航
    大学易站暂时关闭通知
    【转】神同步!这俩熊孩子太会玩了,以前的同步都弱爆了
    【技术贴】搜狗浏览器 标签页 看后吧 解决
    四级查分步骤解决无法找到对应的分数 请确认你已安装并启动了CET查分保护盾
    解决Mysql远程连接出错不允许访问 ERROR 1130:Host is not allow
    xml 获取节点下的 属性。
    Oracle 获取日期区间数据
    js 数值转换为3位逗号分隔
    xml获取子节点
  • 原文地址:https://www.cnblogs.com/aland-1415/p/8848118.html
Copyright © 2011-2022 走看看