2023. 2. 24. 10:16ㆍsparta_codingclub
1. 자바스크립트란?
• 프로그래밍 언어 중 하나로, 브라우저가 알아들을 수 있는 언어
- 클라이언트가 서버에 요청하면, 서버가 클라이언트에게 HTML + CSS + Javascript를 줌
- Java와 Javascript는 아무런 관련이 없음
2. 자바스트립트 HTML연결, 버튼을 클릭하면 경고창이 뜨게하기
• 함수를 만들어두기
function hey(){
alert('안녕!');
}- <head> ~ </head> 안에 <script> ~ </script> 로 공간을 만들어 작성함
• 버튼에 함수를 연결하기, 버튼을 누르면 함수가 불림
<button onclick="hey()">영화 기록하기</button>
- 직독직해하면, (1)버튼을 클릭하면, (2)hey를 불러라! (3)alert(’안녕’)을 실행하는 것
3. Javascript 기초 문법 배우기
• 화면에 미리 찍어보는 console.log()
<script>
funtion hey() {
console.log('안녕하세요')
}
</script>
<body>
<button onclick="hey()">영화 기록하기</button>
</body>• 화면에서 오른쪽 클릭 후 검사를 눌러서 확인하기
• 변수 & 기본연산
- 변수 대입 (a = 2)의 의미: "오른쪽에 있는 것을 왼쪽에 넣는 것" (2 를 a 라는 변수에 넣음)
- let으로 변수 선언
let a = 2
a = 'Bob' // 문자열은 작은 따옴표로 감싸줍니다!
// 변수는 값을 저장하는 박스예요.
// 처음 변수를 저장하려면, let을 앞에 붙여주세요!
// 한 번 선언했으면, 다시 선언하지 않고 값을 넣습니다.• 사칙연산, 그리고 문자열 더하기가 기본적으로 가능함
let a = 2
let b = 3
console.log(a+b) // 5
let c = '대한'
let d = '민국'
console.log(c+d) // 대한민국• 리스트 & 딕셔너리
- 리스트: 순서를 지켜서 가지고 있는 형태
(컴퓨터는 0부터 세기 때문에 리스트에 들어있는 첫 번째 값은 [0]으로 불러옴)
let a_list = [] // 리스트를 선언. 변수 이름은 역시 아무렇게나 가능!
// 또는,
let a = ['사과','수박','딸기','감'] // 로 선언 가능
console.log(a[1]) // 수박
console.log(a[0]) // 사과
//리스트 길이 구하기
console.log(a.length) //4• 딕셔너리: 키(key)-밸류(value)값의 묶음
let a_dict = {} // 딕셔너리 선언. 변수 이름은 역시 아무렇게나 가능!
// 또는,
let a = {'name':'영수','age':27} // 로 선언 가능
console.log(a)
console.log(a['name']) // 영수
console.log(b_dict['age']) // 27• 리스트와 딕셔너리의 조합
let a = [
{'name':'영수','age':27},
{'name':'철수','age':15},
{'name':'영희','age':20}
]
console.log(a[0]['name']) //영수
console.log(a[1]['age']) //15
「순서를 표시할 수 있고, 정보를 묶을 수 있음.
대기표를 작성하기 위해서 온 순서대로 이름, 휴대폰 번호를 적도록 하였을 때
변수만을 사용한 모습은 다음과 같음.
let customer_1_name = '김스파';
let customer_1_phone = '010-1234-1234';
let customer_2_name = '박르탄';
let customer_2_phone = '010-4321-4321';
...(알아보기 힘듦)
👉딕셔너리를 활용한다면 다음과 같이 고객 별로 정보를 묶을 수 있음
let customer_1 = {'name': '김스파', 'phone': '010-1234-1234'};
let customer_2 = {'name': '박르탄', 'phone': '010-4321-4321'};
👉그리고 순서를 나타내기 위해 리스트를 사용하면
let customer = [ {'name': '김스파', 'phone': '010-1234-1234'}, {'name': '박르탄', 'phone': '010-4321-4321'} ]
✅보기에도 깔끔해지고, 다루기도 쉬워지고, 고객이 새로 한 명 더 오더라도
.push 함수를 이용해 간단하게 대응할 수 있음.」
'sparta_codingclub' 카테고리의 다른 글
| Javascript & JQuery 연습하기 (0) | 2023.02.24 |
|---|---|
| 포스팅박스 완성하기 (0) | 2023.02.24 |
| 부트스트랩 (0) | 2023.02.22 |
| 주석 (0) | 2023.02.22 |
| 구글 폰트 사용하기 (0) | 2023.02.22 |