SlideShare a Scribd company logo
JavaScript – 基础下
刘遵强   | liuzunqiang@staff.hexun.com
Undefined Null Boolean Number String
Array Date RegExp Function
栈内存              堆内存

     11
(Number 类
                         object
    型)
   true        object
                object
(Boolean 类
    型)
    null
(Null 类型 )

               object
(Object 类型 )
     ‘hello’
(String 类型 )
  Undefined
(Undefined 类
      型)
函数详解 (1)
函数传参
 • 匿名函数
  – 函数带括号和不带括号的区别
函数返回值
 • 什么是函数返回值
  – 函数的执行结果
  – 可以没有 return
 • 一个函数应该只返回一种类型的值
函数详解 (2)
可变参(不定参): arguments
 • 参数的个数可变,参数数组
例子 1 :求和
 • 求所有参数的和
例子 2 : CSS 函数
 • 判断 arguments.length
 • 给参数取名,增强可读性
 • 取非行间样式 ( 不能用来设置 ) :
   – obj.currentStyle[attr]
   – getComputedStyle(obj, false)[attr]
 什么是定时器
  每隔一段时间,执行一次函数
  setInterval 、 clearInterval
  setTimeout 、 clearTimeout
  两种定时器的区别
定时器应用
例子
 • 简易数码时钟
   – Date 对象
 • QQ 资料框
   – 对象延时隐藏
课程应用
图片展示和轮播
 • 自动播放的选项卡
  – 左右按钮— 当前位置
         —
  – 自动播放— 移入暂停
         —
 • 下方小图位置计算
堆和栈
定时器基础及使用
函数可变参: arguments
函数返回值: return
本课练习 (1)
 基础
  • 页面加载后,自动开始每秒弹出一个比之前大 1 的数
    字
  • 写一个函数,返回所有参数的和
  • 写一个 css 函数,用于获取或设置对象的属性
    - 例如: css(oDiv,'width') 返回 div 的宽
        css(oDiv, 'width', '200px')   将 div 的宽设成 200
本课练习 (2)
必做
 •   简易网页时钟
 •   QQ 资料框效果
 •   自动播放的选项卡
 •   倒计时时钟
2012 年 07 月 20 日

More Related Content

What's hot

lambda/closure – JavaScript、Python、Scala 到 Java SE 7
lambda/closure – JavaScript、Python、Scala 到 Java SE 7lambda/closure – JavaScript、Python、Scala 到 Java SE 7
lambda/closure – JavaScript、Python、Scala 到 Java SE 7
Justin Lin
 
05 MapKit and Text Input
05 MapKit and Text Input05 MapKit and Text Input
05 MapKit and Text Input
Tom Fan
 
Ruby 使用手冊 (Part 1)
Ruby 使用手冊 (Part 1)Ruby 使用手冊 (Part 1)
Ruby 使用手冊 (Part 1)
Drake Huang
 
TQC+ 程式語言 Python 08:字串處理
TQC+ 程式語言 Python 08:字串處理TQC+ 程式語言 Python 08:字串處理
TQC+ 程式語言 Python 08:字串處理
neochen2701
 
03 Managing Memory with ARC
03 Managing Memory with ARC03 Managing Memory with ARC
03 Managing Memory with ARC
Tom Fan
 
Js is js(程劭非) (1)
Js is js(程劭非) (1)Js is js(程劭非) (1)
Js is js(程劭非) (1)looneyren
 
The ruby way iii
The ruby way iiiThe ruby way iii
The ruby way iiiDeng Peng
 
關於Import
關於Import關於Import
關於Import
志宇 許
 
Java 8 與 retrolambda
Java 8 與 retrolambdaJava 8 與 retrolambda
Java 8 與 retrolambda
Justin Lin
 
Hi Haskell
Hi HaskellHi Haskell
Hi Haskell
Jifeng Deng
 
Javascript share
Javascript shareJavascript share
Javascript share
Xu Mac
 
千呼萬喚始出來的 Java SE 7
千呼萬喚始出來的 Java SE 7千呼萬喚始出來的 Java SE 7
千呼萬喚始出來的 Java SE 7
Justin Lin
 
保哥線上講堂:LINQ 快速上手
保哥線上講堂:LINQ 快速上手保哥線上講堂:LINQ 快速上手
保哥線上講堂:LINQ 快速上手
Will Huang
 
Mark java script & jquery 基本入門
Mark   java script & jquery 基本入門Mark   java script & jquery 基本入門
Mark java script & jquery 基本入門LearningTech
 
Jasmine2
Jasmine2Jasmine2
TypeScript 綜合格鬥技
TypeScript 綜合格鬥技TypeScript 綜合格鬥技
TypeScript 綜合格鬥技
Will Huang
 
Ecma script edition5-小试
Ecma script edition5-小试Ecma script edition5-小试
Ecma script edition5-小试lydiafly
 
02 Objective-C
02 Objective-C02 Objective-C
02 Objective-C
Tom Fan
 
Java8 lambda
Java8 lambdaJava8 lambda
Java8 lambdakoji lin
 
Java script closures
Java script closuresJava script closures
Java script closuresskywalker1114
 

What's hot (20)

lambda/closure – JavaScript、Python、Scala 到 Java SE 7
lambda/closure – JavaScript、Python、Scala 到 Java SE 7lambda/closure – JavaScript、Python、Scala 到 Java SE 7
lambda/closure – JavaScript、Python、Scala 到 Java SE 7
 
05 MapKit and Text Input
05 MapKit and Text Input05 MapKit and Text Input
05 MapKit and Text Input
 
Ruby 使用手冊 (Part 1)
Ruby 使用手冊 (Part 1)Ruby 使用手冊 (Part 1)
Ruby 使用手冊 (Part 1)
 
TQC+ 程式語言 Python 08:字串處理
TQC+ 程式語言 Python 08:字串處理TQC+ 程式語言 Python 08:字串處理
TQC+ 程式語言 Python 08:字串處理
 
03 Managing Memory with ARC
03 Managing Memory with ARC03 Managing Memory with ARC
03 Managing Memory with ARC
 
Js is js(程劭非) (1)
Js is js(程劭非) (1)Js is js(程劭非) (1)
Js is js(程劭非) (1)
 
The ruby way iii
The ruby way iiiThe ruby way iii
The ruby way iii
 
關於Import
關於Import關於Import
關於Import
 
Java 8 與 retrolambda
Java 8 與 retrolambdaJava 8 與 retrolambda
Java 8 與 retrolambda
 
Hi Haskell
Hi HaskellHi Haskell
Hi Haskell
 
Javascript share
Javascript shareJavascript share
Javascript share
 
千呼萬喚始出來的 Java SE 7
千呼萬喚始出來的 Java SE 7千呼萬喚始出來的 Java SE 7
千呼萬喚始出來的 Java SE 7
 
保哥線上講堂:LINQ 快速上手
保哥線上講堂:LINQ 快速上手保哥線上講堂:LINQ 快速上手
保哥線上講堂:LINQ 快速上手
 
Mark java script & jquery 基本入門
Mark   java script & jquery 基本入門Mark   java script & jquery 基本入門
Mark java script & jquery 基本入門
 
Jasmine2
Jasmine2Jasmine2
Jasmine2
 
TypeScript 綜合格鬥技
TypeScript 綜合格鬥技TypeScript 綜合格鬥技
TypeScript 綜合格鬥技
 
Ecma script edition5-小试
Ecma script edition5-小试Ecma script edition5-小试
Ecma script edition5-小试
 
02 Objective-C
02 Objective-C02 Objective-C
02 Objective-C
 
Java8 lambda
Java8 lambdaJava8 lambda
Java8 lambda
 
Java script closures
Java script closuresJava script closures
Java script closures
 

Viewers also liked

Planificación Estratégica de Seguridad Ciudadana
Planificación Estratégica de Seguridad CiudadanaPlanificación Estratégica de Seguridad Ciudadana
Planificación Estratégica de Seguridad Ciudadana
AmCham Guayaquil
 
La cenicienta
La cenicientaLa cenicienta
La cenicientaLv15
 
Seminario biologia 1
Seminario biologia 1Seminario biologia 1
Seminario biologia 1andres940725
 
Carrera solidaria 2013
Carrera solidaria 2013Carrera solidaria 2013
Carrera solidaria 2013Maribel Diaz
 
Universidade federal de alagoas
Universidade federal de alagoas Universidade federal de alagoas
Universidade federal de alagoas
Cristovao Santos
 
Mensuração de renda no sistema integrado de pesquisa domicilar (sipd)
Mensuração de renda no sistema integrado de pesquisa domicilar (sipd)Mensuração de renda no sistema integrado de pesquisa domicilar (sipd)
Mensuração de renda no sistema integrado de pesquisa domicilar (sipd)UNDP Policy Centre
 
Faculdade integrada avm teoria da alfabetizacao
Faculdade integrada avm  teoria da alfabetizacaoFaculdade integrada avm  teoria da alfabetizacao
Faculdade integrada avm teoria da alfabetizacaolicenciaturaavm
 
Analisis financiero geol_limitada[1]
Analisis financiero geol_limitada[1]Analisis financiero geol_limitada[1]
Analisis financiero geol_limitada[1]sebas1208
 
Una visió panoràmica d'Amèrica del Nord i els Estats Units / ACC1Ó
Una visió panoràmica d'Amèrica del Nord i els Estats Units / ACC1ÓUna visió panoràmica d'Amèrica del Nord i els Estats Units / ACC1Ó
Una visió panoràmica d'Amèrica del Nord i els Estats Units / ACC1Ó
Agència per a la Competitivitat de l'empresa - ACCIÓ
 
NEFA dv TB
NEFA dv TBNEFA dv TB
NEFA dv TB
acparma
 
Test
TestTest
Filochofando
FilochofandoFilochofando
Filochofandosimelaco
 

Viewers also liked (20)

Guiao entrevista rapariga
Guiao entrevista raparigaGuiao entrevista rapariga
Guiao entrevista rapariga
 
Planificación Estratégica de Seguridad Ciudadana
Planificación Estratégica de Seguridad CiudadanaPlanificación Estratégica de Seguridad Ciudadana
Planificación Estratégica de Seguridad Ciudadana
 
Slides b
Slides bSlides b
Slides b
 
La cenicienta
La cenicientaLa cenicienta
La cenicienta
 
Seminario biologia 1
Seminario biologia 1Seminario biologia 1
Seminario biologia 1
 
Àlbum de fotografies
Àlbum de fotografiesÀlbum de fotografies
Àlbum de fotografies
 
Sched lgu
Sched lguSched lgu
Sched lgu
 
Carrera solidaria 2013
Carrera solidaria 2013Carrera solidaria 2013
Carrera solidaria 2013
 
La Femme 18
La Femme 18La Femme 18
La Femme 18
 
Universidade federal de alagoas
Universidade federal de alagoas Universidade federal de alagoas
Universidade federal de alagoas
 
Mensuração de renda no sistema integrado de pesquisa domicilar (sipd)
Mensuração de renda no sistema integrado de pesquisa domicilar (sipd)Mensuração de renda no sistema integrado de pesquisa domicilar (sipd)
Mensuração de renda no sistema integrado de pesquisa domicilar (sipd)
 
Faculdade integrada avm teoria da alfabetizacao
Faculdade integrada avm  teoria da alfabetizacaoFaculdade integrada avm  teoria da alfabetizacao
Faculdade integrada avm teoria da alfabetizacao
 
Analisis financiero geol_limitada[1]
Analisis financiero geol_limitada[1]Analisis financiero geol_limitada[1]
Analisis financiero geol_limitada[1]
 
Una visió panoràmica d'Amèrica del Nord i els Estats Units / ACC1Ó
Una visió panoràmica d'Amèrica del Nord i els Estats Units / ACC1ÓUna visió panoràmica d'Amèrica del Nord i els Estats Units / ACC1Ó
Una visió panoràmica d'Amèrica del Nord i els Estats Units / ACC1Ó
 
Texto
TextoTexto
Texto
 
NEFA dv TB
NEFA dv TBNEFA dv TB
NEFA dv TB
 
Test
TestTest
Test
 
Sistemes de retribució variables
Sistemes de retribució variablesSistemes de retribució variables
Sistemes de retribució variables
 
Filochofando
FilochofandoFilochofando
Filochofando
 
La relació amb l'inversor
La relació amb l'inversorLa relació amb l'inversor
La relació amb l'inversor
 

Similar to Javascript 培训第三节 基础下

Ecmascript
EcmascriptEcmascript
Ecmascript
jay li
 
flagboot learning framework technology sharing
flagboot learning framework technology sharingflagboot learning framework technology sharing
flagboot learning framework technology sharing
xastraxastra
 
Java Script 引擎技术
Java Script 引擎技术Java Script 引擎技术
Java Script 引擎技术
bigqiang zou
 
Javascript 培训第二节 基础上
Javascript 培训第二节 基础上Javascript 培训第二节 基础上
Javascript 培训第二节 基础上liziqi7
 
2, object oriented programming
2, object oriented programming2, object oriented programming
2, object oriented programming
ted-xu
 
Java SE 7 技術手冊投影片第 04 章 - 認識物件
Java SE 7 技術手冊投影片第 04 章 - 認識物件Java SE 7 技術手冊投影片第 04 章 - 認識物件
Java SE 7 技術手冊投影片第 04 章 - 認識物件
Justin Lin
 
前端测试
前端测试前端测试
前端测试
frontwindysky
 
前端测试
前端测试前端测试
前端测试
Zheng Biao
 
從模組到類別
從模組到類別從模組到類別
從模組到類別
Justin Lin
 
[圣思园][Java SE]Reflection
[圣思园][Java SE]Reflection[圣思园][Java SE]Reflection
[圣思园][Java SE]ReflectionArBing Xie
 
C++中级培训胶片
C++中级培训胶片C++中级培训胶片
C++中级培训胶片ff1
 
functional-scala
functional-scalafunctional-scala
functional-scala
wang hongjiang
 
Java 網路程式
Java 網路程式Java 網路程式
Java 網路程式
PingLun Liao
 
Javascript oop-o52tiger
Javascript oop-o52tigerJavascript oop-o52tiger
Javascript oop-o52tiger
o52tiger
 
Pytables
PytablesPytables
Pytables
gowell
 
Spark tutorial
Spark tutorialSpark tutorial
Spark tutorial
Lin JiaMing
 
ES5 introduction
ES5 introductionES5 introduction
ES5 introduction
otakustay
 
IOS入门分享
IOS入门分享IOS入门分享
IOS入门分享
zenyuhao
 

Similar to Javascript 培训第三节 基础下 (20)

Ecmascript
EcmascriptEcmascript
Ecmascript
 
flagboot learning framework technology sharing
flagboot learning framework technology sharingflagboot learning framework technology sharing
flagboot learning framework technology sharing
 
Java Script 引擎技术
Java Script 引擎技术Java Script 引擎技术
Java Script 引擎技术
 
Javascript 培训第二节 基础上
Javascript 培训第二节 基础上Javascript 培训第二节 基础上
Javascript 培训第二节 基础上
 
2, object oriented programming
2, object oriented programming2, object oriented programming
2, object oriented programming
 
Java SE 7 技術手冊投影片第 04 章 - 認識物件
Java SE 7 技術手冊投影片第 04 章 - 認識物件Java SE 7 技術手冊投影片第 04 章 - 認識物件
Java SE 7 技術手冊投影片第 04 章 - 認識物件
 
Sun java
Sun javaSun java
Sun java
 
前端测试
前端测试前端测试
前端测试
 
前端测试
前端测试前端测试
前端测试
 
從模組到類別
從模組到類別從模組到類別
從模組到類別
 
[圣思园][Java SE]Reflection
[圣思园][Java SE]Reflection[圣思园][Java SE]Reflection
[圣思园][Java SE]Reflection
 
C++中级培训胶片
C++中级培训胶片C++中级培训胶片
C++中级培训胶片
 
functional-scala
functional-scalafunctional-scala
functional-scala
 
Java 網路程式
Java 網路程式Java 網路程式
Java 網路程式
 
Javascript oop-o52tiger
Javascript oop-o52tigerJavascript oop-o52tiger
Javascript oop-o52tiger
 
Pytables
PytablesPytables
Pytables
 
LabView with Lego NXT
LabView  with Lego NXTLabView  with Lego NXT
LabView with Lego NXT
 
Spark tutorial
Spark tutorialSpark tutorial
Spark tutorial
 
ES5 introduction
ES5 introductionES5 introduction
ES5 introduction
 
IOS入门分享
IOS入门分享IOS入门分享
IOS入门分享
 

Javascript 培训第三节 基础下