《从0到1:JavaScript 快速上手》视频课,PPT课件,源码

  • 更新时间:
  • 8135人关注
  • 点击下载

给大家带来的是《从0到1:JavaScript 快速上手》视频课,PPT课件,源码,介绍了关于JavaScript、JavaScript入门、JavaScript方面的内容,本书是由人民邮电出版社出版,已被484人关注,由热心网友郑悦张 提供,目前本书在JavaScript类综合评分为:7.6分

资源详情相关推荐
《《从0到1:JavaScript 快速上手》视频课,PPT课件,源码》封面
  • 出版社:人民邮电出版社
  • 作者:莫振杰
  • 大小:1.2 GB
  • 类别:JavaScript
  • 热度:554
  • HTML5+CSS3+JavaScript 前端开发基础
  • Three.js开发指南:WebGL的JavaScript 3D库
  • JavaScript正则表达式迷你书 v1.1
  • JavaScript编程精解
  • Web编程基础:CSS、JavaScript、jQuery
  • 编辑推荐

    源自阅读量破6000万的人气教程 适合零基础初学者,1小时快速上手,7天轻松入门 通俗易懂,风趣幽默,原来前端还能这么玩儿 每一节都配有微视频,每一章都配有大量练习 同步视频 配套练习 课件PPT 源码素材 作者答疑 如果你需要的不是大而全,而是恰到好处的前端开发教程,那么不妨试着看一下这本书。本书源于作者在绿叶学习网分享的超人气在线教程。由于教程的风格独一无二、质量很高,因而累积获得超过十万读者的支持。为了更好地帮助零基础的小伙伴快速上手,每章后面都有习题,每一节都录制了配套的高质量视频,小伙伴们可直接扫码观看。本书的配套资源包括:习题答案、源码文件、配套PPT教学课件,以及各种工具手册。

    内容简介

    本书分为2大部分:第1部分是Java*基本语法,主要介绍流程控制、函数、字符串、数组等基本语法;第2部分是Java*核心技术,主要介绍DOM操作、事件操作、window对象、document对象等核心技术。为了让读者更好地掌握,本书还结合实际工作以及前端面试,精心挑选了大量高质量的练习题。此外,本书还专门配套了课件PPT以及各种工具手册,以便各大高校老师教学使用。

    作者简介

    莫振杰,毕业于暨南大学信科院计算机科学与技术专业,从事前后端开发4年多,开发过绿叶学习网、广州智能工程研究会网站、大量在线应用工具及其他各种类型网站,著有多本编程书且销量过万, 现为绿叶学习网的站长,该网站用于分享其在前后端开发中的一些经验,其制作的前后端开发在线教程在互联网引起广泛关注,每一个教程都广受网友称赞与推崇,今年还开发了系列前端线上付费课程。

    目录

    • 第 一部分 语法基础
    • 第 1 章 JavaScript 简介 3
    • 1.1 JavaScript 是什么 3
    • 1.1.1 JavaScript 简介 3
    • 1.1.2 教程介绍 4
    • 1.2 JavaScript 开发工具 5
    • 1.3 JavaScript 引入方式 7
    • 1.3.1 外部JavaScript 7
    • 1.3.2 内部JavaScript 8
    • 1.3.3 元素属性JavaScript 10
    • 1.4 一个简单的JavaScript 程序 11
    • 1.5 本章练习 13
    • 第 2 章 语法基础 14
    • 2.1 语法简介 14
    • 2.2 变量与常量 15
    • 2.2.1 变量 15
    • 2.2.2 常量 20
    • 2.3 数据类型 20
    • 2.3.1 数字 21
    • 2.3.2 字符串 21
    • 2.3.3 布尔值 24
    • 2.3.4 未定义值 25
    • 2.3.5 空值 26
    • 2.4 运算符 26
    • 2.4.1 算术运算符 27
    • 2.4.2 赋值运算符 31
    • 2.4.3 比较运算符 33
    • 2.4.4 逻辑运算符 34
    • 2.4.5 条件运算符 37
    • 2.5 表达式与语句 38
    • 2.6 类型转换 39
    • 2.6.1 “字符串”转换为“数字” 39
    • 2.6.2 “数字”转换为“字符串” 43
    • 2.7 转义字符 45
    • 2.8 注释 47
    • 2.8.1 单行注释 47
    • 2.8.2 多行注释 48
    • 2.9 本章练习 49
    • 第3 章 流程控制 51
    • 3.1 流程控制简介 51
    • 3.1.1 顺序结构 51
    • 3.1.2 选择结构 52
    • 3.1.3 循环结构 53
    • 3.2 选择结构:if 53
    • 3.2.1 单向选择:if... 54
    • 3.2.2 双向选择:if...else... 55
    • 3.2.3 多向选择:if...else if...else... 57
    • 3.2.4 if 语句的嵌套 58
    • 3.3 选择结构:switch 61
    • 3.4 循环结构:while 65
    • 3.5 循环结构:do...while 69
    • 3.6 循环结构:for 70
    • 3.7 实战题:判断一个数是整数,还是
    • 小数 73
    • 3.8 实战题:找出“水仙花数” 74
    • 3.9 本章练习 75
    • 第4 章 初识函数 77
    • 4.1 函数是什么 77
    • 4.2 函数的定义 79
    • 4.2.1 没有返回值的函数 79
    • 4.2.2 有返回值的函数 82
    • 4.2.3 全局变量与局部变量 83
    • 4.3 函数的调用 85
    • 4.3.1 直接调用 86
    • 4.3.2 在表达式中调用 87
    • 4.3.3 在超链接中调用 88
    • 4.3.4 在事件中调用 89
    • 4.4 嵌套函数 90
    • 4.5 内置函数 91
    • 4.6 实战题:判断某一年是否是闰年 92
    • 4.7 实战题:求出任意5 个数的最大值 93
    • 4.8 本章练习 94
    • 第5 章 字符串对象 96
    • 5.1 内置对象简介 96
    • 5.2 获取字符串长度 96
    • 5.3 大小写转换 98
    • 5.4 获取某一个字符 99
    • 5.5 截取字符串 101
    • 5.6 替换字符串 103
    • 5.7 分割字符串 105
    • 5.8 检索字符串的位置 109
    • 5.9 实战题:统计某一个字符的个数 111
    • 5.10 实战题:统计字符串中有多少个
    • 数字 112
    • 5.11 本章练习 113
    • 第6 章 数组对象 114
    • 6.1 数组是什么 114
    • 6.2 数组的创建 115
    • 6.3 数组的获取 115
    • 6.4 数组的赋值 116
    • 6.5 获取数组长度 118
    • 6.6 截取数组某部分 121
    • 6.7 添加数组元素 123
    • 6.7.1 在数组开头添加元素:unshift() 123
    • 6.7.2 在数组结尾添加元素:push() 124
    • 6.8 删除数组元素 126
    • 6.8.1 删除数组中第 一个元素:shift() 126
    • 6.8.2 删除数组最后一个元素:pop() 127
    • 6.9 比较数组大小 129
    • 6.10 颠倒数组顺序 130
    • 6.11 将数组元素连接成字符串 131
    • 6.12 实战题:数组与字符串的转换
    • 操作 133
    • 6.13 实战题:计算面积与体积,返回一个
    • 数组 134
    • 6.14 本章练习 135
    • 第7 章 时间对象 137
    • 7.1 时间对象简介 137
    • 7.2 操作年、月、日 139
    • 7.2.1 获取年、月、日 139
    • 7.2.2 设置年、月、日 141
    • 7.3 操作时、分、秒 143
    • 7.3.1 获取时、分、秒 143
    • 7.3.2 设置时、分、秒 144
    • 7.4 获取星期几 145
    • 7.5 本章练习 147
    • 第8 章 数学对象 148
    • 8.1 数学对象简介 148
    • 8.2 Math 对象的属性 148
    • 8.3 Math 对象的方法 150
    • 8.4 最大值与最小值 150
    • 8.5 取整运算 151
    • 8.5.1 向下取整:floor() 151
    • 8.5.2 向上取整:ceil() 153
    • 8.6 三角函数 154
    • 8.7 生成随机数 155
    • 8.7.1 随机生成某个范围内的“任意数” 156
    • 8.7.2 随机生成某个范围内的“整数” 156
    • 8.8 实战题:生成随机验证码 157
    • 8.9 实战题:生成随机颜色值 158
    • 8.10 本章练习 159
    • 第二部分 核心技术
    • 第9 章 DOM 基础 163
    • 9.1 核心技术简介 163
    • 9.2 DOM 是什么 163
    • 9.2.1 DOM 对象 163
    • 9.2.2 DOM 结构 164
    • 9.3 节点类型 165
    • 9.4 获取元素 166
    • 9.4.1 getElementById() 166
    • 9.4.2 getElementsByTagName() 168
    • 9.4.3 getElementsByClassName() 173
    • 9.4.4 querySelector() 和
    • querySelectorAll() 174
    • 9.4.5 getElementsByName() 177
    • 9.4.6 document.title 和
    • document.body 179
    • 9.5 创建元素 179
    • 9.6 插入元素 185
    • 9.6.1 appendChild() 185
    • 9.6.2 insertBefore() 187
    • 9.7 删除元素 189
    • 9.8 复制元素 191
    • 9.9 替换元素 193
    • 9.10 本章练习 194
    • 第 10 章 DOM 进阶 196
    • 10.1 HTML 属性操作(对象属性) 196
    • 10.1.1 获取HTML 属性值 196
    • 10.1.2 设置HTML 属性值 203
    • 10.2 HTML 属性操作(对象方法) 205
    • 10.2.1 getAttribute() 205
    • 10.2.2 setAttribute() 208
    • 10.2.3 removeAttribute() 209
    • 10.2.4 hasAttribute() 211
    • 10.3 CSS 属性操作 213
    • 10.3.1 获取CSS 属性值 213
    • 10.3.2 设置CSS 属性值 214
    • 10.3.3 最后一个问题 221
    • 10.4 DOM 遍历 224
    • 10.4.1 查找父元素 224
    • 10.4.2 查找子元素 226
    • 10.4.3 查找兄弟元素 230
    • 10.5 innerHTML 和innerText 232
    • 10.6 本章练习 235
    • 第 11 章 事件基础 237
    • 11.1 事件是什么 237
    • 11.2 事件调用方式 238
    • 11.2.1 在script 标签中调用 238
    • 11.2.2 在元素中调用事件 239
    • 11.3 鼠标事件 241
    • 11.3.1 鼠标单击 241
    • 11.3.2 鼠标移入和鼠标移出 243
    • 11.3.3 鼠标按下和鼠标松开 245
    • 11.4 键盘事件 246
    • 11.5 表单事件 248
    • 11.5.1 onfocus 和onblur 248
    • 11.5.2 onselect 251
    • 11.5.3 onchange 253
    • 11.6 编辑事件 256
    • 11.6.1 oncopy 256
    • 11.6.2 onselectstart 257
    • 11.6.3 oncontextmenu 258
    • 11.7 页面事件 259
    • 11.7.1 onload1 259
    • 11.7.2 onbeforeunload 262
    • 11.8 本章练习 263
    • 第 12 章 事件进阶 264
    • 12.1 事件监听器 264
    • 12.1.1 事件处理器 264
    • 12.1.2 事件监听器 265
    • 12.2 event 对象 273
    • 12.2.1 type 274
    • 12.2.2 keyCode 275
    • 12.3 this 277
    • 12.4 本章练习 281
    • 第 13 章 window 对象 282
    • 13.1 window 对象简介 282
    • 13.2 窗口操作 283
    • 13.2.1 打开窗口 284
    • 13.2.2 关闭窗口 289
    • 13.3 对话框 291
    • 13.3.1 alert() 291
    • 13.3.2 confirm() 292
    • 13.3.3 prompt() 293
    • 13.4 定时器 295
    • 13.4.1 setTimeout() 和
    • clearTimeout() 296
    • 13.4.2 setInterval() 和clearInterval() 300
    • 13.5 location 对象 304
    • 13.5.1 window.location.href 305
    • 13.5.2 window.location.search 306
    • 13.5.3 window.location.hash 307
    • 13.6 navigator 对象 308
    • 13.7 本章练习 311
    • 第 14 章 document 对象 312
    • 14.1 document 对象简介 312
    • 14.2 document 对象属性 312
    • 14.2.1 document.URL 313
    • 14.2.2 document.referrer 314
    • 14.3 document 对象方法 314
    • 14.3.1 document.write() 315
    • 14.3.2 document.writeln() 316
    • 14.4 本章练习 319
    • 附录A 字符串的方法 320
    • 附录B 数组的方法 321
    • 附录C 时间对象的方法 322
    • 附录D 数学对象的方法 323
    • 附录E 常用的随机数 324
    展开阅读
    精选笔记1:举例说明如何为JavaScript的方法参数设置默认值

    13小时35分钟前回答

    你是否遇到过这样的情况,写了个function,无参数。
     

    function showUserInfo(){
    alert("你好!我是小明。");
    }
    
    function showUserInfo(){ 
      alert("你好!我是小明。"); 
    } 
    
    

    调用:
     

    showUserInfo();
    
    showUserInfo(); 
    
    

    后来,发现其他地方也需要这个function,但是有变量值已经在function里面写死了,怎么办?加个参数吧。
     

    function showUserInfo(name){
    name=name||"小明";
    alert("你好!我是"+name+"。");
    }
    
    function showUserInfo(name){ 
      name=name||"小明"; 
      alert("你好!我是"+name+"。"); 
    } 
    
    

    说明一下:name=name||"小明" 这句代码的意思是如果name为null就等于默认值“小明”。也可以这样写:

    function showUserInfo(name){
    // name=name||"小明";
    if(!name){
    name="小明";
    }
    alert("你好!我是"+name+"。");
    }
    
    function showUserInfo(name){ 
    // name=name||"小明"; 
      if(!name){ 
        name="小明"; 
      } 
      alert("你好!我是"+name+"。"); 
    } 
    
    

     
    调用:
     

    showUserInfo('小李');
    
    showUserInfo('小李'); 
    
    

     
    后来,需求又变了,需要加上年龄。好吧再改:
     

    function showUserInfo(name,age){
    name=name||"小明";
    age=age||22;
    alert("你好!我是"+name+",今年"+age+"岁。");
    }
    
    function showUserInfo(name,age){ 
      name=name||"小明"; 
      age=age||22; 
      alert("你好!我是"+name+",今年"+age+"岁。"); 
    } 
    
    

    调用:
     

    showUserInfo('小李');//结果:你好!我是小李,今年22岁。
    showUserInfo('小李',19);//结果:你好!我是小李,今年19岁。
    showUserInfo(null,19);//结果:你好!我是小明,今年19岁。
    
    showUserInfo('小李');//结果:你好!我是小李,今年22岁。 
    showUserInfo('小李',19);//结果:你好!我是小李,今年19岁。 
    showUserInfo(null,19);//结果:你好!我是小明,今年19岁。 
    
    

     
    好了,如果我们需要再添加生日、电话、性别、QQ等等参数,又该怎么办呢?一个一个的设置默认值吗?实际上,我看到很多人确实是这样做的。下面我们来看一个更简单的方式。那就是使用Jquery的扩展。先看代码:
     

    function showUserInfo(setting){
    var defaultSetting={
    name:"小明",
    age:"22",
    sex:"男",
    phone:"13888888888",
    QQ:"12345678",
    birthday:"1980.12.29"
    };
    $.extend(defaultSetting,settings);
    var message='姓名:'+defaultSetting.name
    +',性别:'+defaultSetting.sex
    +',年龄:'+defaultSetting.age
    +',电话:'+defaultSetting.phone
    +',QQ:'+defaultSetting.QQ
    +',生日:'+defaultSetting.birthday
    +'。';
    alert(message);
    }
    
    
    function showUserInfo(setting){ 
      var defaultSetting={ 
        name:"小明", 
        age:"22", 
        sex:"男", 
        phone:"13888888888", 
        QQ:"12345678", 
        birthday:"1980.12.29" 
      }; 
       
      $.extend(defaultSetting,settings); 
       
      var message='姓名:'+defaultSetting.name 
          +',性别:'+defaultSetting.sex 
          +',年龄:'+defaultSetting.age 
          +',电话:'+defaultSetting.phone 
          +',QQ:'+defaultSetting.QQ 
          +',生日:'+defaultSetting.birthday 
          +'。'; 
      alert(message); 
    } 
    
    

    说明:$.extend(defaultSetting,settings)的作用就是将传入的setting配置与defaultSetting合并,并用setting中的配置覆盖defaultSetting的配置。
     
    调用:
     

    showUserInfo({
    name:"小李"
    });
    //结果:姓名:小李,性别:男,年龄:22,电话:13888888888,QQ:12345678,生日:1980.12.29。
    showUserInfo({
    name:"小红",
    sex:"女",
    phone:"13777777777"
    });
    //结果:姓名:小红,性别:女,年龄:22,电话:13777777777,QQ:12345678,生日:1980.12.29。
    
    
    
    
    showUserInfo({ 
      name:"小李" 
    }); 
    //结果:姓名:小李,性别:男,年龄:22,电话:13888888888,QQ:12345678,生日:1980.12.29。 
    showUserInfo({ 
      name:"小红", 
      sex:"女", 
      phone:"13777777777" 
    }); 
    //结果:姓名:小红,性别:女,年龄:22,电话:13777777777,QQ:12345678,生日:1980.12.29。 
    
    

     
    很简单吧!这样,就算有100个参数,都不怕了。
     
    那么什么时候使用多个参数,什么时候使用这样的参数对象呢?我的经验是,根据实际需要,如果使用一、两个参数就可以搞定的就不使用参数对象。超过3个,我就会使用这种参数对象。

    展开阅读
    精选笔记2:使用JavaScript实现链表的数据结构的代码

    16小时59分钟前回答

    链表(Linked list)是一种常见的基础数据结构,是一种线性表,但是并不会按线性的顺序存储数据,而是在每一个节点里存到下一个节点的指针(Pointer)   — 维基百科

    上面是维基百科对 链表 的解读。下面我们用 JavaScript 代码对链表的数据结构进行实现

    实现Node类表示节点

    /**
     * Node 类用来表示节点
     * element 用来保存节点上的数据
     * next 用来保存指向下一个节点的链接
     */
    function Node(element) {
     this.element = element;
     this.next = null;
    }
    LList类提供对链表操作的方法
    /**
     * LList 类提供了对链表进行操作的方法
     * 链表只有一个属性,
     * 使用一个 Node 对象来保存该链表的头节点。
     */
    class LList {
     constructor() {
      this.head = new Node('head');
     }
     // 查找节点
     find(item) {
      let currNode = this.head;
      while(currNode.element !== item) {
       currNode = currNode.next;
      }
      return currNode;
     }
     // 查找前一个节点
     findPre(item) {
      if(item === 'head') throw new Error('now is head!');
      let currNode = this.head;
      while (currNode.next && currNode.next.element !== item) {
       currNode = currNode.next;
      }
      return currNode;
     }
     // 插入新节点
     insert(newElement, item) {
      let newNode = new Node(newElement);
      let currNode = this.find(item);
      newNode.next = currNode.next;
      currNode.next = newNode;
     }
     // 删除一个节点
     remove(item) {
      let preNode = this.findPre(item);
      if(preNode.next !== null) {
       preNode.next = preNode.next.next;
      }
     }
     // 显示链表中的元素
     display() {
      let currNode = this.head;
      while(currNode.next !== null) {
       console.log(currNode.next.element);
       currNode = currNode.next;
      }
     }
    }

    测试代码

    const list = new LList(); 
    // LList { head: Node { element: 'head', next: null } }
    list.insert('0', 'head');
    list.insert('1', '0');
    list.insert('2', '1');
    list.insert('3', '2');
    list.remove('1');
    console.log(list); 
    // LList { head: Node { element: 'head', next: Node { element: '0', next: [Object] } } }
    console.log(list.display()); // 0 2 3
    console.log(list.findPre('1')); 
    // Node { element: '0', next: Node { element: '1', next: Node { element: '2', next: [Object] } } }

    上面就是用JavaScript对简单链表的数据结构的简单实现:smile:

    总结

    以上所述是小编给大家介绍的使用JavaScript实现链表的数据结构的代码,希望对大家有所帮助,如果大家有任何疑问请给我留言,小编会及时回复大家的。在此也非常感谢大家对码农之家网站的支持!

    展开阅读

    JavaScript相关资源

    • JavaScript高级程序设计

      JavaScript高级程序设计

      《 JavaScript高級编程设计(第3版) 》是JavaScript超級畅销书的*版。ECMAScript5和HTML5在规范之战中同时获胜,使很多特有保持和手机客户端拓展宣布进到标准,另外也为JavaScript增加了许多融入发展方

      大小:23 MBJS程序设计

      立即下载
    • JavaScript DOM编程艺术

      JavaScript DOM编程艺术

      非常畅销书全新升级,首版销售量确保。 书中详细说明开发Web运用的基石W3C的DOM标准,由提倡Web标准的大神领军人物执笔用心编写,表明了前端工程师的人生真谛,是学习培训JavaScript和DOM开发

      大小:109.2 MBJavaScript

      立即下载
    • HTML5+CSS3+JavaScript从入门到精通

      HTML5+CSS3+JavaScript从入门到精通

      本书以基础知识、示例、实战案例相结合的方式详尽讲述了HTML,CSS,JavaScript及目前最新的前端技术

      大小:186 MBweb开发

      立即下载
    • JavaScript高级程序设计(第4版)

      JavaScript高级程序设计(第4版)

      《JavaScript高级程序设计(第4版) 》是JavaScript经典图书的新版。第4版涵盖ECMAScript 2019,全面、深入地介绍了JavaScript开发者必须掌握的前端开发技术,涉及JavaScript的基础特性和高级特性。书中详尽讨论了JavaScript的各个方面,从JavaScript的起源开始,逐步讲解到新出现的技术,其中重点介绍ECMAScript和DOM标准。在此基础上,接下来的各章揭示了JavaScript的基本概念,包括类、期约、迭代器、代理,等等。另外,书中深入探讨了

      大小:122 MBJavaScript

      立即下载
    • 《从0到1:HTML+CSS+JavaScript快速上手》PPT课件,视频课

      《从0到1:HTML+CSS+JavaScript快速上手》PPT课件,视频课

      编辑推荐 源自阅读量破6000万的人气教程 适合零基础初学者,1小时快速上手,7天轻松入门 通俗易懂,风趣幽默,原来前端还能这么玩儿 每一节都配有微视频,每一章都配有大量练习 同步视频 配套练习 课件PPT 源码素材 作者答疑 如果你需要的不是大而全,而是恰到好处的前端开发教程,那么不妨试着看一下这本书。 本书源于作者在绿叶学习网分享的超人气在线教程。由于教程的风格独特、质量很高,因而累积获得超过十万读者的支持。为了更好地帮

      大小:4.4 GBWeb前端

      立即下载

    学习笔记

    7小时55分钟前回答

    JavaScript中的跨浏览器事件操作的基本方法整理

    绑定事件 EU.addHandler = function(element,type,handler){ //DOM2级事件处理,IE9也支持 if(element.addEventListener){ element.addEventListener(type,handler,false); } else if(element.attachEvent){ //type加'on' //IE9也可以这样绑定 element.attachEvent('on' + type,handler); } //DOM0级事件处理步,事件流也是冒泡 else{ element['on' + type] = handler; }}; 取消绑定事件 和绑定事件的处理基本一致,有一个注意点: 传入的handler必须与绑定事件时传入的相同(指向同一个函数) EU.removeHandler = function(element,type,handler){ if(element.removeEventListener){ element.removeEventListener(type,handler); } else if(element.attachEvent){ element.detachEvent('on' + type,handler); } else{ //属性置空就可以 element['on' + type] =……

    4小时37分钟前回答

    了解在JavaScript中将值转换为字符串的5种方法

    如果您关注Airbnb的样式指南,首选方法是使用“String()” 它也是我使用的那个,因为它是最明确的 - 让其他人轻松地遵循你的代码的意图 请记住,最好的代码不一定是最聪明的方式,它是最能将代码理解传达给他人的代码 const value = 12345;// Concat Empty Stringvalue + '';// Template Strings`${value}`;// JSON.stringifyJSON.stringify(value);// toString()value.toString();// String()String(value);// RESULT// '12345' 比较5种方式 好吧,让我们用不同的值测试5种方式。以下是我们要对其进行测试的变量: const string = "hello";const number = 123;const boolean = true;const array = [1, "2", 3];const object = {one: 1 };const symbolValue = Symbol('123');const undefinedValue = undefined;const n……