前端基础之javaScript

Posted 孟庆健

tags:

篇首语:本文由小常识网(cha138.com)小编为大家整理,主要介绍了前端基础之javaScript相关的知识,希望对你有一定的参考价值。

一、JS的引入的方式:

1.直接编写

  • <script></script>

2.导入文件

  • <script src="hello.js"></script>

二、JS的变量

  • 1.声明变量时不用声明变量类型,全都使用var关键字
  • 2.一行可以声明多个变量,并且可以是不同类型
  • 如:var name="yuan",age="20",job="lecturer";
  • 3.声明变量时,可以不用var。如果用var那么他是全局变量
  • 4.变量命名,首字符只能是字母,下划线,$美元符三选一,余下的字符可以是下划线,
  • 美元符号或任何字母或数字字符且区分大小写,x与X是两个变量

常量 :直接在程序中出现的数据值

 

 

三、标识符:

 

  • 由不以数字开头的字母、数字、下划线(_)、美元符号($)组成
  • 常用于表示函数、变量等的名称
  • 例如:_abc,$abc,abc,abc123是标识符,而1abc不是
  • javascript语言中代表特定含义的词称为保留字,不允许程序再定义为标识符

 

 

四、字符串类型

 

  • 是由Unicode字符、数字、标点符号组成的序列;字符串常量首尾由单引号或双引号括起;JavaScript中没有字符类型;常用特殊字符在字符串中的表达;
  • 字符串中部分特殊字符必须加上右划线\;常用的转义字符 \n:换行 \‘:单引号 \":双引号 \\:右划线

 

五、运算符:

算术运算符:

    • + - * / % ++ --

 

比较运算符:

    • > >= < <= != == === !==

 

逻辑运算符:

    • && || !

 

赋值运算符:

    • = += -= *= /=

 

字符串运算符:

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

 

 

六、分支结构:

 

  • if-else结构:

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

 

 

  • if-elif-else结构:

 


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

 

示例:
var score=window.prompt("您的分数:");

if (score>90){
    ret="优秀";
}else if (score>80){
    ret="良";
}else if (score>60){
    ret="及格";
}else {
    ret = "不及格";

}
alert(ret);

 

  • switch-case结构


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

 

switch(x){
case 1:y="星期一";    break;
case 2:y="星期二";    break;
case 3:y="星期三";    break;
case 4:y="星期四";    break;
case 5:y="星期五";    break;
case 6:y="星期六";    break;
case 7:y="星期日";    break;
default: y="未定义";
}

 


七、js字符串对象
字符串创建(两种方式)
(1)、变量=“字符串”
(2)、字符串对象名称=new String(字符串)

 

八、字符串对象的属性和函数

 

x.length -------获取字符串的长度
x.tolowerCase()------转为小写
x.toUpperCase()------转为大写
x.trim()----------去掉字符串两边的空格

 

---------字符串的查询方法
x.charAt(index) -----strl.charAt(index);-----获取指定位置字符,其中index为要获取的字符索引 如:console.log(s.charAt(1))

 

x.indexOf(findstr,index)-------查询字符串获取索引如:console.log(s.indexOf("l"))
x.lastIndexOf(findstr)

 


字符串处理方法
x.substr(start,length)-------start表示开始位置,length表示获取长度。如: console.log(s.substr(1,3))

 

x.substring(start,end)---------end是结束的位置 如:console.log(s.substring(1,3))

 


x.slice(start,end)--------切片操作字符串

 

示例:
var str1="abcdefgh";
var str2=str1.slice(2,4);
var str3=str1.slice(4);
var str4=str1.slice(2,-1);
var str5=str1.slice(-3,-1);


alert(str2); //结果为"cd"

alert(str3); //结果为"efgh"

alert(str4); //结果为"cdefg"

alert(str5); //结果为"fg"



x.replace(findstr,tpstr)-------字符串替换 如:console.log(s.replace("l","k"))



x.split();------------分割字符串

 

 

 

 

示列:
var str1="一,二,三,四,五,六,日"; 
var strArray=str1.split(",");
alert(strArray[1]);//结果为"二"



x.concat(addstr) ---------------拼接字符串 如: console.log(s.concat("lop"));
1、数组创建
创建数组的三种方式:
创建方式一:
var arrname = [元素0,元素1,...];   //var arr=[1,2,3];
创建方式二:
var arrname = new Array(元素0,元素1,...);//var test = new Array(100,"a",True);
创建方式三:
var arrname = new Array(长度);

          //  初始化数组对象:
                var cnweek=new Array(7);
                    cnweek[0]="星期日";
                    cnweek[1]="星期一";
                    ...
                    cnweek[6]="星期六";


2.数组对象的属性和方法

x.join(bystr);    -------将数组元素拼接成字符串

                          var arr1=[1, 2, 3, 4, 5, 6, 7];
                var str1=arr1.join("-");
                alert(str1);  //结果为"1-2-3-4-5-6-7" 

concat 方法:
x.concat(value,...)  ----- 

           var a = [1,2,3];
                  var b=a.concat(4,5) ;
                  alert(a.toString());  //返回结果为1,2,3            
                  alert(b.toString());  //返回结果为1,2,3,4,5


3.数组的排序:reverse sort:

       arr1.reverse(); //颠倒数组元素
alert(arr1.toString());
//结果为444,111,12,32

arr1.sort();    //排序数组元素
alert(arr1.toString());
//结果为111,12,32,444

===========================

arr=[1,5,2,100];

arr.sort();
alert(arr);
如果就想按着数字比较呢?

function intSort(a,b){
    if (a>b){
        return 1;//-1
    }
    else if(a<b){
        return -1;//1
    }
    else {
        return 0
    }
}

arr.sort(intSort);
alert(arr);




function IntSort(a,b){
    return a-b;
}
arr.sort(IntSort);

alert(arr);

 

 

 

 

 

1.数组切片:
x.slice(start,end)
//使用注解
//
//x代表数组对象
//start表示开始位置索引
//end是结束位置下一数组元素索引编号
//第一个数组元素索引为0
//start、end可为负数,-1代表最后一个数组元素
//end省略则相当于从start位置截取以后所有数组元素
如:
var arr1=[‘a‘,‘b‘,‘c‘,‘d‘,‘e‘,‘f‘,‘g‘,‘h‘];
var arr2=arr1.slice(2,4);
var arr3=arr1.slice(4);
var arr4=arr1.slice(2,-1);

alert(arr2.toString());
//结果为"c,d" 
alert(arr3.toString());
//结果为"e,f,g,h"
alert(arr4.toString());
//结果为"c,d,e,f,g"

2.删除子数组:
x.splice(start,deleteCount,value,...)

/使用注解

//x代表数组对象
//splice的主要用途是对数组指定位置进行删除和插入
//start表示开始位置索引
//deleteCount删除数组元素的个数
//value表示在删除位置插入的数组元素
//value参数可以省略 



var a = [1,2,3,4,5,6,7,8];
a.splice(1,2);    以索引1开始切两个元素

alert(a.toString());//a变为 [1,4,5,6,7,8]

a.splice(1,1);  以上面切除的结果为题,一索引为1开始切一个元素

alert(a.toString());//a变为[1,5,6,7,8]

a.splice(1,0,2,3);  以上面切除的结果为题,在索引为0的后面加上2,3

alert(a.toString());//a变为[1,2,3,5,6,7,8]

3.数组的push和pop
/push pop这两个方法模拟的是一个栈操作

//x.push(value, ...)  压栈
//x.pop()             弹栈      
//使用注解
//
//x代表数组对象
//value可以为字符串、数字、数组等任何值
//push是将value值添加到数组x的结尾
//pop是将数组x的最后一个元素删除


var arr1=[1,2,3];
arr1.push(4,5);
alert(arr1);
//结果为"1,2,3,4,5"
arr1.push([6,7]);
alert(arr1)
//结果为"1,2,3,4,5,6,7"
arr1.pop();
alert(arr1);
//结果为"1,2,3,4,5"

4.数组的shift和unshift:


//x.unshift(value,...)
//x.shift()
//使用注解

//x代表数组对象
//value可以为字符串、数字、数组等任何值
//unshift是将value值插入到数组x的开始
//shift是将数组x的第一个元素删除

var arr1=[1,2,3];
arr1.unshift(4,5);
alert(arr1);  //结果为"4,5,1,2,3"

arr1. unshift([6,7]);
alert(arr1);  //结果为"6,7,4,5,1,2,3"

arr1.shift();
alert(arr1);  //结果为"4,5,1,2,3"
1.创建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( ));//毫秒并不直接显示


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

实例练习:
 function too() {
            var date=new Date();
            var year=date.getFullYear();
            var month=date.getMonth();
            var day=date.getDate();
            var Hours=date.getHours();
            var minutes=date.getMinutes();
            var week=date.getDay();

            var arr=["星期日","星期一","星期二","星期三","星期四","星期五","星期六"]
            s=year+"-"+changemonth(month+1)+"-"+day+" "+Hours+":"+changeminutes(minutes)+" "+" "+arr[week];
            return s
        }
        function changemonth(num) {
            if (num<10){
                 return "0"+num
            }
            else{
                return num
            }

        }
        function changeminutes(num) {
            if (num<10){
                return "0"+num
            }
            else{
                return num
            }
        }
        console.log(too())



3.Date对象的方法--日期和时间的转换:

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

 console.log(Math.max(12,34,33));   返回数最高值
        console.log(Math.min(12,34,33));   返回数的最小值
          console.log(Math.floor(1.23));   对数进行下舍入
        console.log(Math.floor(1.63));
        console.log(Math.floor(1.00));
        console.log(Math.ceil(1.34));      对数进行上舍入
        console.log(Math.ceil(1.67));
        console.log(Math.exp(1));        e的指数
        console.log(Math.pow(2,3));      幂
        console.log(Math.pow(2,3));
        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 函数名 (参数){?<br> 函数体;
return 返回值;
}


功能说明:

  • 可以使用变量、常量或表达式作为函数调用的参数
  • 函数由关键字function定义
  • 函数名的定义规则与标识符一致,大小写是敏感的
  • 返回值必须使用return
  • Function 类可以表示开发者定义的任何函数。
用 Function 类直接创建函数的语法如下:

1
var 函数名 = new Function("参数1","参数n","function_body");
虽然由于字符串的关系,第二种形式写起来有些困难,但有助于理解函数只不过是一种引用类型,它们的行为与用 Function 类明确创建的函数行为是相同的。

示例:



function func1(name){
    alert(‘hello‘+name);
    return 8
}

    ret=func1("yuan");
    alert(ret);


var func2=new Function("name","alert(\"hello\"+name);")
func2("egon")

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



<script>
    //f(); --->OK

    function f(){
        console.log("hello")

    }

    f() //----->OK
</script>
Function 对象的属性
如前所述,函数属于引用类型,所以它们也有属性和方法。
比如,ECMAScript 定义的属性 length 声明了函数期望的参数个数。


alert(func1.length)

Function 的调用


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)
函数的内置对象arguments


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)
匿名函数

// 匿名函数
    var func = function(arg){
        return "tony";
    }

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

    (function(arg){
        console.log(arg);
  })(‘123‘)
window对象

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



Window 对象方法

alert()            显示带有一段消息和一个确认按钮的警告框。
confirm()          显示带有一段消息以及确认按钮和取消按钮的对话框。
prompt()           显示可提示用户输入的对话框。

open()             打开一个新的浏览器窗口或查找一个已命名的窗口。
close()            关闭浏览器窗口。

setInterval()      按照指定的周期(以毫秒计)来调用函数或计算表达式。
clearInterval()    取消由 setInterval() 设置的 timeout。
setTimeout()       在指定的毫秒数后调用函数或计算表达式。
clearTimeout()     取消由 setTimeout() 方法设置的 timeout。
scrollTo()         把内容滚动到指定的坐标。

十、DOM对象
DOM节点:
节点类型:
HTML文档中的每一个成分都是一个节点
在节点中,document与element节点是重点

节点查找:
直接查找节点:
document.getElementById("idname")
document.getElementsByTagName("tagname")
document.getElementsByName("name")
document.getElementsByClassName("name")

 

<div id="div1">

    <div class="div2">i am div2</div>
    <div name="yuan">i am div2</div>
    <div id="div3">i am div2</div>
    <p>hello p</p>
</div>

<script>

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

////支持;
//   var ele= div1.getElementsByTagName("p");
//   alert(ele.length);
////支持
//   var ele2=div1.getElementsByClassName("div2");
//   alert(ele2.length);
////不支持
//   var ele3=div1.getElementById("div3");
//   alert(ele3.length);
////不支持
//   var ele4=div1.getElementsByName("yuan");
//   alert(ele4.length)

</script>

 

注意:设计到寻找元素,注意<script>标签的位置!


导航节点的属性:
‘‘‘
parentElement 父节点标签元素
children 所有子标签
firstElementChild 第一个子标签元素
lastElementChild 最后一个子标签元素
nextElementtSibling 下一个兄弟标签元素
previousElementSibling 上一个兄弟标签元素
‘‘‘
注意,js中没有办法找到所有的兄弟标签

 

节点操作:
节点属性操作:
1.获取文本节点的值:innerText  innerHTML


绑定事件的方式:
方式1:
<!--事件绑定方式1-->
<div onclick="foo(this)">DIV</div>
<script>
    function foo(self) {

        console.log(self);
       // var ele=document.getElementsByTagName("div")[0];
       self.style.color="red";
    }
</script>

方式2:
<div class="c1">DIV2</div>

<script>

    // 事件绑定方式2:   标签对象.on事件=function(){}

    var ele=document.getElementsByClassName("c1")[0];

    ele.onclick=function () {
        console.log(this); // this 代指: 当前触发时间的标签对象;

        this.style.fontSize="30px"
    };

</script>


ul li 事件

<ul>
    <li>111</li>
    <li>222</li>
    <li>333</li>
    <li>444</li>
</ul>


<script>

 var eles_li=document.getElementsByTagName("li");

    var eles_li0=document.getElementsByTagName("li")[0];
    var eles_li1=document.getElementsByTagName("li")[1];
    var eles_li2=document.getElementsByTagName("li")[2];
    var eles_li3=document.getElementsByTagName("li")[3];

    eles_li0.onclick=function () {
        console.log(this)   //    this:<li>111</li>
    };

     eles_li1.onclick=function () {
        console.log(this)   //    this:<li>111</li>
    };
      eles_li2.onclick=function () {
        console.log(this)   //    this:<li>111</li>
   };
       eles_li3.onclick=function () {
        console.log(this)   //    this:<li>111</li>
    };





    // 改为for 循环:

    for (var i=0;i<eles_li.length;i++){

         eles_li[i].onclick=function () {
             console.log(i); // i 为什么是4?
             // console.log(this.innerText);
             //console.log(eles_li[i].innerText);
         }

    }

</script>

 

属性操作:
<div class="c1" id="d1">DIV</div>

<script>
    // 文本属性:
    var ele=document.getElementsByClassName("c1")[0];

    // ele.id="d2";


    // 取属性值
//    console.log(ele.getAttribute("id"));
//    console.log(ele.id);

    // 属性赋值:
    //ele.setAttribute("id","d2")
    //ele.id="d2";

    // class属性

    console.log(ele.className);
    ele.classList.add("hide");
    ele.classList.remove("hide");
</script>



属性操作2:
<div class="c1"><a href=‘‘>click</a></div>

<script>
    // 文本属性:
    var ele=document.getElementsByClassName("c1")[0];

     // innerText 取值操作
//     console.log(ele.innerText); // DIV
     // innerText 赋值操作
//     ele.innerText="Egon";

     //ele.innerText="<a href=‘‘>click</a>";
//============================================================
    // innerHTML 取值操作
    // console.log(ele.innerHTML)

    // innerHTML 赋值操作

//    ele.innerHTML="<a href=‘‘>click</a>";

    console.log(ele.innerText);
    console.log(ele.innerHTML);

</script>

 

以上是关于前端基础之javaScript的主要内容,如果未能解决你的问题,请参考以下文章

web前端开发JQuery常用实例代码片段(50个)

前端基础之JavaScript

前端之JavaScript

10个JavaScript代码片段,使你更加容易前端开发。

10个JavaScript代码片段,使你更加容易前端开发。

markdown Snippets.md是我最常用的HTML,CSS和JavaScript代码片段,用于前端Web开发