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        匹配单词边界;
\B        匹配非边界;
\0        匹配null字符;
\n        匹配换行符;
\f        匹配换页符;
\r        匹配回车符;
\t        匹配制表符;
\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.querySelector(" "); 通过css选择器查找一个元素

document.querySelectorAll(" "); 通过css选择器查找所有元素

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

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

也可改变元素的属性,只要在后边加上相应的.attribute = newAttributeValue即可将原属性值改为新的值;或者使用.setAttribute("属性名","属性值"),.removeAttribute("属性名");

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()      将字符串作为脚本代码来执行。

posted @ 2018-04-15 16:38  覆手为云p  阅读(357)  评论(0编辑  收藏  举报
停止精灵球