1. 자바스크립트 개요와 개발환경 설정
키워드: 특별한 의미가 있는 단어
식별자: 이름을 붙일 때 사용하는 단어. 변수명이나 함수명 등으로 사용.
- 키워드 사용 안됨, 숫자 시작 불가, 특수문자(_, $ 제외) 사용 불가, 공백 불가
- 클래스는 대문자로, 그 외는 소문자로 시작. 여러 단어로 이뤄진 건 각 단어의 첫 글자를 대문자로
주석: // 혹은 /**/ 사용
[확인 문제 1-1] 결과 확인하기
[확인 문제 1-2] 결과 확인하기
<!DOCTYPE html>
<html>
<head>
<title>반응형 웹</title>
<meta name="viewport" content="user-scalable=no, initial-scale=1">
</head>
<body>
<script>
document.body.innerHTML="<h1>안녕하세요</h1>"
</script>
</body>
</html>[확인 문제 1-3]
식별자로 사용할 수 있는 것: a, hello, _, $
없는 것: 10times
[확인 문제 1-4] conole.log() 에서
console은? 연산자, log는? 메소드
[확인 문제 1-5] 여러 단어로 이루어진 식별자 만들기
WeAreTheWold
CreateOutput
CreateRequest
InitServer
InitMatrix
[확인 문제 1-6] 오류 확인하기
2. 자료와 변수
자료: 프로그래밍에서 프로그램이 처리할 수 있는 모든 것
자료형: number, string, boolean. typeof()
- 숫자 자료형: 소숫점이 있는 숫자와 없는 숫자 모두 같은 자료형.
- 문자열 자료형: 큰따옴표, 작은따옴표로 출력.
- 불 자료형: === 양쪽이 같다, !== 양쪽이 다르다
상수: const 로 선언. 한 파일에서는 동일한 이름으로 한 번만 선언. 값을 지정해 줘야 함. 변경 불가
변수: let으로 선언. 한 파일에서는 동일한 이름으로 한 번만 선언.
undefined: 값이 없는 변수.
prompt(): 사용자로부터 내용을 입력받음.
confirm(): 사용자에게 확인을 요구하고 응답받음. 확인시 true, 취소시 false 리턴
[확인문제 2-1] 결과 예측
[확인문제 2-2]
상수 선언할 때는? const 사용.
값을 할당할 때는? = 사용
[확인문제 2-2]
사용자로부터 불 입력을 받는 함수는? confirm()
Number(): 숫자형으로 변환
"": 문자열 자료형으로 변환
Boolean(): 불 자료형으로 변환
[확인문제 2-3] cm을 inch로 변환하기
<script>
const cm = prompt("숫자를 입력")
const inch = cm * 0.393701
console.log(cm + "cm는 " + inch + "inch 입니다.");
</script>[확인문제 2-4] 원의 둘레 넓이 출력
<script>
const r = prompt("원의 반지름을 입력해주세요.")
console.log("원의 반지름: " + r)
console.log("원의 넓이: " + r * r * 3.14)
console.log("원의 둘레: " + 2 * r * 3.14)
</script>[확인문제 2-4] 달러에서 원화 변환
<script>
const usd = prompt("달러 단위의 금액을 입력해 주세요")
console.log("달러: " + usd)
console.log("-> 원화: " + (usd * 1207))
</script>3. 조건문
[확인문제 3-1] 두 수 비교하기
<script>
const a = Number(prompt('첫 번째 숫자'))
const b = Number(prompt('두 번째 숫자'))
if (a > b) {alert('첫번째로 입력한 숫자가 더 큽니다.')}
else if (a == b) {alert('두 숫자가 같습니다.')}
else {alert('두 번째로 입력한 숫자가 더 큽니다.')}
</script>[확인문제 3-2] 숫자 구분하기
<script>
const a = Number(prompt('숫자를 입력해 주세요'))
if (a > 0) { alert('입력한 숫자는 양수입니다.') }
else if (a == 0) { alert('입력한 숫자는 0입니다.') }
else { alert('입력한 숫자는 음수입니다.') }
</script>[확인문제 3-3] 홀짝 구분하기
<script>
const a = Number(prompt('숫자를 입력해 주세요'))
if (a % 2 == 0) { alert('입력한 숫자는 짝수입니다.') }
else { alert('입력한 숫자는 홀수입니다.') }
</script>[확인문제 3-4] 계절 구분하기
<script>
const a = Number(prompt('월을 입력해주세요'))
if (a <= 5) { alert('봄입니다.') }
else if (a <= 8) { alert('여름입니다.') }
else if (a <= 11) { alert('가을입니다.') }
else { (alert('겨울입니다.')) }
</script>[확인문제 3-5] 띠 확인하기
<script>
const rawInput = prompt('태어난 해를 입력해주세요.')
const year = Number(rawInput)
const e = year % 12
let result
switch (true) {
case e == 0:
result = '원숭이'
break
case e == 1:
result = '닭'
break
case e == 2:
result = '개'
break
case e == 3:
result = '돼지'
break
case e == 4:
result = '쥐'
break
case e == 5:
result = '소'
break
case e == 6:
result = '호랑이'
break
case e == 7:
result = '토끼'
break
case e == 8:
result = '용'
break
case e == 9:
result = '뱀'
break
case e == 10:
result = '말'
break
case e == 11:
result = '양'
break
}
alert(year + '년에 태어났다면 ' + result + '띠입니다.')
</script>[확인문제 3-6] 간띠 출력하기
<script>
const rawInput = prompt('태어난 해를 입력해주세요.')
const year = Number(rawInput)
let 간
if (year % 10 == 0) 간 = '경'
else if (year % 10 == 1) 간 = '신'
else if (year % 10 == 2) 간 = '임'
else if (year % 10 == 3) 간 = '계'
else if (year % 10 == 4) 간 = '갑'
else if (year % 10 == 5) 간 = '을'
else if (year % 10 == 6) 간 = '병'
else if (year % 10 == 7) 간 = '정'
else if (year % 10 == 8) 간 = '무'
else if (year % 10 == 9) 간 = '기'
let 띠
switch (true) {
case year % 12 == 0:
띠 = '신'
break
case year % 12 == 1:
띠 = '유'
break
case year % 12 == 2:
띠 = '술'
break
case year % 12 == 3:
띠 = '해'
break
case year % 12 == 4:
띠 = '자'
break
case year % 12 == 5:
띠 = '축'
break
case year % 12 == 6:
띠 = '인'
break
case year % 12 == 7:
띠 = '묘'
break
case year % 12 == 8:
띠 = '진'
break
case year % 12 == 9:
띠 = '사'
break
case year % 12 == 10:
띠 = '오'
break
case year % 12 == 11:
띠 = '미'
break
}
alert(year + '은 ' + 간 + 띠 + ' 년입니다.')
</script>4. 반복문
for(let i=0;i<n;i++) 처럼 let 으로 선언해야 함
배열에 값 넣기: array.put()
[확인문제 4-1] 1~100 곱하기
<script>
let output = 1
for (let i = 1; i <= 100; i++) {
output *= i
}
console.log(output)
</script>
[확인문제 4-2] 피라미드 만들기
<script>
let output = ""
const size = 5;
for (let i = 1; i < size; i++) {
for (let j = size; j > i; j--)
output += " "
for (let j = 0; j < 2 * i - 1; j++) {
output += '*'
} output += "\n"
}
for (let i = 2; i < size; i++) {
for (let j = 0; j < i; j++)
output += " "
for (let j = (size-1)*2; j > i * 2 - 1; j--)
output += "*"
output += "\n"
}
console.log(output)
</script>
'웹프로그래밍' 카테고리의 다른 글
| 스프링부트3 백엔드개발자되기 자바 편 (0) | 2024.10.24 |
|---|---|
| [javascript] 생활코딩 3~7 (0) | 2023.06.09 |
| [CSS] 다양한 레이아웃의 구성과 기능 (0) | 2023.05.27 |
| [CSS] css 속성 (0) | 2023.05.21 |
| [CSS] 기초 선택자와 단위 (0) | 2023.05.14 |
