반응형
Java Script를 통해 제어를 통해 웹페이지를 풍부하게
ex01따라하기.html
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<meta http-equiv="X-UA-Compatible" content="IE=edge">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<title>ex01따라하기</title>
</head>
<body>
<h1>Javascript를 따라서 작성</h1>
<input type="button" value="DEFAULT" id="btn1">
<input type="button" value="DESIGN" id="btn2">
<script>
document.querySelector('#btn2').addEventListener('click', function () {
document.querySelector('body').style.backgroundColor = 'skyblue';
document.querySelector('body').style.color = 'white';
})
document.querySelector('#btn1').addEventListener('click', function () {
document.querySelector('body').style.backgroundColor = 'white';
document.querySelector('body').style.color = 'black';
})
</script>
</body>
</html>addEventListener에서의 Event: 웹페이지에서 사용자의 모든 행위들 (클릭, 마우스 이동,키보드 입력 등등)
ex02입출력문.html
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<meta http-equiv="X-UA-Compatible" content="IE=edge">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<title>Document</title>
</head>
<body>
<script>
//javascript 코드 작성하는 구간
// 출력문
// 1. 콘솔창에 출력하기 f12 개발자모드의 Console
console.log('안녕🐱🐉🐱💻', 1234);
console.error('문제발생;;;');
console.warn('경고!!!');
// 2. 알림창 출력하기
alert('비밀번호를 변경해주세요!');
// 제일 먼저 실행되니까 주의
// 3. 웹페이지 내부에 출력하기
document.write('<h1>빅데이터반</h1>')
// 태그사용가능(태그 반영된다.)
// 입력문
// 1. 글자나 숫자를 직접적으로 입력할 수 있는 prompt
// 리턴타입 String
prompt('이름을 입력해주세요');
// 2. 간단하게 예, 아니오를 물어볼 수 있는 confirm
// 리턴타입 boolean
confirm('비밀번호를 변경하시겠습니까?')
</script>
</body>
</html>
ex03변수.html
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<meta http-equiv="X-UA-Compatible" content="IE=edge">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<title>ex03변수</title>
</head>
<body>
<script>
// 변수 선언할 때 자료형을 명시할 필요가 없다.
// 1. var
// 변수를 처음 선언할 때 써야하는 키워드 -> var a; 가 변수 '선언'
// 재선언이 가능하다.(var a, var a로 몇 번이든 작성가능)
// 재할당도 가능하다.
var a = "jm";
console.log(a);
var a = "li";
console.log(a);
a = 123;
// 2. let
// 재선언 X, 재할당은 가능
let b = '최현우';
console.log(b);
b = '김연이';
console.log(b);
// let b = '김채윤'; --> 재선언 불가능
// 3. const(상수)
// 재선언X, 재할당X
const c = '월요일';
c = '123';
// const c = '화요일'; --> 재선언 불가능
</script>
</body>
</html>
실습
ex04실습.html
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<meta http-equiv="X-UA-Compatible" content="IE=edge">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<title>Document</title>
</head>
<body>
<script>
let name = prompt('이름을 입력하세요');
console.log('어서오세요!')
console.log(name,'님, 환영합니다!');
document.write(name+'님 환영합니다')
</script>
</body>
</html>
Javascript 자료형
var a; 로 변수 선언만 하고, 값을 넣지 않으면 undefined / null이 아니다.
==으로 비교 할때는 자료형이 다르면 좌측을 문자형으로 바꾸고 같은지 비교한다. == : 동등연산자
===으로 비교는 자료형 먼저 비교 하고 같을때 값을 비교한다. === : 일치연산자
연산자 실습
ex06연산자실습.html
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<meta http-equiv="X-UA-Compatible" content="IE=edge">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<title>ex06연산자실습</title>
</head>
<body>
<script>
let num = 312;
// 1. 백의 자리 숫자만 뽑아오기
//console.log(num/100); -> 3.12라고 실수 형태로 나온다
// javascript에서는 실수, 정수를 number 자료형으로 간주하기
// 때문에 자동으로 실수형태의 데이터로 나온다.
// 1-2) 실수 형태를 정수형으로 변환
console.log(parseInt(num/100));
// 2. 백의자리 아래 숫자는 버리고 콘솔창에 출력
console.log('백의 자리 이하 버린 결과>> '+(num-(num%100)));
console.log('백의 자리 이하 버린 결과>>',(parseInt(num/100)*100));
// '문자열'+숫자 -> 문자열로 표시
// '문자열',숫자 -> 문자열 / 숫자로 표시 (숫자형은 파란색으로표시)
//javascript에서의 형변환
/*
1. 정수로 형변환
: 실수형 데이터나 문자열 데이터 두개 다 정수로 형변환 시킬 수 있다.
parseInt('3'), parseInt(3.14)
2. 실수로 형변환
: 문자열 이나 정수형 데이터를 실수로 형변환
parseFloat('3.14') , parseFloat(3)
3. 다른 자료형을 숫자 형태로 (number로) 형변환
Number('123456')
4. 숫자를 문자열로 변경 (123+"123" -> 문자열로 가능하지만 알고만 있자)
.toString()
*/
</script>
</body>
</html>
사용자로 부터 배경색 입력받아 배경색 바꾸기
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<meta http-equiv="X-UA-Compatible" content="IE=edge">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<title>ex07조건문</title>
</head>
<body>
<script>
// 1. 사용자로 부터 배경색 입력받기 (빨강, 초록, 파랑만 가능하다고 명시해주기)
let bgcol = prompt('배경색을 입력해주세요 (빨강, 초록, 파랑)')
// 2. 사용자가 입력한 배경색상에 따라서 실제 웹페이지의 색상을 변경
if(bgcol=='빨강'){
document.querySelector('body').style.backgroundColor = 'red';
}else if(bgcol=='초록'){
document.querySelector('body').style.backgroundColor = 'green';
}else if(bgcol=='파랑'){
document.querySelector('body').style.backgroundColor = 'blue';
// 3. 사용자가 만약 빨강, 초록, 파랑이 아닌 다른 색상을 입력했다면
// 알림창으로 없는 색상을 입력하셨습니다. 출력하기
}else{
alert('없는 색상을 입력하셨습니다.')
}
</script>
</body>
</html>ex08반복문.html
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<meta http-equiv="X-UA-Compatible" content="IE=edge">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<title>Document</title>
</head>
<body>
<script>
// 반복문
// 1. while
// : 반복횟수가 명확하지 않을 때 사용
// while(조건식){
// 반복할 구문
// }
// 2. do-while
// do{
// 반복할 구문
// }while(조건식);
// 3. for
// : 반복횟수가 명확할 때 많이 사용
// 1~5까지 콘솔창에 출력하는 코드를 작성
//for문의 초기화 구문을 작성할 때
//int가 아닌 var, let 키워드를 작성해야 한다.
for(let i =1;i<=5;i++){
console.log(i);
}
</script>
</body>
</html>
조건문 & 반복문 실습
ex10실습.html
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<meta http-equiv="X-UA-Compatible" content="IE=edge">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<title>Document</title>
</head>
<body>
<script>
//1. 랜덤한 숫자를 생성(1~100)
let ran_num = parseInt((Math.random()*100)+1);
while(true){
//2. 사용자로부터 정답을 입력받음
let num = prompt('숫자를 입력해주세요');
// prompt의 리턴은 String 형태인데 number형태의 ran_num과 비교연산이 가능할까?
// 자바스크립트는 숫자끼리 가능한 연산자이면 문자형태도
// 자동으로 숫자형태로 변환해서 연산을 실행
//3. 정답과 랜덤한 숫자 비교 (더 큰수인지 더 작은수인지 정답인지 출력)
if(num > ran_num){
alert('입력한 숫자보다 작은 숫자입니다.')
}else if(num < ran_num){
alert('입력한 숫자보다 큰 수 입니다.')
}else{
alert('정답입니다 축하합니다!')
break;
}
//4. 정답을 맞출때까지 반복
}
</script>
</body>
</html>반응형
'빅데이터 서비스 교육 > Java Script' 카테고리의 다른 글
| Java Script AJAX (0) | 2022.05.31 |
|---|---|
| JaVaScript jQuery (0) | 2022.05.30 |
| Java Script DOM (0) | 2022.05.26 |
| Java Script 배열, 함수, 객체 (0) | 2022.05.24 |