chili 默默学编程

Free Code Camp(一):前端知识总结


我在 Free Code Camp 网站上学习编程知识,我打算把学习笔记整理在这里。这将会是一个系列的文章。


本文目录:

1、Free Code Camp 网站介绍。

2、前端知识总结(包括:HTML5 和 CSS,Bootstrap 响应式设计,jQuery,Javascript 基础知识,面向对象编程和函数编程,JSON 和 Ajax)。

后续计划:下一步,我计划把 Free Code Camp 网站上关于 Javascript 的初级算法题、中级算法题、高级算法题的所有题目整理到这个系列文章里。

Free Code Camp 网站上并没有给出答案,我会把我自己的答案写在系列文章里。


Free Code Camp 网站介绍

链接在此:https://www.freecodecamp.cn/

网站的用途:软件工程师自学平台

使用方式:免费、需要注册

学习方式:部分讲解 + 小练习闯关 + 大项目

课程大纲:前端开发(400小时)、数据可视化(400小时)、后端开发(400小时)、非营利项目(800小时)、面试攻略(80小时)。

(上述时间均为完全新手的学习时间,如果有部分基础,会很快很快)

涉及到的技术栈:HTML5、CSS3、JavaScript、Databases、Git & GitHub、Node.js、React.js、D3.js

认证:可以作为学习经历写进建立,Linked In(领英)上直接关联网站的学习经历

网站自己的广告词:Free Code Camp 已经被证明是获取编程工作的最有效路径,事实上,没人完成了所有课程,因为他们都在完成之前就找到了工作

课程详细大纲示例:

前端开发 - 1:灰色部分是我学过的内容,我学了三次,总共 10 个小时左右。就是本文要总结的基础知识部分。

Image

前端 - 2:包括中级前端项目、中级算法、进阶算法、进阶项目。

Image

后端:包括自动化测试与调试、Git、后端框架(Express)、数据库(MongoDB)、API 项目、动态 Web 应用

Image


前端知识总结

一、HTML5 和 CSS3

本节内容介绍了一些 HTML 元素和部分 CSS,较为基础,记录部分常用技巧如下:

  • border-radius:边框角的弧度,设为 50% 时,边框为圆形;
  • font-family:可设置多个字体,系统无前一字体时自动往后降级;
  • input:placeholder 属性;
  • form:required 属性;
  • input:当 type 为 radio 或者 checkbox 时,可设置 checked 属性;
  • color:rgb(255, 0, 0),#F00,#FF0000,red 不同的表达方式


二、Bootstrap 响应式设计

bootstrap 是一个很方便的样式库,许多做好的功能直接按照官网文档说明使用即可,节省时间。

1、引用 bootstrap 

实际使用时,可去官网下载最新样式

<link rel="stylesheet" href="//cdn.bootcss.com/bootstrap/3.3.1/css/bootstrap.min.css"/>

2、结构

需要使用 bootstrap 样式的元素放在class 为 ‘container-fluid’ 的 div 中

<div class="container-fluid">
  
</div>

3、img

img 标签中加入 ‘img-responsive’ 的 class,图片即可自动适配页面宽度

<div class="container-fluid">
  <img class="thick-green-border img-responsive " src="/images/running-cat.jpg">
</div>

4、text

加入 ‘text-center’ 的 class,文字即自动居中

<div class="container-fluid">
  <h2 class="red-text text-center">CatPhotoApp</h2>
</div>

5、button 

(很多其他的元素用法都类似,所以 button 写详细一些,其他的元素要用时可以查官网文档)

bootstrap 的 button 比默认的 button 好看很多

引用 bootstrap button 时要先对 button 元素添加 ‘btn’ class

<div class="container-fluid">
  <button class="btn">Like</button>
</div>

Image

‘btn-block’ class 把 button 转化为块级元素,独占一行,并且长度占满一行

<div class="container-fluid">
  <button class="btn btn-block">Like</button>
</div>

Image

深蓝色 ‘btn-primary ’ class 是常用颜色

<div class="container-fluid">
  <button class="btn btn-block btn-primary">Like</button>
</div>

Image

还有其他颜色,如 ‘btn-info ’ class ,‘btn-danger’ class

<div class="container-fluid">
  <button class="btn btn-block btn-primary">Like</button>
  <button class="btn btn-block btn-info">Info</button>
  <button class="btn btn-block btn-danger">Delete</button>
</div>

Image

6、响应式网格布局

bootstrap 网格布局,根据页面宽度重新布置元素位置。

总共长度为 12 格,原理如下:

Image

打开此链接,改变浏览器宽度查看效果:https://codepen.io/freeCodeCamp/full/NNvBQW

此效果的 html 内容如下:

<div class="container">
  <div class="row">
    <div class="col-xs-12">
      <div class="col-xs-12 col-sm-10 col-sm-offset-1 col-md-8 col-md-offset-2">
          // 内容
      </div>
    </div>
  </div>
</div>

解释:

  • 页面很小时,按 ‘col-xs-12’ class 渲染,即占满屏幕;
  • 页面中等时,按 ‘col-sm-10 col-sm-offset-1’ class 渲染,即宽度占 10/12 并且左移 1/12(居中)
  • 页面很宽时,按 ‘col-md-8 col-md-offset-2’ class 渲染,即宽度占 8/12 并且左移 2/12(居中)

7、图标库

bootstrap 有一个 .svg 的矢量图形库,引用后即可使用,示例:<i class="fa fa-trash"></i>,为下图的删除样式(一个垃圾桶)

<link rel="stylesheet" href="//cdn.bootcss.com/font-awesome/4.2.0/css/font-awesome.min.css"/>

<div class="container-fluid">
  <div class="row">
    <div class="col-xs-4">
      <button class="btn btn-block btn-primary"><i class="fa fa-thumbs-up"></i> Like</button>
    </div>
    <div class="col-xs-4">
      <button class="btn btn-block btn-info"><i class="fa fa-info-circle"></i> Info</button>
    </div>
    <div class="col-xs-4">
      <button class="btn btn-block btn-danger"><i class="fa fa-trash"></i> Delete</button>
    </div>
  </div>
</div>

b6.png


三、jQuery

jQuery 是一个 JavaScript 库,让很多 JavaScript 的操作变得简单。

1、引入 jQuery 库:查官网

2、三种选择器

$('button')
$('.className')
$('#id')

3、增加、删除样式

$('#id').addClass('hidden')
$('#id').removeClass('hidden')

4、动画库 Animate.css

引入 Animate.css 动画库之后,能做很多动态效果

$('button').addClass('animated bounce')
$('button').addClass('animated shake')
$('button').addClass('animated fadeOut')
$('button').addClass('animated hinge') //这个是从页面上掉下来的效果

5、改变css .css()

$('#id').css('color', 'blue')

6、操作属性 .prop()

$('#id').prop('disable', true)

7、改变内容

$('.div1').html(html)
$('.div2').text(text)

8、删除元素

$('.div1').remove()

9、移动元素、添加元素(+ 方法链)

$('.div1').appendTo('#id')
$('.div1').clone().appendTo('#id')

10、父元素、子元素、子元素选择

$('.div1').parent()
$('.div1').children()

$('.div1:nth-child(2)').addClass('animated bounce')

11、多元素过滤(奇偶)

$('.div1:even').addClass('animated bounce')


四、Javascript 基础知识

1、通用

注释方法、声明变量、赋值、驼峰命名法、运算符号、转义、变量类型(Number,String,Array,Boolean)、函数、if - else 判断、switch 判断(switch - case - default)、for 循环、while 循环

2、对象

var cat = {
  name: 'ss',
  meow: 'miao',
}

- 访问属性的方法:

cat['name']
cat.name

var prop = 'name'
cat[prop]

- 修改属性的方法:选到后赋值

cat['name'] = 'qq'

- 删除属性的方法

delete cat['name']

- 检查属性是否存在

obj.hasOwnProperty(propName)

- 深拷贝(生成相互独立的变量)

var collectionCopy = JSON.parse(JSON.stringify(collection))

- 用对象的 key - value 关系替代 switch 或者 if - else 语句

var selects = {
  case1 : response1,
  case2 : response2,
  case3 : response3,
}

selects[case]

3、random

Math.random()      // 0 ~ 1
Math.floor(Math.random() * n)      // 0 ~ n -1
Math.floor(Math.random() * (max - min + 1)) + min      // min ~ max

4、正则表达式

testString = 'I see a dog, a cat.'
testString.match(/a/gi)  // ['a', 'a', 'a']

解释:/a/gi 就是正则表达式,其中:

  • ‘/ ’是正则表达式开始与结束的标记
  • 中间的 ‘a’ 是要匹配的元素
  • 后面的 ‘g’ 是指查找所有,而不是仅仅第一个
  • ‘i' 是指忽略大小写
  • ‘a' 是指字母 a,其他的还有 ‘\d’ 匹配一个数字、 ‘\d+’ 匹配多个数字、 ‘\s+’ 匹配所有空格、 ‘\S’ 匹配非空格


五、面向对象编程和函数编程

1、构造函数创造对象

- 构造

var Car = function() {
  this.wheels = 4,
  this.engines = 1,
  this.seats = 1,
}

- 实例化(使用 new )

var myCar = new Car()

- 可以传参

var Car = function(wheels, engines, seats) {
  this.wheels = wheels,
  this.engines = engines,
  this.seats = seats,
}

var myCar = new Car(4, 1, 1)

- 可以声明私有变量(外部无法访问)(变量不用 this 赋值,而用函数内作用域的 var 声明)

var Car = function() {
  var speed = 10,
  this.getSpeed = function() {
    return speed
  }
  this.accelerate = function(change) {
    speed += change
  }

  this.decelerate = function() {
    speed -= 5
  }
}

2、Array(String)的一些方法(后面算法题经常用到)

- push / pop / shift / unshift

- map(所有元素 + 3)

var newArray = oldArray.map(function(val){
  return val + 3
})

- reduce(累加)

var singleVal = array.reduce(function(previousVal, currentVal) {
  return previousVal + currentVal
}, 0)

- filter(把等于 5 的元素滤过)

array = array.filter(function(val) {
  return val !== 5
})

- sort(从小到大排序)

array.sort(function(a, b) {
  return a - b
})

- reverse(逆序)(改变数组本身)

var myArray = [1, 2, 3]
myArray.reverse()

- concat(数组拼接)

newArray = oldArray.concat(otherArray)

- split(字符串分割为数组)

var array = string.split('s')

- join(数组拼接成字符串)

var veggies = ["Celery", "Radish", "Carrot", "Potato"]
var salad = veggies.join(" and ")

- String.toLowerCase() / String.toUpperCase()

- slice(切片)

- splice(挺复杂的,,添加或者删除元素)

- String.indexOf('abc') (字符串 abc 在 String 中的位置)

- charCodeAt()(char 的 ASCII 数字)

- fromCharCode()(根据 ASCII 数字返回 char)


六、JSON 和 Ajax(这一块我之前写过原生的 Javascript 实现,此处略写)

链接在此:AJAX 前后端实践(网站点赞功能)

1、JSON 定义

JSON 是 JavaScript Object Notation的简写。

JSON是一种非常简洁的数据格式。

它通常表现为了两种形式,一种为单个对象,一种为多个对象。

单个对象类似于: 

{
  name:'盖伦',
  advantage:'单挑无敌',
} 

多个对象类似于:

 [
  {
    name:'盖伦',
    advantage:'单挑无敌'
  },
  {
    name:'诺克',
    advantage:'上单霸主',
  }
]

2、利用 jQuery 使用 Ajax

$.getJSON("/json/cats.json", function(json) {
  $(".message").html(JSON.stringify(json))
})

解释:利用 Ajax 访问 ‘/json/cats.json’ 借口获取数据,获得的数据 json 已 parse 过(类型为对象)。

后端写好 API ,前端通过 Ajax 获取数据;获取数据后,进行前端渲染,这就是一个 Web 应用。


reply ( 0 )