<!DOCTYPE html>
<html>
<head>
<meta charset="UTF-8">
<title>Insert title here</title>
<!-- internal -->
<script type="text/javascript">
</script>
<!-- external -->
<script type="text/javascript" src=""></script>
</head>
<body>
<!--
Java Script
Script(대본) 란 실행되는 명령어들의 모음
-> 다른 프로그램이나 환경 위에서 실행되는 코드
운영체제(Windows, 리눅스, iOS) 위에서 실행되는 shell script
웹 브라우저에서 실행되는 Java script
응용 프로그램에서 실행되는 macro script
Client 언어. front-end
목적: html 상에 tag 에 접근하기 위한 스크립트
보조 프로그래밍적인 요소이다
화면을 제어하기 위한 스크립트이다
compile을 하지 않는다 -> 가볍다 -> 속도가 빠르다
ex) 회원가입 -> id가 빈칸?
id의 문자수 제한
link를 제어할 수 있다
JavaScript 간략화 -> Jquery -> angler -> node.js -> react -> vue
Animation 처리, Timer, Camera 연결
STT(Speech To Text), TTS(Text To Speech)
tag(input, button..) 접근 -> property(속성) == attribute
id -> javascript -> 1개 유효
class -> 다수
name -> 다수 -> link로 이동 시에 값을 전달
각 태그에 접근하기 위한 객체
DOM(Document Object Model)
해당 문서(html document)에 접근해서 읽고 조작할 수 있는 API(Application Programming Interface)
getElementById
getElementsByClass
getElementsByName
getElementsByTagName
internal : 내부구현 <head> <body>
external : 외부파일
-->
<!-- internal -->
<script type="text/javascript">
// java script 영역(area)
/*
범위 주석문
*/
// 콘솔 출력
console.log('Java Script 실행');
// 경계창
//alert("경계창 실행");
//window.alert('')
// 입력창
//var v = prompt("문자열 입력");
//console.log(v);
</script>
<p id="demo">안녕하세요 <b>반갑습니다</b></p>
<script type="text/javascript">
// DOM 을 이용해서 태그 접근
var v = document.getElementById("demo").innerHTML; // getter
console.log(v);
document.getElementById("demo").innerHTML = "Hello JS"; // setter
</script>
</body>
</html>
1. 자바스크립트(JavaScript)란 무엇일까?
우리가 웹 페이지를 만들 때, HTML이 건물의 '뼈대'라면 자바스크립트는 건물에 생명을 불어넣는 '전기나 수도 시스템' 같은 존재예요.
웹 브라우저에서 실행: 우리가 흔히 쓰는 크롬(Chrome) 같은 브라우저 안에서 움직여요.
화면 제어: 사용자가 버튼을 눌렀을 때 반응하게 하거나, 글자를 바꾸는 등 화면을 살아 움직이게 만들죠.
가볍고 빠름: 코드를 미리 복잡하게 변환(컴파일)할 필요가 없어서 아주 빠르고 효율적이에요.
2. HTML과 대화하는 방법: DOM
자바스크립트는 브라우저에 있는 HTML 태그들을 직접 다룰 수 있어요. 이걸 DOM(Document Object Model)이라고 부릅니다.
Getter(가져오기): document.getElementById("demo").innerHTML처럼 사용하면, "demo라는 아이디를 가진 태그의 내용을 가져와!"라는 뜻이에요.
Setter(설정하기): 가져온 자리에 새로운 값을 넣으면 화면에 보이는 내용이 즉시 바뀝니다. 마치 마법 지팡이로 화면의 글자를 슥삭 바꾸는 것과 같죠!
3. 데이터를 담는 그릇: 변수(Variable)
프로그래밍에서 가장 중요한 것 중 하나가 바로 '데이터를 저장하는 것'이에요. 이를 변수라고 합니다.
var / let: 데이터를 담는 상자예요. 예를 들어 let age = 22;라고 하면 "age라는 상자에 22라는 숫자를 담을게!"라는 뜻입니다.
const: 이건 '상수'라고 해요. 한 번 값을 넣으면 절대 바꿀 수 없는 강력한 상자죠. (예: const address = "제주시";)
배열(Array): 여러 개의 데이터를 한 줄로 세워두고 싶을 때 사용해요. [ ] 대괄호를 이용해 cars = ["benz", "bmw", "audi"]처럼 표현합니다.
index1 ( 자바스크립트가 데이터를 다루는 방식과 객체 지향적인 요소들을 어떻게 사용하는지 보여주는 예제)
<!DOCTYPE html>
<html>
<head>
<meta charset="UTF-8">
<title>Insert title here</title>
</head>
<body>
<script type="text/javascript">
// variable(변수)
/*
integer, String, Character, MyClass, HumanDto
MyClass cls = new MyClass();
String str = new String("Hello");
Object cls = new MyClass();
Object str = new String("Hello");
Object == var -> let
*/
var number = 123; // int
var pi = 3.141592; // double
var name = "홍길동"; // string
var answer = true; // boolean
var num = "성춘향";
console.log(num);
num = 1024;
console.log(num);
myname = "일지매";
console.log(myname);
var myname = "";
let youname;
youname = "성춘향";
var myname = "홍두께";
// let youname = "";
// Array : 배열
// Array == Object
// String cars = new String[3];
let cars = new Array(3);
cars[0] = "benz";
cars[1] = "bmw";
cars[2] = "audi";
console.log(cars);
// String mycars[] = { "benz", "bmw", "audi" };
let mycars = ["benz", "bmw", "audi"];
console.log(mycars);
for (i = 0; i < mycars.length; i++) {
console.log(mycars[i]);
}
for (let i in mycars) {
console.log(mycars[i]);
}
for (var i = 0; i < cars.length; i++) {
if(cars[i] === "bmw"){ // == :reference === :value
console.log(i + ":" + cars[i]);
}
}
let cars2 = [ ["saab", 1],
["bmw", 2],
["benz", 3] ];
console.log(cars2[2][1]);
/*
Java
class Human{
String name;
int age;
public Human(String name, int age){
this.name= name;
this.age = age;
}
public print(){
System.out.println(name + " " + age);
}
}
*/
// Java Script
class Human{
constructor(name, age){
this.name = name;
this.age= age;
}
print(){
this.address = "부산시";
console.log(this.name + " " + this.age);
}
}
let human = new Human("홍길동", 22);
console.log(human.name);
human.print();
console.log(human.address);
// eg6
let obj = {
"firstname":"춘향", // key:value -> hashmap => JSON
"lastname":"성",
"age":15,
methodName:function(){
console.log(this.lastname + this.firstname + " " + this.age);
}
};
console.log(obj.firstname);
console.log(obj.lastname);
obj.methodName();
//let address; // <- 변수
const address = "제주시"; // <- 상수 == final String ADDRESS = "제주시";
// address = "울산시"; // <- error
</script>
</body>
</html>
var vs let
자바스크립트에서 변수는 자바(Java)처럼 타입을 딱 정하지 않아도 돼요.
유연함: var num = "성춘향"(문자열)이었다가, 바로 다음 줄에 num = 1024;(숫자)라고 넣어도 전혀 문제없어요.
var vs let: var는 예전 방식이고, 요즘은 더 안전한 let을 주로 써요. let은 똑같은 이름의 변수를 다시 만드는 실수를 방지해주거든요.
반복문: for문을 사용하면 기차 칸에 들어있는 데이터를 하나씩 꺼내서 출력할 수 있어요. for (let i in mycars) 같은 방식은 "배열에 있는 모든 걸 하나씩 꺼내줘"라는 아주 편리한 문법입니다.
3. 클래스(Class): 설계도면 만들기
Human 클래스를 만든 부분은 "사람이라는 객체는 이런 정보(이름, 나이)를 가져야 해!"라고 설계도를 그리는 작업이에요.
constructor (생성자): 사람을 새로 만들 때(예: new Human("홍길동", 22)) 기본 정보를 쏙 집어넣는 초기화 작업을 담당해요.
메서드(Method): print()처럼 사람이 할 수 있는 행동을 미리 정의해두고, 필요할 때마다 human.print()라고 불러서 실행하는 거죠.
4. JSON: 데이터를 깔끔하게 묶기
let obj = {"firstname": "춘향", "lastname": "성", "age": 15} 부분은 JSON(JavaScript Object Notation)이라고 해요.
데이터를 키(Key):값(Value) 쌍으로 저장해서, 나중에 obj.firstname처럼 아주 직관적으로 데이터를 꺼내 쓸 수 있게 해줍니다. 요즘 웹 통신에서 가장 많이 쓰는 방식이에요!
5. 상수(const): 변하지 않는 약속
마지막에 const address = "제주시";라고 했죠?
const는 한 번 정하면 절대로 바꿀 수 없는 상수예요. 만약 누군가 address = "울산시"라고 코드를 바꾸려 하면, 브라우저가 "안 돼! 이건 바꿀 수 없는 값이야!"라고 에러를 띄워줍니다. 중요한 정보를 보호할 때 꼭 필요하겠죠?
index2
<!DOCTYPE html>
<html>
<head>
<meta charset="UTF-8">
<title>Insert title here</title>
<style type="text/css">
#demo{
background-color: red;
}
</style>
</head>
<body>
<!-- id, class, name -->
<!--
getElementById
getElementsByTagName
getElementsByClass
getElementsByName
-->
<!-- getElementsByTagName -->
<p>안녕하세요</p>
<p>반갑습니다</p>
<p><b>건강하세요</b></p>
<script type="text/javascript">
let str = document.getElementsByTagName("p")[0].innerHTML;
console.log(str);
document.getElementsByTagName("p")[0].innerHTML = "나는 문제 없어";
let pTagArr = document.getElementsByTagName("p");
console.log(pTagArr[2].innerHTML);
console.log(pTagArr[2].innerText);
for (var i = 0; i < pTagArr.length; i++) {
console.log(pTagArr[i].innerText);
}
</script>
<!-- getElementById -->
<!-- 일반 == 출력태그 == label -->
<p id="demo">나는 반드시 성공합니다</p>
<h3 id="demo">나의 장래는 밝습니다</h3>
<script type="text/javascript">
let demo = document.getElementById("demo").innerHTML;
console.log(demo);
document.getElementById("demo").innerHTML = "Never Change My Mind";
</script>
<!-- 입(출)력태그 -->
<input type="text" id="text" size="20" placeholder="입력" value="초기값"/><br/>
<select id="fruit">
<option value="apple">사과</option>
<option value="pear" selected="selected">배</option>
<option value="banana">바나나</option>
</select>
<br/><br/>
<script type="text/javascript">
let text = document.getElementById("text").value;
console.log(text);
let fruit = document.getElementById("fruit").value;
console.log(fruit);
</script>
<!--
getElementsByClassName
-->
<input type="text" class="cls" placeholder="이름" value="홍길동"/><br/>
<input type="text" class="cls" placeholder="주소" value="인천시"/><br/>
<input type="email" class="cls" placeholder="이메일" value="hgd@nate.com"/><br/>
<script type="text/javascript">
let address = document.getElementsByClassName("cls")[1].value;
console.log(address);
let human = document.getElementsByClassName("cls");
console.log(human.length);
for (var i in human) {
console.log(human[i].value);
}
</script>
<!-- name -> checkbox, radio -->
<input type="checkbox" name="hobby" checked="checked"/>picture
<input type="checkbox" name="hobby" checked="checked"/>movie
<input type="checkbox" name="hobby" />game
<script type="text/javascript">
let hobby = document.getElementsByName("hobby");
for (var i = 0; i < hobby.length; i++) {
console.log(i + " " + hobby[i].checked);
}
</script>
<br/>
좋아하는 과목은?<br/>
<input type="radio" name="lang" value="국어">국어<br/>
<input type="radio" name="lang" value="영어" checked="checked">영어<br/>
<input type="radio" name="lang" value="수학">수학<br/>
<script type="text/javascript">
let value = document.querySelector('input[name="lang"]:checked').value;
console.log(value);
</script>
</body>
</html>
1. 태그를 찾는 4가지 방법
자바스크립트가 HTML의 어떤 부분을 고칠지 정하려면 먼저 '찾아야'겠죠?
getElementById: id는 한 문서에 하나만 존재하므로, 딱 하나를 정확히 콕 집어 가져올 때 써요.
getElementsByTagName: <p>나 <div> 같은 태그 이름을 기준으로 다 가져와요. 여러 개가 나오니까 [0]처럼 순번(인덱스)을 붙여서 구체적으로 지정해야 합니다.
getElementsByClassName: 같은 클래스 이름을 가진 애들을 묶음으로 가져와요. 여러 개가 있을 때 자주 쓰이죠.
getElementsByName: 주로 입력 폼(checkbox, radio)에서 같은 이름을 가진 애들을 관리할 때 사용합니다.
2. 읽고 쓰기 (innerHTML vs value)
innerHTML: <p>내용</p>처럼 태그와 태그 사이에 있는 글자를 가져오거나 수정할 때 씁니다.
value: <input type="text">처럼 사용자가 입력창에 적은 값을 가져오거나 수정할 때 씁니다. (이거 정말 자주 쓰이니 꼭 기억하세요!)
3. 반복문으로 묶음 관리
getElementsByTagName이나 ClassName으로 가져오면 여러 개가 한꺼번에 담긴 '배열' 형태가 됩니다. 이때 for문을 사용하면 모든 태그를 하나씩 꺼내서 내용을 확인하거나 일괄적으로 변경할 수 있어요.
4. querySelector (고급 팁)
코드 마지막에 보면 document.querySelector('input[name="lang"]:checked')라는 게 있죠? 이건 CSS 선택자처럼 문법을 써서 "특정 조건을 만족하는 딱 하나"를 아주 똑똑하게 찾아내는 방법이에요. 요즘 실무에서는 이 방법을 가장 많이 씁니다!
index3
<!DOCTYPE html>
<html>
<head>
<meta charset="UTF-8">
<title>Insert title here</title>
</head>
<body>
<!-- event -->
<p onclick="alert('p click')">여기가 p 태그입니다</p>
<!-- 버튼을 클릭했을 때 입력된 값을 가져 오고 싶은 경우 -->
<input type="text" id="memo" placeholder="입력"/>
<button type="button" onclick="buttonClick()">버튼</button>
<script type="text/javascript">
function buttonClick() {
// alert('buttonClick() 호출');
let memo = document.getElementById("memo").value;
document.getElementsByTagName("p")[0].innerHTML = memo;
}
</script>
</body>
</html>
1. 이벤트(Event): "무언가 일어났을 때!"
웹 페이지에서 사용자가 하는 모든 행동(클릭, 마우스 올리기 등)을 이벤트라고 불러요.
onclick: HTML 태그에 직접 "이걸 클릭하면~"이라는 명령을 심는 방식입니다. 예제에 있는 <p onclick="alert('p click')">은 사용자가 그 문구를 클릭하는 순간 브라우저가 'p click'이라는 경고창을 띄우게 하죠.
2. 함수(Function): "명령어 묶음"
코드가 길어지면 하나하나 실행하기 번거롭겠죠? 그래서 자주 쓰는 코드들을 상자에 담아두고 이름을 붙여놓은 것이 바로 함수입니다.
function buttonClick() { ... }: 여기서는 buttonClick이라는 이름의 상자를 만들고, 그 안에 "입력창의 값을 가져와서 글자를 바꿔라"는 명령어를 담아둔 거예요.
효과: 버튼을 누를 때마다 일일이 복잡한 코드를 적을 필요 없이, "클릭되면 buttonClick() 함수를 실행해!"라고 한마디만 하면 됩니다.
3. 실시간 화면 제어
이 예제의 핵심은 사용자의 입력을 화면에 반영하는 과정이에요.
가져오기 (Getter): let memo = document.getElementById("memo").value;
id가 "memo"인 입력창을 찾아서, 그 안에 적힌 값(value)을 memo라는 변수에 저장합니다.
