Javascript란?
오늘날 HTML, CSS와 함께 웹을 구성하는 요소 중 하나다. HTML이 웹 페이지의 기본 구조를 담당하고, CSS가 디자인을 담당한다면 JavaScript는 클라이언트 단에서 웹 페이지가 동작하는 것을 담당한다. 웹 페이지를 자동차에 비유하자면, HTML은 자동차의 뼈대, CSS는 자동차의 외관, JavaScript는 자동차의 동력이라고 볼 수 있다.
출처: 나무위키
또한 Javascript는 변수, 반복, 조건, 함수 심지어 객체까지 모두 가지고 있는 본격적인 프로그래밍 언어입니다.
1) HTML 연결. 버튼을 클릭하면 경고창이 뜨게 하기
HTML에서 Javascript를 실행하기 위해서 우선 <head>태그 안에 <script>태그를 넣어주어야 합니다.
<script>태그를 만들어 줬으면 그 안에 작동시킬 코드를 입력해주면 입력한 코드가 알맞은 코드일 경우 작동이 됩니다.
1. 우선 경고창을 띄어줄 버튼을 하나 만들어줍니다.
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<title>자바스크립트 연습!</title>
</head>
<body>
<button>경고창!</button>
</body>
</html>
2. <head>태그 안에 <script>태그를 넣어줍니다.
<head>
<meta charset="UTF-8">
<title>자바스크립트 연습!</title>
<script>
작동시킬 코드 작성
</script>
</head>
3. 이제 작동시킬 코드를 작성해 봅시다. 간단하게 경고창(alert)가 뜨게 해보겠습니다.
<script>
function warning(){
alert('경고!');
}
</script>이제 warning( )이라는 함수를 지정해 주었고 호출해 주면 실행이 됩니다!
4. 함수 호출하기.
<body>
<button onclick="warning()">경고창!</button>
</body>아까 만들어준 <body>태그 안
에있는 버튼에 onclick 이벤트를 주어 버튼이 클릭됐을 때 warning( )함수를 호출해 줍니다!
2) 변수 & 기본연산
변수 대입( a = 2 )의 의미는 "오른쪽에 있는 것을 왼쪽에 넣는 것!"입니다. (2를 a라는 변수에 넣는다)
1. 우선 let으로 변수를 선언합니다.
let num = 20
num = "Bob"
// 변수는 값을 저장하는 박스예요.
// 한 번 선언했으면, 다시 선언하지 않고 값을 넣습니다.
2. 사칙연산, 그리고 문자열 더하기가 기본적으로 가능합니다.
let a = 1
let b = 2
a+b // 3
a/b // 0.5
let first = "Bob"
let last = "Lee"
first+last // "BobLee"
first+" "+last // "Bob Lee"
first+a // Bob1 -> 문자+숫자를 하면, 숫자를 문자로 바꾼 뒤 수행합니다.
3) 조건문
조건문은 if와 else를 사용하여 조건의 결과에 따라 다른 코드를 실행해 주는 구문입니다.
1. 우선 함수를 만들어 줍니다.
function person(age){
console.log(age);
}console창에 변수(12)를 넣어 person(age)함수를 호출해보면,
잘 호출이 되는 것을 확인할 수 있습니다.
2. 함수 안에 조건문을 넣어보겠습니다.
function person(age){
if(age > 20){
alert("성인이에요")
} else if (age > 10) {
alert("청소년이에요")
} else {
alert("10살 이하!")
}
}변수(age)가 20보다 클 경우 "성인이에요", 10보다 크고 20보다 작을 경우 "청소년이에요", 10 이하일 경우 "10살 이하!"라는 조건을 넣어보았습니다.
4) 반복문
예를 들어 0부터 99까지 출력해야 하는 상황이라면 console.log(0)부터 console.log(99)까지 입력하기 귀찮을 것입니다.
좀 더 복잡한 상황에 직면했을 때는 더욱더 힘들 것입니다.
그럴 때 반복문을 사용합니다.
1. 0~99 출력하기!
우선 간단하게 0부터 99까지 출력하는 코드를 작성해 보겠습니다.
for (let i = 0; i < 100; i++) {
console.log(i);
}이렇게 단 3줄이면 완성이 됩니다.
반복문은
for (1. 시작조건; 2. 반복조건; 3. 더하기) {
4. 매번실행
}
1 -> 2체크하고 -> (괜찮으면) -> 4 -> 3
-> 2체크하고 -> (괜찮으면) -> 4 -> 3
-> 2체크하고 -> (괜찮으면) -> 4 -> 3
-> 2체크하고 -> (괜찮으면) -> 4 -> 3
와 같은 순서로 실행됩니다.
i가 증가하다가 반복조건에 맞지 않으면, 반복을 종료하고 빠져나옵니다.
2. 보통 반복문은 리스트와 자주 사용됩니다.
우선 변수(grades)에 딕셔너리를 포함하고 있는 리스트를 지정해 줍니다.
let grades = [
{"name": "김조선", "grade": "B"},
{"name": "조왕조", "grade": "A"},
{"name": "박실록", "grade": "C"},
{"name": "최대한", "grade": "A"},
]
여기서 grade가 A인 학생들의 이름만 뽑고 싶습니다. 그러면 아래와 같이 코드를 작성해 주면 됩니다.
for (let i = 0; i < grades.length; i++) {
if (grades[i]["grade"] < "B") {
console.log(grades[i]["name"]);
}
}여기서 A가 B보다 높은 점수인데 왜 B보다 작은 grade만 추출하냐는 의문점을 가질 수 있습니다.
점수로 봤을 때는 A가 B보다 높은 점수지만, 알파벳 순서로 봤을 때는 B가 A보다 높기 때문에 ["grade"] < "B" 를 적어준 것입니다.
성적이 A인 "조왕조"와 "최대한"이 뽑힌 것을 확인할 수 있습니다!
'SpartaCodingClub > 사전캠프' 카테고리의 다른 글
| [스파르타코딩클럽] 사전캠프 6일차 - python & crawling(크롤링) (0) | 2022.10.22 |
|---|---|
| [스파르타코딩클럽] 사전캠프 5일차 - Ajax (0) | 2022.10.21 |
| [스파르타코딩클럽] 사전캠프 4일차 - JQuery!! (0) | 2022.10.20 |
| [스파르타코딩클럽] 사전캠프 2일차 - CSS & 부트스트랩 적용하기! (0) | 2022.10.18 |
| [스파르타코딩클럽] 사전캠프 1일차 - 웹의 동작 개념 (0) | 2022.10.17 |
댓글