스크립트 언어
- 기본 프로그램의 동작을 사용자의 요구에 맞게 수행되도록 해주는 용도의 언어
- 별도의 소스코드를 컴파일하지 않고 인터프리터를 이용하여 소스코드를 한 줄씩 읽어서 바로 실행
자바스크립트(JS)란?
- 웹 브라우저에서 많이 사용하는 인터프리터 방식의 객체지향 프로그래밍 언어
- 인터프리터 방식 : 코드를 한 줄씩 읽어가며 바로 실행하는 방식
- 자바스크립트 작성 방법 3가지
1) html 내부에서 script 태그를 이용해서 작성 (Internal)
2) html 외부에서 (.js)파일을 이용해서 작성 (external)
3) 태그에 직접 JS 코드를 작성 (Inline)
Inline 방식
- 태그내에 간단한 소스코드를 작성해서 실행되게 하는 방법
- 소스코드가 소량일 경우 inline 방식을 많이 사용
- JS는 " " / ' ' 둘 다 문자열 리터럴 표기법으로 인식됨
Internal 방식
- 현재 html 문서 내 script 태그 영역안에 소스코드 작성
- script 태그는 head태그, body태그든 어디든 다 작성 가능
--> window는 생략 가능
External 방식
- 별도의 .js 파일로 소스코드를 작성해서 가져다가 사용하는 방법
--> 따로 js파일을 만들고 그 안에 작성
자바스크립트에서의 데이터 입/출력
- window : 자바스크립트 내장 객체로 브라우저 창이 열릴때마다 하나씩 만들어지는 객체
브라우저 창 안에 존재하는 모든 요소들의 최상위 객체(생략가능)
- document : 웹 문서마다 하나씩 만들어지는 객체(html 문서에 대한 정보들을 가지고 있다.)
- 데이터를 출력하는 구문
1) [window.] alert("알림창에 출력할 문구");
2) [window.] console.log("콘솔창에 출력할 문구");
--> 브라우저창에서 개발자도구에 콘솔창에 출력
3) document.write("화면상에 출력할 문구");
--> a 변수에 누적시켜서 테이블을 생성해서 화면에 출력
4) 선택한요소.inneerText = "요소에 출력할 문구";
- 자바스크립트에서 요소에 작성된 내용을 읽어들이거나 변경하는 속성
- 내용을 읽어올때 태그는 모두 무시함
- 내용을 변경할 때 태그는 문자열 자체로 해석됨 (태그X)
--> 이렇게 콘솔에 출력하고 <p> 태그 안에 <br>태그와 <b>태그는 문자열에 출력되지 않은 모습 확인,
innerText로 읽어오기 버튼을 누를때마다 콘솔창에 숫자가 올라감
--> 내용을 변경할 때 태그는 문자열에 같이 출력된걸 볼 수 있고, 해석도 되지 않음(줄바꿈X)
5) 선택한요소.innerHTML = "요소에 출력할 문구";
- 자바스크립트에서 요소 전체를 (태그 + 속성 + 내용) 읽어들이거나 변경하는 속성
- 내용을 읽어올 때 태그 + 속성도 모두 포함함
- 내용을 변경할 때 태그는 HTML 요소로 해석됨 (태그 해석O)
--> 내용을 읽어올 때는 태그도 같이 문자열에 출력됨
--> 내용을 변경했을 때는 태그는 문자열에 출력되지 않았고 태그 해석O
데이터 입력 받는 구문(변수에 기록이 가능)
1) 변수 = confirm("질문내용");
- 질문에 대한 "예" / "아니오" 결과를 얻고자 할때 사용하는 대화 상자 출력 함수
-> 선택 결과에 따라 확인 버튼 클릭 시 true 또는 취소 버튼 클릭 시 false 가 반환됨
--> 자바에서 처럼 if문을 쓸 수 있고, 질문이 화면에 출력되면 확인 버튼을 누르면 true가 반환되어 버튼의 backgroudColor가 pink색으로 변하고 그렇지 않고 취소버트을 누르게 되면 else 문이 실행됨
2) 변수 = prompt("질문내용");
- 텍스트를 작성할 수 있는 대화상자
- 확인 : 입력한 값 반환(문자열)
- 취소 : null 반환
-----------------------------------------------------------
--> input 변수에 이름을 입력하는 값이 담기는 것이므로 이름을 입력하고 확인을 눌렀다면 if 문이 true가 되어 input + "님 환영합니다"가 출력되고, 그렇지 않고 이름을 입력하지 않고 취소를 누르게 되면 else문이 실행되어진다.
3) 변수 = 선택한요소.속성(id, className, innerHTML, innerText)
4) 변수 = 선택한input요소.value;
--> input1,2 변수에 아이디와 비밀번호의 input 요소가 담기고
id 변수에 아이디 입력칸에 입력한 값이 담기고, pw 변수에 비밀번호 입력칸에 담긴 값이 담긴다.
그러고나서 id가 "area4"인 값의 요소의 값에 id + "," + pw가 담기게된다 위 사진처럼.
마지막으로 input1,2의 value값에 빈 문자열 리터럴값을 줌으로써 빈칸으로 만듦.