24.02.16_TIL (자바스크립트 : 함수, 리스트, 딕셔너리)

티스토리 뷰

AI웹 개발자 과정 공부 (팀스파르타)/ChatGPT 웹 개발

24.02.16_TIL (자바스크립트 : 함수, 리스트, 딕셔너리)

티아(tia) 2024. 2. 16. 23:15

728x90

[수업 목표]

Javascript의 사용방식에 대해 이해하고 문법에 익숙해진다
JQuery로 HTML을 조작할 수 있다
Fetch로 서버 API에 데이터를 주고, 결과를 받아온다

1. JavaScript

JS는 데이터를 받아서 화면을 바꾼다. 움직이는 화면을 만들 수 있다. html은 뼈대, css는 꾸미기, JavaScript는 움직이기!
날씨가 실시간으로 변하거나 시간이 실시간으로 움직이고 새로 고침을 했을 때 명언이 그때 그때 바뀌는 것을 할 수 있다.
프로그래밍 언어는 기계와 사람이 소통하기 위해 만든 언어입니다

1) JS 코드 실행법 + Console.log 사용

JavaScript 코드는 브라우저 → 개발자 도구 콘솔창에서 실행할 수 있어요. 모든 브라우저에는 JavaScript 코드를 실행할 수 있는 콘솔창이 들어있답니다. 띄워놓은 페이지에서 빠르게 자바스크립트를 테스트해볼 수 있게, 개발자들을 위해 만들어둔 도구입니다. 새로고침하면 모두 사라진다는 사실! 콘솔창에서 코드를 바로 작성하는 건 불편하니까, VS code에서 코드를 작성하고 실행만 콘솔창에서 해보자.
구글 창을 열어서 '검사' 도구를 열어보자.
검사 도구에서 console 을 열면 타이핑할 수 있는 창이 생긴다.
<aside> 👉 개발자 도구 켜는 법 [단축키 Windows: F12</aside>], [ macOS: Alt(option) + command + i ], 그냥 쉽게, "마우스 오른쪽 클릭 → 검사 → console"도 가능!
창에 console.log("Hello world") 라고 적으면 Hello world 가 출력된다. log는 출력하는 것을 기억하라는 의미
let name="이환희" 라고 입력하고 나서 console.log(name)을 치면 '이환희' 라고 출력된다.

✅ JS 맛보기!

코드스니펫의 jsprac.html 파일을 만든다. 폴더 JS에 생성한다.

자바스크립트가 HTML과 어떻게 연동되는지 알아보자.
개발자 도구 콘솔 창에 아래와 같은 코드를 넣어보자. 그럼 웹 사이트가 변경된다. 이처럼 JavaScript의 1번째 역할은 웹 사이트를 변경하는 것!
<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>Document</title>
</head>
<body>
    <h1 id="myElement">원래 내용</h1>
    <script>
        // step1. HTML 요소 바꾸기
        // HTML 요소를 선택합니다.
        // const myElement = document.querySelector('#myElement');
        // 선택한 요소의 텍스트 내용을 변경합니다.
        // myElement.textContent = '새로운 내용';
    </script>
</body>
</html>
사이트를 띄운 상태에서 검사를 눌러 console에 아래 내용을 입력하면 '새로운 내용'으로 글자가 바뀐다.
// step1. HTML 요소 바꾸기
// HTML 요소를 선택합니다.
const myElement = document.querySelector('#myElement');
// 선택한 요소의 텍스트 내용을 변경합니다.
myElement.textContent = '새로운 내용';

숫자 증가 버튼을 누르면 '0'에서 숫자가 늘어난다.

1. mybutton을 누르면 2. 'click'을 하면 plus 를 해라. 하고 명령을 한다. 그 때 3. plus를 1계단씩 올려라 라는 함수를 실행하는 것을 자바스크립트 실행이라고 한다.
<!DOCTYPE html>

<html lang="en">

<head>

<meta charset="UTF-8">

<meta name="viewport" content="width=device-width, initial-scale=1.0">

<title>Document</title>

</head>

<body>

<h1 id="myElement">원래 내용</h1>

<h1 id="myNumber">0</h1>

<button id="myButton">숫자 증가</button>

<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>

</body>

</html>

2. 자바스크립트 문법

1) 변수 & 기본연산

variable_operator.html 파일을 따로 만들어준다.
'!' 탭해서 기본구조를 만들어 준다.
body 탭 안에 script 탭을 만들고 그 안에 변수를 넣어 공부해보자. 변수는 예를 들어 상자라고 말할 수 있다.
let num=20; (20이라는 숫자를 num 이라는 상자에 넣었다고 생각하자) console log(num) (console 창에 num 이라는 상자에 뭐가 있는지 브라우저가 불러오게 한다.) 을 script 탭 안에 넣어준다.

흰 창이 나오는 것에 당황하지 않고 검사로 켜서 console에 들어가면 출력하라고 한 num=20이 출력되어있다.

num 에 Bob를 넣으면 num 상자가 기존에 있던 20을 버리고 Bob를 출력한다.

a, b 처럼 이름을 정해준다. 상자의 이름으로 정해준 뒤 출력하면 숫자는 계산이 된다.
글자는 옆으로 나열이 되고 띄어쓰기를 하고 싶으면 +' '+를 해주면 된다. 글자 옆에 숫자는 글자처럼 출력된다.
num1 % num2 의 함수는 20 나누기 7의 나머지는 6이므로 6이 출력된다.

2) 리스트 & 딕셔너리

list_dictionary.html 파일을 만들어 준 뒤 '!'로 기본 구조를 만든다.
list는 [ ] 대괄호를 넣고, dict 는 { } 중괄호를 넣어준다.
</body> 태그 위에 <script> 태그를 만들어준다.

list 는 여러개의 내용을 담아놓은 리스트라고 생각하자. 방번호는 0부터 시작한다!

b_list.push('헤이') 는 헤이를 b_list 의 마지막에 넣어라는 뜻.
console.log(b_list.length) 는 b_list 의 길이. 총 헤이까지 포함해서 8개의 자료가 들어가 있으니까 8로 출력된다.

딕셔너리에서 키는 벨류의 값으로 묶어서 사용한다. 키 : 벨류 로 해서 키를 입력하면 벨류가 출력된다.
'name'은 'Bob'이 출력되고, 'age'는 '21'이 출력된다. 여기서 이름은 중복되면 안되고 항상 문자열로 작성해야한다.
b_dict['height'] = 180 를 입력하면 b_dict에 'height' : 180 이 들어가서 추가된다.

<body>

let a_list = []

let b_list = [1, 2, 'hey', 3, 4, 5, 6]

console.log(b_list[0])

console.log(b_list[1])

console.log(b_list[2])

b_list.push('헤이')

console.log(b_list)

console.log(b_list.length)

let a_dict = {}

let b_dict = { 'name': 'Bob', 'age': 21 }

console.log(b_dict['name'])

console.log(b_dict['age'])

b_dict['height'] = 180 // 딕셔너리에 키:밸류 넣기

console.log(b_dict)

</script>

</body>

✅ 리스트와 딕셔너리

전에 썼던 리스트와 딕셔너리를 주석처리한다. [단축키 : ctrl + / ]

리스트 안에 딕셔너리 방을 넣은 느낌으로 명령어를 출력할 수 있다.

<!DOCTYPE html>

<head>

<title>Document</title>

</head>

<body>

let a_list = []

let b_list = [1, 2, 'hey', 3, 4, 5, 6]

console.log(b_list[0])

console.log(b_list[1])

console.log(b_list[2])

b_list.push('헤이')

console.log(b_list)

console.log(b_list.length)

let a_dict = {}

let b_dict = { 'name': 'Bob', 'age': 21 }

console.log(b_dict['name'])

console.log(b_dict['age'])

b_dict['height'] = 180 // 딕셔너리에 키:밸류 넣기

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)

console.log(names[2]['name'])

</script>

</body>

</html>

3) 기본 함수

function.html 로 파일을 만들고 '!'로 기본 틀을 만든 뒤에 body 탭 안에 script 탭을 만들어준다.

split 은 기준점으로 나누어 주는 것으로 '@'이를 기준으로 두개를 나누어라 해서 갈라준다.
result2를 보면 '.' 을 기준으로 나누어주면 gmail 과 com 으로 나뉜것을 볼 수 있다.
console.log(myemail.split('@')[1].split('.')[0]) 라고 명령하면 split에서 '@' 를 기준으로 나뉜것에서 '.' 로 나눈 뒤에 0번에 해당하는 데이터를 불러오라는 뜻이다.

function 은 함수를 만들어 준다. sum 이라는 이름을 내가 정해주고 (num1, num2)라고 특정값을 넣어줄 것이라고 정해준다. return 은 내가 내릴 함수에 대한 명령으로 num1+num2 에 대한 명령을 실행하라고 하는 것이다.
해서 console.log(sum(4, -1) 를 출력하면 3이라는 결과값이 출력된다.

<!DOCTYPE html>

<head>

<title>Document</title>

</head>

<body>

// 또, 특정 문자로 문자열을 나누고 싶은 경우

let myemail = 'sparta@gmail.com'

let result = myemail.split('@') // ['sparta','gmail.com']

console.log(result)

console.log(result[0]) // 'sparta'을 출력

console.log(result[1]) // 'gmail.com'을 출력

let result2 = result[1].split('.') // ['gmail','com']

console.log(result2[0]) // gmail -> 우리가 알고 싶었던 것!

console.log(result2[1]) // com

console.log(myemail.split('@')[1].split('.')[0])

// // gmail -> 간단하게 쓸 수도 있다!

function sum(num1, num2) {

console.log('숫자', num1, num2);

return num1 + num2;

}

console.log(sum(3, 5)); // 8 출력

console.log(sum(4, -1)); // 3 출력

</script>

</body>

</html>

4) 반복문

for.html 로 파일을 만들고 '!'로 기본 틀을 만든 뒤에 body 탭 안에 script 탭을 만들어준다.
script 안에 for (for loof) 를 탭해서 자동완성 코드를 넣어준다.
for (let index = 0; index < array.length; index++) {

const element = array[index];

} 자동 완성 코드

index가 0부터 시작한다. array.length 어떤 숫자보다 작을 때 명령어를 수행한다. index++ 는 숫자를 하나씩 더해간다.
console.log("hello") 는 hello 란 글자를 10번 반복하여 출력하라는 뜻이다.
console.log(i)는 i라는 숫자 0부터 10번 반복하여 출력. 따라서 0,1,2,3,4,5,6,7,8,9 까지 출력된다.

✅ 리스트와 딕셔너리의 반복

let fruits = ['사과','배','감','귤'] 라는 리스트를 만들어 준다.
for 라고 치면 'foreach loop'로 자동완성 기능이 있다. 그것을 실행해준다.
array에 리스트 fruits를 넣어주고 element는 손님. 차례대로 사과, 배, 감, 귤이 들어가서 console.log(elemant)를 하면 하나씩 출력이 된다.

<!DOCTYPE html>

<head>

<title>Document</title>

</head>

<body>

for (let index = 0; index < array.length; index++) {

const element = array[index];

}

for (let i = 0; i < 10; i++) {

console.log("hello");

}

// Hello를 10번 출력

for (let i = 0; i < 10; i++) {

console.log(i);

}

// 0부터 9까지 반복해서 출력하는 코드

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

fruits.forEach((a) => {

console.log(a)

})

</script>

</body>

</html>

5) 조건문

if.html 로 파일을 만들고 '!'로 기본 틀을 만든 뒤에 body 탭 안에 script 탭을 만들어준다.
if 라고 치면 if stetment 의 자동완성으로 코드를 입력한다.

if 만약 a가 20보다 크면 '성인입니다'를 출력하고 else 아니면 '청소년입니다'를 출력한다.

<!DOCTYPE html>

<head>

<title>Document</title>

</head>

<body>

let ages = [12, 15, 20, 25, 17, 37, 24]

let age = 15

ages.forEach((a) => {

if (a > 20) {

console.log('성인입니다')

} else {

console.log('청소년입니다')

}

})

if (age > 20) {

console.log('성인입니다')

} else {

console.log('청소년입니다')

}

</script>

</body>

</html>

05. JavaScript & jQuery 연습하기

1) JQuery 란?

웹을 조작하려고, 움직이게 하려고 쓴다.
JavaScript 로도 모든 기능(예 - 버튼 글씨 바꾸기 등)을 구현할 수는 있지만, 1) 코드가 복잡하고, 2) 브라우저 간 호환성 문제도 고려해야 해서, jQuery라는 라이브러리가 등장하게 되었다.
라이브러리란? HTML의 요소들을 조작하는 JavaScript 코드를 미리 작성해둔 것이다!
전문 개발자들이 짜둔 코드를 잘 가져와서 사용하는 것임 (그렇기 때문에, 쓰기 전에 "임포트( 한 프로그램이 다른 프로그램의 데이터 파일을 읽어 들이는 것 )"를 해야 한다.)

JavaScript 는 document.getElementById("element").style.display = "none";
jQuery 는 $('#element').hide();
두 개의 코드를 비교하면 jQuery 가 짧고 직관적으로 쓸 수 있어서 편리하다.

2) jQuery 사용하기

jquery.html 로 파일을 만들고 '!'로 기본 틀을 만든 뒤에 head 탭 안에 미리 작성된 javascript 코드를 가져온다. 코드스니펫의 jQuery CDN 을 가져오면 된다. (https://www.w3schools.com/jquery/jquery_get_started.asp)
<head>
<script src="https://ajax.googleapis.com/ajax/libs/jquery/3.7.1/jquery.min.js"></script>
</head>

📌 css와 마찬가지로, jQuery를 쓸 때에도 "가리켜야" → 조작할 수 있다.

예) 특정 인풋박스의 값을 → 가져와줘!

예) 특정 div를 → 안보이게 해줘!

css에서는 선택자로 class를 썼고, jQuery에서는 id 값을 통해 특정 버튼/인풋박스/div/.. 등을 가리키게 된다.

JQuery 연습하기
<!DOCTYPE html>

<html>

<head>

  <title>자바스크립트 문법 연습하기!</title>

  <script src="https://ajax.googleapis.com/ajax/libs/jquery/3.6.4/jquery.min.js"></script>

</head>

<style>

  .button-part {

  display: flex;

  height: 50px;

}

</style>

<body>

  <div class="top-part">

  <h1>자바스크립트 문법 연습하기!</h1>

  </div>

  <hr />

  <br>

  <h2>1. 함수</h2>

  <div class="button-part">

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

  </div>

  <div class="list-part">

  <h2>2. 리스트</h2>

  <div id="q1"></div>

  </div>

  <div class="dict-part">

  <h2>3. 딕셔너리</h2>

  <div id="q2"></div>

  </div>

  <div>

  <h2>4. 리스트 딕셔너리</h2>

  <div id="q3"></div>

  </div>

</body>

<script>

</script>

</html>

<script> 에 function 함수를 넣어주자. checkResult 는 함수의 파일이름 같은 것이고, alert 는 알람창을 띄워주는 것이다. onclick은 클릭했을 때 일어나는 결과로 checkResult 의 함수를 띄우라는 것이다.

'결과 확인하기'를 누르고 나면 리스트 밑의 '테스트'가 '사과'로 바뀌는 것을 볼 수 있다.
let word = '사과' 를 출력한 것. 그 아래의 $('#q1').text(word) 가 q1의 텍스트를 word = '사과' 로 바꾸라는 코드로 바꾸어 준 것이다.

<!DOCTYPE html>

<html>

<head>

<title>자바스크립트 문법 연습하기!</title>

</head>

<style>

.button-part {

display: flex;

height: 50px;

}

</style>

<body>

<h1>자바스크립트 문법 연습하기!</h1>

</div>

<hr />

<br>

</div>

</div>

</div>

<div>

</div>

</body>

function checkResult() {

// let word = '사과'

// $('#q1').text(word)

let a = ['사과', '배', '감', '귤']

$('#q1').text(a[1])

let b = {

"name": "영수",

"age": 30

}

$('#q2').text(b['name'])

let c = [

{ 'name': '영수', 'age': 30 },

{ 'name': '철수', 'age': 35 }

]

$('#q3').text(c[1]['age'])

}

</script>

</html>

06. JavaScript & jQuery 연습하기 2

jquery2.html 로 파일을 만들고 미리 작성된 javascript 코드를 가져온다.
<!DOCTYPE html>

<html>

<head>

  <title>자바스크립트 문법 연습하기!</title>

  <script src="https://ajax.googleapis.com/ajax/libs/jquery/3.6.4/jquery.min.js"></script>

</head>

<body>

  <div class="top-part">

  <h1>자바스크립트 문법 연습하기!</h1>

  </div>

  <hr />

  <br>

  <h2>1. 함수</h2>

  <div class="button-part">

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

  </div>

  <div class="list-part">

  <h2>2. 붙이기</h2>

  <div id="q1">

  <p>사과</p>

  <p>귤</p>

  <p>감</p>

  </div>

  </div>

  <div class="list-part">

  <h2>3. 붙이기</h2>

  <div id="q2">

  <p>영수는 24살입니다.</p>

  <p>세종은 30살입니다.</p>

  <p>수영은 20살입니다.</p>

  </div>

  </div>

  <script>

  function checkResult() {

}

  </script>

</body>

</html>

let fruits = ['사과','배','감','귤','수박'] 를 쓰고 아래에 foreach의 loof 코드를 불러오면 array.forEach(element => {}); 가 불려온다.
array 에는 fruits 의 파일명을 넣어주고 element 에도 'fruit'로 이름을 적어준다. (안해도됨)
백틱(`)은 키보드에서 숫자 키 1 왼쪽에 있는 기호로 temp_html 이라는 변수를 만들 때 백틱을 사용한다. ( macOS이라면 한글은 ₩로, 영어는 `으로 나옵니다!)
foreach 로 하나씩 꺼내오는데 ${fruit}로 프루츠의 이름을 꺼내올거다. 그것을 #q1에 하나씩 나열한다. 'temp_html'은 파일이름 같은 것.

$('#q1').empty() 는 이전의 q1의 것을 비워준다는 것이다. 그래서 아래의 코드만 출력되어 사과부터 수박까지만 나온다.

'AI웹 개발자 과정 공부 (팀스파르타) > ChatGPT 웹 개발' 카테고리의 다른 글

2강 숙제 (0)	2024.02.18
24.02.17_TIL (자바스크립트 : 데일리모토) (0)	2024.02.18
1강 숙제 (0)	2024.02.15
24.02.15_TIL (멜로디쉐어 만들기) (0)	2024.02.15
24.02.14_TIL (웹 페이지 구조 : 데일리모토 프로젝트) (0)	2024.02.13

TAG more

최근에 올라온 글

개발자 공부합니다

티스토리 뷰