一、JavaScript介绍 

前端三剑客之JavaScript,简称js,可能是这三个里面最难的一个了。很早以前,市面上流通着三种js版本,为了统一,ECMA(欧洲计算机制造协会)定义了规范的版本,即EcmaScript。

事实上ECMAScript只是JavaScript的一部分,完整的JavaScript是由以下三个部分组成的:

  核心(ECMAScript)

  文档对象模型(DOM)Document object model

  浏览器对象模型(BOM)Broswer object model

 

与html和css相比,js是一门成熟的编程语言,而且是前端唯一的一门编程语言。js的很多代码结构和Java相似,但是在语法上又没有很强制的要求,在使用中你会慢慢发现,这个东西很难会报错。既然是一门编程语言,就要从变量,数据类型,运算符,流程控制语句,函数(并不是所有的语言都有函数的概念),类和对象(js没有“类”)这些方面来入手学习。

二、ECMAScript(核心)

首先,js的注释和Java一样

  //单行注释

  /*多行注释*/

js的代码段是用大括号分割的,语句与语句之间用分号隔开,没有分号的话默认以换行符为分隔符。

1.变量

(1)声明变量时有var关键字,不用var关键字的话是全局变量,除非有需要,否则不建议用全局变量,会拖慢效率;

(2)变量要先声明,再定义,

  var i;

  i=10;

  或者简写成var i=10;(一般都这样处理)

(3)js还支持一行声明多个变量,并且可以是不同类型

  var i=10,j="zhang";

(4)如果声明一个变量x,却不给他赋值,打印的时候竟然也不报错,而是打印undefined

(5)变量的命名规范,这并不是某一种语言特有的,只要是变量,就会涉及这个问题,推荐一个匈牙利类型标记法:在变量名前加一个小写字母说明该变量的类型,后面的名字用驼峰命名法。

(6)变量命名:首字母必须是字母、下划线或者$三个中的一个,其余的可以是下划线、美元符号或者任何字母,数字。要避开关键字:

前端开发之JavaScript篇

2.数据类型

js中没有print,我们可以用alert(弹窗)或者console.log()(在浏览器的控制台打印)打印我们想要的结果

查看数据类型用typeof命令

var x=10;
console.log(typeof(x));

(1)js中有的数据类型有:

    基本数据类型:Number(数值),String(字符串),Boolean(布尔值),Null,Undefined

    引用数据类型:object

    js中并没有列表,元组,字典这种数据类型,列表和元组是以数组对象实现的

2)Number(数字类型)

不区分整型和浮点型;

(3)String(字符串类型)

由unicode字符、数字和标点符号组成的序列,特殊字符要加上反斜杠转义。

(4)Boolean(布尔类型)

布尔类型仅有两个值,true和false,在实际运算中,true=1,false=0

这个用在if判断语句后面,事实上if语句后面可以是任意数据类型,只要有布尔值就行了,这一点js和python一样,但是其他语言中,if后面必须是表达式

(5)null和undefined类型

undefined类型只有一个值,就是undefined,当函数没有明确返回值,或者声明的变量没有初识化的时候,就会产生这个值。

而null常出现在找不到对象的时候。        

3.运算符

js中的运算符和python中基本一样,说一说不一样的几个:

(1)i++和++i

这个学过c++的一定知道,没什么可说的,应该是为了考试才出的这种东西吧

  i++是先赋值再计算

  ++i是先计算再赋值

(2)"==="

首先在python中,如果这样一条语句

print(2=="2")

打印的结果一定是false,这是因为Python是一门强类型语言,不会自动转换变量的类型,但是,js是一种弱类型语言,在js中打印这个语句,结果会是true,因为js自动把数值类型的2转换成字符串类型的“2”,那么问题就来了,如果在js中,就是判断类型是否一样,不要自动转换,就用到了这个运算符“===”

在js的number类型中,还要一种数据类型是NaN类型,这是当遇到字符串转换成数字无效时得到的结果。比如:

var s="hello";
var ret2=+s;
console.log(ret2)

这样就会得到一个NaN

4.流程控制

(1)if条件语句

与Python不同的是,js中没有elif这种写法,多分支只能用else if

if (表达式){
    执行语句
}
else if(表达式){
    执行语句
}
else{
    执行语句
}

(2)switch-case语句

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

注意:值1,值2。。。。这些是确定的值,default是上述值都不是表达式的值的时候执行的语句;

  这个break是必要的,如果没有break,这些语句将都会执行

(3)while循环和for循环

while循环和Python一样,有三个要素:初始变量,判断条件,变量自加。就不多说了

说一下for循环

for循环方式一:条件循环(最常用)

for(var i=0;i<10;i++){
    console.log("i")
}

for循环方式二:遍历循环

var arr=["a","b","c"];
for (var i in arr){
    console.log(i)
}

这个结果打印的是索引值0,1,2

想取到数组里的值,可以用arr[i],关于数组对象,一会儿会专门说

这是数组,js中没有字典这种数据类型,但是有一种类似的写法和用法

var info={"a":123,"b":234,"c":345};
for (var i in info){
    console.log(i)
}

这种情况下,拿到的i就是“字典”中的“key”:a,b,c,取值同样是info[i]

5.对象

在我们学习了面向对象之后,应该有这种思想,见到“对象”这两个字,就马上想到对象有属性和方法。

(1)字符串对象

  创建方式有两种:        

        变量=“字符串”;  var str1="hello world"

        字符串对象名称=new String(字符串) var str1=new String("hello world")

  字符串对象就一个属性,length属性

方法:s为字符串对象

s.toLowerCase()    -----转成小写

s.toUpperCase()    -----转成大写

s.trim()         ------去除字符串两边空格

 

s.charAt()       ------获取指定位置字符,括号里为要获取的字符索引

s.indexOf()        -------查询指定字符的索引位置,括号里为要查找的字符

s.lastIndexOf()     -------跟上面这条功能一样,但是是反着找

s.match()        -------返回匹配字符串的数组,没有匹配到返回null

s.seach()        -------返回匹配到的字符串首字符的位置索引,匹配不到返回-1

 

s.substr(start,length)    截取指定长度字符串,start是开始位置的索引值,length表示长度

s.substring(start,end)    截取字符串,start是开始位置索引,end是结束位置索引,取之间的字符串

s.slice(start,end)      切片字符串

s.replace(oldstr,newstr)    替换字符串,(旧的,新的)

s.split()          分割字符串,结果放到一个数组中

s.concat(addstr)       拼接字符串,括号里为要拼接的字符串

演示:

s="hello";
    console.log(s.toLowerCase());       //hello
    console.log(s.toUpperCase());       //HELLO
    console.log(s.charAt(2));           //l
    console.log(s.indexOf("o"));        //4
    console.log(s.lastIndexOf("o"));    //4
    console.log(s.match("lo"));         //[object Array]["lo"]
    console.log(s.match("lol"));        //null
    console.log(s.search("lo"));        //3
    console.log(s.search("lol"));       //-1
    console.log(s.substr(1,3));         //ell
    console.log(s.substring(1,3));      //el
    console.log(s.slice(1,3)) ;         //el
    console.log(s.replace("ell","o")) ; //hoo
    console.log(s.split("e")) ;         //[object Array]["h", "llo"]
    console.log(s.concat("world")) ;    //helloworld

 

(2)数组对象(array对象)

创建数组的三种方式:  

  •   var  arr=[1,2,3];
  •         var arr=new Array[1,2,3];
  •         var arr=new Array(3);

      arr[0]=1;

      arr[1]=2;

      arr[2]=3;

还可以创建二维数组,类似一个列表,arr[ ] [ ],第一个索引为行,第二个索引为列

join方法:

  在Python中的join方法的用法是这样的:    

s1="hello"
s2="world"
s3="-".join([s1,s2])
print(s3)           #hello-world

  在js的数组中正好反过来,

console.log(["hello","world"].join("-"))    //hello-world

reverse方法和sort方法:

  都是对数组进行排序的,reverse是颠倒顺序,sort是按首字母的ascii码表位置排序

slice方法:

  对数组进行切片操作,参数为开始位置和结束位置的索引值

splice方法:

  删除子数组,有几个参数

  arr.splice(start,deleteCount,value)

  start代表开始位置(从开始位置后面开始删),deleteCount 表示删除数组元素的个数,value 表示在删除位置插入的数组元素(可省略)

push和pop方法:

  在数组的最后添加和删除元素

unshift和shift方法:

  在数组开始位置添加和删除元素

(3)时间对象

  创建时间对象:var timer = new Date()

  

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


//设置日期和时间
//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秒
时间对象

相关文章: