Free Code Camp 学习总结 —— JavaScript 基本知识

我会每天都更新我写东西,学大概有一段时间了,我感触还是挺大的,把之前基础知识又复习一遍,活到老学到老。希望能给在FreecodeCamp有同学有帮助,我会每天更新我在写FreecodeCamp,代码。

现在让我们开始学习最流行的JavaScript库jQuery吧,不用担心JavaScript本身,我们稍后会提到它。

在开始学习使用jQuery之前,我们需要加一些代码到HTML文件中。

首先在页面顶端增加一行script元素,然后写上结束符。

浏览器会运行script 里所有的Javascript,包括jQuery。

在你的script里,添加这个方法:$(document).ready(function() {到你的script,接下来用});结束这个方法

接下来我们来学习如何写方法方法里面的代码会被浏览器加载。

在没有document ready function以前,你的代码会在HTML没有渲染完成就执行,这样会产生bug。

var firstName = "Ada";
var thirdToLastLetterOfFirstName = firstName[firstName.length - 3];

// 初始化变量
var lastName = "Lovelace";

// 请只修改这条注释以下的代码

var secondToLastLetterOfLastName = lastName[lastName.length - 2];

输出应该是C

大家要注意一下

通过使用提供的变量参数:名词myNoun、形容词myAdjective、动词myVerb、副词myAdverb,来创建一个新的句子 result

请注意,在英文中,句中的单词是必须用空格来分隔的

function wordBlanks(myNoun, myAdjective, myVerb, myAdverb) {

  var result = "";
  // 请把你的代码写在这条注释以下
  result = myNoun +" " + myAdjective + " " + myVerb + " " + myAdverb;
  myNoun ="cat ";
  myAdjective = "little ";
  myVerb = "hit ";
  myAdverb = "slowly ";

  // 请把你的代码写在这条注释以上
  return result;
}

wordBlanks("dog", "big", "ran", "quickly");  // 你可以修改这一行来测试你的代码

输入的要求

wordBlanks("dog", "big", "ran", "quickly") 应该包含所有传入的单词并且单词之间要有间隔(可以添加任意修饰的单词).

wordBlanks("cat", "little", "hit", "slowly") 应该包含所有传入的单词并且单词之间要有间隔(可以添加任意修饰的单词).

#166 Store Multiple Values in one Variable using JavaScript Arrays

使用JavaScript 数组,我们可以在一个地方存储多个数据。

var myArray = ["zhangsan",24];

#167 Nest one Array within Another Array

你可以在JavaScript数组中包含其他数组

var myArray = [["youyouxiong",23],["zhangsan",24]];

#167 Access Array Data with Indexes

我们可以像操作字符串一样通过数据组索引[index]来访问数组中的数据

// 初始化变量
var myArray = [1,2,3];

// 请把你的代码写在这条注释以下

var myData = myArray[0];

#169 Modify Array Data With Indexes

与字符串的数据不可变不同,数组的数据是可变的,并且可以自由地改变。

// 初始化变量
var myArray = [1,2,3];

// 请把你的代码写在这条注释以下
myArray[0] =3;

#170 Access MultiDimensional Arrays With Indexes

可以把多维数组看作成是一个数组中的数组。当使用[]去访问数组的时候,第一[index]访问的是滴N个子数组,第二个[index]访问的是第N个子数组的第N个元素。

// 初始化变量
var myArray = [[1,2,3], [4,5,6], [7,8,9], [[10,11,12], 13, 14]];

// 请只修改这条注释以下的代码
var myData = myArray[2][1];
  

输出值为8

#171 Manipulate Arrays With push

一个简单的方法将数据追加到一个数组的末尾是通过push()函数。

// 初始化变量
var myArray = [["John", 23], ["cat", 2]];

// 请把你的代码写在这条注释以下
 

myArray.push(["dog",3]);

#172 Manipulate Arrays With pop

改变数组中数据的另外一种方法是用.pop()函数。.pop()函数用来“抛出”一个数组末尾的值。

// 初始化变量
var myArray = [["John", 23], ["cat", 2]];

// 请只修改这条注释以下的代码
var removedFromMyArray = myArray.pop();

#173 Manipulate Arrays With shift

pop() 函数用来移出数组中最后一个元素。如果想要移出第一个元素要怎么办呢,这就是.shift()用武之地。它的工作原理就像.pop(),但它移除的是第一个元素,而不是最后一个。

// 初始化变量
var myArray = [["John", 23], ["dog", 3]];

// 请只修改这条注释以下的代码

var removedFromMyArray = myArray.shift();

#174 Manipulate Arrays With unshift

你不仅可以shift(移出)数组中的第一个元素,你可以unshift(移入)一个元素到数组的头部。

// 初始化变量
var myArray = [["John", 23], ["dog", 3]];
myArray.shift();

// 请把你的代码写在这条注释以下

myArray.unshift(["Paul",35]);
 

#175 Shopping List

创建一个名叫myList的购物清单,清单的数据格式就是多维数组。大家创建数组的时候要注意里面不能有中文的逗号,不然编译器会报错。

var myList = [ ["Chocolate Bar", 15],["xiaowang",12],["youyouxiong",15],["zhangsan",16],["lisi",18]];

#176 Write Reusable JavaScript with Functions

在JavaScript中,我们可以把代码重复部分抽取出来,放到一个函数(functions)中。

function myFunction(){
  console.log("Hi World");
}
 

myFunction();

注意:大小写

#177 Passing Values to Functions with Arguments

函数的参数parameters 在函数中充当占位符(也叫形参)的作用,参数可以为一个或多个。调用一个函数是所传入的参数为实参,实参决定着形参真正的值。简单理解:形参即形式、实参即内容。


function myFunction(a,b){
  console.log(a + b);
}

myFunction(10,5);

#178 Global Scope and Functions

在JavaScript中,作用域涉及到变量的作用范围。在函数外定义的变量具有全局作用域。这一位着,具有全局作用域的变量可以在代码的任何地方被调用。

// 请在这里定义变量
var myGlobal = 10;
function fun1() {
  // 请在这里把 5 赋值给 oopsGlobal
 oopsGlobal =5 ;
}

#179 Local Scope and Functions

在一个函数内声明的变量,以及该函数的参数都是局部变量,意味它们只在该函数内可见。

function myFunction() {
  var myVar='use strict'; // 函数内声明的变量
  
  
  console.log(myVar);
}
myFunction();
 

#180 Global vs Local Scope in Functions

一个程序中有可能具有相同名称的局部变量和全局变量。在这种情况下,局部变量将会优先于全局变量、

// 初始化变量
var outerWear = "T-Shirt"; //也是全局变量

function myFunction() {
  // 请把你的代码写在这条注释以下
  var outerWear = "sweater"; //局部变量
  
  
  // 请把你的代码写在这条注释以上
  return outerWear;
}

myFunction();

#181 Return a Value from a Function with Return

我们可以把数据通过函数的参数来传入函数,也可以使用return 语句把数据从一个函数中传出来。

// 请把你的代码写在这条注释以下
function timesFive(num){
  return num*5;
}
var answer = timesFive(5);rug

#182 Assignment with a Returned Value

如果你记得我们在这一节Storing Values with the Equal Operator的讨论,赋值之前,先完成等号右边的操作。这意味着我们可把一个函数的返回值,赋值给一个变量。

// 初始化变量
var processed = 0;

function process(num) {
  return (num + 3) / 5;
}

processed = process(7);
// 请把你的代码写在这条注释以下
#183 Stand in Line

在计算机科学中队列是一个抽象的数据结构,队列中的条目都是有秩序的。新的条目会被加到 队列 的末尾,旧的条目会从 队列的头部被移出。

function queue(arr, item) {
  // 请把你的代码写在这里
  arr.push(item);//首先z增加arr数据组长度
  var firstItem = arr.shift(arr); //shift() 方法用于把数组的第一个元素从其中删除,并返回第一个元素的值。
  return  firstItem;  // 请修改这一行
}

// 初始化测试数据
var testArr = [1,2,3,4,5];

// 控制台输出
console.log("Before: " + JSON.stringify(testArr));
console.log(queue(testArr, 6)); // 你可以修改这一行来测试你的代码
console.log("After: " + JSON.stringify(testArr));

#184 Understanding Boolean Values

另一种数据类型是布尔。布尔值要么是true 要么false 。它非常像电路开关,true是‘开’,false是‘关’这两种状态是互斥的

function welcomeToBooleans() {

// 请只修改这条注释以下的代码

return true; // 请修改这一行

// 请只修改这条注释以上的代码
}
#185 Use Conditional Logic with If Statements

if语句用于在代码中做条件判断。关键字if告诉JavaScript在小括号中的条件为真的情况下去执行定义在大括号里面的代码。这种条件被称为 Boolean 条件,因为他们只可能是 true(真)或 false(假)

当条件的计算结果为 true,程序执行大括号内的语句。当布尔条件的计算结果为 false,大括号内的代码将不会执行。

// 定义 myFunction
function myFunction(wasThatTrue) {

  // 请把你的代码写在这条注释以下
  
  if(wasThatTrue){
    return "That was true";
  }
  return "That was false";
  // 请把你的代码写在这条注释以上

}

// 你可以修改这一行来测试你的代码
myFunction(true);

#186 Comparison with the Equality Operator

在JavaScript中,有很多互相比较的操作。所有这些操作符度返回一个true或false值

function myTest(val) {
  if (val ==12 ) { // 请修改这一行
    return "Equal";
  }
  return "Not Equal";
}

// 你可以修改这一行来测试你的代码
myTest(10);

#187 Comparison with the Strict Equality Operator

严格相等运算符(===)是相对相等操作符(==)的一种操作符。与相等操作符不同的是,它会同时比较元素的值和数据类型。

// 定义 myTest
function myTest(val) {
  if (val===7) { // 请修改这一行
    return "Equal";
  }
  return "Not Equal";
}

// 你可以修改这一行来测试你的代码
myTest(10);

#188 Comparison with the Inequality Operator

不相等运算符(!=)与相等运算符相反的。这意味着不相等运算符中,如果“不为真”并且返回false的地方,在相等运算符中会返回true,反之亦然。与相等运算符类似,不相等运算符在比较的时候也会转换至的数据类型。

function myTest(val) {
  if (val!=99) { // 请修改这一行
    return "Not Equal";
  }
  return "Equal";
}

// 你可以修改这一行来测试你的代码
myTest(10);

#189 Comparison with the Strict Inequality Operator

严格不相等运算符(!==)与全等运算符相反的。这意味严格不相等并返回false的地方,用严格相等运算符会返回true.z反之亦然。严格相等运算符不会转换值得数据类型。

function myTest(val) {
  // 请只修改这条注释以下的代码
  
  if (val !==17) {

  // 请只修改这条注释以上的代码

    return "Not Equal";
  }
  return "Equal";
}

// 你可以修改这一行来测试你的代码
myTest(10);

猜你喜欢

转载自blog.csdn.net/youyouxiong/article/details/81073348