day 3
자바스크립트 + 제이쿼리 입문
배열과 조건문
배열 (array)
배열은 선언하는 두 가지 방식
var arrNumber = new Array(); 배열 선언var arrNumber =[1,2,3,4];
배열 index 값을 활용하기
var arrNumber = new Array();
arrNumber[0] = 1;
arrNumber[1] = 2;
arrNumber[2] = 3;
배열 함수 push()
var example = new Array("a", "b", "c");
example.push("d");
배열을 선언하고 브라우저에서 확인해보자.
<script>
let arr = [1,2,3,4,5];
console.log(arr);
</script>
let arr = [1,2,3,4,5];
console.log(arr[2]); // 3
console.log(arr.length); // 5
if 조건문
if (조건) {
참일 때 실행
} else {
거짓일 때 실행
}
if 문 전에 선언하여 (블록 scope 바깥 선언)
if 문이 끝난후에도 출력이 가능하게 해주기.
let grade;
if (avg >= 60){
grade = '합격';
} else {
grade = '불합격';
}
console.log(grade);
지금까지 배운 것 정리
엘리먼트 사용법
- document.querySelector()
데이터 사용법(문자, 숫자, 배열)
제어문(연산자, if)
dom 출력
- 엘리먼트.innerHTML = "내용"
윈도우 입출력창
- prompt
- confirm
- alert
위 메서드들로 dom에 창을 띄울 수 있다.
prompt 사용법
prompt("당신의 이름은?");변수에 저장하기
let html = prompt("html 점수를 입력하세요");
Number 함수를 이용해 string을 int 형으로 바꿔주기
let html = Number(prompt("html 점수를 입력하세요"));wrap up
<!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>
<!--array-if.html-->
<script>
let arr = [1, 2, 3, 4, 5];
console.log(arr[2]); // 3
console.log(arr.length); // 5
arr[0] = 1;
arr[1] = 2;
arr[2] = 3;
arr[3] = 4;
arr[4] = 5;
arr.push(6); // 공간을 별도로 설정하지 않아도 맨 뒤 쪽으로 값을 추가해줌
console.log(arr);
arr[10] = 5; // idx 10으로 하고 선언해주면 그 사이의 값들이 채워짐 -> length = 11이 됨
let arr2 = [100, 50, 40];
let sum = arr2[0] + arr2[1] + arr2[2];
let avg = sum / arr2.length;
console.log(sum)
console.log(avg)
//삼항연산자 => 조건 ? 'true' 일때 : 'false' 일때;
console.log(avg >= 60 ? "합격" : "불합격")
let grade;
if (avg >= 60) {
grade = '합격';
} else {
grade = '불합격';
}
console.log(grade);
avg = 69;
if (avg >= 90) {
grade = "A";
} else if (avg >= 80) {
grade = "B";
} else if (avg >= 70) {
grade = "C";
} else {
grade = "D";
}
</script>
<div class="js">
<!-- 여기서 등급을 매긴다. -->
<p> html 점수는 = </p>
<p> css 점수는 = </p>
<p> js 점수는 = </p>
<p> 총점 = </p>
<p> 평균 = </p>
<p> 판정 = </p>
</div>
<script>
const element = document.querySelectorAll('.js p');
let html = Number(prompt("html 점수를 입력하세요"));
let css = Number(prompt("css 점수를 입력하세요"));
let js = Number(prompt("js 점수를 입력하세요"));
let subjects = [html, css, js];
let summation = subjects[0] + subjects[1] + subjects[2];
let average = summation / subjects.length;
element[0].innerHTML += html;
element[1].innerHTML += css;
element[2].innerHTML += js;
element[3].innerHTML += summation;
element[4].innerHTML += average;
let passOrFail = "불합격";
if (average >= 90){
passOrFail = "합격";
}
element[5].innerHTML += passOrFail;
</script>
</body>
</html>반응형
'교육 > Javascript&Jquery' 카테고리의 다른 글
| 자바스크립트 + 제이쿼리 입문 day 6 (0) | 2023.01.02 |
|---|---|
| 자바스크립트 + 제이쿼리 입문 day 5 (0) | 2022.12.29 |
| 자바스크립트 + 제이쿼리 입문 day 4 (0) | 2022.12.26 |
| 자바스크립트 + 제이쿼리 입문 day 2 (0) | 2022.12.21 |
| 자바스크립트 + 제이쿼리 입문 day 1 (0) | 2022.12.19 |
