JavaScript学习笔记——第一天

JavaScript基础语法

一、大小写敏感

二、运行 JS 的两种方法

1、使用   javascript:   前缀构建执行JavaScript代码的URL

例如：<a href="javascript:alert('运行JavaScript代码   ！！')；">运行JavaScript</a>

2、使用<script...../>元素来包含JavaScript代码

例如：<script type="text/javascript">alert("直接运行的JavaScript   ！！")；</script>

三、导入JS文本文件

语法格式为：<script src="test.js" type="text/javascript"></script>

四、输出语法

alter("此为输出语法关键字，用于弹出   警告")；

console.log("     控制台输出语句的方法！！      ");   表示在控制台输出语句

五、JS中的值的类型

1、数字：整数，小数（浮点数）

2、字符串："abcd"  'A'

3、布尔值：true，false

六、变量的声明

var x;   //表示创建一个变量

x="hello world";     //表示为变量x赋值

var a,b,c;    //同时创建多个变量

var a=1,b=3,c=6;     //同时创建多个变量并赋初值

七、运算符

1、算数运算符：+  -  *  /   %     运算顺序是从左往右

例如：1+"a"="1a"           1+false=1+0=1              1+true=1+1=2          false+"a" = "falsea"

2、赋值运算符：+=    -=     *=   /=   %= 

3、比较运算符： >    >=     <      <=      ==     ===      !=       均返回布尔值，其中 == 比较的数值，===比较的是类型和数值

例如：0==false  返回的是true;    0===false返回的是false;    1=="1"   返回的是true；   1==="1"   返回的是false。

4、逻辑运算符：&&（与）      ||（或）        ！（非）    其中   ！   表示取反，即如果是true则返回false。

八、 判断变量类型

判断变量类型使用typeof();

例如：

var a=1;
typeof(a);

在JS中null属于object类型

九、类型转换

1、转换为数字类型： Number();

var a="1562";
var b=Number(a);        //b最终的值是数字类型的 1562
//或者使用以下方式转换
var c=a.toNumber();

例如：m

2、转换为字符串类型：String();

var a=2456;
var b=String(a);        //最终b的值是字符串类型的 "2456"

十、函数定义

定义函数语法格式：

function  函数名(参数一，参数二，参数三.....){

            功能代码；

}

十一、动态参数arguments

function add(){
    var z;
    for(var i=0;i<arguments.length;i++){
        z+=arguments[i];
}
    return z;

}
var rs=add(1,2,3,4,23);
console.log("1+2+3+4+23 = " + rs);        //输出结果是： 1+2+3+4+23=33

十二、局部变量和全局变量

定义与区别：略

注意：在函数中直接使用没有定义的变量，则该变量会直接变成全局变量，而不是成为局部变量。

function add(){

    y=100;        //此y会直接变成全局变量
    console.log("输出y= " + y);
}
console.log("输出y= " + y);        //因为 y 是全局变量，所以此处不会报错

十三、预解析

浏览器获得JS文件的时候，不是立刻执行代码，而是全篇快速扫描一遍，把变量预先解析并保存。

console.log("x=" + x);//因为是预编译，所以此处之前虽然没有创建变量a,但是后面有创建，所以不会报错
var x=10;

add();//因为是预编译，所以此处之前虽然没有创建函数add(),但是后面有创建，所以不会报错
function add(){
console.log("此为add函数！！");
}

function div(){
    y=10;        //因为预解析的原因，所以已有  var y=1; 的变量的创建，所以此处的y不是全局变量
    var y=1;    //如果没有这句定义，那么上方的 y=10 的代码会变成全局变量
    console.log("add():y=" + y);

}

十四、闭包，使变量变得私有化

为了避免全局变量可以被任何函数访问并修改，所以可以设置伪全局变量（本质上是局部变量，却有全局变量的生命周期）

function add(){
    var counter=0;    //创建局部变量
    function plus(){
        counter++;    //此行代码使counter拥有了全局变量的生命周期
        console.log("counter=" + counter);
    }

    /*plus()函数也可以定义成以下格式：
       plus=function (){
            counter++;    //此行代码使counter拥有了全局变量的生命周期
            console.log("counter=" + counter);
        }
     */
}

add();    //表示创建counter
plus();    //表示实现counter++
plus();    //再次加一

简化一：

function add(){
    var counter=0;    //创建局部变量
       var plus=function (){
            counter++;    //此行代码使counter拥有了全局变量的生命周期
            console.log("counter=" + counter);
        }
    retrun plus;
}

var plus=add();

简化二：

function add(){
    var counter=0;    //创建局部变量
       return function (){
            counter++;    //此行代码使counter拥有了全局变量的生命周期
            console.log("counter=" + counter);
        };
}

var plus=add();

简化三   函数的立即执行格式：

(function(){
    var counter=0;
    retrun function (){
        counter++;
        console.log("counter=" + counter);
    };
})();

//类似于   (add)();
//所以闭包比较标准的的格式为：
var plus=(function(){
    var counter=0;
    retrun function (){
        counter++;
        console.log("counter=" + counter);
    };
})();

十五、创建对象的方式

例如：

var obj={

         age:15,

         x:0,       //x:0  是指obj的属性，x是属性名，0为属性值，其中x是字符串类型的，理论上可以写成    "x":0;

        "first   name":4,       //如果属性名包含特殊字符，则必须加引号   " "  或者    ' '

        z:function(){

                 console.log("z 的function！！")；

        }

}

十六、对象的操作方式

第一：访问属性

1、obj.age;      //使用点号   “  .  ”  访问

2、使用  []  中括号访问。例如   obj["first name"];    属性名包含特殊字符的必须用   []   来访问

第二：修改属性值

obj["first name"]="高"；

第三：增加属性

obj.height=165;

或者

obj["height"]=165;

第四：删除属性

delete obj["first name"];

或者

delete obj.age;

第五、遍历

for(var a in obj){

         console.log("obj 的属性名 ：" + a +"的属性值= " + obj[a]);

}

十七、创建类

function PersonClass(pName,pSex,pAge){      //定义一个类

        this.name=pName;                    //类中的属性必须使用 this 关键字
        this.sex=pSex;

        this.age=pAge;

        this.slogan=function(){

                   console.log(" 这是一个类的方法！！")

        }

}

十八、弹窗的几种形式

1、alert("无返回值弹窗！！")；

2、confirm("返回true或者false的弹窗！！")；

3、prompt("获取用户输入内容的弹窗！！")；或者写成  prompt("输入：","默认值")；

十九、获取浏览器导航栏的内容

1、使用window.location对象可以获取网址的各个属性，url的各个部分可以用  loation.href   或者   location.toString    获取到。

2、使用   location.reload();   刷新页面

3、使用   location.replace("URL");   打开另一个页面。例如：location.replace("http://www.baidu.com");

二十、浏览器的后退和前进（浏览器的历史）

1、使用    history.forward()   令浏览前进到前一个页面；

2、使用    history.back()      令浏览器返回到上一个页面；

3、使用     history.go(整数)；  该 整数若为正数，令浏览器前进整数个页面；该整数若为负数，令浏览器后退整数个页面。

二十一、获取浏览器的信息

1、获取浏览器的基本信息（版本，厂家.....）:使用window下的    navigator   对象

2、获取浏览的分辨率：使用window下的    screen    对象

二十二、计时器

1、循环执行：setInterval(函数名，时间)；指在指定的时间间隔后执行以下某个函数。

var sil=setInterval(add,5000);
clearInterval(sil);    //停止名为  sil  的计时器

2、一次执行：setTimeout(函数名，时间)；指到达指定时间间隔时，执行一次某函数。

var sil=setTimeout(add,10000);
clearTimeout(sil);    //停止名为  sil  的计时器
​

二十三、获取标签

1、通过id查找：

例如：var p1=document.getElementById("p1");

2、通过标签名查找：

var ps = document.getElementsByTagName("p");  //指返回标签名为  p  的所有标签，返回值是一个数组

p1=ps[0];     //指返回标签数组中的第一个标签

3、通过class来查找

var ps = document.getElementsByClassName("text");     //指返回class名为  text   的所有标签。

注意：通过id获取节点的   getElementById()   函数只能在document对象上使用，但是通过标签名和通过class获取节点的两种方法可以在任意对象上使用。即代码体现如下：

var div1=document.getElementById("div1");
//ps可以通过  div1 对象使用getElementsByClassName()函数
var ps=div1.getElementsByClassName("txt");   

二十四、创建标签节点 

var div1=document.getElementById("div1");

//创建一个 p 标签
var p = document.createElement("p");

//创建一个文本节点
var p1txt=document.createTextNode("这是一个文本");

//将创建的文本节点添加到   p   标签中
p.appendChild(p1txt);

//添加  p  标签节点到  div1 下，成为div1的子节点
div1.appendChild(p);

二十五、删除标签节点

var div2=document.getElementById("div2");   //div2是div1的子节点

//可以通过父节点来删除子节点
div1.removeChild(div2);

//也可以自己把自己删掉
div2.parentNode.removeChild(div2);

二十六、自定义属性的获取、修改、删除

1、获取自定义属性：div1.getAttribute("属性名")；

2、修改自定义属性：div1.setAttribute("属性名"，"15")；

3、删除自定义属性：div1.removeAttribute("属性名")；

二十七、修改标签里面的内容

var p1=document.getElementById("p1");

//innerHTML指的是标签内部的所有内容，包括内含的标签
p1.innerHTML = "这是 p1  标签内部的内容  <a href="http://www.baidu.com">this is link</a>";

//textCode指的是标签内部的纯文本内容
p1.textCode = "这是一个纯文本内容";

二十八、创建事件的两种方式

1、html属性的方式：

             属性名使用 “  on+事件的名称  ”，例如：onclick；

             属性的值：事件发生时执行的方法，有两种设置方式（a、直接在html中设置；b、通过JS的元素来设置）；

例如：方式a:<div id="div1" οnclick="add()">div1</div>;   

          方式b：var div1=ducument.getElementById("div1");

                       div1.onclick = add;      //或者   div1.onclick = null;  表示没有点击事件

2、通过系统提供的方法

标签名.addEventListener(事件名称，函数名，事件的传播方式 布尔值)；

例如：div1.addEventListener("click",add);

其中事件的传播方式指的是事件的事件流（对应标签接收到事件的顺序）。false为默认值，指的是在冒泡阶段执行；true指的是在捕获阶段执行。

捕获阶段：从起始点  至   目标位置

冒泡阶段：从目标位置  至    起始位置

在冒泡阶段可以停止继续向上冒泡，代码为：event.stopPropagation();

3、删除已有的事件

div1.removeEventListener("click",add);

二十九、事件函数

div1.removeEventListener("click",add);  

其中add()就是事件函数，它也是普通函数，但它比普通函数也多了一个  event事件对象  参数，

event事件对象可以提供发生的事件的详细信息：具体发生事件的标签元素，鼠标的位置，点击的状态，键盘的按键等

event事件对象中 screenX、screenY 表示位置的是基于屏幕的左上角；clientX、clientY表示的位置是基于浏览器的左上角。

三十、取消某事件的默认操作

1、针对于addEventListenenr()的取消方式为：在事件函数中添加代码  event.preventDefault();

2、针对于div1.οnclick=add的取消方式为：在事件函数中添加代码  retrun false;