FreeCodeCamp 前端学习笔记-1（前端开发）

最新推荐文章于 2024-11-13 13:58:19 发布

YHmoun

最新推荐文章于 2024-11-13 13:58:19 发布

阅读量657

点赞数

CC 4.0 BY-SA版权

分类专栏：前端与数据可视化学习笔记

本文链接：https://blog.youkuaiyun.com/YHmoun/article/details/90231585

前端与数据可视化同时被 2 个专栏收录

2 篇文章

订阅专栏

学习笔记

2 篇文章

订阅专栏

这篇博客详细介绍了FreeCodeCamp前端认证的第一部分，包括HTML5的基本元素和CSS的选择器、类与样式。还探讨了Bootstrap的响应式布局和常见组件，以及jQuery的基本操作，如修改样式、添加类和动态改变HTML内容。同时，介绍了JavaScript的基础语法和对象编程概念。

摘要生成于 C知道，由 DeepSeek-R1 满血版支持，前往体验 >

文章目录

Front End Development Certification

Front End Development Certification

HTML5 & CSS

注释

<!--
-->

style 的组织方式

inline

<h2 style="color:blue">
  xxx
</h2>

CSS (Cascading Style Sheets) selectors

记住这里的冒号和分号

<style>
  h2 {color: red;}
</style>

<h2>
  xxx
</h2>

CSS Class Selector

定义的时候前面必须加 .，使用的时候不要加 .；这是为了在定义的时候区分自定义 CSS Class 和内置

<style>
  .red-text {
    color: red;
  }
</style>

<h2 class="red-text">
  xxx
</h2>

style 的种类

color
font-size: font-size: 16px;
font-family: font-family: Sans-serif; 字体
width
background-color
text-align
style

关于字体

可以使用 font-family 修改字体，例如

Sans-serif
Monospace
Lobster (需要在页面最前面添加 <link href="https://fonts.gdgdocs.org/css?family=Lobster" rel="stylesheet" type="text/css">)

h2 {
    font-family: Lobster, Monospace;
}

image image 是自关闭元素，不需要在结尾

<img src="..." alt="xxx">

将多个 class 应用于同一个元素 <img class="class1 class2">

alt 在图片不能显示的时候进行显示

border 边框

<style>
  .thin-red-border {
    border-color: red;
    border-width: 5px;
    border-style: solid;
    border-radius: 10px;
  }
</style>

CSS 边框的属性有style(样式)、color(颜色)、width(宽度)、height(高度)等。

border-radius 也可以使用 xx%

link

<a href="http://freecodecamp.cn"> link to FreeCodeCamp中文社区 </a>

在不知道应该 link 到什么链接到时候，可以使用 #

可以使用 <a></a> 去嵌套 <img>

unordered list

<ul>
  <li>milk</li>
  <li>cheese</li>
</ul>

ordered list

<ol>
  <li>Garfield</li>
  <li>Sylvester</li>
</ol>

form 表单

<form action="/submit-cat-photo">
  <input type="text" placeholder="cat photo URL" (required)>
  <button type="submit">Submit</button>
</form>

placeholder 是在 form 中没有内容的时候显示的东西；action 链接到提交的服务器地址

单选

<label><input type="radio" name="indoor-outdoor"> Indoor</label>

同一组单选必须要使用相同的 name

多选

<label><input type="checkbox" name="personality"> Loving</label>

在 input 里添加 checked 表示默认选中

设置背景颜色

.green-background {
  background-color: green;
}

div

通过 div 进行嵌套

（定义类的时候需要在 class 前加 .，定义 id 时需要在前面加 #）

padding margin border

这三者都可以设置 top bottom left right

  .red-box {
    background-color: red;
    padding-top: 40px;
    padding-right: 20px;
    padding-bottom: 20px;
    padding-left: 40px;
  }

除了这样分开指定，还可以按照顺时针的方式进行集中指定 (Use clockwise notation)

padding: 10px 20px 10px 20px;

body 元素

Class 覆盖原始的颜色

Class 声明的优先级，越往后声明的 class 优先级越高，而和 class="" 这里没有关系

id 可以覆盖 Class，这与优先级无关

inline 的 style="" 可以覆盖 Class 和 id

! important

Hex Code for Specific Colors

#000000 这是 6 位 16 进制数，每两位分别表示 RGB （关于 RGB wiki）red-green-blue

#000 是以上 6 位表示法的缩写，表示的东西不再那么精细

rgb(0, 0, 0) 这是十进制的 RGB 表示法

Bootstrap

Some Classes

container-fluid 在这个 <div> 中的所有东西都是响应式的

img-responsive

text-center

btn

btn 一般的灰色按钮
btn-block 横跨整个屏幕
btn-primary 默认的蓝色按钮
btn-info 浅蓝色的按钮
btn-danger 红色，警告有可能会删除

<button class="btn btn-block btn-primary">Like</button>
<button class="btn btn-block btn-info">Info</button>

使用 Bootstrap Grid 在一行中放置多个 elements

  <div class="row">
    <div class="col-xs-4">
      <button class="btn btn-block btn-primary">Like</button>
    </div>
    <div class="col-xs-4">
      <button class="btn btn-block btn-info">Info</button>
    </div>
    <div class="col-xs-4">
      <button class="btn btn-block btn-danger">Delete</button>
    </div>
  </div>

inline & block-level

span

<i></i> 以前表示斜体，现在一般用来代指图标

col-md-* col-md-* 可以嵌入在 row 中，row 可以让其中的 elements 充满一整行，而和屏幕大小无关。（好像一行中的所有数字加起来要等于 12）

Font Awesome 图标库，这里都是 .svg 图标

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

<!--
e.g. 点赞、info、垃圾桶
-->
<i class="fa fa-thumbs-up"></i>
<i class="fa fa-info-circle"></i>
<i class="fa fa-trash"></i>

bootstrap 中的 well class 创造出"深度感"？

jQuery

一种使用的方式

<html>
<head>
    <script src="//code.jquery.com/jquery-1.11.3.min.js"></script>
    ...
</head>
<body>
    ...
</body>
</html>

html 文件开头的 script 中是一些需要运行的 javascript 代码。

jQuery 函数

<script>
  $(document).ready(function() {
    $("button").addClass("animated bounce");
    $("..").removeClass("");
    $("...").css("color", "red");
    $("button").prop("disabled", true);
    $("#target4").html("<em>#target4</em>");
    $("#target2").appendTo("#right-well"); <!-- 将元素从一个 div 移到另一个 div -->
    $("#target5").clone().appendTo("#left-well"); <!-- 拷贝元素 -->
    $("#target1").parent().css("background-color", "red"); <!-- parent() 访问父元素 -->
    $("#right-well").children().css("color", "orange"); <!-- 类似的，用 children() 去访问子元素 -->
    $(".target:nth-child(2)").addClass("animated bounce"); <!-- nth-child -->
    $(".target:even").addClass("animated shake"); <!-- 获取偶数个和奇数个 -->
    $("body").addClass("animated fadeOut"); <!-- 给整个 body 添加效果 -->
  });
</script>

$ 表示函数开始，

animated.css 库和 jQuery 库

$(document).ready(function() 表示在 html 渲染完成后再执行这些函数

我们用 $("button")来选中按钮，然后用.addClass("animated bounce")给按钮加CSS class。只需要用jQuery的.addClass()方法，就可以给元素加class了

使用**.css()** 来改变样式

$("...").css("color", "red");

让按钮不可选

$("button").prop("disabled", true);

用 jQuery 替换 html

jQuery的.html()方法可以添加HTML标签和文字到元素，而元素之前的内容都会被方法的内容所替换掉，例如：

$("#target4").html("<em>#target4</em>")

.remove 移除元素

jQuery 的索引从 0 开始

Javascript

JS 的 7 种变量类型：undefined（未定义）, null（空）, boolean（布尔型）, string（字符串）, symbol(符号), number（数字）, and object（对象）。

整数，浮点数

Javascript 函数定义

function convert(celsius) {
		
    return fahrenheit;
}

关于单双引号，单引号内的双引号可以不用转义；

一些转义

Code	Output
\r	回车符
\t	制表符
\b	退格符
\f	换页符

string

str.length 可以获取字符串的长度

"xxxx" 这是字符串常量

array

数组与多维数组，类似于 python

array 的一些方法

array.push()
array.pop() 与 cpp 不同，这里的 pop 是有返回值的
array.shift() 移除数组的第一个元素
array.unshift() 在数组前面加入一个元素

print console.log()

（虽然编译器不强制，）但是总是应该用 var 来定义变量。（同样的，局部变量会覆盖全局变量。）

比较

JS 中，== 可以比较类型不同的两个变量；=== 不仅要比较两个变量的内容，还要比较两个变量的类型；类似的 != 与 !==

Some libraries

Math.sqrt()
Math.round()
Math.pow()

Compare

因为 js 是弱类型的语言，因此当数字和字符串是可以比较大小的；但是如果字符串不是纯数字，它就会被转换成 NaN 所以无论怎样比较都会返回 false。

object

js 中的 object 就像 python 中的字典，可以用 . 或者 [] 进行访问；也可以直接这样给 object 添加内容

删除 delete ob.name

object.hasOwnProperty(propname) 检查 object 是否含有某个属性

JSON

JavaScript Object Notation 其实是 js 的 object 数组

Random Number

Math.random() 可以生成 [0, 1) 之间的随机小数

regex

JS 的 regex 好奇怪，居然不用打引号；不过 /g 这一点倒是很像 awk

以 / 开头， /g 结尾（表示在全局范围搜索）；

匹配数字 \d ，匹配更多数字 \d+ ，匹配空白 \s

可以用大写字符来查找与小写字符意思相反的内容，例如 \S

// 初始化变量
var testString = "How many spaces are there in this sentence?";

var expression = /\s/g;  // 请修改这一行

// 用 spaceCount 存储 testString 中匹配到 expression 的次数
var spaceCount = testString.match(expression).length;

jQuery

$(".xxx") 可以获取这种 class 的所有实例，$($(".xxx")[0]) 可以当成 js 数组进行使用，获取第几个元素

Javascript Object-Oriented and Functional Programming

Constructor Function in JS

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

// There can also be some parameters in the construction function.

// Use a constructor
var myCar = new Car();

Private attributes and private methods

var Car = function() {
  // this is a private variable
  var speed = 10;

  // these are public methods
  this.accelerate = function(change) {
    speed += change;
  };

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

  this.getSpeed = function() {
    return speed;
  };
};

array.map

array.reduce