web程序设计 第三课 - javascript基础

Web程序设计(考研)

基本概念

javascript简介

JavaScript一种直译式脚本语言，是一种动态类型、弱类型、基于原型的语言，内置支持类型。它的解释器被称为JavaScript引擎，为浏览器的一部分，广泛用于客户端的脚本语言，最早是在HTML（标准通用标记语言下的一个应用）网页上使用，用来给HTML网页增加动态功能。

javascript使用

1. 内嵌写法：<script>console.log(1)</script>
2. 引入文件：<script src="./jquery-2.1.0.min.js"></script>

javascript数据类型

javascript是一种弱类型语言，并不对数据由很严格的区分。统一用var声明变量

Number类型

声明一个变量：var a = 1; var b = 1.0。相关的函数如下：

• parseInt：强制转换成整数
• parseFloat：强制转换成浮点型 浮点计算问题：1.79+0.12
• NaN：表示想表示成数字但是没有成功的数
• Number：Number类型的构造函数，注意parseInt和Number转换的区别

Math类型

Math大部分为静态方法，提供了一些与数学操作有关的函数：

• Math.floot：地板除
• Math.sqrt：数学开方运算
• Math.pow：数学幂运算

String类型

声明一个字符串类型：var a = "hyang";常见的字符串属性和方法如下，注意：字符串是可变类型，只能重新赋值

• str.length：字符串的长度
• str.toLowerCase：字符串变小写
• str.toUpperCase：字符串变大写
• str.indexOf：是否包含某个字符，返回位置，或者-1
• str.split：分割字符串
• str.charAt：返回指定位置上的字符，可以跟数组一个用法。
• str.slice：分割字符串

Array类型

声明一个数组类型：var arr = [1, 2, 3];请使用字面量声明方式，常见方法如下:

• arr.length：返回数组长度
• arr.sort：数组排序，根据return值排序
• arr.slice：数组分割
• arr.join：数组转换成字符串
• arr.indexOf：返回数组指定的内容的索引
• arr.push arr.pop，arr.shift, arr.unshift：数组的队列操作

Object类型

声明一个对象类型：var obj = {"name": "tgy"};建立一个对象/hash，访问方法 obj["name"];obj.name;循环的遍历for in；删除对象属性delete

Boolean类型

声明一个boolen类型 true, false；空值，0，NaN,undefined,null都是false类型；

Date类型

声明一个日期类型var date = new Date();主要的属性有：

• date.getFullYear：获得日期的年份
• date.getMonth：获得日期的月份(+1)
• date.getDate：获得日期的天数
• date.getDay：获得日期的星期

设计一个倒计时程序,见附录

Regex正则表达式

声明一个正则表达式类型，主要函数由test, match, replace等

Function函数

定义一个函数类型:

function main() {
    console.log("hello world");
} 
main();  
var main = function() {}
(function() {
    console.log("IIFE");
})() 

设置参数，访问参数arguments(类数组)。
变量的作用域：向上查找，没有块级作用域。变量的提升，函数的提升问题。this的指向问题

function Person(name, age) {
    this.name = name;
    this.age = age;
}
var per = new Person("tgy", 22);
console.log(per.name + per.age);  

变量提升与函数提升

在JS中，就是把定义在后面的东东（变量或函数）提升到前面中定义。
在javascript，变量有4种基本方式进入作用域：

1. 语言内置：所有的作用域里都有this和arguments；(译者注：经过测试arguments在全局作用域是不可见的)
2. 形式参数：函数的形式参数会作为函数体作用域的一部分；
3. 函数声明：像这种形式：function foo(){}；
4. 变量声明：像这样：var foo；

函数声明和变量声明总是会被解释器悄悄地被“提升”到方法体的最顶部。这个意思是，像下面的代码：

function foo() {  
    bar();  
    var x = 1;  
}   

实际上会被解释成：

function foo() {  
    var x;  
    bar();  
    x = 1;  
}  

javascript作用域

任何程序设计语言都有作用域的概念，简单的说，作用域就是变量与函数的可访问范围，即作用域控制着变量与函数的可见性和生命周期。在JavaScript中，变量的作用域有全局作用域和局部作用域两种。

全局作用域（Global Scope）

在代码中任何地方都能访问到的对象拥有全局作用域，一般来说以下几种情形拥有全局作用域：
（1）最外层函数和在最外层函数外面定义的变量拥有全局作用域，例如：

var name = "tgy";
function doSomthing() {
    var name = "lwq";
    function innerFunc() {
        console.log(name);
    }
    innerFunc();
}
console.log(name);

（2）所有末定义直接赋值的变量自动声明为拥有全局作用域(即没有使用var声明的变量)，例如：

function doSomething(){
    var name = "tgy";
    globalName = "hyy";
    console.log(name);
}
console.log(globalName);

变量globalName拥有全局作用域，而name在函数外部无法访问到。
（3）所有window对象的属性拥有全局作用域
　　一般情况下，window对象的内置属性都拥有全局作用域，例如window.name、window.location、window.top等等
　　

没有块级作用域

在javascript中是没有块级作用域这个概念的。例如下面：

for(var i = 0; i < 5; i++) {}
console.log(i);   //输出5

javascript运算

四则运算

1. 在javascript中+有着特殊的含义，不仅可以用于数字的相加，还可以用于字符串的连接。
2. 运算符涉及字符串的时候会调用Number转换函数尽心四则运算。

循环语句

1. 普通的数组遍历：

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

1. 对象的遍历：

var obj = {
    "name": "tgy",
    age: "12"
}
for(var prop in obj) {
    console.log(obj[prop]);
}

1. 循环语句的跳转：break，continue，label

条件分支语句

1. if...else语句

if(true) {
   //...
}else {
   //...
}

1. switch语句

switch(a) {
    case "A":
        //...
        break;
    default: 
        //...
}

附录

编程练习：

1. 给出任意位上的斐波那契数
2. 求1000以内的所有质数
3. 给出一个数组，返回数组从小到大的重新排列
4. 给出一个字符串，返回字符串的翻转结果
5. 求一组数中最大值
6. 打印9*9乘法表
7. 如果给定字符串为 string1,string2 letter格式则返回true
8. 给定一个字符串数组例如 ["a", "b", "a"], 要求返回删除重复项后的数组 ["a", "b"]
9. 汉诺塔游戏 A B C 三座塔
10. 给出一个字符串数组，求出其中的最长公共前缀子串。例如输入：["abc", "abcdf", "ac"]， 返回 "a"

答案见：编程练习程序代码答案

倒计时程序代码

function countDown(endTime) {
    var interval;
    var hEle = document.getElementById("h");
    var mEle = document.getElementById("m");
    var sEle = document.getElementById("s");
    function getRTime() {
        var nowTime = new Date();
        var t = endTime.getTime() - nowTime.getTime();
        if (t <= 0) {
            clearInterval(interval);
            return;
        }
        var h = String(Math.floor(t / 1000 / 60 / 60 % 24));
        var m = String(Math.floor(t / 1000 / 60 % 60));
        var s = String(Math.floor(t / 1000 % 60));
        h = h.length === 1 ? "0" + h : h;
        m = m.length === 1 ? "0" + m : m;
        s = s.length === 1 ? "0" + s : s;
        hEle.textContent = h;
        mEle.textContent = m;
        sEle.textContent = s;
    }
    interval = setInterval(getRTime, 1000);
}