zoukankan      html  css  js  c++  java
  • 20150203+JS巩固与加强1-01

    image

    image

    JavaScript巩固与加强一

    第一天:JavaScript回顾+函数+作用域链+script代码执行+数组

    两链:作用域链+原型链

    一包:闭包

    第二天:事件编程

    第三天和第四天:面向对象+贪吃蛇游戏开发

    第五天:正则表达式

    一、简介

    1、为什么需要JavaScript?

    clip_image002

    2、什么是JavaScript

    JavaScript 是网景(Netscape)公司开发的一种基于客户端浏览器、面向(基于)对象、事件驱动式的网页脚本语言。

    客户端浏览器:

    HTML、CSS、JavaScript客户端语言

    PHP/Java/.NET服务器语言

    判断一种语言是客户端还是服务器端,主要看“它”在哪里运行

    JavaScript是一种面向对象的脚本语言

    事件驱动式

    3、JavaScript应用场景

    1)网页特效

    2)表单验证

    3)网页小游戏(超级玛丽、五子棋、坦克大战)

    4)服务器端编程(Ajax、Node.js)

    4、快速入门

    例1:通过JavaScript输出hello world

    clip_image004

    script标签:JavaScript标识符

    language:告诉浏览器在解析时采用哪种语言解析

    在现在的浏览中,可以不需要指定script中的language属性,因为浏览器默认识别到script标签会自动采用JavaScript引擎进行解析

    例2:通过script标签的src属性引入外部js文件

    clip_image006

    建议:在js中,如何确定js代码所放置的位置

    1)对于函数声明、类的定义、外部文件的导入,建议放在head标签中

    2)对应函数调用,代码执行建议放在body标签中

    二、JavaScript基本语法

    1、JavaScript基本格式

    1)JavaScript区分大小写

    var i与var I 是不同的

    2)JavaScript脚本程序须嵌入在HTML文件中

    3)JavaScript脚本程序中不能包含HTML标记代码

    如果想在javascript中使用html代码,可以采用document.write(“<h1>hello world</h1>”);

    4)每行写一条脚本语句

    document.write(‘hello’);alert(‘world’);

    5)语句末尾可以加分号(建议都加分号)

    document.write(‘hello world’)

    alert(‘hello javascript’);

    6)JavaScript脚本程序可以独立保存为一个外部文件

    public.js文件中,并通过script中的src属性直接引入

    2、变量

    变量是用来临时存储数值的容器,变量存储的数值是可以变化的

    变量必须要先声明才能使用,使用var声明变量

    错误的:

    alert(i);

    正确的:

    var i=10;

    alert(i);

    正确的:(只限全局,不推荐使用)

    i=10;

    alert(i)

    变量的命名规则:第一个字符必须是英文字母,或者是下划线(_),还可以是$美元符号,其后的字符,可以是英文字母,数字,下划线;变量名不能是JavaScript的保留字

    变量的作用域:全局变量、局部变量

    3、变量的数据类型

    JavaScript弱类型

    1)String 字符类型

    在PHP中,单引与双引是有区别的,但是在JavaScript中单引号与双引号都是一样的

    var str = “hello world”;

    var str = ‘hello world’;

    2)Number 整型、浮点型、双精度浮点型

    var i=10;

    var i=10.00

    3)Boolean true、false

    4)Undefined(变量声明,但未赋值)

    5)Null 空类型

    6)Object 对象类型(数组)

    clip_image008

    4、运算符

    1)算术运算符

    + - * / %

    ++ :自加

    -- :自减

    var i=10;

    alert(i++); //先执行在加加

    var i=10;

    alert(++i); //先加加在执行

    2)比较运算符

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

    ==:值相等,类型可以不同

    ===:全等于,要求值相等且类型要一致

    clip_image010

    3)逻辑运算符

    && || !

    4)赋值运算符

    = += -= *= /= %=

    5)字符串运算符

    +

    5、流程过程

    1)顺序结构

    例1:获取dom对象内容并更改其值

    clip_image012

    2)分支结构

    if else if else

    switch

    例2:判断当前是星期几

    clip_image014

    说明:

    在if结构中,既可以对固定值的判断也可以实现对范围的判断

    在switch,只能实现对固定值的判断

    3)循环结构

    for循环

    while循环

    do…while…循环

    for…in…循环

    例1:

    clip_image016

    什么时候用for循环,什么时候用while循环?

    对于已知循环次数,我们通常采用for循环结构

    对于未知循环次数,我们通常采用while循环结构

    do…while…与while的区别

    do…while…:先执行后判断

    while:先判断后执行

    从循环次数角度:

    do…while…始终要比while多执行一次

    练习:

    1、编写九九乘法表

    2、有一物,不知其数,三三数之余二,五五数之余三,七七数之余二,问物几何?(100以内)

    三、JavaScript中的函数

    1、函数分类

    1)系统函数

    2)自定义函数

    2、自定义函数

    使用函数前要先定义才能调用

    l 函数定义有三个部分:函数名,参数列表,函数体

    l 定义函数的格式

    function 函数名([参数1,参数2...]){

    函数执行部分;

    return 表达式;

    }

    3、函数的功能:

    1)代码重用

    2)模块化编程

    4、快速入门

    例1:在js中实现打招呼的程序

    clip_image018

    例2:由于以上代码有很多重复性代码,可以采用函数进行封装

    clip_image020

    例3:改进上题,实现对不同的人打不同的招呼

    clip_image022

    5、函数参数

    实参:在函数调用时,所传递的参数,我们称之为实参

    形参:函数定义时,所指定的参数,我们称之为形参

    例4:函数形参值的改变并不会影响实参(对象除外)

    clip_image024

    例5:改进例4

    从软件设计思想来看例4中的案例,发现其不满足“高内聚,低耦合”的软件设计思想

    高内聚低耦合:尽量不依赖外在因素运行且功能专一

    clip_image026

    6、函数在内存中的表现形式

    clip_image028

    说明:

    函数在内存中是一段连续的内存地址,放在代码段中,当我们在程序中定义函数时,系统会自动返回其在内存中的首地址,而调用或执行函数时,系统会自动寻找该地址并执行

    注:定义函数时,系统会自动返回该函数的首地址

    例6:其实我们函数也是一种特殊的量

    通过测试我们发现,变量可以存储任何数据的量,那么既然函数也是一种量,那么我就是说我们的变量也可以存储函数的首地址

    clip_image030

    通过执行i(),可以实现对函数的调用,代码如下:

    clip_image032

    例7:由于以上案例,在赋值过程,函数名称并无任何意义,所以可以去除

    clip_image034

    我们把没有名字的函数就称之为匿名函数

    说明:即使是匿名函数,只要其进行了定义,那么系统就会自动返回其函数的首地址

    7、自调用匿名函数

    clip_image036

    自调用匿名函数作用:

    在以后项目开发中,经常会引入各种各样的js代码库,如jQuery、Extjs、Dojo,可能在使用过程,就会产生函数冲突,为了解决函数冲突问题,我们通常采用自调用匿名函数解决此问题。

  • 相关阅读:
    1.14 作业
    1.12作业
    1.9 作业 矩阵转置与输出九宫格
    1.8 作业
    1.7 作业 打印菱形
    1.5 作业
    1.4作业 不同的年龄,不同的问候语
    PHP语言 -- 发起流程
    PHP语言 -- 新建流程
    PHP语言 -- 权限
  • 原文地址:https://www.cnblogs.com/lifushan/p/5423311.html
Copyright © 2011-2022 走看看