[웹 개발] JavaScript & Jquery 기초 문법

JavaScript

let 변수명 : 변수를 선언할 때 사용한다. 변수에는 숫자, 문자 말고도 리스트와 딕셔너리도 대입이 가능하다.

console.log() : console창에서 log안의 내용을 보여준다. 다른 언어의 print와 비슷하다.

list.push(element) : 리스트에 값을 추가해준다. 파이썬의 .append와 같은 역할을 해준다.

dictonary : key와 value로 이루어져 있으며 key는 중복되면 안되고 문자열이여야 한다.

협업에서는 리스트와 딕셔너리를 같이 사용하는 경우가 많아서 사용하는데 익숙해져야 한다.

ex) 예시 코드

names = [

            { 'name': 'bob', 'age': 20 },

            { 'name': 'carry', 'age': 38 }]

        console.log(names[0]['name']) // 'bob'을 출력

        console.log(names[1]['name']) // 'carry'을 출력

        new_name = { 'name': 'john', 'age': 7 }

        names.push(new_name)

        console.log(names[2]['name']) // 'john'을 출력

 

 

조건문과 반복문

forEach의 사용

let fruits = ['사과', '배', '망고', '귤']

        fruits.forEach(element => {

            console.log(element)

        }); //순서대로 사과 배 망고 귤이 한줄씩 출력

fruits안의 요소를 하나씩 가져와서 console창에 출력하는 코드다.

for문은 c언어와 비슷하게 for (초기식; 조건식; 증감식) {} 으로 구성되는데 forEach는 리스트안의 요소만큼 반복해준다.

if문도 비슷하게 if(조건) {} else {} 다.

 

function 함수명() {} : ()안의 재료로 {}안의 코드를 실행해준다. 함수를 사용하면 반복적인 코드를 크게 줄일 수 있다.

alert() : 경고창을 띄워주는 코드, 소괄호 안에 메세지를 작성하면 보여준다.

 

Jquery

<button onclick="checkResult()">결과 확인하기!</button>

<div id="q1">

            <p>사과</p>

            <p>귤</p>

            <p>감</p>

  </div>

 function checkResult() {

            let fruits = ['사과', '배', '감', '귤', '수박']

            $('#q1').empty()

            fruits.forEach(element => {

                let temp_html = `<p>${element}</p>`

                $('#q1').append(temp_html)

            });

위에서부터 차례대로 살펴보면 html의 버튼코드인데 클릭시 checkResult()함수를 실행시켜준다.

함수 안에는 fruits 리스트를 선언하고

$('#q1').empty의 듯을 하나하나 살펴보면

$ : 제이쿼리를 의미하며, 제이쿼리를 시작하는 식별자이다.

('#q1') : #은 id선택자, 클래스는 .을 쓰며 이 코드는 id가 q1인 태그를 선택한다는 뜻이다.

.empty() : 영어뜻대로 비운다는 뜻이다.

forEach 문으로 fruits안의 요소들을 하나씩 가져오고 temp_html을 선언하는데 원하는 html코드를 백틱(`)에 넣어준다.

$('#q1').append(temp_html) : 똑같이 id가 q1인 태그에 temp_html을 추가해주는 코드다.

 

Fetch : 클라이언트의 요청이나 서버의 응답과 관련된 API호출을 위해 사용하는 함수이다.

fetch("여기에 URL을 입력")

            .then(res => res.json())

            .then(data => {

                console.log(data)

            })

이 코드도 위에서부터 살펴보면

fetch의 기본 골격으로 입력한 url로 웹 통신을 요청하고

.then() : 응답을 받으면 실행할 내용이다.

res => res.json() : 받은 데이터를 res라고 하고 res를 json형태로 바꾼다.

.then(data => {}) : json형태로 바꾼 데이터를 data로 하고 {}안의 코드를 실행한다.

     <div class="weather">

            <img id="weatherIcon" src="https://ssl.gstatic.com/onebox/weather/64/partly_cloudy.png">

            <p id="weatherTemp">날씨 맑음, 20ºC</p>

        </div>

 

     let weather_url = "http://spartacodingclub.shop/sparta_api/weather/seoul";

        fetch(weather_url)

            .then(res => res.json())

            .then(data => {

                console.log(data);

                let icon = data['icon']

                let temp = data['temp']

                let tempMsg = `${temp}ºC`

                $('#weatherIcon').attr("src", icon)

                $('#weatherTemp').text(tempMsg)

            })

 

마지막 코드는 웹 개발 2주차 강의의 숙제로 jquery와 fetch를 공부하면서 적용한 내용이다. 

---

마지막에 이미지를 처리하는 코드를 몰라서 헤매고 있었는데

힌트 부분에 $('#이미지태그').attr("src", "이미지 주소")를 보고 이미지 처리 방식에 대해서도 배웠다.

하지만 처음 접하는 부분이 많아서 간단한 내용이지만 반복 학습으로 내 것으로 만들 필요하 있다.