웹 3요소
html : 웹문서의 큰 틀을 잡을 때 사용(DOM Tree 구성)
css : html로 구성된 DOM에 다양한 스타일 속성을 부여할 때 사용
js : 웹문서에서 이벤트가 발생했을 때 실행할 기능을 정의한다. -> html로 구성된 DOM을 편집.
스크립트 언어
프로그램의 동작을 사용자의 요구사하에 맞게 수행되도록 해주는 용도
비교적 유연하게 동작하여 쉡게 사용이 가능
자바 스크립트
웹 브라우저에서 사용되는 인터프리터방식의 스크립트 언어로 브라우저에 엔진(v8)이 탑재
인터프리터 방식 : 커드를 한줄씩 읽어가며 바로 실행하는 방식
실시간으로 텍스트를 분석해서 실행됨 -> 코드에 문법 오류가 있다면 런타임 시점에 알려줌
js의 변수
- var 사용x
- let
- const
js는 동적타입언어
변수의 타입을 명시적으로 지정하지 않고, 실행중에 값에 따라서 자동으로 타입이 결정됨.
var
var name = "최지원";
var age = 55;
var height = 187.5;
var isTrue = true;
console.log(name);
age = "오십";
var name = "김수민";
console.log(name);
let은 var에서 같은 이름의 중복생성을 하지 못하게 만든 자료형
let name2 = "최지원";
name2 = "김수민";
const는 상수를 표현하는 자료형
js 네이밍 규칙
- 일반적으로 영어를 사용하며 문자와 숫자 모두 사용가능
- 특수문자는 _와 $를 사용할 수 있음
- 숫자로 시작하면 안됨
- 키워드를 변수명으로 사용하면 안됨
- 일반적으로 변수명, 함수명 -> camelCase
class, id같은 속성명 -> Kebab-case
Data type
여섯개의 원시타입과 한개의 object 타입이 있다.
1. Number타입
const age2 = 55;
const temp = -10.5;
const pi = 3.14;
console.log(age2, temp, pi);
console.log(typeof age2);
console.log(typeof temp);
console.log(typeof pi);
console.log(typeof Infinity);
console.log(typeof -Infinity);
2. string 타입
const name3 = "최지원 66살";
const age3 = 55;
console.log(typeof name3)
console.log(age3 == "55");
console.log(age3 === "55");
3. boolean 타입
const isTrue2 = true;
const isFalse = false;
console.log(typeof isTrue)
4. undefined와 null 타입
undefined : 개발자가 직접 값을 초기화하지 않았을 때 -> 변수는 선언하고 사용하지 않았을 때 지정되는 값
null : undefined와 동일하게 값이 없음을 표시하지만, js에서는 개발자가 직접 명시적으로 없는 값을 초기화할 때 사용
5. symbol 타입
유일무이한 값을 생성하는 타입
다른 원시값들과 다르게 symbol함수를 호출해서 사용
const tmp1 = '1';
const tmp2 = '1';
console.log("tmp1 === tmp2 : ", tmp1 === tmp2);
const symbol1 = Symbol('1');
const symbol2 = Symbol('1');
console.log(symbol1, symbol2);
console.log("symbol1 === symbol2 : ", symbol1 === symbol2);
object 타입
Object는 프로토타입체인의 최상위 object가 Object.
key : value -> map 구조
const jiwon = {
name: "최지원",
age: 47,
address: "경기도 안양시",
job: "강사",
}
console.log(jiwon.name);
console.log(jiwon.address);
jiwon.age = 15;
console.log(jiwon.age);
console.log(typeof jiwon);
Array 타입
값을 리스트로 나열할 수 있는 타입
const arr = ["초록색", "노란색"];
//arr.push(요소) -> 타입에 상관없이 배열의 맨 뒤에 값을 추가
arr.push("빨간색");
arr.push("파란색");
arr.push(50);
console.log(arr);
//arr.pop() 맨 마지막에 추가된 요소를 제거하고 반환한다.
console.log(arr.pop());
console.log(arr);
console.log(arr[0]);
console.log(arr[2]);
console.log(arr[10]);
js를 웹에서 사용하는 방법
인라인 : 태그 내에서 간단한 소스코드를 작성해서 실행되게 하는 방법
내부 : html문서 내에 소스코드를 작성해서 실행되게 하는 방법
외부 : 별도의 .js파일로 소스코드를 작성해서 가져다가 실행되게 하는 방법
인라인 방법
[표현법]
태그 on이벤트명="해당 요소의 이벤트 발생시 실행할 코드"
<button onclick="alert(`알림창 출력버튼 클릭!!`)">알림창 출력</button>
<button onclick="console.log('콘솔창 출력버튼 클릭!!')">콘솔창 출력</button>
내부 방법
script 태그 영역 안에 소스코드를 작성
script 태그는 head태그, body태그 어디에서든 사용 가능
<button id="btn">알림창 출력</button>
<button onclick="btnClick();">콘솔창 출력</button><script>
let btn = document.querySelector("#btn");
btn.onclick = function(){
alert("알림창 출력!!!!!!!");
}
function btnClick(){
console.log("콘솔창 출력!!!!!!!");
}
</script>js에서는 선택자를 통해서 DOM의 Element요소(태그)를 가져올 수 있음.
document.querySelector(선택자) -> 선택자를 통해 요소 1개 가져옴.
외부 방법
외부의 .js파일을 생성해서 따로 js코드를 작성한다.
<script src="../JavaScript/resources/js/sample.js"></script>
<button onclick="btnClick2()">알림창 출력</button>function btnClick2(){
alert("별도로 작성된 js파일에서 실행됨.");
}
자바 스크립트 입출력
window/document
웹브라우저에서 자바스크립트를 실행할 때 기본으로 제공되는 전역 객체, 전역 객체를 이해해야한다.
window
- 브라우저 창이 열릴때마다 생성되는 전역 객체(Gloval Object), 브라우저환경에서 모든 전역변수, 함수, 타이머등등은 window에 소속됨.
- 최상위 객체이므로 window.생략가능 -> window내부에 선언된 메서드나 변수는 window.생략하고 가져올 수 있음.
document
- window.document객체를 말함. 현재 열려있는 HTML 문서(DOM)을 표현하는 객체.
- DOM API를 통해 요소 탐색/수정/추가 가능
데이터를 출력하는 구문
- [window.]alert("출력하고 싶은 구문");
- [window.]console.log("콘솔창에 출력하고싶은 문구")
- document.write("화면상에 출력하고자하는 문구");
- 선택한요소.innerHtml ="html코드" | 선택한요소.innerText ="텍스트"
<script>
alert("출력");
console.log("콘솔에 출력");
</script>
/*===================================================================*/
<button onclick="documentWrite()">body영역에 출력</button>
<script>
function documentWrite(){
//출력할 문구에 html태그를 포함해서 전달함.
let str = `<table>
<tr>
<td>값 1</td>
<td>값 2</td>
</tr>
</table>`;
document.write(str);
}
</script>
선택한요소.innerHTML | 선택한요소.innerText = "요소에 출력하고자하는 문구"
자바스크립트에서 어떤 요소(Element)안의 값(content)을 가지고 온다거나
변경하고자 할 때
innerHTML, innerText라는 속성에 접근
<button onclick="changeText();">확인</button>
<script>
function changeText(){
//area1요소를 가져오기
let divEl = document.querySelector("#area1");
console.log(divEl);
//선택한요소 속성에 접근이 가능함.
console.log(divEl.id);
console.log(divEl.className);
//선택한요소의 속성 변경 가능
divEl.className = "wrap";
//선택요소의 컨텐츠를 가져오기(해당요소 태그내부의 있는 값)
console.log(divEl.innerHTML); //요소내부의 content영역의 모든 HTML코드를 포함한 값을 가져옴
console.log(divEl.innerText); //요소내부의 content영역의 모든 Text만 포함해서 가져옴.
divEl.innerHTML = "<h3>내부 컨텐츠 변경</h3>";
divEl.innerText = "<h3>내부 컨텐츠 변경</h3>";
divEl.style.color = "blue";
}
</script>
데이터를 입력하는 구문
질문내용을 입력하면 답을 입력할 수 있는 텍스트상자와
확인, 취소버튼을 제공
확인클릭시 텍스트상자의 내용을 반환, 취소시 null반환
<button onclick="testPrompt()">proppt버튼</button>
<div id="area3"></div>
<script>
function testPrompt(){
let name = prompt("이름을 입력하세요.");
let age = prompt("나이를 입력하세요.");
let divEl = document.querySelector("#area3");
divEl.innerHTML = `이름 : ${name} <br> 나이 : ${age}`;
}
</script>
선택한 input요소.value
<h3>선택한 input요소.value</h3>
아이디 : <input type="text" id="userId" > <br>
비밀번호 : <input type="password" id="userPwd"><br>
<button onclick="testInput()">클릭</button>
<br>
결과 : <input type="text" id="result">
<script>
function testInput(){
let idInput = document.querySelector("#userId");
let pwdInput = document.querySelector("#userPwd");
console.log(idInput.value);
console.log(pwdInput.value);
let resultInput = document.querySelector("#result");
resultInput.value = `아이디 : ${idInput.value}, 비밀번호 : ${pwdInput.value}`;
}
</script>