JAVA를 잡아라!...
JavaScript_개념 본문
[ JavaScript ]
- 웹 개발에서 가장 널리 사용되는 프로그래밍 언어 중 하나 (Java랑 아무 상관없음)
- HTML과 CSS와 함께 웹 개발의 기본적인 요소 중 하나
- HTML(구조) + CSS(디자인) + JS(동작)
- 웹 페이지를 특정 상황(event)에 따라 동적으로 만들고 상호작용을 구현
- JS는 웹 브라우저에서 시행되며, 사용자와 상호작용하고 웹 페이지의 내용을 변경하고 업데이트하는데 사용
- ex) 웹 페이지 폼 유효성 검사, 애니메이션 효과 추가, 사용자 입력 처리, 데이터 가져오기, ...
입출력
- document.write() : 사용자에게 보여지는 메소드
- console.log() : 개발자에게 보여지는 메소드 (라인마다 띄어주면서 자료형, 값 확인)
- typeof : 콘솔창에서 자료형을 볼 수 있음
- prompt(사용자에게 입력받는 창), confirm(T/F), alert(알림창)
변수 선언
- script : 동적 타이핑 언어, 상황에 따라 자기 맘대로 타입이 변함, 타입 var로 통일
- undefined : JS에서 정의하지 않은 값을 화면에 출력하면 나오는 값 (0, null, error 안나오고 걍 undefined...)
- 연산자 : 웹은 거의 모든 데이터를 문자열로 취급해 (==) 이런 비교연산자가 유리할 수 있지만, 자료형 구분하면서 정확하게 하려면 (===) 사용하기!
함수
- 선언 함수
- 함수를 선언한 이후에 호출해서 사용
- 어떠한 기능을 여러번 사용할 목적으로 선언 함수 사용
- function test(인자) {return 아웃풋}
- 익명 함수
- 함수에게 이름이 없는 함수
- 변수에 저장하고 변수를 호출해서 사용
- 변수에 함수, 배열, 객체, ... 모든걸 담을 수 있음
- 내장 함수(메서드) ex)
- charAt(n) : n번 index의 값
- indexOf('문자') : 문자가 어디있니?
- lastIndexOf('문자') : 마지막 문자가 어디있니?
- substring() : 오버로딩된 함수, 문자열 잘라주는 함수
- split(), replace(), toUpperCase(), ...
- 내장 객체
- 위에서 내장 객체 String의 메서드를 사용중
- Math : 주로 랜덤값을 생성할 때에 활용됨
- Date : 날짜와 관련된 작업을 수행할 때에 활용됨
이벤트★
- script로 하는 독특한 것...!!!! 이벤트 등록
- 예시코드 6, 7 참조!!
예시1
- <script> 태그 : 나 스크립트 쓸건데 외부에서 가져올거야
- <>태그바디</> 없으면 : </> 이거만 써줘도 되는데 script는 열어서 사용하는게 보편적
test01.html
.html 파일에서는 <script><script/> 태그 사용 oo
<script>
document.write('자바스크립트 시작');
</script>
---------------------------------------------
<script src='js/test01.js'></script>
test01.js
.js 파일에서는 <태그> 사용 xx (js폴더를 만들어서 따로 보관)
document.write('외부 스크립트 적용');예시2
test02.html
<!DOCTYPE html>
<html>
<head>
<meta charset="UTF-8">
<title>Insert title here</title>
</head>
<body>
<script>
console.log('브라우저의 콘솔을 사용하는 JS');
var num1=10;
var num2=20;
var num3=num1+num2;
console.log('num3= '+num3);
var ans1=prompt('입력하세요!');
console.log('ans1 ='+ans1);
var ans2=confirm('YES or NO ?');
console.log('ans2 ='+ans2);
alert('알림창');
var res;
console.log('result ='+res);
var a=9;
var b='9';
console.log('a == b');
console.log(a==b);
console.log('a === b');
console.log(a===b);
</script>
</body>
</html>예시3
문제
더보기
사용자에게 나이를 입력받아주세요!
1살~120살 입력가능합니다!
범위 밖의 입력을 하면 재입력 ㄱㄱ
1~8살 까지는 0원
9~19살 까지는 1200원
20살~65살 까지는 2000원
66~120살 까지는 0원
이라고 HTML 화면에 출력해주세요! :D
test03.js >> 처음 내가한 풀이 ㅂㄹ야
var ans=prompt('나이를 입력하세요');
console.log(ans);
while(ans<1||ans>120){
alert('1살~120살 입력가능합니다!')
ans=prompt('나이를 입력하세요');
console.log(ans);
continue;
}
if(9<=ans&&ans<=19){
document.write('1200원');
console.log('9~19 ?'+ans)
}
else if(20<=ans&&ans<=65){
document.write('2000원');
console.log('20~65 ?'+ans)
}
else{
document.write('0원');
console.log('그외니 ?'+ans)
}
test03.js >> 모범 답안!!
기능별로 분할해서 코드를 작성하자
- while() 입력받는 부분, 유효성 검사
- if() 결과 확인
- 출력 부분
while(true){
var ans=prompt('나이를 입력하세요.');
console.log('ans의 자료형 : '+typeof ans);
if(0<ans && ans<=120){
break;
}
alert('1~120 사이의 값으로 입력하세요!');
}
var money=0;
if(8<ans && ans<20){
money=1200;
}
else if(20<=ans && ans<=65){
money=2000;
}
document.write(money+'원입니다.');
test03.html
<!DOCTYPE html>
<html>
<head>
<meta charset="UTF-8">
<title>Insert title here</title>
</head>
<body>
<script src = 'js/test03.js'></script>
</body>
</html>예시4
test04.html
<!DOCTYPE html>
<html>
<head>
<meta charset="UTF-8">
<title>Insert title here</title>
</head>
<body>
<!-- 선언 함수 -->
<script>
function test(a,b){
console.log('a= '+a);
console.log('b= '+b);
return a+b;
};
test(100,200);
document.write(test(100,200));
</script>
<!-- 익명 함수 -->
<script>
var func=function(){
var a=1;
var b=2;
console.log(a+b);
};
func();
</script>
<!-- 내장 함수(메서드) -->
<script>
var str='banana';
console.log(str.charAt(0));
console.log(str.indexOf('a'));
console.log(str.lastIndexOf('a'));
console.log(str.substring(1,3));
console.log(str.replace('a', 'A'));
console.log(str.toUpperCase());
</script>
</body>
</html>예시5
문제
더보기
1~100사이의 정수중에서
랜덤값을 생성해주세요!
77
1~100 UP? DOWN?
50
UP
51~100
80
DOWN
51~79
77
정답입니다! :D
심화 1) N번만에 맞추셨습니다! :D
심화 2) 51~79
85 >> ? 다시
심화 3) 정수만 입력받게해주세요!~~
test05.js >> 처음 내가한 풀이 ㅂㄹ야
기능별로 분할해서 코드를 작성하자
- 랜덤 생성
- 유효성 검사 (정수만 입력, 올바른 범위)
- 결과 확인
- 출력 부분
<!DOCTYPE html>
<html>
<head>
<meta charset="UTF-8">
<title>문제풀이</title>
</head>
<body>
<script>
var randNum=Math.floor(Math.random() * 100) + 1;
var MIN=1;
var MAX=100;
var cnt=0;
while(true){
var ansNum=prompt(MIN+'~'+MAX+' UP? DOWN?');
if(isNaN(ansNum)){
alert('정수만 입력해주세요!~~');
continue;
}
if(ansNum<MIN || MAX<ansNum){
alert('????? 다시 ㄱㄱ');
continue;
}
ansNum=parseInt(ansNum);
cnt++;
if(randNum==ansNum){
break;
}
else if(randNum<ansNum){
alert('DOWN');
MAX=ansNum-1;
}
else{
alert('UP');
MIN=ansNum+1;
}
}
document.write("정답입니다! :D <br>");
document.write(cnt+"번만에 맞추셨습니다! :D");
</script>
</body>
</html>예시6_이벤트 등록
- JS에서는 함수도 하나의 자료형으로 취급해서 선언해놓은 함수를 대입할 수 있음
- window.onload : 화면에 모든 요소를 적재한 다음 수행! 아래코드 요소를 모두 담고 코드 수행
- .getElementByID() : 아이디 있을때 사용
- .querySelector() : 아이디 없을 때 사용, 첫번째 요소만 적용
- .querySelectorAll() : 아이디 없을 때 사용, 모든 요소 적용
- background-color : script에서는 하이푼을 사용하지 않음(연산자랑 헷갈려서)
- backgroundColor : script에서는 카멜법 ㄱㄱ
한글코딩
페이지가 화면에 로딩됐을때, 이벤트(함수)하나 등록할테니 수행해줄래?
document문서에 id이름이 box인 요소하나 있으니 받아와줘 > 받아서 box에 저장
이 box클릭했을때, 이벤트(함수)하나 수행해줄래?
이벤트 등록 알람창 띄우고
확인 누르면 네이버 홈페이지창 연결해줘
document문서에 box1아이디아래 ul아래 li 요소 있으니 받아와줘 > 받아서 list에 저장
list에 style이 있는데 그 안에 backgroundColor가 있어~
단, querySelectorAll은 받아올때 여러개 받아오니까 for문으로 list개수만큼 돌려서 적용해
test06.html
<!DOCTYPE html>
<html>
<head>
<meta charset="UTF-8">
<title>이벤트 등록 01</title>
<style>
#box{
background-color: lightcoral;
cursor: pointer;
width: 50px;
}
</style>
</head>
<body>
<script>
window.onload = function(){
var box=document.getElementById('box');
box.onclick = function(){
alert('이벤트 등록');
window.open('https://www.naver.com/');
};
var list=document.querySelectorAll('#box1 > ul > li');
list[0].style.backgroundColor = 'lightblue';
list[1].style.backgroundColor = 'lightblue';
};
</script>
<div id="box">클릭</div>
<hr>
<div id="box1">
<ul>
<li>베스트상품</li>
<li>신상품</li>
</ul>
</div>
<div id="box2">
<ul>
<li>후드티</li>
<li>반팔티</li>
<li>운동화</li>
</ul>
</div>
</body>
</html>예시7
- addEventListner('load', 함수명)
- 요소를 생성하는 함수를 만든 후 >> id가 있는 버튼을 받아와서 이벤트를 실행
- 화면이 로드되면 내가 선언했던 함수를 수행해줘!
한글코딩
document의 joinForm(이름속성name=btn)에 제출버튼을 누르면 addElem()함수하나 수행할래?
document에 <div>요소 추가해서 변수 div에 담아
document에 <a>요소 추가해서 변수 a에 담아
document에 링크_텍스트노드(문자) 추가해서 변수 txt에 담아
<a>의 자식으로 txt링크 추가해
<a>의 href속성, 내용은'http://www.naver.com/' 넣어
<div>의 자식으로 <a>추가해
document의 body에 자식으로 <div> 추가해
bnt를 누르면 func수행하게 할거야
페이지가 로드되면 addElem()함수 수행해줘
-----------------------------------------------------------
<body>
<div>
<a href="http://www.naver.com/">링크<a/>
<div/>
<body/>
test07.html
<!DOCTYPE html>
<html>
<head>
<meta charset="UTF-8">
<title>이벤트 등록 02</title>
<style>
div{
width: 50px;
height: 50px;
background-color: red;
}
</style>
</head>
<body>
<script>
function addElem(){
var btn=document.getElementById('btn');
function func(){
var div=document.createElement('div');
var a=documnet.createElement('a');
var txt=document.createTextNode('링크');
a.appendChild(txt);
a.setAttribute('href', 'https://www.naver.com/');
div.appendChild(a);
document.body.appendChild(div);
}
btn.onclick = func;
console.log('확인');
}
addEventListener('load', addElem);
</script>
<button id="btn">버튼을 누르면 요소를 생성합니다.</button>
</body>
</html>
'Front' 카테고리의 다른 글
| 비동기 처리_ID 중복검사 (0) | 2024.01.15 |
|---|---|
| 비동기 처리_개념 (0) | 2024.01.15 |
| JavaScript_회원가입 폼 만들기 (1) | 2024.01.04 |
| HTML, CSS_NAVER 로그인 페이지_(진행중...) (0) | 2024.01.02 |
| HTML_개념 (1) | 2023.12.27 |
'Front' Related Articles
more
