728x90
<!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>
// 배열 : 같은 형태의 데이터를 담아서 관리하는 타입
// 배열의 데이터를 접근할때는 인덱스를 통해서 접근
let arr = ["java","py","html","css","javascript"];
console.log(arr);
console.log("특정데이터 접근 : ",arr[0])
// 데이터 변경
arr[0] = "oracle";
console.log(arr)
// 배열의 길이
console.log(arr.length);
// 배열 함수
// 1. pop() = 배열의 인덱스 마지막 값을 추출 -> 원본배열에 영향을 준다.
let js = arr.pop() //"javascript"값을 추출
console.log("추출한 값 : ",js);
console.log("원본데이터 : ",arr);
// 2. push() = 배열의 인덱스 마지막 값에 추가 -> 원본배열에 영향을 준다.
arr.push("android");
console.log("추가한 데이터 : ",arr);
// 3. includes() = 배열의 특정 값이 존재하는지 조사 -> 리턴타입이 boolean
let result = arr.includes("html");
console.log("존재 여부 : ",result);
// 4. indexOf() = 배열의 특정 값의 인덱스 값을 조사 - >
let index = arr.indexOf("css");
console.log("인덱스 값 : ",index);
// 5. slice() vs splice()
// slice("시작하는 인덱스","종료할 인덱스+1")
// = 추출한 다음 새로운 배열로 복사 -> 원본 배열에 영향을 주지 않는다
// splice("시작하는 인덱스","인덱스 갯수","추가할값") = 원본에서 제거할때 사용 -> 원본 배열에 영향을 준다
let arr2 = arr.slice(0,3)
console.log(arr);
console.log(arr2);
arr.splice(0,2,"spring","crawling","jsp");
console.log("변경된 원본 배열 : ",arr);
</script>
</body>
</html>
객체.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>
<script>
// 객체 = 다양한 종류의 데이터를 담을때 사용되는 타입
// { key : value}
let person = ["카이사",20,"woman"];
let person2 = {
name : "카이사",
age : 20,
gender : "woman"
}
person[0]; // 배열에서 데이터를 꺼내올때
person2.name; // 객체에서 데이터를 꺼내올때
person[0] = "변경"; // 배열에서 특정 데이터를 변경
person2.name = "변경"; //객체의 특정 데이터를 변경
// ★★★ 배열은 데이터를 인덱스로 접근, 객체는 키값으로 접근
let obj = [{name : "정형"}, {name : { real : "이수환"}}]
obj[1].name.real
console.log(person2)
</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>
<script>
// 코로나 검사 프로그램
// 1. 사용자에게 코로나 검사여부를 입력(확인, 취소) = confirm()
// 1-1 사용자가 확인을 누르면 prompt창을 총해서 양성인지 음성인지 입력
// 1-2 사용자가 취소를 누르면 alert창을 통해서 검사하고 오세요라는 메세지를 출력
// 2. 사용자가 입력한 값이 양성이라면 console창에 "집에서 격리!" 출력
// 3. 사용자가 입력한 값이 음성이라면 console창에 "슈퍼항체" 출력
let check = confirm("코로나 검사 하셨나요?")
if (check) {
let ans2 = prompt("양성인가요? 음성인가요?")
if (ans2 === "양성") {
console.log("집에서 격리")
} else if(ans2 === "음성") {
console.log("슈퍼항체")
}
} else {
alert("검사 하고 오세요!")
}
</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>
<script>
// 당신은 카카오 본사의 면접관 입니다.
// 이번 신입공채로 총 1명이 지원 하였습니다.
// 이번 공채에는 프론트앤드 개발자를 채용할 예정입니다.
// 필수 능력은 html,javascript 입니다
// 지원자의 기술 stack중 2가지 모두 만족하는 사람만 채용할 수 있는 로직을 작성해주세요.
// ★조건★
// 1. 2가지 모두 보유한 사람은 합격통보
// 2. 1가지를 보유한 사람은 예비통보
// 3. 그 외는 탈락통보
// TIP
// 1. includes() = 배열의 데이터를 조회하고 리턴하는 데이터가 boolean
// 2. 조건을 작성할때 2가지 모두, 2가지중에 하나라도, 없을때 --> 연산자
let hyung = ["css","html","java","py","javascript","oracle","crawling","jsp","php"]
if (hyung.includes("html") && hyung.includes("javascript")) {
console.log("합격입니다.")
} else if(hyung.includes("html") || hyung.includes("javascript")){
console.log("예비 입니다.")
} else{
console.log("탈락입니다.")
}
</script>
</body>
</html>배열 함수
1. pop() = 배열의 인덱스 마지막 값을 추출 -> 원본배열에 영향을 준다.
2. push() = 배열의 인덱스 마지막 값에 추가 -> 원본배열에 영향을 준다.
3. includes() = 배열의 특정 값이 존재하는지 조사 -> 리턴타입이 boolean
4. indexOf() = 배열의 특정 값의 인덱스 값을 조사 - >
5. slice() vs splice()
-slice("시작하는 인덱스","종료할 인덱스+1")
= 추출한 다음 새로운 배열로 복사 -> 원본 배열에 영향을 주지 않는다
-splice("시작하는 인덱스","인덱스 갯수","추가할값") = 원본에서 제거할때 사용 -> 원본 배열에 영향을 준다
728x90
'Study > JavaScript' 카테고리의 다른 글
| JavaScript기초 4일차 <JQuery, Ajax> (0) | 2022.10.13 |
|---|---|
| JavaScript기초 3일차 <함수, 선언방식, DOM> (0) | 2022.10.13 |
| JavaScript기초 3일차 <함수, 선언방식, DOM> (0) | 2022.10.12 |
| JavaScript기초 1일차 <자료형,연산자> (1) | 2022.10.08 |