학습내용
script 변수와 자료형, 연산, 조건&반복문, 함수, 내장함수, 이벤트 정의와 종류, 이벤트 연결 방법
데이터(기본 데이터) --> 연산자(기호) --> 순차적인처리, 조건처리, 반복처리
많은 양의 데이터(부품, 배열)
기본 데이터 이외의 데이터(부품, 틀-클래스)
코드
(1) 표기법
문자는 연산이 대상이 되지 않는다.
meView 낙타표기법(camel) - java, c++
me_view 뱀표기법 - python, nodejs
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<title>Document</title>
<script>
//기본데이터 - 정수, 실수, 문자, 논리
view = 1000;
rate = 4.3;
title = '007'
//문자는 연산이 대상이 되지 않는다.!
//'값', "값"
tel = '028441234'
me_view = true
//meView 낙타표기법(camel) - java, c++
//iamabody XXXXXXX
//me_view 뱀표기법 - python, nodejs
</script>
</head>
<body>
</body>
</html>
(2) let 선언
자바스크립트는 타입을 변경해서 저장 가능
데이터 저장되는 타입(유형)이 동적으로 바뀌는 특징
동적타입핑<---> 정적타입핑(자바)
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<title>Document</title>
<script>
let price1 = 1000
let count1 = 2
let price2 = 2000
let count2 = 3
let turtle = price1 * count1
let melon = price2 * count2
let total = turtle + melon
alert('전체 구매 금액 ' + total + '\n' + turtle + ' ' + melon)
const PI = 3.14 //항상 똑같은 값 => 상수
//변수를 만드세요.
let apple = 2000
//apple이라는 저장공간을 만들어서 쓸거야!! 선언!!!
//저장공간을 만들거야!! 써놓는 것을 <<선언>>이라고 부른다.!
//자바스크립트는 선언할 때 램에 저장공간이 만들어집니다.!
let coffee = 5000 //선언
coffee = 3000 //정수
coffee = '아이스라떼' //문자
//자바스크립트는 타입을 변경해서 저장가능
//데이터 저장되는 타입(유형)이 동적으로 바뀌는 특징
//동적타입핑
//<---> 자바는 정적타입핑
</script>
</head>
<body>
</body>
</html>
(3) parseInt
입력값을 숫자로 쓰려면 parseInt()
+ : 산술연산자(숫자를 계산)
+ : 결합(연결), 하나라도 문자이면!
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<title>Document</title>
<script>
//1. 입력
//let name = prompt('이름 입력')
let age = prompt('나이 입력')
//입력을 받은 것은 모두 문자취급!!
//입력받은 값을 문자로 쓸지, 숫자로 쓸지는
//프로그래머가 결정!!
let age1 = parseInt(age)
//2. 처리
//let name2 = '저의 이름은 ' + name + '입니다.'
let age2 = age1 + 1
// + : 산술연산자(숫자를 계산)
// + : 결합(연결), 하나라도 문자이면!
//3. 출력
//alert(name2 + ' ' + age)
alert('내년 나이는 ' + age2)
</script>
</head>
<body>
</body>
</html>
(4-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>
<script>
let price3 = 2000
let price4 = 3000
let count3 = 3
let count4 = 2
let total3 = price3 * count3
let total4 = price4 * count4
let higher = total3 > total4
alert('사과 구매 금액이 배 구매 금액보다 높을까? ' + higher)
let yesterday = 25
let today = 10
let average = (yesterday + today) / 2
alert('어제와 오늘 온도의 평균은? ' + average + '도')
</script>
</head>
<body>
</body>
</html>
(4-2) 입력-처리-출력 연습문제(정답)
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<title>Document</title>
<script>
//1. 입력
let apple_price = prompt('사과의 가격')
let apple_count = prompt('사과의 개수')
let bae_price = prompt('배의 가격')
let bae_count = prompt('배의 개수')
//2. 처리
let apple = parseInt(apple_price) * parseInt(apple_count)
let bae = parseInt(bae_price) * parseInt(bae_count)
//3. 출력
alert(apple > bae) //비교의 결과는 항상!!!!! true/false(논리형)
//비교의 결과는 반드시 논리형이 되어야 함.!!!
</script>
</head>
<body>
</body>
</html>
(5) 입력-처리-출력
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<title>Document</title>
<script>
//1. 입력
let choice = prompt('당신은 어디로 가고 싶나요?..(산, 바다, 강 중 선택)')
//2. 처리 + 출력
let result = ''
let site = ''
if(choice == '산'){
result ='한라산을 가볼까요?'
site = 'https://jeju.go.kr/hallasan/index.htm'
}else if(choice == '바다'){
result = '해운대를 가볼까요?'
site = 'https://www.visitbusan.net/kr/index.do?menuCd=DOM_000000201001001000&uc_seq=377&lang_cd=ko'
}else{
result = '한강을 가볼까요?'
site = 'https://www.cwg.go.kr/tour/contents.do?key=1644&ctgry=53&sortTy=RECOMEND'
}
//3. 출력
alert(result)
location.href = site
</script>
</head>
<body>
</body>
</html>
(6) 입력-처리-출력
document.write()
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<title>Document</title>
<script>
//1. 입력
user_id = prompt('아이디를 입력하세요.')
//2. 처리 + 출력
let result = ''
let col = ''
if(user_id == 'admin'){
result = '관리자로 로그인되었습니다.'
col = 'red'
}else{
result = '일반 유저로 로그인되었습니다.'
col = 'blue'
}
//관리자는 빨강색, 일반유저는 파랑색으로 출력해보세요.
//3. 출력
document.write('<font color=' + col + '>' + result + '</font>')
</script>
</head>
<body>
</body>
</html>
(7) 버튼처리
function abcd() {}
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<title>Document</title>
<script>
function plus() {
alert('더하기 기능 처리 할 예정.')
}
function minus() {
alert('빼기 기능 처리 할 예정.')
}
function login() {
alert('로그인 기능 처리 할 예정.')
}
</script>
</head>
<body>
숫자1 : <input type="text"> <br>
숫자2 : <input type="text"> <br>
<button onclick="plus()">더하기 기능 처리</button>
<button onclick="minus()">빼기 기능 처리</button>
<hr>
id : <input type="text"> <br>
pw : <input type="text"> <br>
<button onclick="login()">로그인 처리</button>
</body>
</html>
'백엔드 개발자 취업캠프(Java) > 웹 시각화를 위한 html_CSS_script' 카테고리의 다른 글
| [5/5] script - jquery구문, 선택자, 이벤트 처리, 페이드, 슬라이드, 체이닝, restful service (0) | 2023.09.15 |
|---|---|
| [3/5] css 선택기, 색상, 배경, 테두리, 여백, 패딩, 상자모델, 텍스트, 글꼴, 링크, 목록 (0) | 2023.09.15 |
| [2/5] html 양식, 양식 속성, 입력 유형, 입력 속성, 입력 양식 속성 (0) | 2023.09.15 |
| [1/5] html 소개 및 편집기, 기본요소, 속성, 제목, 스타일, 목록 (0) | 2023.09.15 |
