Python学习(二十一) —— 前端之JavaScript

Posted 生命练习生

tags:

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

转载自http://www.cnblogs.com/liwenzhou/p/8004649.html

一、JavaScript概述

  1.JavaScript的历史

  • 1992年Nombas开发出C-minus-minus(C--)的嵌入式脚本语言(最初绑定在CEnvi软件中).后将其改名ScriptEase.(客户端执行的语言)
  • Netscape(网景)接收Nombas的理念,(Brendan Eich)在其Netscape Navigator 2.0产品中开发出一套livescript的脚本语言.Sun和Netscape共同完成.后改名叫Javascript
  • 微软随后模仿在其IE3.0的产品中搭载了一个JavaScript的克隆版叫Jscript.
  • 为了统一三家,ECMA(欧洲计算机制造协会)定义了ECMA-262规范.国际标准化组织及国际电工委员会(ISO/IEC)也采纳 ECMAScript 作为标准(ISO/IEC-16262)。从此,Web 浏览器就开始努力(虽然有着不同的程度的成功和失败)将 ECMAScript 作为 JavaScript 实现的基础。EcmaScript是规范.

  2.ECMAScript

年份 名称 描述
1997 ECMAScript 1 第一个版本
1998 ECMAScript 2 版本变更
1999 ECMAScript 3

添加正则表达式

添加tru/catch

  ECMAScript 4 没有发布
2009 ECMAScript 5

添加"strict mode"严格模式

添加JSON支持

2011 ECMAScript 5.1 版本变更
2015 ECMAScript 6 添加类和模块
2016 ECMAScript 7

增加指数运算符(**)

增加Array.prototype.includes

 

注:ES6就是指ECMAScript 6。

尽管 ECMAScript 是一个重要的标准,但它并不是 JavaScript 唯一的部分,当然,也不是唯一被标准化的部分。实际上,一个完整的 JavaScript 实现是由以下 3 个不同部分组成的:

  • 核心(ECMAScript) 
  • 文档对象模型(DOM) Document object model (整合js,css,html)
  • 浏览器对象模型(BOM) Broswer object model(整合js和浏览器)
  • Javascript 在开发中绝大多数情况是基于对象的.也是面向对象的.

简单地说,ECMAScript 描述了以下内容:

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

 

二、JavaScript引入方式

  1.Script标签内写代码

<script>
  // 在这里写你的JS代码
</script>

  2.引入额外的JS文件

<script src="myscript.js"></script>

 

三、JavaScript语言规范

  1.注释

// 这是单行注释

/*
这是
多行注释
*/

  2.结束符

JavaScript中的语句要以分号(;)为结束符。

 

四、JavaScript语言基础

  1.变量声明

1)JavaScript的变量名可以使用_,数字,字母,$组成,不能以数字开头。

2)声明变量使用 var 变量名; 的格式来进行声明

3)  不需要声名变量的类型

var name = "Alex";
var age = 18;

注意:

变量名是区分大小写的。

推荐使用驼峰式命名规则:单词首字母大写,第一个单词首字母小写 (nameAlexLi)

 

五、JavaScript数据类型

  JavaScript拥有动态类型

var x;  // 此时x是undefined
var x = 1;  // 此时x是数字
var x = "Alex"  // 此时x是字符串 

  数字类型

JavaScript不区分整型和浮点型,就只有一种数字类型。

var a = 12.34;
var b = 20;
var c = 123e5;  // 12300000  
var d = 123e-5;  // 0.00123

常用方法:

parseInt("123")  // 返回123
parseInt("ABC")  // 返回NaN,NaN属性是代表非数字值的特殊值。该属性用于指示某个值不是数字。
parseFloat("123.456")  // 返回123.456

  字符串

var a = "Hello"
var b = "world;
var c = a + b; 
console.log(c);  // 得到Helloworld

常用方法:

方法 说明
obj.length 返回长度
obj.trim() 移除空白
obj.trimLeft() 移除左边的空白
obj.trimRight() 移除右边的空白
obj.charAt(n) 返回第n个字符
obj.concat(value, ...) 拼接
obj.indexOf(substring, start) 子序列位置
obj.substring(from, to) 根据索引获取子序列
obj.slice(start, end) 切片
obj.toLowerCase() 小写
obj.toUpperCase() 大写
obj.split(delimiter, limit) 分割

 

拼接字符串一般使用“+”

  布尔类型

区别于Python,true和false都是小写。

var a = true;
var b = false;

  数组

类似于Python中的列表。

var a = [123, "ABC"];
console.log(a[1]);  // 输出"ABC"

 常用方法:

方法 说明
obj.length 数组的大小
obj.push(ele) 尾部追加元素
obj.pop() 获取尾部的元素
obj.unshift(ele) 头部插入元素
obj.shift() 头部移除元素
obj.slice() 切片
obj.reverse() 反转
obj.join(seq) 将数组元素连接成字符串
obj.concat(val, ...) 连接数组
obj.sort() 排序

遍历数组中的元素:

var a = [10,20,30,40];
for (var i=0;i < a.length;i++) {
    console.log(a[i]);
}

  对象

类似于(某方面类似)Python中的字典数据类型

var a = {name:"Alex",age=18};
console.log(a.name);
console.log(a["name"]);

遍历对象中的内容

var a = {"name": "Alex", "age": 18};
for (var i in a){
  console.log(i, a[i]);
}

  null和undefined

  • undefined表示的是当声明的变量未初始化时,该变量的默认值是undefined。还有就是函数无明确的返回值时,返回的也是undefined。
  • null表示值不存在

undefined表示声明了变量,但是还没有赋值。null声明了变量并且变量是空值。

  类型查询

typeof "abc"  // "string"
typeof null  // "object"
typeof true  // "boolean"
typeof 123 // "number"

typeof是一个一元运算符(就像++,--,!,- 等一元运算符),不是一个函数,也不是一个语句。

 

六、JavaScript运算符

  算术运算符

+ - * / % ++ --

  比较运算符

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

注意:

1 == "1";  // true
1 === "1";  // false

  逻辑运算符

&& || !
1 && 2;  // 2
0 && 2;  // 0
0 && false; // 0

2 || 0;  // 2
0 || 4;  // 4
\'a\' || 0;  // \'a\'

!0;  // true
!4;  // false

   赋值运算符

= += -= *= /=

 

七、JavaScript流程控制

  1.if - else

if (条件) {

  满足条件执行的事儿;

} else {

  不满足条件执行的事儿;

}

var a = 10;
if (a > 5) {
    console.log(”Yes");
} else {
    console.log("No");
}

  2.if - else if - else

if (条件1) {

  满足条件1执行的事儿;

} else if (条件2) {

  满足条件2执行的事儿;

} else {

  不满足条件执行的事儿;

}

var a = 10;
if (a < 5) {
console.log("a < 5");
} else if (a > 5) {
console.log("a > 5");
} else {
console.log("a = 5");
}

  3.switch

switch (变量) {

  case 值1:要做的事儿;break;

  case 值2:要做的事儿;break;

  default:条件都不满足默认执行的;

}

var day = 1
switch (day) {
    case 0:console.log("星期日");break;
    case 1:console.log("星期一");break;
    case 2:console.log("星期二");break;
    case 3:console.log("星期三");break;
    case 4:console.log("星期四");break;
    default:console.log("未知");
}

  4.for循环

for (声名变量;条件;i++) {

  循环要做的事儿;

}

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

  5.while循环

while (条件) {

  循环要做的事儿;

}

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

  6.三元运算

var 变量 = 条件 ? 值1 : 值2

var a = 1;
var b = 2;
var c = a > b ? a : b;
console.log(c);

 

八、函数

  1.定义函数

//  普通函数的定义
function f1() {
    console.log("Hello World!");
}

//  带参数的函数
function f2(a,b) {
    console.log(a + b);
}

//  带返回值的函数
function f3(a,b) {
    return a + b;
}
ret = f3(1,2);
console.log(ret);

//  匿名函数方式
var f4 = function(a,b) {
    return a + b;
}
f4(1,2);

//  立即执行函数
(function (a,b) {
    console.log(a + b);
})(1,2);

  2.函数的全局变量和局部变量

局部变量

在JavaScript函数内部声明的变量(使用 var)是局部变量,所以只能在函数内部访问它(该变量的作用域是函数内部)。只要函数运行完毕,本地变量就会被删除。

全局变量:

在函数外声明的变量是全局变量,网页上的所有脚本和函数都能访问它,在函数内部直接使用 变量名=值 声名的是全局变量,不推荐使用。

变量生存周期:

JavaScript变量的生命期从它们被声明的时间开始。

局部变量会在函数运行以后被删除。

全局变量会在页面关闭后被删除。

  3.作用域

首先在函数内部查找变量,找不到则到外层函数查找,逐步找到最外层。

几个例子:

1.

var city = "BeiJing";
function f() {
  var city = "ShangHai";
  function inner(){
    var city = "ShenZhen";
    console.log(city);
  }
  inner();
}

f();  //  ShenZhen

2.

var city = "BeiJing";
function Bar() {
  console.log(city);
}
function f() {
  var city = "ShangHai";
  return Bar;
}
var ret = f();
ret();  //  BeiJing

3.闭包

var city = "BeiJing";
function f(){
    var city = "ShangHai";
    function inner(){
        console.log(city);
    }
    return inner;
}
var ret = f();
ret();  //  ShangHai

 

九、内置对象和方法

  JavaScript中的所有事物都是对象:字符串、数字、数组、日期,等等。在JavaScript中,对象是拥有属性和方法的数据。

  1.自定义对象

类似于(某方面类似)Python中的字典数据类型

var a = {"name":"alex","age":18};
console.log(a.name);
console.log(a["name"];

遍历对象中的内容:

var a = {"name":"Alex","age":18};
for (var i in a) {
    console.log(i,a[i]);
}

创建对象:

var person = new Object();  // 创建一个person对象
person.name = "Alex";  // person对象的name属性
person.age=18;  //  person对象的age属性

扩展:

// 父类构造函数
var Car = function (loc) {
  this.loc = loc;
};

// 父类方法
Car.prototype.move = function () {
  this.loc ++;
};

// 子类构造函数
var Van = function (loc) {
  Car.call(this, loc);
};

// 继承父类的方法
Van.prototype = Object.create(Car.prototype);
// 修复 constructor
Van.prototype.constructor = Van;
// 扩展方法
Van.prototype.grab = function () {
  /* ... */
};

   2.Date对象

创建date对象

// 方法1:不指定参数
var d1 = new Date();
console.log(d1.toLocaleString());

// 方法2:参数为日期字符串
var d2 = new Date("2017/10/01 12:00:00");
console.log(d2);
var d3 = new Date("04/03/17 11:11");
console.log(d3);

// 方法3:参数为毫秒数
var d4 = new Date(50000000);
console.log(d4);  // 中国时间标准格式
console.log(d4.toLocaleString());  // 中国时间当地格式
console.log(d4.toUTCString());  // 英国时间

// 方法4:参数为年月日小时分钟秒毫秒
var d5 = new Date(2017,11,1,8,30,0,300);
console.log(d5.toLocaleString());  //毫秒并不直接显示

Date对象的方法:

var d = new Date();
//getDate()                 获取日
//getDay ()                 获取星期
//getMonth ()               获取月(0-11)
//getFullYear ()            获取完整年份
//getYear ()                获取年
//getHours ()               获取小时
//getMinutes ()             获取分钟
//getSeconds ()             获取秒
//getMilliseconds ()        获取毫秒
//getTime ()                返回累计毫秒数(从1970/1/1午夜)
Date()    返回当日的日期和时间。
getDate()    从 Date 对象返回一个月中的某一天 (1 ~ 31)。
getDay()    从 Date 对象返回一周中的某一天 (0 ~ 6)。
getMonth()    从 Date 对象返回月份 (0 ~ 11)。
getFullYear()    从 Date 对象以四位数字返回年份。
getYear()    请使用 getFullYear() 方法代替。
getHours()    返回 Date 对象的小时 (0 ~ 23)。
getMinutes()    返回 Date 对象的分钟 (0 ~ 59)。
getSeconds()    返回 Date 对象的秒数 (0 ~ 59)。
getMilliseconds()    返回 Date 对象的毫秒(0 ~ 999)。
getTime()    返回 1970 年 1 月 1 日至今的毫秒数。
getTimezoneOffset()    返回本地时间与格林威治标准时间 (GMT) 的分钟差。
getUTCDate()    根据世界时从 Date 对象返回月中的一天 (1 ~ 31)。
getUTCDay()    根据世界时从 Date 对象返回周中的一天 (0 ~ 6)。
getUTCMonth()    根据世界时从 Date 对象返回月份 (0 ~ 11)。
getUTCFullYear()    根据世界时从 Date 对象返回四位数的年份。
getUTCHours()    根据世界时返回 Date 对象的小时 (0 ~ 23)。
getUTCMinutes()    根据世界时返回 Date 对象的分钟 (0 ~ 59)。
getUTCSeconds()    根据世界时返回 Date 对象的秒钟 (0 ~ 59)。
getUTCMilliseconds()    根据世界时返回 Date 对象的毫秒(0 ~ 999)。
parse()    返回1970年1月1日午夜到指定日期(字符串)的毫秒数。
setDate()    设置 Date 对象中月的某一天 (1 ~ 31)。
setMonth()    设置 Date 对象中月份 (0 ~ 11)。
setFullYear()    设置 Date 对象中的年份(四位数字)。
setYear()    请使用 setFullYear() 方法代替。
setHours()    设置 Date 对象中的小时 (0 ~ 23)。
setMinutes()    设置 Date 对象中的分钟 (0 ~ 59)。
setSeconds()    设置 Date 对象中的秒钟 (0 ~ 59)。
setMilliseconds()    设置 Date 对象中的毫秒 (0 ~ 999)。
setTime()    以毫秒设置 Date 对象。
setUTCDate()    根据世界时设置 Date 对象中月份的一天 (1 ~ 31)。
setUTCMonth()    根据世界时设置 Date 对象中的月份 (0 ~ 11)。
setUTCFullYear()    根据世界时设置 Date 对象中的年份(四位数字)。
setUTCHours()    根据世界时设置 Date 对象中的小时 (0 ~ 23)。
setUTCMinutes()    根据世界时设置 Date 对象中的分钟 (0 ~ 59)。
setUTCSeconds()    根据世界时设置 Date 对象中的秒钟 (0 ~ 59)。
setUTCMilliseconds()    根据世界时设置 Date 对象中的毫秒 (0 ~ 999)。
toSource()    返回该对象的源代码。
toString()    把 Date 对象转换为字符串。
toTimeString()    把 Date 对象的时间部分转换为字符串。
toDateString()    把 Date 对象的日期部分转换为字符串。
toGMTString()    请使用 toUTCString() 方法代替。
toUTCString()    根据世界时,把 Date 对象转换为字符串。
toLocaleString()    根据本地时间格式,把 Date 对象转换为字符串。
toLocaleTimeString()    根据本地时间格式,把 Date 对象的时间部分转换为字符串。
toLocaleDateString()    根据本地时间格式,把 Date 对象的日期部分转换为字符串。
UTC()    根据世界时返回 1970 年 1 月 1 日 到指定日期的毫秒数。
valueOf()    返回 Date 对象的原始值。
Date 对象方法

 练习:编写代码,将当前日期按“2017-12-27 11:11 星期三”格式输出。

function getNow() {
    var d = new Date();
    var dYear = d.getFullYear();
    var dMonth = d.getMonth();
    var dDate = d.getDate();
    var dHour = d.getHours();
    var dMinute = d.getMinutes();
    var dDay = d.getDay();
    if (dMinute < 10) {
        dMinute = "0" + dMinute;
    }
    var week = ["星期日","星期一","星期二","星期三","星期四","星期五","星期六"];
    console.log(dYear + "-" + dMonth + "-" + dDate + " " + dHour + ":" + dMinute + " " +week[dDay]);
}
View Code

   3.JSON对象

// JSON序列化和反序列化
var obj  = {"name":"Alex","age":18};

// JSON序列化
var str = JSON.stringify(obj);
console.log(str,typeof str);  // {"name":"Alex","age":18} string

// JSON反序列化
var o= JSON.parse(str);
console.log(o,typeof o);  // {name: "Alex", age: 18} "object"

   4.RegExp对象

创建RegExp对象的两种方式

// 第一种
var r1 = new RegExp("^[a-zA-Z][a-zA-Z0-9_]{5,11}$", "g");

// 第二种:简写方式
var r2 = /^[a-zA-Z][a-zA-Z0-9_]{5,11}$/g;
// 验证模式:g(global) 和 i(忽略大小写)

// RegExp对象的test方法,测试一个字符串是否符合对应的正则规则,返回值是true或false

var reg1 = /^[a-zA-Z][a-zA-Z0-9_]{5,11}$/g;
var s1 = "abc123";
console.log(reg1.test(s1));  // true
// 关于模式:g和i的简单示例
var s1 = "name:Alex age:18";

s1.replace(/a/, "哈哈哈");      // "n哈哈哈me:Alex age:18"
s1.replace(/a/g, "哈哈哈");     // "n哈哈哈me:Alex 哈哈哈ge:18"      全局匹配
s1.replace(/a/gi, "哈哈哈");    // "n哈哈哈me:哈哈哈lex 哈哈哈ge:18"  不区分大小写

// String对象与正则结合的4个方法
var s2 = "hello world";

s2.match(/o/g);         // ["o", "o"]             查找字符串中 符合正则 的内容
s2.search(/h/g);        // 0                      查找字符串中符合正则表达式的内容位置
s2.split(/o/g);         // ["hell", " w", "rld"]  按照正则表达式对字符串进行切割
s2.replace(/o/g, "s");  // "hells wsrld"          对字符串按照正则进行替换
// 注意事项1:
// 如果regExpObject带有全局标志g,test()函数不是从字符串的开头开始查找,而是从属性regExpObject.lastIndex所指定的索引处开始查找。
// 该属性值默认为0,所以第一次仍然是从字符串的开头查找。
// 当找到一个匹配时,test()函数会将regExpObject.lastIndex的值改为字符串中本次匹配内容的最后一个字符的下一个索引位置。
// 当再次执行test()函数时,将会从该索引位置处开始查找,从而找到下一个匹配。
// 因此,当我们使用test()函数执行了一次匹配之后,如果想要重新使用test()函数从头开始查找,则需要手动将regExpObject.lastIndex的值重置为 0。
// 如果test()函数再也找不到可以匹配的文本时,该函数会自动把regExpObject.lastIndex属性重置为 0。

var reg3 = /foo/g;
// 此时 regex.lastIndex=0
reg3.test(\'foo\'); // 返回true
// 此时 regex.lastIndex=3
reg3.test(\'foo\'); // 返回false
// 所以我们在使用test()方法校验一个字符串是否完全匹配时,不推荐添加全局匹配模式g。

// 注意事项2(说出来你可能不信系列):
// 当我们不加参数调用RegExpObj.test()方法时, 相当于执行RegExpObj.test("undefined"), 并且/undefined/.test()默认返回true。
var reg4 = /^undefined$/;
reg4.test(); // 返回true
reg4.test(undefined); // 返回true
reg4.test("undefined"); // 返回true

  5.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)      返回角的正切。

 

以上是关于Python学习(二十一) —— 前端之JavaScript的主要内容,如果未能解决你的问题,请参考以下文章

pyhon学习目录

Python学习(二十四)—— 前端基础之Bookstrap

Python学习(二十三)—— 前端基础之jQuery

Python学习(二十二)—— 前端基础之BOM和DOM

Docker最全教程之Python爬网实战(二十一)

python编程基础之二十一