FreeCodeCamp 前端学习笔记-1（前端开发）
文章目录
- Front End Development Certification
- HTML5 & CSS
- Bootstrap
- jQuery
- Javascript
- Javascript Object-Oriented and Functional Programming
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 (需要在页面最前面添加
)
h2 {
font-family: Lobster, Monospace;
}
image image 是自关闭元素，不需要在结尾
<img src="..." alt="xxx">
将多个 class 应用于同一个元素
alt 在图片不能显示的时候进行显示
border 边框
CSS 边框的属性有style(样式)、color(颜色)、width(宽度)、height(高度)等。
border-radius 也可以使用 xx%
link
<a href="http://freecodecamp.cn"> link to FreeCodeCamp中文社区 a>
在不知道应该 link 到什么链接到时候，可以使用 #
unordered list
<ul>
<li>milkli>
<li>cheeseli>
ul>
ordered list
<ol>
<li>Garfieldli>
<li>Sylvesterli>
ol>
form 表单
<form action="/submit-cat-photo">
<input type="text" placeholder="cat photo URL" (required)>
<button type="submit">Submitbutton>
form>
placeholder 是在 form 中没有内容的时候显示的东西；action 链接到提交的服务器地址
单选
<label><input type="radio" name="indoor-outdoor"> Indoorlabel>
同一组单选必须要使用相同的 name
多选
<label><input type="checkbox" name="personality"> Lovinglabel>
在 input 里添加 checked 表示默认选中
设置背景颜色
.green-background {
background-color: green;
}
div
通过 div 进行嵌套
id
（定义类的时候需要在 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
使用 Bootstrap Grid 在一行中放置多个 elements Font Awesome 图标库，这里都是 bootstrap 中的 一种使用的方式 html 文件开头的 jQuery 函数 animated.css 库 和 我们用 使用** 让按钮不可选 用 jQuery 替换 html jQuery的 jQuery 的索引从 0 开始 JS 的 7 种变量类型： 整数，浮点数 Javascript 函数定义 关于单双引号，单引号内的双引号可以不用转义； 一些转义 string array 数组与多维数组，类似于 python array 的一些方法 print （虽然编译器不强制，）但是总是应该用 比较 JS 中， Some libraries Compare 因为 js 是弱类型的语言，因此当数字和字符串是可以比较大小的；但是如果字符串不是纯数字，它就会被转换成 object js 中的 object 就像 python 中的字典，可以用 删除 JSON JavaScript Object Notation 其实是 js 的 object 数组 Random Number regex JS 的 regex 好奇怪，居然不用打引号；不过 以 匹配数字 可以用大写字符来查找与小写字符意思相反的内容，例如 jQuery Constructor Function in JS Private attributes and private methodscontainer-fluid 在这个 img-responsivetext-centerbtn
btn 一般的灰色按钮btn-block 横跨整个屏幕btn-primary 默认的蓝色按钮btn-info 浅蓝色的按钮btn-danger 红色，警告有可能会删除
<div class="row">
<div class="col-xs-4">
<button class="btn btn-block btn-primary">Likebutton>
div>
<div class="col-xs-4">
<button class="btn btn-block btn-info">Infobutton>
div>
<div class="col-xs-4">
<button class="btn btn-block btn-danger">Deletebutton>
div>
div>
inline & block-levelspan 以前表示斜体，现在一般用来代指图标col-md-* col-md-* 可以嵌入在 row 中，row 可以让其中的 elements 充满一整行，而和屏幕大小无关。（好像一行中的所有数字加起来要等于 12）.svg 图标<link rel="stylesheet" href="//cdn.bootcss.com/font-awesome/4.2.0/css/font-awesome.min.css"/>
<i class="fa fa-thumbs-up">i>
<i class="fa fa-info-circle">i>
<i class="fa fa-trash">i>
well class 创造出"深度感"？jQuery
<html>
<head>
<script src="//code.jquery.com/jquery-1.11.3.min.js">script>
...
head>
<body>
...
body>
html>
script 中是一些需要运行的 javascript 代码。<script>
$(document).ready(function() {
$("button").addClass("animated bounce");
$("..").removeClass("");
$("...").css("color", "red");
$("button").prop("disabled", true);
$("#target4").html("#target4");
$("#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>
$ 表示函数开始，jQuery 库$(document).ready(function() 表示在 html 渲染完成后再执行这些函数$("button")来选中按钮，然后用.addClass("animated bounce")给按钮加CSS class。只需要用jQuery的.addClass()方法，就可以给元素加class了.css()** 来改变样式$("...").css("color", "red");
$("button").prop("disabled", true);
.html()方法可以添加HTML标签和文字到元素，而元素之前的内容都会被方法的内容所替换掉，例如：$("#target4").html("#target4")
.remove 移除元素Javascript
undefined（未定义）, null（空）, boolean（布尔型）, string（字符串）, symbol(符号), number（数字）, and object（对象）。function convert(celsius) {
return fahrenheit;
}
Code
Output
\r
回车符
\t
制表符
\b
退格符
\f
换页符
str.length 可以获取字符串的长度"xxxx" 这是字符串常量
console.log()var 来定义变量。（同样的，局部变量会覆盖全局变量。）== 可以比较类型不同的两个变量；=== 不仅要比较两个变量的内容，还要比较两个变量的类型；类似的 != 与 !==Math.sqrt()
Math.round()
Math.pow()
NaN 所以无论怎样比较都会返回 false。. 或者 [] 进行访问；也可以直接这样给 object 添加内容delete ob.nameobject.hasOwnProperty(propname) 检查 object 是否含有某个属性Math.random() 可以生成 [0, 1) 之间的随机小数/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;
$(".xxx") 可以获取这种 class 的所有实例，$($(".xxx")[0]) 可以当成 js 数组进行使用，获取第几个元素Javascript Object-Oriented and Functional Programming
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();
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.maparray.reduce