재밌고 어려운 IT를 이해해보자~!
JavaScript 본문
프론트를 구성하기위한 스크립트언어 3가지!
CSS도 JavaScript도 HTML 파일 내부에서 작성이 가능하다.
CSS는 <style> 태그 안에서 작성이되고, JavaScript는 <script> 태그 안에서 작성이 가능하다.
연습을 위해 내부에서 작성하지만, 나중엔 외부에서 작성하도록 하자!
<!DOCTYPE html>
<html>
<head>
<meta charset="UTF-8">
<title>Insert title here</title>
<style>
/* HTML 요소에 스타일을 적용하느 공간 */
</style>
</head>
<body>
<!-- JavaScript -->
<script>
document.write('자바스크립트 시작!');
</script>
<script src="js/test01.js"></script>
</body>
</html><script src="js/test01.js"></script> -> 외부 자바스크립트 파일을 실행시키는 구문
<!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('res = ' + res);
var a = 9;
var b = '9';
console.log('a == b');
console.log(a == b);
console.log('a === b');
console.log(a === b);
while (true) {
var age = prompt('1~120살까지 입력해라~');
if (1 <= age && age <= 8) {
document.write('0원');
break;
} else if (9 <= age && age <= 19) {
document.write('1200원');
break;
} else if (20 <= age && age <= 65) {
document.write('2000원');
break;
} else if (66 <= age && age <= 120) {
document.write('0원');
break;
}
}
</script>
</body>
</html>var 타입이란?
variable을 뜻하는 것으로, 어떤 타입의 데이터도 받아올 수 있다. 문자, 숫자 함수 등등!
Js의 변수 선언 방식 3가지!
1. Var : 중복 선언 가능
2. let : 중복 선언 불가능, 재할당 가능
3. const : 중복 선언 불가능, 재할당 불가능
자바스크립트의 비교연산자는 '==', '===' 두가지가 있는데,
'=='는 변수 값을 기반으로 유형을 수정해 문자와 숫자비교도 True 가 나오는 반면
'==='는 타입까지 비교하기 때문에, 문자와 숫자를 비교하면 False가 나온다.
웹 에서는 대부분을 문자열로 받는 것이 유리하기 때문에 알아서 유형을 수정해주는 '=='연산자가 존재하는 것 같다.
Js연산자 사용 연습
<!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('res = ' + res);
var a = 9;
var b = '9';
console.log('a == b');
console.log(a == b);
console.log('a === b');
console.log(a === b);
while (true) {
var age = prompt('1~120살까지 입력해라~');
if (1 <= age && age <= 8) {
document.write('0원');
break;
} else if (9 <= age && age <= 19) {
document.write('1200원');
break;
} else if (20 <= age && age <= 65) {
document.write('2000원');
break;
} else if (66 <= age && age <= 120) {
document.write('0원');
break;
}
}
</script>
</body>
</html>익명함수(Anonymous function)
자바스크립트 익명 함수는 함수명 대신 변수명에 함수 코드를 저장하는 구현 방식이다. 익명 함수의 소스 코드는 변수값이므로 끝에 세미콜론 ; 을 대입한다. 익명 함수는 호출 시 변수명을 함수명처럼 사용하면 된다.
var 변수명 = function( 매개변수 )
{
실행문;
};
익명함수는 마치 변수를 대입하듯이 함수명 (또는 변수명) 을 바꿀 수 있다.
//익명 함수 선언
var apple = function( ) {
document.write("This is a banana.");
};
//변수명 교체
var banana = apple;
//변경된 변수명으로 함수 호출
banana( );
// result : This is a banana.단점
일반 함수는 위치가 어디든 함수 호출이 가능하지만, 익명함수는 다르다.
호이스팅(함수 선언 보다 함수 호출이 윗 줄에 위치해도 실행되는 기능)이 적용되지 않는다.
다양한 내장함수를 알아두면 매우좋다!
익명한수 사용 연습 및 UP DOWN게임 만들기
<!DOCTYPE html>
<html>
<head>
<meta charset="UTF-8">
<title>Insert title here</title>
</head>
<body>
<!--익명함수-->
<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>
<!-- 내장 객체 -->
<!--24~30: 내장 객체 String의 메서드를 사용중-->
<!--Math : 주로 랜덤값을 생성할때에 활용됨-->
<!--Date : 날짜와 관련된 작업을 수행할때에 활용됨-->
<script>
var num1 = prompt('최소값 입력');
var num2 = prompt('최대값 입력');
var max = Number(num2);
var min = Number(num1);
const rand1 = Math.floor(Math.random() * (max - min + 1)) + min;
alert(min);
alert(max);
alert(rand1);
var cnt = 0;
while (true) {
var ans = prompt('숫자 맞춰보셈~');
if (isNaN(ans)) {
alert('정수만 입력해주세요');
continue;
}
if (ans < min || ans > max) {
alert('범위' + min + '~' + max + '다시입력하세요 ㅡㅡ');
continue;
}
if (rand1 > ans) {
alert("UP");
} else if (rand1 < ans) {
alert("DOWN");
} else {
cnt++;
break;
}
cnt++;
}
alert("정답~");
document.write('정답은바로~ :' + rand1 + '\n');
document.write(cnt + '번만에 맞추셨네요~!');
</script>
</body>
</html>HTML, CSS, JavaScript 를 사용한 페이지 구성 및 버튼 클릭 기능 구현
<!DOCTYPE html>
<html>
<head>
<meta charset="UTF-8">
<title>이벤트 등록</title>
<style>
#box {
background-color: lightcoral;
cursor: pointer;
width: 150px;
}
</style>
</head>
<body>
<!--window.onload -> 화면이 다 실행된 다음에 function()이 실행되기 때문에
box 클릭을 가져올 수 있다.-->
<!-- getelement로 선택할수 없는 요소는 qerySelector 로 선택할수있다
--> <!--스크립트는 하이픈표기 절때안한다 헷갈린다-->
<script>
window.onload = function(){
var box=document.getElementById('box');
box.onclick = function() {
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>window.onload()
<script>
var a = document.getElementById( 'test' );
a.style.color = "blue"
</script>
<p id = "test">hello</p>위와 같이 사용을 하면, 원칙상으로 자바스크립트의 document.getElementById( 'id' );가 html 내부 id가 test 이란 태그가 생성되기도 전에 실행되므로 문제가 발생한다.
<script>
window.onload = function(){
var a = document.getElementById( 'test' );
a.style.color = "blue"
}
</script>
<p id = "test">hello</p>위와 같이 window.onload라는 메서드를 오버라이딩(재정의) 해주면 되는데, 해당 함수 내의 코드 스크립트는 웹브라우저 내의 모든 요소가 준비가 되어야 실행이 되도록 할수 있다. (웹브라우저 자체를 담당하는 window라는 객체가, 웹 문서를 불러올때, 문서가 사용되는 시점에 실행되는 onload라는 함수를 내가 다시 재정의 한다는 개념이다.)
화면이 다 실행된 다음에 function()이 실행되기 때문에 box 클릭을 가져올 수 있다.
document.getElementById();
태그에 있는 id 속성을 사용하여 해당 태그에 접근하여 하고 싶은 작업을 할 때 쓰는 함수이다.
var container = document.querySelector("#test");
var matches = container.querySelectorAll("div.highlighted > p");
여기에서는, ID 가 "test" 인 컨테이너안에 위치하고 부모 엘리먼트가 div 엘리먼트이며 클래스가 "highlighted" 인 <p> 엘리먼트의 리스트를 얻는다.
getelement로 선택할수 없는 요소는 qerySelector 로 선택할 수 있다.
또한 스크립트는 하이픈표기 절때안한다 헷갈린다!
<!DOCTYPE html>
<html>
<head>
<meta charset="UTF-8">
<title>이벤트 등록 02</title>
<style>
div {
width: 10px;
background-color:red;
position: fixed;
left: 200px;
top: 10px;
height: 10px;
}
</style>
</head>
<body>
<script>
//addElem함수인데
//아이디가 btn인애 받아서
//on click에 연결할거야
//연결한다는건 요소를 함수에 추가한다는것
function addElem() {
var btn = document.getElementById('btn');
function func() {
var div=document.createElement('div');
//하나의 엘리먼트 단위를 노드라고 표현한다~
//링크를 주려면 a태그가 필요하고
//a태그는 안에 텍스트를 가지니까 노드를 만들었다
//문자와 하이퍼레퍼런스를 둘다가져야한다~
var a=document.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>
자바스크립트를 이용하여 문서에 HTML 요소를 추가할 수 있는데 이 때 필요한 자바스크립트 속성은 다음과 같다.
- .createElement()
- .createTextNode()
- .appendChild()
createElement()는 요소를 만든다. 예를 들어 .createElement( 'h1' )는 은 다음과 같은 코드를 생성한다.
<h1> </h1>
.createTextNode()는 선택한 요소에 텍스트를 추가한다.
.createTextNode( 'My Text' )는 My Text라는 문자열을 만든다.
.appendChild()는 선택한 요소 안에 자식 요소를 추가한다.
유효성검사가 포함된 로그인 창 작성
<!DOCTYPE html>
<html>
<head>
<meta charset="UTF-8">
<title>Insert title here</title>
</head>
<body>
<script>
window.onload =function(){
document.joinForm.onsubmit = function(){
if(!joinForm.mid.value){
alert('아이디를 입력해주세요!');
joinForm.mid.focus();
return false;
}
if(!joinForm.mpw.value){
alert('비밀번호를 입력해주세요!');
joinForm.mpw.focus();
return false;
}
};
};
</script>
부를이름이 없어서 이름 붙이기 name
<form name="joinForm" action="다음페이지" method="POST">
아이디 : <input type="text" name="mid"> <br>
비밀번호 : <input type="password" name="mpw"> <br>
<input type="submit" value="회원가입">
</form>
</body>
</html>
*참조 https://velog.io/@leyuri/javaScript-window.onload%EB%9E%80
'코리아IT핀테크과정' 카테고리의 다른 글
| JSP2 (0) | 2024.01.05 |
|---|---|
| JSP (2) | 2024.01.04 |
| WebApp, HTML 1 (0) | 2023.12.27 |
| Web Crawling (0) | 2023.12.22 |
| 웹서버 프로그래밍 시험 오답노트 (0) | 2023.12.21 |
