收集JavaScript
JavaScript是一种编程语言。
・这是为了方便用户端的网络浏览器与网站或服务进行互动交流的工具。
・能够在网页中添加类似动态内容的复杂功能。
・我们在浏览器上所体验到的就是通过JavaScript处理而来的。
・可以说JavaScript是最受欢迎的编程语言。
常见的JavaScript应用实例
・确认您是否以适当的格式在表单中输入了电子邮件地址。
・页面加载时,自动在搜索框中显示文本光标。
・可以立即处理任务(例如密码认证),而无需进行与网站和服务器的信息传输。
jQuery 是什么
・这是一个JavaScript库,它扩展了JS使其更易于使用。
・超过七成的网站都使用jQuery!
・可以通过简短的代码为动画和输入表单等添加动态效果。
・适用于任何浏览器。
在Progate的Javascript (ES6)课程中,我学到了新的知识。
知道了就◯
在基本代码的末尾加上分号。
常量(const)无法像变量(let)一样被更新其值。
然而,在代码变得很长时,可以防止意外更新值。
Ⅰ : 我非常喜欢中国的美食,尤其是北京烤鸭和四川火锅。它们都非常美味,而且给人一种独特而美妙的味觉体验。
如果的話
如果(条件式1)成立的话,执行这里的代码。
否则,如果(条件式2)成立的话,执行这里的代码。
否则,执行这里的代码。
进行条件分岐。
转换语句
根据条件的值进行选择:
如果条件的值等于 值1,则执行对应的操作并跳出循环;
如果条件的值等于 值2,则执行对应的操作并跳出循环;
…
如果条件的值与以上任何值都不相等,则执行默认操作并跳出循环。
比较运算符
・用a===b来检查a和b是否相等。
・用a!==b来检查a和b是否不同。
const number = 12;
console.log(number === 12);
控制台输出 “true”
其他
・控制台输出 console.log();中的文本。
・以 // 注释代码行。
・使用 let 变量名=值; 定义变量。在进行覆写时,不需要使用 let。
・使用 const 常量名=值; 定义常量。
・使用 ${} 将常量和变量转换为字符串。在此过程中,整个字符串使用“ㅤ`ㅤ”括起来。
・使用 X && Y 进行多个条件判断(X和Y)。
・使用 X || Y 进行多个条件判断(X或Y)。
第二
当…龄
当条件式成立时,
执行此处代码
条件式持续成立
在数字小于等于100的情况下,逐个打印数字并将数字增加1。
“用于循环的代码部分”
在变量定义的同时,根据条件表达式进行循环,只要条件表达式为真,则执行此处的代码。移除分号。
for(let number=1 ;number<=100; number+=1){
console.log(number);
}
在控制台打印出”1 2 3…”
其他
・+=1=++ (递增1)
・-=1=– (递减1)
・可以在对象内放置对象。
调用方式为 “对象名称.对象名称.属性”
(例)
const cafe = {
name: “咖啡馆”,
businessHours: {
opening: “10:00(上午)”,
closing: “8:00(下午)”,
},
};
第三
・用const关键字定义一个常量名为函数名的函数(){…}。
・将function()简写为()=>,这是箭头函数。很方便!
・通过常量名()调用函数。
・用const关键字定义一个常量名为函数名的函数(参数名)=>{…},用于接收参数。
・在函数内使用return语句,这样后面的代码将不会执行,可以在调用处接收到返回值。
第四
在Java中,我们可以通过使用”class”关键字来设计一个类(类似于设计蓝图):class 类名{…}。
通过使用”extends”关键字,我们可以继承一个原始类,创建一个新的类:class 类名 extends 继承的类名{…}。
以下的代碼是用於建構函式內部使用的。
使用new关键字加类名()来生成一个类的对象。
使用constructor(){…}在实例生成时添加处理逻辑。
使用this.property=value来给实例添加属性和值。
使用super()调用()内的父构造函数。
Ⅴ可以用中文进行优化。
进口和出口
用 `export default 类名;` 来准备使其他文件可以使用该类。
使用 `import 类名 from “./文件名”;` 来导入准备好的文件。
如果目录不同,则使用 `import 类名 from “../目录名/文件名”;`。
此时文件名末尾的 .js 可以省略。
在上述方法中,只能使用一个文件进行一次定义。
如果想要定义多个选项,可使用命名导出。
以下是对原文的中文本地化翻译:
– 使用 `export {类名1, 类名2, 类名3…};` 进行命名导出。
– 使用 `import {类名1, 类名2, 类名3…} from “./文件名”;` 进行命名导入。
其他
在我的程序中使用import常量名自“包名;”导入包。
Ⅵ – 六
查找方法
取出符合回调函数处理的条件表达式的第一个元素。
(ex1)
const numbers = [1, 3, 5, 7, 9];
const foundNumber = findNumber(numbers);
console.log(foundNumber);
找到数值的函数
function findNumber(numbers) {
for (let i = 0; i < numbers.length; i++) {
if (numbers[i] % 3 === 0) {
return numbers[i];
}
}
return null;
}
输出:
3
(选项1)
const characters = [
{id: 1, name: “にんじゃわんこ”, age: 6},
{id: 2, name: “ベイビーわんこ”, age: 2},
{id: 3, name: “ひつじ仙人”, age: 100},
{id: 4, name: “とりずきん”, age: 21}
];
const foundCharacter = characters.find((character)=>{return character.id===3});
console.log(foundCharacter);
控制台输出:「{id: 3, name: “ひつじ仙人”, age: 100}」
筛选方法
与find方法不同,它可以提取符合条件的所有元素。
map函数
对数组中的所有元素进行处理。
其他
・使用「配列类.push(◯◯)」可将新元素追加到数组的末尾。
・使用「配列类.forEach((参数)=>{console.log(参数)})」可逐个处理数组类中的元素。
七
回调函数
const printWanko = () => {
console.log(“にんじゃわんこ”);
};
const call = (callback) => {
console.log(“对回调函数进行调用。”);
callback();
};
call(printWanko);
控制台输出:
“对回调函数进行调用。
にんじゃわんこ”
在Progate的jQuery教程中学到的新知识。
基本的的知识
・用$(function(){…..});来包裹全部内容。
・使用$(‘选择器’).方法(参数)来描述要做什么。
・如果有多个方法,则可以将方法(参数).方法(参数).方法…连接在一起。
例如:
・使用$(‘选择器’).事件名(function(){…});来在事件发生时执行处理。
例如:
使用$(‘#wrapper’).hover(function(){…});来在鼠标悬停时触发反应。
初级编辑
・在标签之后大约加入。・在html的标签之前加入。・类似于.class的元素中存在#id。・通过$(‘选择器’).css(‘属性名’,’值’)来改变css。当将’this’作为选择器时,只对该元素起作用(防止所有的p元素等都起作用)。・通过$(‘p’).html(‘こんばんは’),也支持修改HTML等。
使用方法为使用方法实现动画的函数
・通过使用fadeOut()将元素逐渐消失。(相反的是fadeIn())
通过fadeOut(1500),元素会在1500毫秒(即1.5秒)内逐渐消失。使用fadeOut(‘slow’)则会慢慢消失。
・slideUp()将元素从下向上消失。(相反的是slideDown())
・通过show()方法将消失的元素显示出来。在显示之前,原来的元素需要设置为display:none。
這裡只需要一種選擇,請用中文翻譯以下內容:中級編。
进行模态显示的三个步骤
1. 在CSS中添加对象{display:none;}来隐藏。
2. 使用'(#…).click(function(){…});’创建点击事件。
3. 在事件内描述要执行的操作。
其他
使用$(“.类名”).addClass(“要添加的类名”)方法可以添加新的类(相反的是removeClass)。
使用$(“.类名”).hasClass(“判断的参数”)方法,如果对象包含指定的元素,返回 true,否则返回 false。
高级编辑
・可以通过animate在animate中添加动画。
・只有选择参数指定的数字才会对$(◯).eq(△).反応させたい内容;产生反应。
(例如)
如果使用$(‘li’).eq(2).css(‘color’,’red’);,那么只有第三行的“li”会变成红色。
・使用prev可以获取前一个元素(相反的是next)。
・可以通过var html=$(‘#main’).html();这样的方式,获取html元素(在此例中,获取了id为main的元素)。
・也可以通过var fontSize=$(‘h1’).css(‘font-size’);的方式,获取css样式元素。
不同的示例包括設置和取得功能。
・$(‘h1’).attr(‘id’,’title’);
=将h1元素的id属性设置为”title”。
・var url=$(‘a’).attr(‘href’);
=获取a元素的href属性(https…)。
・var name=$(‘#name’).val();
=将HTML中输入框内实际输入的文本存储在变量name中。