ãã®ã¹ãã«ãã¹ãã®ç®çã¯ãããªããã«ã¼ãããã³ã¼ããçè§£ãããã©ãããå¤å®ãããã¨ã§ãã
ã¡ã¢: æå©ããå¿ è¦ãªå ´åã¯ãã¹ãã«ãã¹ã使ç¨ã¬ã¤ãããèªã¿ãã ãããã¾ããã³ãã¥ãã±ã¼ã·ã§ã³ãã£ãã«ã®ããããã使ç¨ãã¦ãç§ãã¡ã«é£çµ¡ãããã¨ãã§ãã¾ãã
DOM æä½: æçãªãã®ä¸è¨ã®åé¡ã®ä¸ã«ã¯ã DOM ãæä½ããã³ã¼ããæ¸ããã¨ãæ±ãããããã®ãããã¾ããä¾ãã°ãæ°ãã HTML è¦ç´ ã使ãããã®ããã¹ãã³ã³ãã³ããç¹å®ã®æååå¤ã¨çãããªãããã«è¨å®ãããã¼ã¸ä¸ã®æ¢åã®è¦ç´ ã®ä¸ã«ãã®è¦ç´ ãå ¥ããã¨ãããããªãã¨ã§ãããã¹ã¦ JavaScript ã使ç¨ãã¾ãã
ãã®ã³ã¼ã¹ã®ä¸ã§ã¯ã¾ã æç¢ºã«æãã¦ãã¾ãããããã® API ã使ç¨ããä¾ãããã¤ãè¦ã¦ããã¨æãã¾ãã®ã§ãåé¡ã«ãã¾ãçããããã«ã¯ã©ã®ãã㪠DOM API ãå¿ è¦ãªã®ãã調ã¹ã¦ã¿ã¦ãã ãããç§ãã¡ã® DOM ã¹ã¯ãªããæä½å ¥éãã¥ã¼ããªã¢ã«ãè¯ãåºçºç¹ã«ãªãã§ãããã
ã«ã¼ã 1æåã®ã«ã¼ãã®èª²é¡ã§ã¯ãåç´ãªã«ã¼ãã使ãã¦ãæå®ããã myArray
ã®é
ç®ããã¹ã¦èªã¿è¾¼ã¿ããªã¹ãã¢ã¤ãã ï¼ã¤ã¾ãã <li>
è¦ç´ ï¼ã¨ãã¦ç»é¢ã«åºåããæå®ããã list
ã«è¿½å ãã¾ãã
* {
box-sizing: border-box;
}
p {
color: purple;
margin: 0.5em 0;
}
const myArray = ["tomatoes", "chick peas", "onions", "rice", "black beans"];
const list = document.createElement("ul");
const section = document.querySelector("section");
section.appendChild(list);
// 以ä¸ã®ã³ã¼ãã¯ç·¨éããªãã§ãã ããã
// ããã«ã³ã¼ãã追å
ãããã¯ãªãã¯ããã¨ã模ç¯è§£çã表示ãã¾ãã
宿ãã JavaScript ã¯ã次ã®ããã«ãªãã§ãããã
// ...
// 以ä¸ã®ã³ã¼ãã¯ç·¨éããªãã§ãã ããã
for (let item of myArray) {
const listItem = document.createElement("li");
listItem.textContent = item;
list.appendChild(listItem);
}
ã«ã¼ã 2
ãã®æ¬¡ã®èª²é¡ã§ã¯ãååãæå®ãããããååã¨é»è©±çªå·ãä¿æãããªãã¸ã§ã¯ãã®é åãæ¤ç´¢ããååãè¦ã¤ãããååã¨é»è©±çªå·ã段è½ã«åºåããã«ã¼ããå®è¡ããåã«çµäºããåç´ãªããã°ã©ã ãæ¸ãã¦ããã ãã¾ãã
å§ãã« 3 ã¤ã®å¤æ°ãä¸ãããã¦ãã¾ãã
name
â æ¤ç´¢ããååãä¿æãã¾ããpara
â æ®µè½ã¸ã®åç
§ãä¿æããçµæãå ±åããããã«ä½¿ç¨ãã¾ããphonebook
- æ¤ç´¢ããé»è©±å¸³ã®é
ç®ãæ ¼ç´ããã¦ãã¾ããã¡ã¢: ãªãã¸ã§ã¯ãã«ã¤ãã¦ã¾ã èªãã§ããªãã¦ãå¿é ããªãã§ãã ãããããã§ç¥ãå¿ è¦ãããã®ã¯ãã¡ã³ãã¼ã¨å¤ã®ãã¢ã«ã¢ã¯ã»ã¹ããæ¹æ³ã ãã§ãããªãã¸ã§ã¯ãã«ã¤ãã¦ã¯ JavaScript ãªãã¸ã§ã¯ãã®åºç¤ãã¥ã¼ããªã¢ã«ã§èªããã¨ãã§ãã¾ãã
ãã®èª²é¡ã宿ãããã«ã¯ã次ã®ããã«ãã¾ãã
phonebook
) é
åãå復å¦çãã¦ãæå®ããã name
ãæ¤ç´¢ããã«ã¼ããè¨è¿°ãã¦ãã ãããååã®èª²é¡ã§ä½¿ç¨ãã¦ããªã種é¡ã®ã«ã¼ãã使ç¨ãã¾ããããname
ãè¦ã¤ãã£ããããããé¢é£ä»ãããã number
ã¨ã¨ãã«ãæå®ãããæ®µè½ (para
) ã® textContent
ã«ã<name> ã®é»è©±çªå·ã¯ <number> ã§ããã¨ããå½¢ã§æ¸ãè¾¼ã¿ã¾ãããã®å¾ãã«ã¼ããå®è¡ãå®äºããåã«ã«ã¼ããçµäºãã¦ãã ãããname
ãæå®ããããªãã¸ã§ã¯ãã 1 ã¤ãå«ã¾ãã¦ããªãå ´åãæå®ãããæ®µè½ã® textContent
ã«ãé»è©±å¸³ã«ååãè¦ã¤ããã¾ãããã¨è¡¨ç¤ºãã¦ãã ãããconst name = "Mustafa";
const para = document.createElement("p");
const phonebook = [
{ name: "Chris", number: "1549" },
{ name: "Li Kang", number: "9634" },
{ name: "Anne", number: "9065" },
{ name: "Francesca", number: "3001" },
{ name: "Mustafa", number: "6888" },
{ name: "Tina", number: "4312" },
{ name: "Bert", number: "7780" },
{ name: "Jada", number: "2282" },
];
const section = document.querySelector("section");
section.appendChild(para);
// 以ä¸ã®ã³ã¼ãã¯ç·¨éããªãã§ãã ããã
// ããã«ã³ã¼ãã追å
ãããã¯ãªãã¯ããã¨ã模ç¯è§£çã表示ãã¾ãã
宿ãã JavaScript ã¯ã次ã®ããã«ãªãã§ãããã
// ...
// 以ä¸ã®ã³ã¼ãã¯ç·¨éããªãã§ãã ããã
for (let i = 0; i < phonebook.length; i++) {
if (phonebook[i].name === name) {
para.textContent = `${phonebook[i].name} ã®é»è©±çªå·ã¯ ${phonebook[i].number} ã§ãã`;
break;
}
if (i === phonebook.length - 1) {
para.textContent = "é»è©±å¸³ã«ååãè¦ã¤ããã¾ãã";
}
}
ã«ã¼ã 3
ãã®æå¾ã®èª²é¡ã§ã¯ãæå®ããããã¹ã颿°ãå®è¡ãã¦ã 500
ãã 2
ã¾ã§ã®ãã¹ã¦ã®æ°å¤ãç´ æ°ã§ãããã©ãããæ¤æ»ããç´ æ°ã表示ãã¾ãã
次ã®ãã®ãæä¾ããã¾ãã
i
: 500
ã®å¤ããå§ã¾ãã¾ããã¤ãã¬ã¼ã¿ã¼ã¨ãã¦ä½¿ç¨ããããã®ãã®ã§ããpara
: çµæãå ±åããããã«ä½¿ç¨ããæ®µè½ã¸ã®åç
§ãæ ¼ç´ããã¦ãã¾ããisPrime()
: æ°å¤ã渡ãã¨ããã®æ°å¤ãç´ æ°ã§ããã° true
ãç´ æ°ã§ãªããã° false
ãè¿ã颿°ã§ãããã®èª²é¡ã宿ãããã«ã¯ã次ã®ããã«ãã¾ãã
2
ãã 500
ã¾ã§ã®æ°ãéã«èªã¿ï¼1 ã¯ç´ æ°ã¨ãã¦æ°ãããã¾ããï¼ãæå®ããã isPrime()
颿°ãå®è¡ãã¾ããtextContent
ã«è¿½å ãã¾ããååã¾ã§ã® 2 ã¤ã®èª²é¡ã§ã¯ä½¿ç¨ããªãã£ã種é¡ã®ã«ã¼ãã使ç¨ãã¾ãããã
let i = 500;
const para = document.createElement("p");
const section = document.querySelector("section");
function isPrime(num) {
for (let i = 2; i < num; i++) {
if (num % i === 0) {
return false;
}
}
return true;
}
// 以ä¸ã®ã³ã¼ãã¯ç·¨éããªãã§ãã ããã
// ããã«ã³ã¼ãã追å
// 以ä¸ã®ã³ã¼ãã¯ç·¨éããªãã§ãã ããã
section.appendChild(para);
ãããã¯ãªãã¯ããã¨ã模ç¯è§£çã表示ãã¾ãã
宿ãã JavaScript ã¯ã次ã®ããã«ãªãã§ãããã
// ...
// 以ä¸ã®ã³ã¼ãã¯ç·¨éããªãã§ãã ããã
do {
if (isPrime(i)) {
para.textContent += `${i}, `;
}
i--;
} while (i > 1);
// 以ä¸ã®ã³ã¼ãã¯ç·¨éããªãã§ãã ããã
// ...
RetroSearch is an open source project built by @garambo | Open a GitHub Issue
Search and Browse the WWW like it's 1997 | Search results from DuckDuckGo
HTML:
3.2
| Encoding:
UTF-8
| Version:
0.7.4