[JS/Python] 자바스크립트 기본 복습 + 활용

🌞자바스크립트란?

-프로그래밍 언어 중 하나로, 브라우저가 알아들을 수 있는 언어(표준)

클라이언트가 서버에 요청하면, 서버가 클라이언트에게 HTML + CSS + JS를 준다. 

 

프로그래밍 언어를 배울 때 기억해야할 5가지 

->변수, 자료형, 함수, 조건문, 반복문

 

파이썬에서는 데이터값을 저장하기 위해 리스트와 딕셔너리를 가장 많이 사용한다. 

리스트는 다른 프로그래밍 언어에서는 array(배열)라고 부르기도 한다. 

 

자료형에서 유의 깊게 봐야할 개념 2가지(리스트, 딕셔너리)

 

🌞리스트

• 자바스크립트에서 배열(Array)을 말한다. 
• 리스트는 리스트 내 값의 위치(index)와 그 위치에 있는 값의 정보(value)를 저장한다. 리스트는 key값이 없고(대신 index값, 위치정보)가 있음 어떤 값을 찾을 때 딕셔너리보다 오래 걸릴 수 있다. 
• 순서가 있음 -> 즉, 순서가 중요하다.
• 대괄호를 사용한다. 

let a_list = ['수박', '참외', '배'];
a_list[0]// '수박'
a_list.push('사과');
a_list //(4) ['수박', '참외', '배', '사과']
let b_list=['감자','고구마'];
a_list.push(b_list); //5
a_list[4][0] //'감자'
a_list[4][1] //'고구마'

🌞딕셔너리

• 자바스크립트에서 객체(obj)로 통한다. 
• key : value 한 쌍 
• 위치의 정보 대신 어떤 value에 엑세스할 수 있는 key값을 지정해줄 수 있어서 변수를 들고 오는 것처럼 value를 저장하고 가져오는게 쉽다. 
• 순서가 없음 
• 중괄호를 사용한다. 

let a_dict = {'name': 'bob', 'age':27}; //선언&할당
a_dict['name']; //value를 가져오는 법 [] , 'bob'
a_dict['height'] = 180; // 새로운 요소를 추가할 수도 있다.
a_dict  //{name: 'bob', age: 27, height: 180}

---

🌞JS의 내장 함수 split()를 활용하기

let myemail = 'wwerwer@naver.com';
myemail.split('@'); // (2) ['wwerwer', 'naver.com']
myemail.split('@')[1]; //'naver.com'
myemail.split('@')[0]; //'wwerwer'
myemail.split('@')[1].split('.'); //(2) ['naver', 'com']
myemail.split('@')[1].split('.')[1]; //'com'
myemail.split('@')[1].split('.')[0]; // 'naver'

• 위처럼 문자열에서 특정 문자열만 취하고 싶을 때는 split() 메소드를 사용하면 된다. 보면 배열의 값을 가져오는 방식을 이용하고 있는데 그 이유는 split의 반환값이 배열이기 때문이다. 
• 위와 같이 활용해서 특정 문자열을 추출할 수 있다.  

반복문과 리스트(리스트와 딕셔너리 조합 활용)

 let scores = [
        {'name': '철수', 'score': 90},
        {'name': '영희', 'score': 85},
        {'name': '민수', 'score': 70},
        {'name': '형준', 'score': 50},
        {'name': '기남', 'score': 68},
        {'name': '동희', 'score': 30},
    ]
    //리스트(혹은 배열)과 같이가는 게 반복문이다.
    for (let i = 0; i < scores.length; i++) {
        console.log(scores[i]);
    }

위와 같이 for문을 돌리면 결과는 아래와 같이 나온다. 

 

{name: '철수', score: 90}
{name: '영희', score: 85}
{name: '민수', score: 70}
{name: '형준', score: 50}
{name: '기남', score: 68}
{name: '동희', score: 30}

 

만약에 score만 보고싶다면 for문의 코드를 아래와 같이 바꿔주면 된다.

for (let i = 0; i < scores.length; i++) {
        console.log(scores[i]["score"]);
    }

결과값은 점수들만 나온다.

 

조건문과 같이 결합해서 쓰면 아래와 같이 활용할 수 있다. 

for (let i = 0; i < scores.length; i++) {
        if(scores[i]["score"] > 70){
            console.log(scores[i]['name']);
        }
    }

• 70점이 이상인 사람의 이름만 출력하는 코드이다. 

---

🌞영화마다 해당하는 별점 표시하기 TIP 

• 반복해서 문자열이 나오게 하는 JS 내장 함수를 사용한다. 
• .repeat() 메소드 사용하기 

String.prototype.repeat()

str.repeat(count); //반복하고싶은문자열.repeat(횟수)

 

기존에 영화API로 가져온 star의 정보를 같이 활용한다. 

• 여기서 star의 정보란 해당 영화가 갖고있는 별의 갯수(num)를 값으로 가지고 있음

//아래의 코드는 API의 star정보를 가져오는 기능을 한다. 값은 star의 숫자(몇개가 있는 지)를 가진다. 
let star = rows[i]['star'];
//repeat메소드를 별모양 string에 star에 담겨있는 별 수 만큼 찍어낸다. 
let star_img ='⭐'.repeat(star)

//그리고 영화마다 해당하는 별을 temp_html에 담아서
let temp_html = `<p>${star_img}</<p>`  //기존 모양:<p>⭐⭐⭐</<p> 데이터가 변함없이 고정

//부모 요소인 star-box의 마지막 자식요소로 append 해준다. 
$('#star-box').append(temp_html);

-> 이렇게 하면 기존 모양이었던 정적인 데이터에서 API를 활용하여 각 영화에 해당하는 별모양 수대로 표시할 수 있는 동적인 데이터가 될 수 있다.