JavaScript 기초/ 실습 - 객체와 배열, 함수와 클래스

MINJOO·2022년 6월 9일
0

오늘도 크롬 창을 열고 console창을 연다.

배열

1.index내에 항목수를 셀때는 0부터 시작한다.
ex) const str="안녕하세요", index에서는 01234로 총 5개이지만 자릿수는 4로 끝난다.
2. str.length는 글자 전체 길이다.
ex) str.length는 첫글자부터 1로친다. 그럼 결국 5가 된다.

대체

위 사진처럼 jass / blues / rock-n-roll 세개가 있었으나
classics가 blues를 대체하였다.

array문

같이 공부하시는 분이 깔끔하게 정리해주신자료를 참고하고자 한다.

<!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>
        const array1 = [273, 56, 25, 278, 365]
        console.log(array1[1])
    </Script>
</body>
</html>

push
ex) array1.push(“딸기”) 또는 array1.push(3)
만약 콘솔창에서 5 이런식으로 뜨는 것은 5번째로 추가했다는 것이다.
즉, push는 배열의 끝에 입력값을 추가하는 것이다.

splice
array1.splice(인덱스, 제거갯수)
splice(start[, deleteCount[, item1[, item2[, ...]]]])
start: 배열의 변경을 시작할 인덱스.

<-- splice 관련해서 콤마와 온점

1) 온점
fs.splice(1.2)
의 경우 배열이 1부터 시작한다. 그리고 그 1을 포함하여 우측으로 2개빼고는 전부 생략한다.
소수지만 int로 인식한다.

2) 콤마
fs.splice(1,1)
의 경우 배열은 0부터 시작. 따라 (1,1)에서 첫 번째 1은 배열에서 사과를 의미하고
두 번째 1은 그 요소를 몇가지 제거할 것인가

indexOf
indexOf배열의 요소 중에 있는지 없는지를 알 수 있다.
배열의 요소에 있으면 1을 입력해주고 없으면 –1을 입력해주는데 이런 것으로 id 생성을 만들 수 있음.
ex) –1이 나오면 game 등의 id 생성 불가능하다. 1이면 id 생성 가능하다.
여기서는 배열이 0부터 시작한다.

<-- splice와 inexOf 같이 사용
fsk.splice(fsk.indexOf('사과'),2) 이렇게 되면 ‘사과’ 2개 제거
fsk.splice(fsk.indexOf('사과')) 뒤에 개수 지정하지 않으면 ‘사과’라는 것을 전부 제거

for-in문

<!-- for문
1) for문에는 총 3가지가 있다.
2) for in / for of 는 배열에서 사용. 
for -->

<!-- for문 기본구조  -->
<!-- for(const i in fask(배열객체) ){
    실행문장
} -->

<!-- for in(식별자 in 배열) -->
<!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>
        const fruits =["사과","딸기","수박","참외"]
        for(const i in fruits){
            // console.log(fruits[i])
            // console.log(i)
            console.log(`${i}번째 인덱스의 과일은 ${fruits[i]}`)
        }
        // 마지막에 배열로 작성하였다.
        // 배열 = [요소, 요소, 요소]
        // for_in은 index(0,1,2)를 가져온다.
    </script>
</body>
</html>

for-of문

<!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>
        //  const fruits =["사과","딸기","수박","참외"]
        // for(const frk of fruits){
        //     console.log(`${frk}번째 인덱스의 과일은 ${frk}`)
        // }
        const fruits =["사과","딸기","수박","참외"]
        let a = 0
        for(const frk of fruits){
            console.log(`${a}번째 인덱스의 과일은 ${frk}`)
            a = a+ 1
        }
        // 마지막 변수로 작성
        // 배열 = [요소, 요소, 요소]
        // for_of는 요소를 가져온다.
    </Script>
</body>
</html>

for문

<!-- for문은 정해진 횟수만큼 반복할 때
while문은 정해진 횟수를 모를 때 원하는 값을 얻고 싶을 때 사용 -->

<!-- for문 기본구조 -->
<!-- for(초기값; 조건식; 증감식){
    실행문
} -->

<!-- for (let i=0; i < 100; i++){

       console.log(i);}
       
→ 인덱스(i) = 0부터 시작해서 100 이전의 수까지 반복할 거고,
i는 1씩 커지며 증가할거다 (i++) 이때 i를 출력해라
→ 결과값 : 0, 1, 2, 3, 4, 5 ... 99 -->

<!-- 배열을 쓸 경우에만 let 말고 const도 사용가능하다. (예외) -->
<!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>
        // const fsk=['사과','딸기','수박','참외']
        // for(let i=0; i<4; i++){
        //     console.log(`${i}번째 과일은 ${fsk[i]}`)
        // }
        // console.log(`${result}`)   
// 거꾸로 과일 표현
        const fsk=['사과','딸기','수박','참외']
        for(let i=3; i>=0; i=i-1){
                console.log(`${i}번째 과일은 ${fsk[i]}`)
             } 
        //    let result=0
        //    for(let i=0; i<10; i++){
        //      result= result+i
        //    }
        //    console.log(`${result}`)
        // 0~9라는 숫자 총, 10번을 더하는 값이 나타나게 된다.
    </Script>
</body>
</html>

느낀점

자바를 계속 공부하고 익숙해지다보면 html은 상당수 잊어버릴듯하다.
초급자로서 재밌는건 html이 좀 더 재미있다.

profile
코딩 신생아

0개의 댓글