js语言学习

JavaScript概述

js即javascript，独立的语言，浏览器具有js解释器,一般和html一起用

js主要包括三块

• 核心（ECMAScript） 
• 文档对象模型（DOM） Document object model (整合js，css，html)
• 浏览器对象模型（BOM） Broswer object model（整合js和浏览器）
• Javascript 在开发中绝大多数情况是基于对象的.也是面向对象
• 操作的是一个个的html标签  每个标签都是一个对象
• 

简单地说，ECMAScript 描述了以下内容：

• 语法 
• 类型 
• 语句 
• 关键字 
• 保留字 
• 运算符 
• 对象 (封装 继承 多态) 基于对象的语言.使用对象.

javascript代码的引入方式

可以存在head中，和body中，一般放在body内部的最底部，先解释静态的html语言，然后再加载js动态效果。

方式一：
<script>
    //javascript代码
    alert(123);
</script>
方式二：
<script type="text/javascript"> //默认就是type="text/javascript" 要想让浏览器按照js解释，这里也只能是这个
    //javascript代码
    alert(123);
</script>
方式三：
<script src="js文件的路径，也可以是url"></script>   //啦啦啦啦啦啦，这种是以后的规范哦

注释

单行注释 //
多行注释 /*  */

 变量

python:

　　name=alex

js:

　　name='alex' #全局变量

　　var name='alex' #局部变量
    #为了以防全局和局部分不清楚，定义变量的时候就都定义成局部的，加上var，然后最后斟酌是否那个需要成为全局变量，用到全局变量的也很少
//来让我们一下子定义多个吧
var name='alex',age=18,sex='man'; //逗号隔开哦   分号分号 要专业哦 

写js代码

　　-html文件内编写

　　-临时，可以在浏览器 F12 console里写，直接出效果

基本的数据类型

学习一门语言有些是必须要有的哦   数字  字符串  布尔

1.数字 number

在js中不区分整数和浮点数，js中所有数字均用浮点数表示。

转换：

　　parseInt()  将某值转换为数字，不成功择NaN

　　parseFloat() 将某值转换为浮点数，不成功择NaN

 

age='18'
age_new=parseInt(age)
age_fo=parseFloat(age)

2. 字符串 string

常用方法

1.obj.charAr(num_index) 根据索引取出对应的字符

a='alex'
"alex"
a.charAt(1)
"l"

2.obj.substring(num1,num2) 或 obj.slice(num1,num2 )根据索引范围取出对应的字符范围，顾头不顾尾 [) 

a='alex'
"alex"
a.substring(1,3)
"le"
a.slice(1,3)

"le"

3. obj.length 截取长度

a='alex'
"alex"
a.length 
4

4.obj.trim() 去除空白 

a='alex  \n \r '
"alex"
a.trim()
"alex"
obi.trimLeft()去除左边的空白
obj.trimRight()去除右边的空白

5.obj.concat(value,...) 字符串拼接 一般这里可以用+号

a='alex'
"alex"
a.concat('eric')
"alexeric"

6.obj.indexOf()根据字符列出索引位置  从前往后

a='alex'
a.indexOf('l')
1
a.indexOf('le')
1
a.indexOf('ex')
2

7. 大小写转换

a='alex'
a.toLowerCase()
"alex"
a.toUpperCase()
"ALEX"

8.obj.split 分割

a='alexalex'
"alexalex"
a.split('e')
(3) ["al", "xal", "x"]
a.split('e',1)
["al"]
a.split('e',2)
(2) ["al", "xal"]

 定时器 setInterval

1.举例1
//定义定时器 
<script>
  setInterval('alert(123);',2000);  //执行内容  间隔时间  每隔2秒就执行一次alert(123)
</script>
2.举例2
<script>
    //定义函数
    function f1() {
        console.log('hello')//在浏览器的console里 打印hello


    }
    
  setInterval('f1();',2000); //每两秒执行一次函数f1
</script>

跑马灯实例

<div id="i1">欢迎老男孩莅临指导</div>
<script>
    function func() {
            //根据id获取标签内容，定义局部变量接受
        var tag=document.getElementById('i1');
        var content=tag.innerText;
        var f=content.charAt(0);
        var l=content.substring(1,content.length)
        var new_content=l+f;
        tag.innerText=new_content;

    }

setInterval('func();',1000);

</script>

在浏览器console里测试   前提是文件里有 <div id="i1">欢迎老男孩莅临指导</div>

 

 3.布尔 Boolean

true false 要小写 和python区别开来

== 比较值相等

！== 不等于

=== 比较值和类型相等

！===不等于

|| 或

&& 且

4.数组 object array

js中的数组类似于python中的列表

var a=[11,22,33,44,55] //创建数组 记得加上var
(5) [11, 22, 33, 44, 55]
console.log(a,typeof a)  //查看类型 object
VM1426:1 (5) [11, 22, 33, 44, 55] "object" 

数组常用的方法

1. obj.join() 将数组元素拼接成字符串

a='alexalex'
"alexalex"
a.split('e')
(3) ["al", "xal", "x"]
a.split('e',1)
["al"]
a.split('e',2)
(2) ["al", "xal"]

2. concat 插入数据

var a=[11,22,33,44,55,66]
undefined
a
(6) [11, 22, 33, 44, 55, 66]
var b=a.concat(99,88,77)
undefined
b
(9) [11, 22, 33, 44, 55, 66, 99, 88, 77]

3. reverse sort 数组排序

a
(6) [66, 55, 44, 33, 22, 11]
a.sort()  //从小到大
(6) [11, 22, 33, 44, 55, 66]
a.reverse() //从大到小
(6) [66, 55, 44, 33, 22, 11]

4.slice 数组切片

顾头不顾尾

var a=['a','b','c','d','e']
undefined
a
(5) ["a", "b", "c", "d", "e"]
var b=a.slice(1,4)
undefined
b
(3) ["b", "c", "d"]
var b=a.slice(1,)
undefined
b
(4) ["b", "c", "d", "e"]
var b=a.slice(1,-1)
undefined
b
(3) ["b", "c", "d"]

5. splice 删除或者替换数组里的元素

obj.splice(start,deleteCount,value, ... ) 起始位置 删除个数 要插入的值    插入，删除或替换数组的元素
                            obj.splice(n,0,val) 指定位置插入元素
                            obj.splice(n,1,val) 指定位置插入元素
                            obj.splice(n,1l) 指定位置插入元素

a=[11,22,33,44,55,66]
(6) [11, 22, 33, 44, 55, 66]
a.splice(1,2) //两个数字 删除对应的索引
(2) [22, 33] //删除 索引为1和2的元素
a
(4) [11, 44, 55, 66]
a.splice(1,1)
[44]
a
(3) [11, 55, 66]
a.splice(0,1,2)
[11]
a
(3) [2, 55, 66]
var a=['a','b','c','d','e']
undefined
a.splice(0,2,2,4) //多余两个数字的时候 就有了别的含义 从某个位置开始，删除几个元素，替换为后边的元素
(2) ["a", "b"]//从索引为0的元素开始，向后删除2个元素，替换为2,4
a
(5) [2, 4, "c", "d", "e"]

6.push和pop

push添加元素到数组末尾 和concat一样呀 感觉

pop删除数组里的元素

x.push(value, ...)  压栈
x.pop()             弹栈  

var a=['a','b','c','d','e']
undefined
a.push(44,55)
7
a
(7) ["a", "b", "c", "d", "e", 44, 55]
a.pop(55)
55

7.shift和unshift

unshift是将value值插入到数组x的开始

shift是将数组x的第一个元素删除

var a=['a','b','c','d','e']
a.shift() //删除a数组的第一个元素
"a"
a
(4) ["b", "c", "d", "e"]
a.shift('c')
"b"
a
(3) ["c", "d", "e"]
a.unshift('a') //插入一个元素到数组的开头 开头
4
a
(4) ["a", "c", "d", "e"]

 5. 字典

//和Python用法一样
a={'k1':'V1','K2':'V2'}
{k1: "V1", K2: "V2"}
a['k1']
"V1"

6.null

老师说涉及对象呢，涉及对象无小事，要放在以后讲呢

7.undefind

//当一个变量只声明未赋值 或者一个函数没有返回值的时候  才是undefind
var a 
console.log(a);

来举例走起吧

<script>
        var a
        console.log(a)
        console.log(typeof a) // js中的查看类型是typeof 哦 python是type哦  眼瞎的别混了哦
    </script>

运算符

算术运算符：
    +   -    *    /     %       ++        --   //i++  i+=1  i=i+1 是一样的 自加

比较运算符：
    >   >=   <    <=    !=    ==    ===   !==  //====全等于 数值和类型都一样

逻辑运算符：
     &&   ||   ！

赋值运算符：
    =  +=   -=  *=   /=

字符串运算符：
    +  连接，两边操作数有一个或两个是字符串就做连接运算

 

流程控制

if语句

if-else语句结构

if (表达式){
   语句１;
   ......
   } else{
   语句２;
   .....
   }

 

    if (1>2){
        console.log('true');
    }
    else{
        console.log('false');
}

 

 

 

if- else if - else语句结构

 

if (表达式1) {
    语句1;
}else if (表达式2){
    语句2;
}else if (表达式3){
    语句3;
} else{
    语句4;
}

 

var score=window.prompt('分数：'); //弹框输入数字
if (score > 90){
    console.log('厉害了');
}
else if (score > 80){
    console.log('可以哦');
}
else {
    console.log('是不是傻')
}

for循环

在js中有两种for循环

结构分别是

 for(初始表达式;条件表达式;自增或自减) //就用这种方式  习惯用这种方式在js里
    {
            执行语句
            ……
    }

for( 变量 in 数组或对象)
    {
        执行语句
        ……
    }

//第一种 循环时，循环的元素是索引 字典拿到的key

var a=[11,22,33,44,55,66];
for (var i=0;i<a.length;i++){
    console.log(i,a[i])
}

 

//第二种 循环时，
for(var i=0;i<10;i=i+1){
}
for(var i=0,i<10;i++){
}
//循环数组
a=[11,22,33,44,55]
for(var i=0;i<a.length;i++){

}

//这种循环不支持字典//

 while循环

while (条件){
    语句1；
    ...
}

  i=0;
    while (i<3){
        console.log(i);
        i++;
    }

 switch-case结构

switch基本格式
switch (表达式) {
    case 值1:语句1;break;
    case 值2:语句2;break;
    case 值3:语句3;break;
    default:语句4;
}

var score=window.prompt('分数');
console.log(typeof(score));

switch (score){
    case "90":console.log('厉害了');break; //这里的数字一定要加引号 ，因为输入的是字符串不然没法比较呢
    case "80":console.log('可以哦');break;
    case "70":console.log('还行吧');break;
    default:console.log('没戏啦');break;

}

异常处理

try {
    //这段代码从上往下运行，其中任何一个语句抛出异常该代码块就结束运行
}
catch (e) {
    // 如果try代码块中抛出了异常，catch代码块中的代码就会被执行。
    //e是一个局部变量，用来指向Error对象或者其他抛出的对象
}
finally {
     //无论try中代码是否有异常抛出（甚至是try代码块中有return语句），finally代码块中始终会被执行。
}

js的对象

在JavaScript中除了null和undefined以外其他的数据类型都被定义成了对象，也可以用创建对象的方法定义变量，String、Math、Array、Date、RegExp都是JavaScript中重要的内置对象，在JavaScript程序大多数功能都是基于对象实现的。

//是因为把一些数据类型和方法当成了对象 所以叫基于对象实现的吗
<script language="javascript">
var aa=Number.MAX_VALUE; 
//利用数字对象获取可表示最大数
var bb=new String("hello JavaScript"); 
//创建字符串对象
var cc=new Date();
//创建日期对象
var dd=new Array("星期一","星期二","星期三","星期四"); 
//数组对象
</script>

Date对象

创建date对象

//方法1：不指定参数
var nowd1=new Date();
alert(nowd1.toLocaleString( ));
//方法2：参数为日期字符串
var nowd2=new Date("2004/3/20 11:12");
alert(nowd2.toLocaleString( ));
var nowd3=new Date("04/03/20 11:12");
alert(nowd3.toLocaleString( ));
//方法3：参数为毫秒数
var nowd3=new Date(5000);
alert(nowd3.toLocaleString( ));
alert(nowd3.toUTCString());

//方法4：参数为年月日小时分钟秒毫秒
var nowd4=new Date(2004,2,20,11,12,0,300);
alert(nowd4.toLocaleString( ));//毫秒并不直接显示

Date对象 获取时间和日期

获取日期和时间
getDate()                 获取日
getDay ()                 获取星期
getMonth ()               获取月（0-11）
getFullYear ()            获取完整年份
getYear ()                获取年
getHours ()               获取小时
getMinutes ()             获取分钟
getSeconds ()             获取秒
getMilliseconds ()        获取毫秒
getTime ()                返回累计毫秒数(从1970/1/1午夜)

function getCurrentDate(){
        //1. 创建Date对象
        var date = new Date(); //没有填入任何参数那么就是当前时间
        //2. 获得当前年份
        var year = date.getFullYear();
        //3. 获得当前月份 js中月份是从0到11.
        var month = date.getMonth()+1;
        //4. 获得当前日
        var day = date.getDate();
        //5. 获得当前小时
        var hour = date.getHours();
        //6. 获得当前分钟
        var min = date.getMinutes();
        //7. 获得当前秒
        var sec = date.getSeconds();
        //8. 获得当前星期
        var week = date.getDay(); //没有getWeek
        // 2014年06月18日 15:40:30 星期三
        return year+"年"+changeNum(month)+"月"+day+"日 "+hour+":"+min+":"+sec+" "+parseWeek(week);
    }

alert(getCurrentDate());

//解决 自动补齐成两位数字的方法
    function changeNum(num){
    if(num < 10){
        return "0"+num;
    }else{
        return num;
    }

}
//将数字 0~6 转换成 星期日到星期六
    function parseWeek(week){
    var arr = ["星期日","星期一","星期二","星期三","星期四","星期五","星期六"];
    //             0      1      2      3 .............
    return arr[week];
}

设置日期和时间

//设置日期和时间
//setDate(day_of_month)       设置日
//setMonth (month)                 设置月
//setFullYear (year)               设置年
//setHours (hour)         设置小时
//setMinutes (minute)     设置分钟
//setSeconds (second)     设置秒
//setMillliseconds (ms)       设置毫秒(0-999)
//setTime (allms)     设置累计毫秒(从1970/1/1午夜)
    
var x=new Date();
x.setFullYear (1997);    //设置年1997
x.setMonth(7);        //设置月7
x.setDate(1);        //设置日1
x.setHours(5);        //设置小时5
x.setMinutes(12);    //设置分钟12
x.setSeconds(54);    //设置秒54
x.setMilliseconds(230);        //设置毫秒230
document.write(x.toLocaleString( )+"<br>");
//返回1997年8月1日5点12分54秒

x.setTime(870409430000); //设置累计毫秒数
document.write(x.toLocaleString( )+"<br>");
//返回1997年8月1日12点23分50秒

日期和时间的转换

日期和时间的转换:

getTimezoneOffset():8个时区×15度×4分/度=480;
返回本地时间与GMT的时间差，以分钟为单位
toUTCString()
返回国际标准时间字符串
toLocalString()
返回本地格式时间字符串
Date.parse(x)
返回累计毫秒数(从1970/1/1午夜到本地时间)
Date.UTC(x)
返回累计毫秒数(从1970/1/1午夜到国际时间)

Math对象

复制代码

//该对象中的属性方法 和数学有关.
   

abs(x)    返回数的绝对值。
exp(x)    返回 e 的指数。
floor(x)对数进行下舍入。
log(x)    返回数的自然对数（底为e）。
max(x,y)    返回 x 和 y 中的最高值。
min(x,y)    返回 x 和 y 中的最低值。
pow(x,y)    返回 x 的 y 次幂。
random()    返回 0 ~ 1 之间的随机数。
round(x)    把数四舍五入为最接近的整数。
sin(x)    返回数的正弦。
sqrt(x)    返回数的平方根。
tan(x)    返回角的正切。

//方法练习:
        //alert(Math.random()); // 获得随机数 0~1 不包括1.
        //alert(Math.round(1.5)); // 四舍五入
        //练习：获取1-100的随机整数，包括1和100
             //var num=Math.random();
             //num=num*10;
             //num=Math.round(num);
             //alert(num)
        //============max  min=========================
        /* alert(Math.max(1,2));// 2
        alert(Math.min(1,2));// 1 */
        //-------------pow--------------------------------
        alert(Math.pow(2,4));// pow 计算参数1 的参数2 次方.

function 函数对象 重点

 

function 函数名 (参数){
   函数体;
    return 返回值;
}

 

函数名的定义规则与标识符一致，大小写是敏感的
返回值必须使用return

可以使用变量、常量或表达式作为函数调用的参数
函数由关键字function定义

注意：js的函数加载执行与python不同，它是整体加载完才会执行，所以执行函数放在函数声明上面或下面都可以:

函数的调用

function func1(a,b){

    alert(a+b);
}

    func1(1,2);  //3
    func1(1,2,3);//3
    func1(1);    //NaN
    func1();     //NaN

    //只要函数名写对即可,参数怎么填都不报错.

-------------------面试题-----------
 function a(a,b){
    alert(a+b);
}

   var a=1;
   var b=2;
   a(a,b)

函数的内置对象argments

function add(a,b){

        console.log(a+b);//3
        console.log(arguments.length);//2
        console.log(arguments);//[1,2]

    }
    add(1,2)

    ------------------arguments的用处1 ------------------
    function nxAdd(){
        var result=0;
        for (var num in arguments){
            result+=arguments[num]
        }
        alert(result)

    }

    nxAdd(1,2,3,4,5)

//     ------------------arguments的用处2 ------------------

    function f(a,b,c){
        if (arguments.length!=3){
            throw new Error("function f called with "+arguments.length+" arguments,but it just need 3 arguments")
        }
        else {
            alert("success!")
        }
    }

    f(1,2,3,4,5)

匿名函数

（匿名函数）（直接调用）

 

 匿名函数的应用
    (function(){
        alert("tony");
    } )()

    (function(arg){
        console.log(arg);
    })('123')

 

BOM对象

 

window对象

所有浏览器都支持 window 对象。
概念上讲.一个html文档对应一个window对象.
功能上讲: 控制浏览器窗口的.
使用上讲: window对象不需要创建对象,直接使用即可.

windows对象方法

alert('填写需要弹出的消息')  // 显示带有消息和确定按钮的弹窗

confirm('填写弹窗的消息') //显示带有消息和确定,取消按钮的弹窗

prompt('请输入用户名：') //显示提示用户输入的输入框 

open() 打开一个新的浏览器窗口或查找一个已命名的窗口。 close() 关闭浏览器窗口。
setInterval()      按照指定的周期（以毫秒计）来调用函数或计算表达式。
clearInterval()    取消由 setInterval() 设置的 timeout。
setTimeout()       在指定的毫秒数后调用函数或计算表达式。
clearTimeout()     取消由 setTimeout() 方法设置的 timeout。
scrollTo()         把内容滚动到指定的坐标。

方法使用

//----------alert confirm prompt----------------------------
    //alert('aaa');
    
    /* var result = confirm("您确定要删除吗?");
    alert(result); */

    //prompt 参数1 : 提示信息.   参数2:输入框的默认值. 返回值是用户输入的内容.

    // var result = prompt("请输入一个数字!","haha");
    // alert(result);


    方法讲解:    
        //open方法 打开和一个新的窗口 并 进入指定网址.参数1 : 网址.
        //调用方式1
            //open("http://www.baidu.com");
        //参数1 什么都不填 就是打开一个新窗口.  参数2.填入新窗口的名字(一般可以不填). 参数3: 新打开窗口的参数.
            open('','','width=200,resizable=no,height=100'); // 新打开一个宽为200 高为100的窗口
        //close方法  将当前文档窗口关闭.
            //close();

定时器的创建和清除

setInterval() 方法会不停地调用函数，直到 clearInterval() 被调用或窗口被关闭。由 setInterval() 返回的 ID 值可用作 clearInterval() 方法的参数。

语法：<br>     setInterval(code,millisec)
其中，code为要调用的函数或要执行的代码串。millisec周期性执行或调用 code 之间的时间间隔，以毫秒计。

<input type="text" id="id1" onclick="begin()">
<button onclick="end()">停止</button>
<script>
function showtime() {
    var nowd2=new Date().toLocaleString(); //显示当前的时间
    var temp=document.getElementById('id1');
    temp.value=nowd2;

}
showtime();

var ID;
function begin() {
    if (ID==undefined){
        showtime();
        ID=setInterval(showtime,1000);
    }
}

function end() {
    clearInterval(ID);
    ID=undefined;
}

DOM对象

什么是HTML  DOM

•     HTML  Document Object Model（文档对象模型）
•     HTML DOM 定义了访问和操作HTML文档的标准方法
•     HTML DOM 把 HTML 文档呈现为带有元素、属性和文本的树结构（节点树)

DOM树

DOM的节点类型

 

 节点关系

节点查找

导航节点属性

'''

parentElement           // 父节点标签元素

children                // 所有子标签

firstElementChild       // 第一个子标签元素

lastElementChild        // 最后一个子标签元素

nextElementtSibling     // 下一个兄弟标签元素

previousElementSibling  // 上一个兄弟标签元素

'''