常见的编程思想

面向过程思想

通过程序的执行顺序为主线开发代码

优点：简单，易学，上手快。

缺点：多人合作不方便

面向对象思想

以组成项目的对象为主线进行开发。在面向对象的思想里面，所有的事物都看成对象。

优点：多人合作方便，代码冗余很少

缺点：学起来比面向过程复杂。

面向对象简介

OOP：面向对象编程（Object Oriented Programming），OOP，面向对象编程

OOAD：OOA和OOD

OOA: 面向对象分析(Object-Oriented Analysis,OOA)

OOD: 面向对象设计（Object-Oriented Design，OOD）

对象

对象是由属性和方法组成的

属性的本质就是变量

方法的本质就是函数

类

类是所有对象共同的属性和方法的组合。

我们在开发时候是通过调用对象的方法或属性来实现某个效果，要调用方法必须先有对象，要想有对象必须先有类。

开发顺序：类——（实例化）对象——调用对象的方法和属性。

类和对象的关系

通过类可以创建多个对象，类就类似于模具，一个模具制造很多形状一致的对象。

类是有父类和子类之分的

再比如：老师是类，语文老师也是类，老师是父类，语文老师是子类。

在PHP中实现类

语法

class 类名{

//属性

//方法

//常量

}

类名的命名规则

1. 以字母、下划线开头，后面跟的是字母、数字、下划线
2. 一般用帕斯卡命名法
3. 不能用PHP关键字做类名
4. 类名不区分大小写

实例化对象

实例化：创造实例（对象）的过程

通过new关键字实例化

$对象名=new 类名()

例题

对象的传递

对象的传递的地址传递

操作属性

对象调用属性和方法使用“->”，

语法：

对象名->属性

对象名->方法名()

<?php

//类

class Student {

public $name; //语法结构：访问修饰符+变量名

}

//实例化

$stu1=new Student; //类名后不加()也可以

$stu2=new Student(); //类名后加()也可以

$stu1->name=’tom’; //操作1、给属性赋值

echo $stu1->name,'<br>’; //tom //操作2、显示属性的值

$stu1->add=’beijing’; //操作3、给stu1对象添加add属性

unset($stu2->name); //操作4、删除stu2对象的name属性

var_dump(isset($stu1->name));//bool(true) //操作5：判断属性是否存在

定义方法

语法结构

访问修饰符 function 方法名(参数){

//方法体

}

例题

对象的比较

全等：指向同一个对象是全等

相等：只要属于同一个类，结构和属性值都一致才相等

访问修饰符

用来修饰属性和方法，控制属性和方法的权限

例题一

脚下留心：一般来说，属性都是私有的，通过公有的方法对私有的属性进行赋值和取值。这样做可以在方法中对数据进行过滤，提高数据安全性。

<?php

class Student {

public $name; //私有属性

public $sex; //私有属性

//通过公有的方法进行赋值

public function setInfo($name,$sex) {

if($sex!=’男’ && $sex!=’女’){

echo ‘性别只能是男或女<br>’;

return;

}

$this->name=$name; //$this表示调用当前方法的对象

$this->sex=$sex;

}

//通过公有的方法进行取值

public function getInfo() {

echo ‘姓名：’.$this->name,'<br>’;

echo ‘性别：’.$this->sex.'<hr>’;

}

}

//调用

header(‘Content-Type:text/html;charset=utf-8’);

$stu1=new Student;

$stu1->setInfo(‘tom’,’男’);

$stu1->getInfo();

$stu2=new Student;

$stu2->setInfo(‘berry’,’女’);

$stu2->getInfo();

$this

$this在方法的内部使用，表示调用当前方法的对象。

构造函数

普通方法不调用就不执行

构造函数也叫构造方法，在实例化对象的时候自动调用执行

语法一：

Public function __construct(){

}

脚下留心：__construct()前面是两个下划线。

语法二：和类名同名的函数是构造函数

Public function 类名(){

}

例题

脚下留心：推荐使用__construct(),因为__construct()的优先级最高。

构造函数用来初始化成员变量

成员变量就是属性

析构函数

当对象销毁的时候自动调用

语法

Public function __destruct(){

}

代码

脚下留心：

1. 构造函数和析构函数是PHP自己调用，不能手动调用
2. 构造函数可以带有参数，析构函数不能带有参数。

多学一招：数据的存储和销毁分为两种情况:先进先出（队列）

先进后出（出入栈）

对象在内存中的分布

对象的本质就是复杂变量

类的本质就是复杂的数据类型

分析如下代码

<?php

class Student {

private $name;

private $sex;

public function show() {

echo ‘i am a student<br>’;

}

}

$stu1=new Student(); //将堆区的地址付给栈区的$stu1

$stu1->show();

$stu2=new Student();

$stu2->show();

在内存中结构

堆区特点：体积大，查询速度慢

栈区特点：体积小，查询速度快

基本数据类型的数据都存放在栈区中；复杂数据类型都存储在堆区中，但是堆区中的地址保存到栈区中。

继承

1. 代码具有层次结构
2. 子类继承了父类的属性和方法，实现了代码的可重用性。

语法

Class 子类 extends 父类{

}

继承的例题

<?php

//父类

class Person {

public $name=’tom’;

public function show() {

echo ‘i am a boy!’;

}

}

//子类

class Student extends Person {

}

//测试

$stu=new Student();

echo $stu->name,'<br>’;

$stu->show();

分析：$stu->name执行过程，首先在Student中寻找$name,如果找到就访问，如果找不到，就到Person类中找$name。

调用父类的属性和方法

在子类中通过$this关键字可以调用父类属性和方法

调用父类的构造方法

总结一句话：如果子类有构造方法就调用子类的，如果子类没有就调用父类的。

通过parent::__construct()调用父类的构造函数

Parent表示父类的名字

给父类传递参数

<?php

//父类

class Person {

protected $name;

protected $sex;

public function __construct($name,$sex) {

$this->name=$name;

$this->sex=$sex;

}

}

//子类

class Student extends Person {

private $score;

public function __construct($name,$sex,$score) {

parent::__construct($name,$sex);//调用父类的构造函数

$this->score=$score;

}

public function show() {

echo “姓名：{$this->name}<br>”;

echo “性别：{$this->sex}<br>”;

echo “成绩：{$this->score}<br>”;

}

}

//测试

header(‘Content-Type:text/html;charset=utf-8’);

$stu=new Student(‘tom’,’男’,88);

$stu->show();

运行结果

parent表示父类的名字

提醒：使用parent关键字可以降低程序的耦合性。

protected（受保护的）

protected修饰的在整个继承链上访问

$this

$this表示当前对象的引用（地址）

封装

通过访问修饰符来封装，有选择性的提供数据。

回顾

1. 函数预加载：在页面编译的时候就将函数编译到内存中，就可以先调用，再定义。
2. 通过arguments关键字可以实现传递的参数个数不一样
3. 事件：以on开头的都是事件
4. 事件后面肯定有事件处理程序，事件处理程序一般都是函数
5. 函数调用
   1. 方法一：<标签 事件=’函数()’>
   2. 方法二：对象.事件=函数
6. 匿名函数：没有名字的函数
7. 匿名函数自调用 (匿名函数)();
8. return
   1. 作用一：终止函数的执行
   2. 作用二：从函数内部将值返回到调用处
9. 变量的作用域
   1. 全局变量：供整个页面使用
   2. 局部变量：在函数内部使用变量，注意在函数内部通过var声明的变量是局部变量，不通过var声明的是全局变量。
10. Js嵌入到页面的方法
    1. 方法一：直接写在事件处理程序中 <p onclick=’alert(‘锄禾日当午’)’>
    2. 方法二：通过<script>开头，</script>结束嵌套在页面的内部
    3. 方法三：写在页面的外部，通过<script>标记引入到页面内部
11. 特殊含义的字符
    1. \r：回车
    2. \n：换行
    3. \t：制表位
12. 转义字符：\ 将具有特殊含义的字符转成普通字符
13. 对象：由属性（变量）和方法（函数）组成的组合。
    1. 对象.属性
    2. 对象.方法()

对象的分类

1. HTML：就是HTML元素
2. 脚本对象
3. 浏览器对象

脚本对象

Array（数组）

数组也属于对象

常用的一些方法与属性

<script type=”text/javascript”>

var stu=new Array(‘tom’,’berry’,’ketty’);

document.write(‘排序后:’+stu.sort()+'<br>’); //排序

document.write(‘翻转后:’+stu.reverse()+'<br>’); //反转

document.write(‘连接后：’+stu.join(‘>>>’)+'<br>’) //将数组元素连接起来

document.write(‘数组长度：’+stu.length+'<br>’); //数组的长度

stu.unshift(‘李白’);//在数组的前面插入

document.write(‘unshift：’+stu+'<br>’);

stu.shift(); //将数组的第一个元素删除

document.write(‘shift：’+stu+'<br>’);

stu.push(‘杜甫’); //将元素插入到数组的后面

document.write(‘push：’+stu+'<br>’);

stu.pop(); //删除数组的最后一个元素

document.write(stu);

</script>

String（字符串）

字符串的声明

方法一：把字符串当成基本类型直接赋值

方法二：把字符串当成对象来声明

字符串是基本类型，在字符串运行的时候会在内存中生成一个临时对象，通过临时对象调用属性和方法

1. 截取子字符串 语法： 字符串.substr(开始位置,[截取长度])

1. 截取子字符串 语法：字符串.substring(起始位置，结束位置)

例题

1. indexOf()：返回 String 对象内第一次出现子字符串的字符位置
2. lastIndexOf（）：返回字符串最后出现的位置

1. toLowerCase()：转成小写
2. toUpperCase()：转成大写

1. 字符串长度

多学一招：字符串可以当成字符数组来使用

Math（数学）

例题：产生一个1~100的随机整数

Date（日期）

Date()对象的方法有很多，我们可以把它分为3组

第一组：setXXX：设置时间

第二组：getXXX：获取时间

第三组：toXXX：转化时间格式

例题：获取当前时间

例题：转换时间格式

例题：上月的1号是星期几？

浏览器对象

浏览器的分层结构

window（窗口）

在浏览器对象中最顶层的对象。

脚下留心：由于window是最顶层对象，所以window可以省略。

document（文档）【重点】

1. window.document.write(‘’)；将字符串输出到浏览器上
2. document.bgColor=’#cccccc’; //背景色
3. document.fgColor=’#FF0000′; //前景色
4. 获取网页标签对象（重点）

例题：标签属性进行取值赋值

<input type=”text” id=”txt”>

<script type=”text/javascript”>

window.onload=function(){

var oTxt=document.getElementById(‘txt’);

oTxt.onblur=function(){

//alert(oTxt.value);

//alert(oTxt.type); //text

oTxt.type=’button’; //给属性赋值

oTxt.value=’确定’; //给属性赋值

}

}

</script>

结果：当文本框失去焦点的时候变成按钮

history（历史）

back ( ) 方法相当于后退按钮

forward ( ) 方法相当于前进按钮

go (1)代表前进1页，等价于forward( )方法；

go(-1) 代表后退1页，等价于back( )方法；

第一页

当前是第一页

<a href=”11-history2.html”>跳转到第二页</a>

第二页

<script type=”text/javascript”>

function myforward(){

//history.forward(); //前进一级 等价于

history.go(1);

}

</script>

当前是第二页

<a href=”11-history3.html”>跳转到第三页</a>

<input type=”button” value=”前进一级” onclick=’myforward()’>

第三页

<script type=”text/javascript”>

function myback(){

//history.back(); //返回上一级，等价于下一句

history.go(-1);

}

</script>

这是第三页<br>

<input type=”button” value=”返回一级” onclick=’myback()’><br>

<input type=”button” value=”返回两级” onclick=’history.go(-2)’>

location（地址）

location对象主要用来做页面的跳转

属性：href——设置或检索完整的 URL 字符串

方法：

assign(“url”)：跳转到指定页面

reload()：重新加载当前页面

replace(“url”) ：通过加载 URL 指定的文档来替换当前文档

例题：

<script type=”text/javascript”>

function jump1(){

//通过更改location的属性来跳转

alert(location.href); //当前的url地址

location.href=’4-生成1~100的随机整数.html’;

}

function jump2(){

//通过方法来跳转

location.assign(‘4-生成1~100的随机整数.html’);

}

function jump3(){

//将其他页面加载到当前窗口上来，reload()是用来做刷新的

//location.reload(‘4-生成1~100的随机整数.html’);

location.reload(); //刷新本页面

}

function jump4(){

//跳转完毕后不能点击”后退”按钮

location.replace(‘4-生成1~100的随机整数.html’);

}

</script>

<input type=”button” value=”href属性跳转” onclick=’jump1()’> <br>

<input type=”button” value=”assign()跳转” onclick=’jump2()’> <br>

<input type=”button” value=”reload()【刷新】” onclick=’jump3()’> <br>

<input type=”button” value=”replace()” onclick=’jump4()’>

screen（屏幕）【了解】

包含有关客户端显示屏幕的信息

注意：没有应用于 screen 对象的公开标准，不过所有浏览器都支持该对象。

width：返回显示器屏幕的宽度。

height：返回显示屏幕的高度。

availWidth：返回显示屏幕的宽度 (除 Windows 任务栏之外)。

availHeight：返回显示屏幕的高度 (除 Windows 任务栏之外)。

例题

<script type=”text/javascript”>

document.write(‘屏幕宽度：’+screen.width+'<br>’);

document.write(‘屏幕高度：’+screen.height+'<br>’);

document.write(‘屏幕宽度(不包含任务栏)：’+screen.availWidth+'<br>’);

document.write(‘屏幕高度(不包含任务栏)：’+screen.availHeight+'<br>’);

</script>

脚下留心：screen对象的属性都是只读属性

navigator（导航）【了解】

navigator 对象包含有关浏览器的信息。

注意：没有应用于 navigator 对象的公开标准，不过所有浏览器都支持该对象。

appCodeName：返回浏览器的代码名。

在所有以 Netscape 代码为基础的浏览器中，它的值是 “Mozilla”。为了兼容起见，在 Microsoft 的浏览器中，它的值也是 “Mozilla”。

appName：返回浏览器的名称。

appVersion：返回浏览器的平台和版本信息。

对象操作语句

this语句

this表示当前对象

with语句

with用来执行一组方法和属性，所有的属性和方法都属于with后面的对象

<script type=”text/javascript”>

with(document){

write(‘锄禾日当午<br>’);

write(‘汗滴禾下土<hr>’);

bgColor=’#cccccc’;

fgColor=’#FF0000′;

}

with(Math){

document.write(PI+'<br>’);

document.write(abs(-10)+'<br>’);

}

</script>

eval语句

用来执行字符串表达式

DOM和BOM

DOM：document object model 文档对象模型

BOM：brower object model 浏览器对象模型

DOM由HTMDOM，XMLDOM，CSSDOM组成

CSSDOM的语法结构：对象.style.样式属性

oDiv.style.width

oDiv.style.height

例题

表单验证

难点：

1. 验证表单的函数在表单提交的时候调用，表单提交的事件是onsubmit
2. Onsubmit事件后面如果return fasle就终止提交，return true就提交

代码

<script type=”text/javascript”>

function check(){

//验证用户名

var oUser=document.getElementById(‘username’); //获取用户名的文本框对象

if(oUser.value==”){

alert(‘用户名不能为空’);

oUser.focus(); //获取焦点

return false;

}

//验证密码

var oPwd=document.getElementById(‘pwd’); //获取密码对象

if(oPwd.value==”){

alert(‘密码不能为空’);

oPwd.focus();

return false

}else{

if(oPwd.value.length!=6 || isNaN(oPwd.value)){

alert(‘密码必须是6位的数字’);

oPwd.select(); //选中文本框的内容

return false;

}

}

return true;

}

</script>

<form action=”” method=’post’ onsubmit=’return check()’>

<table>

<tr>

<td>用户名：</td>

<td><input type=”text” id=”username”></td>

</tr>

<tr>

<td>密码：</td>

<td><input type=”password” id=”pwd”></td>

</tr>

<tr>

<td colspan=’2′ align=’center’>

<input type=”submit” value=”提交”>

</td>

</tr>

</table>

</form>

设置时钟周期

设置定时器

作业

1. 打印100以内的6的倍数，一行放7个
2. 求一元二次方程的根
3. 倒计时