22.003.04 JS-関数、オブジェクト、DOM
50911 ワード
「科目数」->「プロンプト」を「数値」に変換し、変数に挿入します.
入力した数に応じてカリキュラム名->for文を受け入れ、数列を繰り返し配列に挿入
この科目のスコアを入力し、合計スコアと平均スコア->配列に入力します.pushを使用して最後に値を加算
htmlドキュメントにテーブルを作成し、出力=>2行目を固定します.列はダイナミック
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<meta http-equiv="X-UA-Compatible" content="IE=edge">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<title>Document</title>
<style>
table,
td {
border: 1px solid;
text-align: center;
}
</style>
</head>
<body>
<script>
//1.사용자에게 과목수 입력받음
//2.1에서 입력한 수 만큼 과목이름을 입력받음
//3.해당 과목의 점수를 입력받고 총점과 평균 구함
//4.html문서 내 table을 만들어 출력=>2행 고정, 열은 유동적
// <table>, <tr>, <td>
let num = Number(prompt('과목 수 입력'))
let list = [];
let score = [];
for (let i = 0; i < num; i++) {
list[i] = prompt('점수를 입력할 과목을 입력하세요')
}
let total = 0;
for (let i = 0; i < list.length; i++) {
score[i] = Number(prompt(list[i] + '의 점수를 입력'))
total += score[i]
}
let avg = parseInt(total / score.length)
list.push('총합')
list.push('평균')
score.push(total)
score.push(avg)
// 아래부터 테이블
document.write('<table>')
document.write('<tr>')
for (let i = 0; i < list.length; i++) {
document.write('<td>')
document.write(list[i])
document.write('</td>')
}
document.write('</tr>')
document.write('<tr>')
for (let i = 0; i < score.length; i++) {
document.write('<td>')
document.write(score[i])
document.write('</td>')
}
document.write('</tr>')
document.write('</table>')
</script>
</body>
</html>特定の機能を実行するソースコードを組み合わせて、必要に応じて呼び出すことで、構造>>コードの再利用性を簡素化
関数は括弧、オブジェクトは括弧
実行コードのパッケージングおよび実行
冗長コードの最小化
実行コードブロック>>コードブロック
function関数名(パラメータビット、書けるか書かないか){
論理と機能実装コードの作成
}==>関数宣言
関数名();=>塩水出口
特長
データ型が同じかどうかチェックしない
パラメータと入力値が異なる場合は、エラーは発生しません.
入力値がパラメータより小さい場合undefined
JSの位置づけ
関数の宣言を最上位にドラッグ&ドロップ
関数の例
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<meta http-equiv="X-UA-Compatible" content="IE=edge">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<title>Document</title>
</head>
<body>
<script>
//리턴일때
function addNum(num1, num2) {
return num1 + num2;
}
//출력함수
function addNum2(num1,num2){
alert(num1+num2)
}
let num1 = Number(prompt('첫 번째 정수 입력'))
let num2 = Number(prompt('두 번째 정수 입력'))
alert(addNum(num1, num2));
</script>
</body>
</html>恐怖の星JSバージョン
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<meta http-equiv="X-UA-Compatible" content="IE=edge">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<title>Document</title>
</head>
<body>
<script>
//1.사용자에게 기호 이모지를 입력받음
//2. 몇줄 출력할지 입력하시오
//3.이모지피라미드를 만들어주는 function pyramid선언
//4.피라미드 호출
let emoji = prompt('이모지를 입력하세요')
let rows = Number(prompt('줄 입력하세요'))
function pyramid(emoji, rows) {
for (let i = 1; i <= rows; i++) {
for (let j = 0; j < i; j++) {
document.write(emoji)
} document.write('<br>')
}
}
pyramid(emoji, rows)
//js의 호이스팅 : 함수안에 있는 선언들을 끌어 올려서 최상단에 선언해주는 것
</script>
</body>
</html>let 객체명 = {
속성명1 : 값1,
속성명2 : 값2,
function(){
}
};
let pokemon1 = {};
pokemon1.name = '피카츄';
pokemon1.age = 2;
pokemon1.skill = function(){
console.log('백만볼트!');
}
console.log(pokemon1)
console.log('포켓몬의 이름은 >> ' + pokemon1.name)
console.log('포켓몬의 나이는 >> ' + pokemon1.age)
pokemon1.skill();
let 객체명 = {};
객체명.속성명1 = 값1;
객체명.속성명2 = 값2;
객체명.함수명 = function() {
};
let pokemon2 = {
name:'꼬북이',
age:1,
skill:function(){
console.log('물대포!')
}
};
console.log('포켓몬의 이름은 >> ' + pokemon2.name)
console.log('포켓몬의 나이는 >> ' + pokemon2.age)
pokemon2.skill();HTML CSS JS構成
...異なる言語を異なるオブジェクトに分割する.
HTMLドキュメントにアクセスするには、ドキュメントはオブジェクトにアクセスするときの最上位オブジェクトです.属性名~~
特定のタグにアクセスするときdocument.
getElement要素のプロパティのインポート
戻り=>HTML Elementタイプ(すべてのタイプの要素を表すインタフェース)
getElement
getElementbyId(id)#特定のidを使用しない要素クエリーを返す=>HTML Elementオブジェクト
クエリーgetElementsbyName(name)名前属性要素
getElementsbyTagNameタグ名に基づいて要素を検索
getElementsbyClassName(クラス)特定のクラス要素のクエリー
Elements=>HTML Collectionオブジェクトが戻る
要素にのみコンテンツが含まれます!持ってきた時innerText
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<meta http-equiv="X-UA-Compatible" content="IE=edge">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<title>Document</title>
</head>
<body>
<p id="text">Hello, World!</p>
<button onclick="innerFunc()">Click!</button>
<script>
function innerFunc(){
//버튼 클릭시
let str = document.getElementById('text')
// alert(str)
console.log(str)
console.log(str.innerText) //요소 안 내용만 가지고 오고싶을때
// str.innerText = '<h1>텍스트 수정!</h1>'
//태그까지 적용하고 싶을 때
str.innerHTML = '<h1>텍스트수정</h1>'
}
</script>
</body>
</html>
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<meta http-equiv="X-UA-Compatible" content="IE=edge">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<title>Document</title>
</head>
<body>
<h1>클릭 한번 해볼까요?</h1>
<button onclick="mkH1()">h1태그 생성</button>
<button onclick="mkA()">a태그 생성</button>
<button onclick="mkUl()">ul태그 생성</button>
<!-- div는 생성한 태그를 누적할 공간-->
<div id="div1"></div>
<script>
//1. 태그 생성위치 -> 변수div
let div = document.getElementById('div1')
//2. 함수선언 - div공간안에 태그 누적 추가
function mkH1(){
div.innerHTML += '<h1>DOM활용하기</h1>'
}
function mkA(){
div.innerHTML += '<a href="www.google.com">Google로 이동</a>'
}
function mkUl(){
div.innerHTML += '<ul><li>HTML</li><li>CSS</li><li>JS</li></ul>'
}
</script>
</body>
</html>
しかし、0では
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<meta http-equiv="X-UA-Compatible" content="IE=edge">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<title>Document</title>
</head>
<body>
<h2 id="num">0</h2>
<button style="border-radius: 15px;" onclick="plus()">+1증가</button>
<button style="border-radius: 15px;" onclick="minus()">-1감소</button>
<script>
let num = document.getElementById('num')
let inner_num = Number(num.innerText)
function minus(){
if (inner_num != 0) {
inner_num--;
num.innerText = inner_num;
}
}
function plus(){
inner_num++;
num.innerText = inner_num;
}
</script>
</body>
</html>
初期画面
関数画面の適用
Reference
この問題について(22.003.04 JS-関数、オブジェクト、DOM), 我々は、より多くの情報をここで見つけました https://velog.io/@ggg4155/22.03.04-JSテキストは自由に共有またはコピーできます。ただし、このドキュメントのURLは参考URLとして残しておいてください。
Collection and Share based on the CC Protocol