我会每天都更新我写东西,学大概有一段时间了,我感触还是挺大的,把之前基础知识又复习一遍,活到老学到老。希望能给在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);