Javascript 맛보기..

현정재·2024년 6월 8일

오늘은 javascript, js에 대해 맛좀 보았다.
진짜 기초..ㅋㅋ 그래도 나름 재미있었다!

JS는 이런거?

<script>
    // step1. HTML 요소 바꾸기
    // HTML 요소를 선택
    // const myElement = document.querySelector('#myElement');

    // 선택한 요소의 텍스트 내용을 변경
    // myElement.textContent = '새로운 내용';


    // step2. 버튼 클릭시 숫자 커지기
    function plus() {
        // 숫자를 증가
        const currentNumber = parseInt(myNumber.textContent);
        myNumber.textContent = currentNumber + 1;

    }

    // HTML 요소를 선택
    const myNumber = document.querySelector('#myNumber');
    const myButton = document.querySelector('#myButton');


    // 버튼 클릭 이벤트 리스너를 추가
    myButton.addEventListener('click', plus);
</script>

버튼을 클릭하면 숫자가 증가되는 그런 코드였다.
크리스마스트리로 비유하자면 HTML은 나무만 있고, CSS로 꾸미게 되면 트리에 장식이 달리며 JS를 추가하면 트리에 달린 장식들이 움직이는 동적인 역할을 한다.

list 와 dictionary

// let a_list = []
    // let b_list = [1, 2, 'hey', 3]

    // console.log(b_list[0])
    // console.log(b_list[2])

    // b_list.push('헤이')  /*리스트 추가 방법 :  뒤에([4]가 되는것임) */
    // console.log(b_list)
    // console.log(b_list.length)

    // let a_dict = {}
    // let b_dict = {'name': 'Bob', 'age': 21}    /* 'key': 'value'     key는 중복 X, 문자열이어야함 */

    // console.log(b_dict['name'])
    // console.log(b_dict['age'])

    // b_dict['height'] = 180 /* dictionay 추가 방법 */
    // console.log(b_dict)

    // names = [{'name':'bob','age':20},{'name':'carry','age':38}]
    // console.log(names[0]['name'])
    // console.log(names[1]['name'])

    // new_name = {'name':'john', 'age': 7}
    // names.push(new_name)
    
    // new_name = {'name':'gray','age': 14}
    // names.push(new_name)

    // console.log(names)

for문

// for (let index = 0; index < 10; index++) {
//     console.log(index)
    
// }

// let fruits = ['사과', '배', '망고','귤']
// fruits.forEach(element => {
//     console.log(element)    
// });

if문

    // let ages = [12, 15, 20, 25, 16, 40]

    // ages.forEach(element => {
    //     if (element > 20) {
    //         console.log('성인입니다.')
    //     } else {
    //         console.log('청소년입니다.')
    //     }
    // });

솔직히 list,dictionary,for문,it문은 Java 에서 배운거랑 비슷해서 이해하기에는 수월했다. Java가 좀더 섬세한 언어라고 해야되나? 좀더 자세히 코드를 작성하는게 Java 인거 같다.

또 다른 내용으로는 jquery, fetch 를 배웠는데 사용하는 방법을 배우긴 했지만 익숙해지려면 좀더 사용해보고 이해하는 과정도 더 필요한 부분이라고 느껴진다.

jquery

<!DOCTYPE html>
<html>

<head>

자바스크립트 문법 연습하기!

<body>

자바스크립트 문법 연습하기!

1. 함수

결과 확인하기!

2. 리스트

테스트

3. 딕셔너리

테스트

4. 리스트 딕셔너리

테스트

<script>
//     function checkResult() {
//         // let word = '밤'
//         // $('#q1').text(word)
//         let a = ['사과', '배', '감', '귤']
//         let b = {
//             'name': '영수',
//             'age': 30,
//         }
//         $('#q1').text(a[3])
//         $('#q2').text(b['name'])
//         let c = [
//             { 'name': '영수', 'age': 30 },
//             { 'name': '철수', 'age': 35 }
//         ]
//         $('#q3').text(c[1]['name'])
//     }
// </script>

</html>

fetch

<!DOCTYPE html>
<html lang="en">

<head>

Fetch 시작하기

<body>

Fetch 연습을 위한 페이지

	<script>
		// 이 URL로 웹 통신을 요청한다. 괄호 안에 다른 것이 없다면 GET!
   		fetch("http://spartacodingclub.shop/sparta_api/seoulair") 
        .then(res => res.json()) // 통신 요청을 받은 데이터는 res라는 이름으로 JSON화 한다
        .then(data => {
            let rows = data['RealtimeCityAir']['row']
            rows.forEach(element => {
                console.log(element['MSRSTE_NM'])
                console.log(element['IDEX_MVL'])
            });
            
            // console.log() // 개발자 도구에 찍어보기
        }) // JSON 형태로 바뀐 데이터를 data라는 이름으로 붙여 사용한다

	 </script>
</body>

</html>