38-1. 개요
on : 이벤트 속성
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<title>Document</title>
<!-- 내가 가져다 쓸 외부 .js파일을 script태그의 src속성으로 연결시켜줌!!(외부방식)-->
<script src="resources\sample.js"></script>
</head>
<body>
<!--
Web(Front-End)의 3요소
- HTML : 웹 페이지의 구조(웹 문서의 큰 틀 / 뼈대) (정적)
- CSS : 스타일(색상, 테두리, 디자인, 레이아웃...) (정적)
- JavaScript : 웹 문서 상에 이벤트가 발생했을 때 추가적으로 실행해야하는 동작을 처리(동적인 효과)
(Java라는 프로그래밍 언어와는 전혀 무관!!!!!!!!!!!!)
-->
<h1>자바스크립트 개요</h1>
<h3>1. 스크립트 언어란?</h3>
<p>
프로그램의 동작을 사용자의 요구에 맞게 수행하도록 <br>
매우 빠르게 배우고 짧은 소스코드로 상화작용 하도록 고안된 언어들.
</p>
<hr>
<h3>2. 자바스크립트</h3>
<p>
웹 브라우저에서 가장 많이, 가장 기본적으로 사용되는 '인터프리터 방식'의 스크립트 언어 <br>
<!-- 개발자도구에 console창에 입력해 출력값을 볼 수 있음-->
- 자바 : 컴파일 => 컴파일 단계를 거치고나서 실행되는 개념 => 오류 잡기 수월 <br>
- 자바스크립트 : 인터프리터 방식 => 컴파일 단계를 거치지않고 곧바로 실행되는 개념 <br>
</p>
<!--
인터프리터 방식
=> 소스코드를 읽어내면서 실행(실시간으로 분석해서 실행)
=> 코드상 문법적인 문제가 있다면 바로 알려주지않고 실행시점 알려줌
=> 자바에 비해서 오류찾기가 힘들 수 있음
자바는 컴파일 + 인터프리터 방식
-->
<hr>
<h3>3. 장단점</h3>
<h4>* 장점</h4>
<ul>
<li>요소에 이벤트가 발생했을 때 코드를 한 줄 씩 읽어나가면서 수행하기 때문에 속도가 빠름</li>
<li>
간단한 코드작성으로 초보자가 접하기 쉬운언어(단순한구조, 원칙)
예) 접근제한자 개념 없음,
메소드 정의 시 반환형 정의 안함,
변수 선언 시 자료형을 지정할 필요가 없음(타입 추론)
</li>
</ul>
<h4>* 단점</h4>
<ul>
<li>웹 특화된 기술 => 내부에서 제공되는 기술이 제한적임</li>
<li>HTML내에 소스코드를 작성하기 때문에 외부에 공개됨</li>
</ul>
<hr>
<h3>4. 자바스크립트 소스코드 작성 위치에 따른 종류</h3>
<ol>
<li>
inline(인라인) : 이벤트를 부여하고자 하는 요소 내에 간단한 소스코드를 작성해서 실행하게 하는 방법
</li>
<li>
internal(내부) : 해당 html문서 내에 script태그 영역에 소스코드를 작성해서 실행하게 하는 방법
</li>
<li>
external(외부) : 소스코드들을 별도의 .js파일로 작성해서 script태그를 가져다가 실행하게 하는 방법
</li>
</ol>
<br>
<h4> 1) inline방식</h4>
<p>
태그 내에 직접적으로 실행할 간단한 소스코드를 작성해서 실행 시킴 <br>
주로 실행해야하는 소스코드가 매~~~~~우 소량일 때 사용 <br><br>
[ 표현법 ] <br>
<태그명 이벤트속성="해당 태그에 해당 이벤트가 발생했을 때 실행할 소스코드"><태그명>
</p>
<!-- 버튼이 클릭되는 순간(== 버튼에 클릭 이벤트가 발생하는 순간) 알림창 띄우기 -->
<button onclick="window.alert('나 불렀어~?')">나는 버튼이다</button>
<!-- 버튼이 클릭되는 순간(== 버튼에 클릭 이벤트가 발생하는 순간) -->
<button onclick="console.log('우하하하하핳 콘솔이다')">나는 버튼이다</button>
<!-- Console(개발자도구탭) : 주로 디버깅할 용도 -->
<br>
<h4> 2) internal 방식</h4>
<p>
script태그 영역에 함수단위로 소스코드들을 작성해놓고 <br>
특정 요소에 이벤트 발생 시 해당 함수를 호출해서 실행시키는 방식 <br>
=> script태그는 head, body 태그내에 아무곳이나 적어도 상관없음 <br>
</p>
<!-- 버튼이 클릭되는 순간(== 클릭 이벤트가 발생하는 순간) 알림창 띄어보기 -->
<!-- 인라인 + 내부방식 -->
<button onclick="abc();">알림창 나와랏!!얍!!!!!</button> <!-- 버튼을 클릭할 때 abc함수 호출 -->
<!-- abc라는 함수가 존재 x - 만들어줘야 함=> script요소! 어디에 만들어도 상관x -->
<!-- 순수 내부방식 -->
<!-- 콘솔창에 출력하는 버튼 -->
<button id="btn">콘솔창 출력</button>
<script>
// 자바스크립트 소스코드를 기술할 수 있는 영역
/*
여러 줄 주석
*/
// 접근제한자 (예약어) 반환형 메소드명(매개변수) --> 자바의 메소드
// 메소드와 함수의 차이?? => 메소드는 객체가 필요(자료형)
// 매개변수가 없는 단순한 함수 만들어보기
// abc라는 이름을 가진 함수 정의
function abc(){ // 식별자를 정의한 함수를 선언적 함수라고 한다.
// 해당 함수 호출 시 실행할 코드를 기술
window.alert('알림창 출동~');
}
// 순수 내부 방식으로 이벤트 부여
// 1. 이벤트를 적용시키고자하는 요소(태그)를 가지고 오기
const btn = document.getElementById('btn');
// 2. 선택된 요소의 이벤트 속성에 접근해서 해당 이벤트 발생 시 실행할 함수를 대입
btn.onclick = function(){ // 익명함수 : 이름이 없는 함수, 이벤트 발생 시 호출
// 함수를 호출했을 때 실행할 코드를 기술
window.console.log('이게머지...?????????????');
abc(); // 함수 내부에서 미리 정의된 선언적 함수를 호출 가능
sdwfwjkdsfl(); // 없는거 호출하면 아파함
}
</script>
<hr>
<h4 onclick="window.alert('버튼만 클릭하라는 법이 어딨어~!!~!!')">external방식</h4>
<p>
별도의 .js파일로 소스코드를 작성하고 해당 html문서에서 가져다가 실행하는 방법
</p>
<!-- 외부방식 + 인라인 방식 -->
<button onclick="test();">테스트 출동~~</button>
</body>
</html>// 스크립트 영역
function test(){
window.alert('test불렀어 ~??');
}
38-2. 데이터입출력
console.dir을 하면 해당 요소의 속성 : "속성값"이 나오는데 input요소는 value값이 '빈문자열'이 나타난다.(null값 아님)
그런데 name값에 값을 입력하면 value값이 name값으로 변경된다.
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<title>입출력해보자!</title>
<style>
.area{
border : 1px solid black;
width : 500px;
height : 200px;
}
</style>
</head>
<body>
<h1>자바스크립트에서의 입/출력</h1>
<!--
자바스크립트 데이터 입출력 관련 객체들
1. window : 자바스크립트 내장객체로 브라우저의 창이 하나 열릴때마다 하나씩 만들어지는 객체
브라우저 창 안에 존재하는 모든 요소들의 최상위 객체 == extends Object
=> window.alert(); => alert();
=> console.log(); => window.console.log();
(모든곳에 적용되기 때문에 생략 가능)
2. document : 웹문서(HTML)마다 하나씩 만들어지는 객체
HTML문서에 대한 정보들을 가지고 있음
document.getElementById();
-->
<h2>1. 데이터를 출력하는 기본 구문</h2>
<p>
1) window.alert('알림창에 출력할 문구'); <br>
2) window.console.log('콘솔창에 출력할 문구'); <br>
3) document.write('문서에 출력할 문구'); <br>
4) 선택한요소.innerHTML/innerText = '해당 요소에 출력할 문구';
</p>
<h3>3) document.write('문서에 출력할 문구')</h3>
<button onclick="documentWrite();">문서에 출력</button>
<script>
function documentWrite(){
//document.write('문서에 출력');
//document.write('<b>맙소사</b><br><i>안녕</i>이게될까요??');
// SPA가 유행~?
// 화면에 출력할 문자열에 HTML태그가 있을 경우 해석해서 동적인 요소를 만들어줌
var table = '<table border="1">'
table += '<tr>'
table += '<td>1</td>'
table += '<td>2</td>'
table += '</tr>'
table += '</table>'
document.write(table);
}
</script>
<h3> 4) 선택한요소.innerHTML / innerText = '해당 요소에 출력할 내용'</h3>
<div id="area1" class="area" onclick="divclick();">
innerHTML과 innerText
자바스크립트에서 특정한 요소(Element)안의 값(Content)을 가지고 온다거나 <br>
변경하고자 할 때, <b>innerHTML, innerText</b>라는 속성에 접근 <br>
=> 가지고 올 때 : 변수 = 선택한요소.innerHTML/innerText <br>
=> 변경하고자 할 때 : 선택한요소.innerHTML/innerText = '변경할 값';
</div>
<!-- 클래스 선택자를 이용해서 div요소의 테두리를 검정색 실선 1px / 가로길이 500px 세로길이 200px -->
<button onclick="elementValue();">확인</button>
<script>
function elementValue(){
// 1. 먼저 해당 요소 객체를 가져와서 변수에 담기!
const divEl = document.getElementById('area1')
console.log(divEl);
// 선택한 요소의 정보를 알아내고자 한다면 속성에 .을 찍고 접근하면 됨!!!!!!
console.log(divEl.id); // id : 해당 요소의 id속성값
console.log(divEl.className); // className : 해당 요소의 class속성의 값
console.log(divEl.innerHTML); // HTML 태그들 포함(Content값 안의~)
console.log(divEl.innerText); // HTML 태그들 미포함
// content값 get하는 방법
// set하는 방법
divEl.innerHTML = '<b>innerHTML로 속성값을 변경함</b>';
divEl.innerText = '<b>innerText로 속성값을 변경함</b>';
console.dir(divEl); // 해당 값의 디렉토리 구조를 보고자 할 때 사용(속성들의 정보)
divEl.style.color = 'red';
}
// 실습
// div요소를 클릭하면 '안녕'이라는 문구를 알림창으로 띄워주기!
function divclick(){
window.alert('안녕');
}
// 익명함수로도 됨!
const divEl = document.getElementById('area1');
divEl.onclick = function(){
alert('안녕~');
}
</script>
<hr>
<h2>2. 데이터를 입력받는 기본 구문(변수에 대입 가능)</h2>
<p>
1) 변수 = window.confirm('질문내용'); <br>
2) 변수 = window.prompt('질문내용'); <br>
3) 변수 = 선택한요소.속성(id, className, innerHTML, innerText, .....); <br>
4) 변수 = 선택한input요소.value;
</p>
<h3>1) window.confirm('질문내용');</h3>
<p>
confirm 호출 시 '질문 내용'과 "확인/취소"버튼이 존재하는 알림창 발생 <br>
확인 버튼 클릭 시 true값, 취소 버튼 클릭 시 false값 반환
</p>
<button onclick="testConfirm();">클릭</button>
<div id="area2" class="area"></div>
<script>
function testConfirm(){
const result = window.confirm('졸리면 확인, 아니면 취소를 누르세요.');
console.log(result); // 확인 / 취소 결과값 확인
const divEl = document.getElementById('area2'); // 요소객체 변수에 할당
//divEl.innerHTML = '<h1>문구테스트</h1>'; // 할당한 요소 객체 innerHTML속성값 변경
if(result) {
divEl.innerHTML = '<h1 style="color:red; font-size:75px">눈떠!!!</h1>';
}
else { // 꼭 이렇게 else를 개행하고 써줘야 함
divEl.innerHTML = '<h1>안 졸린데요??</h1>';
}
}
</script>
<hr>
<h3> 2) window.prompt('질문내용') </h3>
<p>
prompt는 호출 시 '질문내용'과 입력할 수 있는 '텍스트 상자'와 '확인/취소'버튼이 보여지는 알림창 발생 <br>
- 확인 버튼 클릭 시 텍스트상자에 입력한 값을 반환 <br>
- 취소 버튼 클릭 시 null값을 반환
</p>
<button onclick="testPrompt();">클릭</button>
<div id="area3" class="area"></div>
<script>
// 자바스크립트 영역
function testPrompt(){
const name1 = window.prompt('푸바오 동생 이름 뭘로 지을까?');
const name2 = window.prompt('푸바오 둘째 동생 이름 뭘로 지을까?');
console.log(name1);
console.log(name2);
// 푸바오의 첫째 동생 이름은 XX이구요 둘째동생 이름은 XX입니다. <= 요 형태로 div요소 내부에 출력!
const divEl = document.getElementById('area3');
divEl.innerHTML = '푸바오의 첫째 동생 이름은 ' + name1 + '이구요 둘쨰동생 이름은 ' + name2 + '입니다.';
}
</script>
<button onclick="testPrompt2();">숫자입력</button>
<ul id="ul1">
</ul>
<script>
function testPrompt2(){
const num = prompt('숫자만 입력해 주세요~~~~~~~ 제바알~!!');
const ulEl = document.getElementById('ul1');
// 입력된 값만큼 ul의 자식요소로 넣고 싶음!
/*
자바였다면?
for(int i = 0; i < num; i++){
ulEl.innerHTML += '<li>자식</li>';
}
*/
let str = '';
for(let i = 0; i < num; i++){
str += '<li>자식</li>';
}
ulEl.innerHTML = str; /* 사용자가 입력한 값 만큼의 li요소 */
}
</script>
<h3> 4) 선택한input요소.value; ******************************************************** </h3>
아이디 : <input type="text" name="userId" id="userId"> <br>
비밀번호 : <input type="password" name="userPwd" id="userPwd"> <br>
<button onclick="testInput();">클릭</button>
<script>
function testInput(){
const inputId = document.getElementById('userId');
const inputPwd = document.getElementById('userPwd');
//console.dir(inputId);
// console.dir을 하면 해당 요소의 속성="속성값"이 나오는데 input요소는 value값이 '빈문자열'이 나타난다.(null값 아님)
// 그런데 name값에 값을 입력하면 value값이 name값으로 변경된다.
console.log(inputId.value);
console.log(inputPwd.value);
inputId.value = '응 너 아이디 못 써~';
}
</script>
</body>
</html>
'FrontEnd > JavaScript' 카테고리의 다른 글
| #43. JavaScript(정규표현식) 끝! UseCase Diagram, jQuery(개요) 시작! (3) | 2023.08.31 |
|---|---|
| #42. JavaScript(객체2, window객체, 이벤트) (1) | 2023.08.30 |
| JS에서의 this (+ jQuery에서의 this) (1) | 2023.08.28 |
| #40. JavaScript(배열, 함수, 객체1) (2) | 2023.08.28 |
| #39. JavaScript(요소접근하기, 변수와자료형, 문자열과 숫자) (0) | 2023.08.25 |