Javascript 개요
📍 웹은 크게 3요소
- html : 웹 문서의 큰 틀 (뼈대)
- css : 스타일(색상, 디자인, 간격, 배치 등)
- javascript : 웹 문서에서 이벤트가 발생했을 때 실행해야 하는 동작들 처리
📍 스크립트(script)언어
기본 프로그램의 동작을 사용자의 요구에 맞게 수행되도록 해주는 용도의 언어
별도의 소스코드를 컴파일하지 않고
인터프리터(interpreter)를 이용하여 소스코드를 한 줄씩 읽어 바로 실행
-> 컴파일에 소요되는 시간이 없음, 대신 프로그램 실행시간이 느림
=> 짧은 소스코드 파일로 상호작용하도록 고안됨
📍 자바스크립트(JS)란?
웹 브라우저에서 많이 사용하는 인터프리터 방식의 객체 지향 프로그래밍 언어
== 웹 브라우저에서 많이 사용되는 인터프리터 방식의 스크립트 언어
- 인터프리트 방식: 코드를 한 줄 한 줄씩 읽어가며 바로 실행하는 방식
📍 자바스크립트 작성 방법
- 브라우저 콘솔에 직접 작성
- html 내부에서 script 태그를 이용해서 작성(internal)
- html 외부에 (.js)파일을 이용해 작성(external)
- 태그에 직접 JS 코드를 작성(inline)
데이터 입출력
- window : 자바스크립트 내장 객체로 브라우저 창이 열릴 때마다 하나씩 만들어지는 객체
브라우저 창 안에 존재하는 모든 요소들의 최상위 객체(생략 가능)
- document : 웹 문서마다 하나씩 만들어지는 객체 (html 문서에 대한 정보들을 가지고 있음)
📍 데이터를 출력하는 구문
1) [window.]alert("알림창에 출력할 문구");
2) [window.]console("콘솔창에 출력할 문구");
3) document.write("화면상에 출력할 문구");
4) 선택한요소.innerText="요소에 출력할 문구";
5) 선택한요소.innerHTML="요소에 출력할 문구";
- innerText: 자바스크립트에서 요소에 작성된 내용을 읽어들이거나 변경하는 속성
- 내용을 읽어올 때 태그는 모두 무시함
- 내용을 변경할 떄 태그는 문자열 자체로 해석됨
- innerHTMK: 자바스크립트에서 요소 전체를 읽어들이거나 변경하는 속성
- 내용을 읽어올 때 태그 + 속성도 모두 포함
- 내용을 변경할 때 태그는 HTML 요소로 해석됨
📍 데이터 입력받는 구문(변수에 기록 가능)
1) 변수 = [window.]confirm("질문내용");
2) 변수 = [window.]prompt("질문내용");
3) 변수 = 선택한요소.속성(id, className, innerHTML, innerText. . .);
4) 변수 = 선택한input요소.value;
-
window.confirm("내용")
질문에 대한 "예" / "아니오" 결과를 얻고자 할 때 사용하는 대화상자 출력 함수
-> 선택 결과에 따라 확인버튼 클락 시 true 또는 취소 버튼 클릭 시 false가 반환됨
-
window.prompt("내용")
-
텍스트를 작성할 수 있는 대화상자
-
확인 : 입력한 값 반환(문자열)
-
취소 : null 값 반환
-
-
선택한input요소.value
input은 시작/종료태그로 이루어져있지 않음 -> innerText, innerHTML 사용 불가
01_JS 개요
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<title>01_JS개요</title>
<script src="JS/01_개요.js"></script>
<style>
#box{
width: 200px;
height: 200px;
border: 2px solid black;
}
</style>
</head>
<body>
<h1>JS 개요</h1>
<!--
* 웹은 크게 3요소
- html : 웹 문서의 큰 틀 (뼈대)
- css : 스타일(색상, 디자인, 간격, 배치 등)
- javascript : 웹 문서에서 이벤트가 발생했을 때 실행해야 하는 동작들 처리
-->
<h3>스크립트(script)언어</h3>
<pre>
기본 프로그램의 동작을 사용자의 요구에 맞게 수행되도록 해주는 용도의 언어
별도의 소스코드를 컴파일하지 않고
인터프리터(interpreter)를 이용하여 소스코드를 한 줄씩 읽어 바로 실행
-> 컴파일에 소요되는 시간이 없음
대신 프로그램 실행시간이 느림
짧은 소스코드 파일로 상호작용하도록 고안됨
</pre>
<h3>자바스크립트(JS)란?</h3>
<pre>
웹 브라우저에서 많이 사용하는
인터프리터 방식의 객체 지향 프로그래밍 언어
== 웹 브라우저에서 많이 사용되는
인터프리터 방식의 스크립트 언어
- 인터프리트 방식: 코드를 한 줄 한 줄씩 읽어가며 바로 실행하는 방식
ECMA Script 표준을 따른 대표적인 웹 기술이다.
</pre>
<hr>
<h2>자바스크립트 작성 방법</h2>
<ul>
<li>브라우저 콘솔에 직접 작성</li>
<li>html 내부에서 script 태그를 이용해서 작성(internal)</li>
<li>html 외부에 (.js)파일을 이용해 작성(external)</li>
<li>태그에 직접 JS 코드를 작성(inline)</li>
</ul>
<h2> 1) inline 방식</h2>
<pre>
태그 내에 간단한 소스코드를 작성해서 실행되게 하는 방법
[표현법] <태그 on이벤트명 = "해당 요소에 해당 이벤트 발생 시 실행할 소스코드">
</pre>
<!-- 소스코드가 소량일 경우 inline방식 많이 사용 -->
<!-- JS는 ""/'' 둘 다 문자열 리터럴 표기법으로 인식됨 -->
<button onclick="window.alert('inline알림창 출력')">알림창 출력</button>
<button onclick="console.log('inline 콘솔 출력!!')">콘솔출력</button>
<h2> 2) internal 방식</h2>
<pre>
현재 html 문서 내 script 태그 영억 안에 소스코드 작성
script 태그는 head 태그, body 태그든 다 작성 가능
</pre>
<!-- 버튼이 클릭되었을 때 btnClick1()함수를 호출 -->
<button onclick="btnClick1()">알림창 출력</button>
<script>
// 자바스크립트 영역 주석
function btnClick1(){
window.alert("internal 알림창 출력 버튼")
}
</script>
<h2> 3) external 방식</h2>
<pre>
별도의 .js 파일로 소스코드를 작성해서 가져다가 사용하는 방법
</pre>
<!-- external 방식은 js 파일을 연결해야 사용 가능(head, body태그 어디든 작성 가능) -->
<button onclick="btnClick2()">external 방식</button>
<hr>
<h3>JS 테스트</h3>
<div id="box"></div>
<button onclick="changeColor1()">red</button>
<button onclick="changeColor2()">yellow</button>
</body>
</html>01_js개요.js
// 한 줄 주석
/* 범위 주석 */
// js파일은 <script> 태그 내부라고 생각하면 됨
function btnClick2(){
window.alert("external 알림창 출력!!");
}
function changeColor1(){
document.getElementById("box").style.backgroundColor="red";
}
function changeColor2(){
document.getElementById("box").style.backgroundColor="yellow";
}02_데이터입출력
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<title>02_데이터입출력</title>
<script src="js/02_데이터입출력.js"></script>
<style>
.box{border: 1px solid black;}
#area1{
width: 520px;
height: 300px;
border: 1px solid black;
background-color: cadetblue;
overflow: auto;
display: flex;
flex-wrap: wrap;
align-content: flex-start;
}
.box2{
width: 100px;
height: 100px;
background-color: aqua;
border: 2px solid green;
box-sizing: border-box;
}
</style>
</head>
<body>
<h1>자바스크립트에서의 데이터 입/출력</h1>
<!--
* widow : 자바스크립트 내장 객체로 브라우저 창이 열릴 때마다 하나씩 만들어지는 객체
브라우저 창 안에 존재하는 모든 요소들의 최상위 객체(생략 가능)
* document : 웹 문서마다 하나씩 만들어지는 객체 (html 문서에 대한 정보들을 가지고 있음)
-->
<h2>1. 데이터를 출력하는 구문</h2>
<pre>
1) [window.]alert("알림창에 출력할 문구");
2) [window.]console("콘솔창에 출력할 문구");
3) document.write("화면상에 출력할 문구");
4) 선택한요소.innerText="요소에 출력할 문구";
5) 선택한요소.innerHTML="요소에 출력할 문구";
</pre>
<hr>
<h3>1) window.alert("내용")</h3>
<pre>
- alert(알리다, 경보, 경고)
- 브라우저에 대화상자를 띄우는 함수
</pre>
<!-- 클릭 시 "alert 버튼 클릭됨" 대화상자 출력 -->
<button onclick="fnAlert()">alert 확인</button>
<hr>
<h3> 3) document.write("내용")</h3>
<button onclick="documentWrite()">화면에 출력</button>
<hr>
<h3> 4) innerText</h3>
<pre>
자바스크립트에서 요소에 작성된 내용을 읽어들이거나 변경하는 속성
- 내용을 읽어올 때 태그는 모두 무시함
- 내용을 변경할 때 태그는 문자열 자체로 해석됨(태그 해석X)
</pre>
<button onclick="getInnerText()">innerText로 읽어오기</button>
<button onclick="setInnerText()">innerText로 변경하기</button>
<p id="test1" class="box">
테스트1입니다. <br>
<b>안녕하세요?</b>
</p>
<hr>
<h3> 5) innerHTML</h3>
<pre>
자바스크립트에서 요소 전체(태그 + 속성 + 내용)를 읽어들이거나 변경하는 속성
- 내용을 읽어올 때 태그 + 속성도 모두 포함함
- 내용을 변경할 때 태그는 HTML 요소로 해석됨(태그 해석 O)
</pre>
<button onClick="getInnerHTML1()">innerHTML로 읽어오기</button>
<button onClick="setInnerHTML1()">innerHTML로 변경하기</button>
<p id="test2" class="box">
테스트2입니다. <br>
<b>안녕하세요?</b>
</p>
<hr>
<h3>innerHTML 응용</h3>
<button onclick="add()">추가하기</button>
<div id="area1">
<div class="box2"></div>
</div>
<hr>
<br><br><br>
<h2> 2. 데이터 입력받는 구문(변수에 기록 가능)</h2>
<pre>
1) 변수 = [window.]confirm("질문내용");
2) 변수 = [window.]prompt("질문내용");
3) 변수 = 선택한요소.속성(id, className, innerHTML, innerText. . .);
4) 변수 = 선택한input요소.value;
</pre>
<h3> 1) window.confirm("내용")</h3>
<pre>
질문에 대한 "예" / "아니오" 결과를 얻고자 할 때 사용하는 대화상자 출력 함수
-> 선택 결과에 따라 확인버튼 클락 시 true 또는 취소 버튼 클릭 시 false가 반환됨
</pre>
<button id="confirmBtn" onclick="fnConfirm()">confirm 확인하기</button>
<hr>
<h3> 2. window.prompt("내용")</h3>
<pre>
- 텍스트를 작성할 수 있는 대화상자
- 확인 : 입력한 값 반환(문자열)
- 취소 : null 값 반환
</pre>
<button onclick="fnPrompt1()">클릭</button>
<div id="area2"></div>
<br>
<button onclick="fnPrompt2()">확인하기</button>
<p id="area3"></p>
<hr>
<h3> 4) 선택한input요소.value</h3>
아이디 : <input type="text" id="userId"> <br>
비밀번호 : <input type="password" id="userPwd"> <br>
<button onclick="fnInput()">클릭</button>
<br>
<input type="text" id="area4">
</body>
</html>02_데이터입출력.js
// alert 확인
function fnAlert(){
window.alert("alert 버튼 클릭됨");
// window는 브라우저 자체를 나타내는 객체
// -> JS 코드는 브라우저(window)내부에서 실행되는 코드이다보니
// widow를 생략할 수 있다.
}
// document.write확인
function documentWrite(){
// document.write("안녕하세요");
// document.write("<b>안녕하세요</b><br><h2>반가워요</h2>");
// 출력할 문구에 html 태그가 있을 경우 해석해서 시각적인 요소로 보여짐
let a = "<table border='1'>";
a += "<tr>";
a += "<td>1</td>";
a += "<td>2</td>";
a += "</tr></table>";
document.write(a);
}
// innerText 읽어오기
function getInnerText(){
// HTML 문서 내에서 아이디가 test1인 요소를 얻어와
// test1 변수에 대입
const test1 = document.getElementById("test1");
// test1 변수에 대입된 요소에서 내용을 얻어와 console에 출력
console.log(test1.innerText);
}
// innerText 변경하기
function setInnerText(){
// id가 "test1"인 요소를 얻어와
// test1 변수에 대입
const test1 = document.getElementById("test1");
// test1 변수에 대입된 요소에 새로운 내용 작성
test1.innerText = "innerText로 변경된 <br> 내용입니다.";
}
// innerHTML로 읽어오기
function getInnerHTML1(){
// id가 test2인 요소를 얻어와
// test2 변수에 대입
const test2 = document.getElementById("test2");
// test2요소 내부에 내용(태그 + 속성 + 내용)을 읽어서 콘솔에 출력
console.log(test2.innerHTML);
}
// innerHMTL로 변경하기
function setInnerHTML1(){
const test2 = document.getElementById("test2");
test2.innerHTML = "<b>innerHTML로 변경된 내용</b> <br> 반갑습니다.";
}
// innerHTML 응용
function add(){
// 1) id가 area1인 요소 얻어오기
const area1 = document.getElementById("area1");
// 2) area1 내부 내용(태그, 속성, 내용 포함)을 모두 읽어오기
// const content = area1.innerHTML
// 3) area1에 이전 내용 + 새로운 요소(div.box2)추가
// area1.innerHTML = content + "<div class='box2'></div>";
// 2번 + 3번
area1.innerHTML += "<div class='box2'></div>";
}
// confirm 확인하기
function fnConfirm(){
// 확인
if(confirm("버튼 배경색을 분홍색으로 바꾸시겠습니까?")){
document.getElementById("confirmBtn").style.backgroundColor="pink";
} else{
document.getElementById("confirmBtn").style.backgroundColor="green";
}
}
// prompt 확인하기
function fnPrompt1(){
var name = prompt("당신의 이름은 무엇입니까?");
var age = prompt("당신의 나이는 몇 살입니까?");
// console.log(name);
// console.log(age);
const divE1 = document.getElementById("area2");
divE1.innerHTML="<b>앗, 당신이 바로 " + age + "살 " + name + "님이시군요</b>";
}
function fnPrompt2(){
const input = prompt("이름을 입력해주세요");
const pE1 = document.getElementById("area3");
if(input != null) { // 이름이 입력되었을 때
pE1.innerHTML=input + "님 환영합니다.";
} else { // 취소 버튼 눌렀을 때
pE1.innerText="이름을 입력해주세요.";
}
}
// 선택한input요소.value 확인하기
function fnInput(){
const input1 = document.getElementById("userId") ;// 아이디 input 요소
const input2 = document.getElementById("userPwd") ;// 비밀번호 input 요소
// console.dir(input1);
const id = input1.value;
const pwd = input2.value;
console.log(id);
console.log(pwd);
document.getElementById("area4").value = id + ", " + pwd;
// input은 시작 종료태그로 이루어진 게 아니라서 innerText, innerHTML 못 씀
input1.value='';
input2.value="";
}
개발 일지