FreeCodeCamp网页编程实践

最新推荐文章于 2024-10-14 08:27:24 发布

davedeveloper

最新推荐文章于 2024-10-14 08:27:24 发布

阅读量599

点赞数

分类专栏：技术储备文章标签： javascript freecodecamp html

本文链接：https://blog.csdn.net/sunshangjin/article/details/115452020

版权

技术储备专栏收录该内容

6 篇文章 0 订阅

订阅专栏

title: FreeCodeCamp网页编程实践
date: 2018-11-21 22:55:13
categories: Profession

参考资料/工具

JavaScript书籍资料

HTML 工具、软件

codepen 在线Web作品练习

HTML CSS基础

小猫的自画像

网页作品：纯HTML CSS
span 标签来创建行内元素

<!-- Font Awesome 是一个非常方便的图标库 -->
<link rel="stylesheet" href="//cdn.bootcss.com/font-awesome/4.2.0/css/font-awesome.min.css"/>
<!-- 谷歌Lobster字体库 -->
<link href="https://fonts.gdgdocs.org/css?family=Lobster" rel="stylesheet" type="text/css">
<style>
  .red-text {
    color: red;
  }

  h2 {
    font-family: Lobster, Monospace;
  }

  p {
    font-size: 16px;
    font-family: Monospace;
  }
 <!-- CSS 边框的属性有style(样式)、color(颜色)、width(宽度)、height(高度)等 -->
  .thick-green-border {
    border-color: green;
    border-width: 10px;
    border-style: solid;
    border-radius: 50%;
  }

  .smaller-image {
    width: 100px;
  }

  .gray-background {
    background-color: gray;
  }
  
  #cat-photo-form{
    background-color:green
  }
</style>

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

<p>Click here for <a href="#">cat photos</a>.</p>

<a href="#"><img class="smaller-image thick-green-border" alt="A cute orange cat lying on its back" src="/images/relaxing-cat.jpg"></a>

<div class="gray-background">
  <p>Things cats love:</p>
  <ul>
    <li>cat nip</li>
    <li>laser pointers</li>
    <li>lasagna</li>
  </ul>
  <p>Top 3 things cats hate:</p>
  <ol>
    <li>flea treatment</li>
    <li>thunder</li>
    <li>other cats</li>
  </ol>
</div>

<form action="/submit-cat-photo" id="cat-photo-form">
  <label><input type="radio" name="indoor-outdoor" checked> Indoor</label> <!-- label的完整一体-->
  <label><input type="radio" name="indoor-outdoor"> Outdoor</label>
  <label><input type="checkbox" name="personality" checked> Loving</label>
  <label><input type="checkbox" name="personality"> Lazy</label>
  <label><input type="checkbox" name="personality"> Energetic</label>
  <input type="text" placeholder="cat photo URL" required> <!---placeholder 占位符 预定义文本 -->
  <button type="submit">Submit</button>
</form>

CSS覆盖规则: !important >内联样式> id声明样式 > 排在后面声明的style > 排在前面的style > 继承的父类的

<style>
  body {
    background-color: black;
    font-family: Monospace;
    color: rgb(255, 0, 0);
  }
  #orange-text {
  <!-- #hex 方式表示颜色 `0`代表颜色的完全缺失 `F` 它代表最大可能的亮度 RGB的顺序-->
    color: #FFFFFF;
  }
  .pink-text {
    color: pink !important;
  }
  .blue-text {
    color: blue;
  }
</style>
<h1 id="orange-text" class="pink-text blue-text" style="color: white">Hello World!</h1>

有三个影响HTML元素布局的重要属性：padding(内边距)、margin(外边距)、border(边框)。 padding-top、padding-right、padding-bottom 和 padding-left 属性外 ,还可以用padding: 10px 20px 10px 20px;适中方向

 .red-box {
    background-color: red;
    padding: 20px 40px 20px 40px;
  }

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

JQuery 实践

jQuery通过选择器来选择一个元素的，然后操作元素做些改变。利用CSS 选择器操作元素。


<script>
<script>
  $(document).ready(function() {
  <!-- 三种不同元素选择器操作 -->
    $("button").addClass("animated bounce");
    $(".well").addClass("animated shake");
    $("#target3").addClass("animated fadeOut");
    $("button").removeClass("btn-default");
    <!-- `.css()`的方法能让你改变元素的CSS样式 -->
    $("#target1").css("color","red");
    <!--`.prop()`的方法让你来调整CSS外其他元素的属性 -->
     $("#target1").prop("disabled",true)；
  });
</script>

<!-- 请只修改这条注释以上的代码 -->

<div class="container-fluid">
  <h3 class="text-primary text-center">jQuery Playground</h3>
  <div class="row">
    <div class="col-xs-6">
      <h4>#left-well</h4>
      <div class="well" id="left-well">
        <button class="btn btn-default target" id="target1">#target1</button>
        <button class="btn btn-default target" id="target2">#target2</button>
        <button class="btn btn-default target" id="target3">#target3</button>
      </div>
    </div>
    <div class="col-xs-6">
      <h4>#right-well</h4>
      <div class="well" id="right-well">
        <button class="btn btn-default target" id="target4">#target4</button>
        <button class="btn btn-default target" id="target5">#target5</button>
        <button class="btn btn-default target" id="target6">#target6</button>
      </div>
    </div>
  </div>
</div>

其他常用方法

<script>
//html方法修改元素内文本
$("#target4").html('<em>#target4</em>');
//`appendTo()`方法可以把选中的元素加到其他元素中
$('#target4').remove();
$('#target2').appendTo('#right-well');
//`clone()`方法可以拷贝元素
 $("#target5").clone().appendTo("#left-well");
 //`target:nth-child(n)` CSS选择器允许你按照索引顺序(从1开始)选择目标元素的所有子元素
 $(".target:nth-child(2)").addClass("animated bounce");
 //其他利用CSS选择器操作的方法
 $(".target:even").addClass("animated shake");
 $("body").addClass("animated fadeout");

$($(".slot")[0]).html(slotOne);//数组中取值
$($('.slot')[0]).html('<img src = "' + images[slotOne-1] + '">');//内容赋值
</script>

个人作品集实践知识点

1. 导航栏练习

2. 图标按钮链接

3. form表单

4. BootStrap网格

我的Tribute作品-艾伦·图灵

Tribute Alan Turing --Dave Sun

1. JavaScript 基础

1.1 JavaScript基本数据类型

JavaScript提供七种不同的data types(数据类型)，它们是undefined（未定义）, null（空）, boolean（布尔型）, string（字符串）, symbol(符号), number（数字）, and object（对象）

注意JavaScript 只有字符串类型，没有字符类型。且字符串和C中一样，是不可变的。

1.2 JavaScript变量命名

Variable （变量）的名字可以由数字、字母、$ 或者 _组成，但是不能包含空格或者以数字为首。
驼峰命名法 来书写一个 Javascript 变量：变量名的第一个单词的首写字母小写，后面的单词的第一个字母大写。

1.3 变量的作用域和函数

在函数外定义的变量具有全局作用域。没有使用var关键字定义的变量，会被自动创建在全局作用域中，形成全局变量。
一个函数内声明的变量，以及该函数的参数都是局部变量，意味着它们只在该函数内可见（与C不同，无论什么地方声明，定义后，下面的函数内都可见。）

1.4 运算符

算术运算符

运算符	描述	例子	结果
+	加	x=y+2	x=7
-	减	x=y-2	x=3
*	乘	x=y*2	x=10
/	除	x=y/2	x=2.5
%	求余数 (保留整数)	x=y%2	x=1
++	累加	x=++y	x=6
–	递减	x=–y	x=4

比较运算符

3 === 3 // true ，严格比较
3 === '3' // false
3== '3'//true，非严格比较

1.5 简单字符串和数组的操作

String 和 Array具有很多的相似性。但是数组的存储数值是可变的，因此操作比String灵活的多。同时数组还是多维的。

类型	查询	增加	删除	修改
String	[] 随机访问；.length属性	+操作符	直接赋值	直接赋值
Array	[] 随机访问；	.push();.unshift()	.pop();shift()	[]访问修改

ES6 新增模板字符串，在字符串中增加变量，更简单美观。

var name = '小明';
var age = 20;
var message = `你好, ${name}, 你今年${age}岁了!`;

字符串特有操作，小写和大写、截取
substring()返回指定索引区间的子串：

var s = 'Hello';
s.toUpperCase(); // 返回'HELLO'
var lower = s.toLowerCase(); // 返回'hello'并赋值给变量lower
var temp = s.substring(0,1);//返回H子串

Split Strings with split

var string = "Split me into an array";
var array = [];
array = string.split(' ');//按照单词分割成数组

1.6 JavaScript对象

JavaScript 中的所有事物都是对象：字符串、数值、数组、函数…
此外，JavaScript 允许自定义对象。
JavaScript 提供多个_内建_对象，比如 String、Date、Array 等等
对象只是带有_属性_和_方法_的特殊数据类型。

对象方法
.hasOwnProperty(propname)方法来检查对象是否有该属性。
创建对象
方法多种

## 对象构造器
function person(firstname,lastname,age,eyecolor)
{
this.firstname=firstname;
this.lastname=lastname;
this.age=age;
this.eyecolor=eyecolor;
}
# 替代语法（使用对象 literals）：
person={firstname:"John",lastname:"Doe",age:50,eyecolor:"blue"};

1.7 JSON 对象

JSON是JavaScript Object Notation的缩写，它是一种数据交换格式。JSON对象是Javascript 6中对象的组合。
JavaScript内置了JSON的解析。

var xiaoming = {
    name: '小明',
    age: 14,
    gender: true,
    height: 1.65,
    grade: null,
    'middle-school': '\"W3C\" Middle School',
    skills: ['JavaScript', 'Java', 'Python', 'Lisp']
};
var s = JSON.stringify(xiaoming);//对象序列号成JSON；
JSON.parse('{"name":"小明","age":14}'); // JSON 反序列化：Object {name: '小明', age: 14}

var ourStorage = {
"desk": {
"drawer": "stapler"
},
"cabinet": {
"top drawer": {
"folder1": "a file",
"folder2": "secrets"
},
"bottom drawer": "soda"
}
}
ourStorage.cabinet["top drawer"].folder2; // "secrets" ，访问方式和对象类似

1.8 正则表达式

/and/gi 为正则表达式，/ 是这个正则表达式的头部,the 是我们想要匹配的模式,/ 是这个正则表达式的尾部

var expression = /and/gi;  

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

JavaScript Array and String 操作

1.1 Array 的简单操作

slice()就是对应String的substring()版本，它截取Array的部分元素，然后返回一个新的Array：

var arr = ['A', 'B', 'C', 'D', 'E', 'F', 'G'];
arr.slice(0, 3); // 从索引0开始，到索引3结束，但不包括索引3: ['A', 'B', 'C']
arr.slice(3); // 从索引3开始到结束: ['D', 'E', 'F', 'G']

如果不给slice()传递任何参数，它就会从头到尾截取所有元素。利用这一点，我们可以很容易地复制一个Array：

var arr = ['A', 'B', 'C', 'D', 'E', 'F', 'G'];
var aCopy = arr.slice();
aCopy; // ['A', 'B', 'C', 'D', 'E', 'F', 'G']
aCopy === arr; // false

2.与String类似，Array也可以通过indexOf()来搜索一个指定的元素的位置：

var arr = [10, 20, '30', 'xyz'];
arr.indexOf(10); // 元素10的索引为0

lastIndexOf() 方法返回指定值在调用该方法的字符串中最后出现的位置

"canal".lastIndexOf("a")   // returns 3

reverse()把整个Array的元素给掉个个！注意在原值上进行，也就是反转：

var arr = ['one', 'two', 'three'];
arr.reverse(); 
arr; // ['three', 'two', 'one']

join()方法是一个非常实用的方法，它把当前Array的每个元素都用指定的字符串连接起来，然后返回连接后的字符串：

var arr = ['A', 'B', 'C', 1, 2, 3];
arr.join('-'); // 'A-B-C-1-2-3'

filter 方法用来迭代一个数组

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

Concatenate Arrays with concat

concat 方法可以用来把两个数组的内容合并到一个数组中。

var oldArray = [1,2,3];
var concatMe = [4,5,6];
var newArray = oldArray.concat(concateMe);

1.2 Array的高阶 map -reduce 操作

map()方法定义在JavaScript的Array中，我们调用Array的map()方法，传入我们自己的函数，就得到了一个新的Array作为结果。map()作为高阶函数，事实上它把运算规则抽象了。

[外链图片转存失败,源站可能有防盗链机制,建议将图片保存下来直接上传(img-VQx00F4S-1617662305737)(https://cdn.liaoxuefeng.com/cdn/files/attachments/0013879622109990efbf9d781704b02994ba96765595f56000/0)]

var arr = [1, 2, 3, 4, 5, 6, 7, 8, 9];
arr.map(String); // ['1', '2', '3', '4', '5', '6', '7', '8', '9']

再看reduce的用法。Array的reduce()把一个函数作用在这个Array的[x1, x2, x3...]上，这个函数必须接收两个参数，reduce()把结果继续和序列的下一个元素做累积计算，其效果就是：

[x1, x2, x3, x4].reduce(f) = f(f(f(x1, x2), x3), x4)

var arr = [1, 3, 5, 7, 9];
arr.reduce(function (x, y) {
    return x + y;
}); // 25

1.3 Array 的排序

Array的sort()方法默认把所有元素先转换为String再排序。
sort()方法也是一个高阶函数，它还可以接收一个比较函数来实现自定义的排序。
如果要倒序排序，我们可以把大的数放前面：

var arr = [10, 20, 1, 2];
arr.sort(function (x, y) {
    if (x < y) {
        return 1;
    }
    if (x > y) {
        return -1;
    }
    return 0;
}); // [20, 10, 2, 1]

忽略大小写排序

var arr = ['Google', 'apple', 'Microsoft'];
arr.sort(function (s1, s2) {
    x1 = s1.toUpperCase();
    x2 = s2.toUpperCase();
    if (x1 < x2) {
        return -1;
    }
    if (x1 > x2) {
        return 1;
    }
    return 0;
}); // ['apple', 'Google', 'Microsoft']