728x90
자바스크립트가 하는 일
웹에서 자바스크립트는 동적이고 인터렉티브한 기능을 구현하는데 사용
- DOM 조작 : HTML 문서의 구조를 실시간으로 수정하고 업데이트
- 이벤트 처리 : 사용자의 입력을 처리하고 이에 반응
- 비동기 요청(AJAX) : 서버와 비동기적으로 데이터를 주고받아 페이지 새로고침 없이 동적으로 콘텐츠를 업데이트
- 애니메이션 : 페이지 내 요소에 애니메이션 효과를 추가
- 클라이언트 측 유효성 검사 : 사용자가 입력한 데이터를 실시간으로 검증하여 오류를 미리 감지
- 상태 관리 및 로직 처리 : 페이지 내 상태를 관리하고, 사용자 인터페이스에 맞게 동적인 로직을 처리
즉, 웹 페이지를 더 동적, 반응형으로 만들어 사용자 경험을 향상시키는 핵심적인 역할
웹 브라우저와 자바스크립트
웹 문서 안에서 <\script> 태그로 자바스크립트를 작성
- <\script>태그는 웹 문서 안의 어디서든 위치할 수 있고 삽입한 위치 그자리에서 바로 실행
- 하나의 문서에서 여러 개 사용
- HTML, CSS와 달리 영어 대소문자를 구별
변수의 이름이나 함수를 지정할 때 영어 대소문자를 정확하게 구별해야함
NewFile01.html
<!DOCTYPE html>
<html lang="ko">
<head>
<meta charset="UTF-8">
<title>글자색 바꾸기</title>
<style>
body{text-align: center;}
heading{color: yellow;}
text{color: darkslategray; font-size: 20px;}
</style>
</head>
<body>
<h1 id="heading">자바스크립트</h1>
<p id="text">위 텍스트를 클릭해보세요</p>
<script>
// var heading = document.querySelector("#heading");
// var heading = document.getElementById("heading");
var heading = document.querySelector("h1");
heading.onclick = function(){
heading.style.color="red";
}
</script>
</body>
</html>※ 위의 코드에서 document.querySelector()와 getElementById()를 바꿔서 사용할 수 있으나 두 메서드는 차이가 존재함
document.querySelector()
- CSS 선택자를 이용해서 요소를 선택
- 주어진 선택자에 맞는 첫 번째 요소만 반환
- CSS 스타일의 선택자 문법을 그대로 사용할 수 있어, 아이디, 클래스, 태그 이름, 속성 등 다양한 선택자가 가능
document.getElementById()
- 특정 id를 가진 요소를 선택
- id는 페이지 내에서 유일해야 하기 때문에, 항상 단 하나의 요소만 반환
- document.querySelector()보다 속도가 빠름. id가 유일함을 보장하기 때문에 내부적으로 더 간단하게 동작
외부 스크립트 파일로 연결
CSS와 마찬가지로 자바스크립트 소스도 따로 파일로 저장한 후 웹 문서에 연결해서 사용할 수 있음
이는 웹 문서 안에 직접 자바스크립트 소스가 드러나지 않고 HTML 태그와 CSS만 유지할 수 있어 소스가 깔끔해짐
js/NewFile02.js
/**
*
*/
var heading = document.getElementById("heading");
// var heading = document.querySelector("h1");
heading.onclick = function(){
heading.style.color="red";
}
NewFile02.html
<!DOCTYPE html>
<html lang="ko">
<head>
<meta charset="UTF-8">
<title>글자색 바꾸기(외부스크립트)</title>
<style>
body{text-align: center;}
heading{color: yellow;}
text{color: darkslategray; font-size: 20px;}
</style>
</head>
<body>
<h1 id="heading">자바스크립트</h1>
<p id="text">위 텍스트를 클릭해보세요</p>
<script src="js/NewFile02.js"></script>
</body>
</html>
웹 브라우저에서 스크립트 해석 과정
- 1행의 !DOCTPYE html을 보고 웹 문서라는 것을 알게됨.
html태그 사이의 내용을 HTML 표준에 맞춰 읽기 시작 - HTML 태그와 순서와 포함 관계 확인
head 태그 사이, body 태그 사이에 어떤 태그가 있는지 확인.
태그 간의 관계는 어떻게 되어 있는지 등을 분석 - style 태그의 스타일 정보 분석
- 16행 script 태그를 만나면 웹 브라우저 안에 포함된 자바스크립트 해석기에게 스크립트 소스를 넘겨 자바스크립트 해석기가 해석
- 2,3에서 분석한 정보에 따라 웹 브라우저 화면에 표시
- 자바스크립트를 실행해서 결과를 화면에 표시
용어와 기본 입출력방법
표현식과 명령문
- 표현식
연산식뿐만 아니라 실제 값, 함수를 실행하는 것을 포함
어떤 값을 만들어 낼 수 있다면 모두 식이 될 수 있고, 식은 변수에 저장 - 명령문
끝에는 세미콜론을 붙여 구분
입출력 방법
알림창 : 가장 많이 사용하는 간단한 대화상자 알림창을 열어 메시지 표시
<!DOCTYPE html>
<html lang="ko">
<head>
<meta charset="UTF-8">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<title>간단한 입출력</title>
</head>
<body>
<script>
alert('alert() 알림창')
</script>
</body>
</html>
확인창 : 사용자가 [확인], [취소] 버튼 중에서 직접 클릭하여 사용자가 어떤 버튼을 눌렀는지 결과를 번수에 저장한 후 그 값에 따라 프로그램에서 처리
<!DOCTYPE html>
<html lang="ko">
<head>
<meta charset="UTF-8">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<title>간단한 입출력 confirm()</title>
</head>
<body>
<script>
var answer = confirm("변경하시겠습니까?");
document.getElementById("confirmAnswer").textContent = answer ? "확인" : "취소";
</script>
</body>
</html>
프롬프트창 : 텍스트 필드 안에 간단한 메시지를 입력할 수 있으며 그 내용을 가져와 프로그램에서 사용할 수 있음
<!DOCTYPE html>
<html lang="ko">
<head>
<meta charset="UTF-8">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<title>간단한 입출력 prompt()</title>
</head>
<body>
프롬프트 입력 : <span id="promptAnswer"></span>
<script>
var name = prompt("이름을 입력해주세요.","홍길동");
document.getElementById("promptAnswer").textContent = name;
</script>
</body>
</html>
document.write() : 브라우저 화면에서 결과값을 확인하는 용도로 사용. 웹 문서에서 ()안의 내용을 표시하는 명령문. document.write()의 괄호 안에는 실제 웹 브라우저 화면에 표시할 내용이나 어떤 결과값이 저장된 변수를 넣을 수 있음
<!DOCTYPE html>
<html lang="ko">
<head>
<meta charset="UTF-8">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<title>간단한입출력 document.write()</title>
</head>
<body>
브라우저 화면에서 결과값을 확인하는 용도로 사용<br>
웹 문서에서 ()안의 내용을 표시하는 명령문<br>
document.write()의 괄호 안에는 실제 웹 브라우저 화면에 표시할 내용이나 어떤 결과값이 저장된 변수를 넣을 수 있음<br>
document.write("")결과<br>
<script>
document.write("<h1>안녕하세요.</h1>");
</script>
</body>
</html>
예시
<!DOCTYPE html>
<html lang="ko">
<head>
<meta charset="UTF-8">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<title>실습</title>
</head>
<body>
<script>
var name = prompt("이름을 입력해주세요.");
document.write("<h1>안녕하세요</h1>");
document.write(`<b>`+name+`</b>`+ "님 안녕하세요");
</script>
</body>
</html>
console.log() : 괄호 안의 내용을 콘솔 창에 표시. 콘솔 창은 웹 브라우저의 개발자 도구 창에 포함되어 있는 공간
<!DOCTYPE html>
<html lang="ko">
<head>
<meta charset="UTF-8">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<title>간단한입출력 console.log()</title>
</head>
<body>
<script>
var name = prompt("이름을 입력해주세요.");
console.log("입력한 이름은 " + name + "입니다.");
</script>
</body>
</html>※ VS Code에서 Git을 사용하여 로컬 프로젝트를 GitHub(Git 리포지토리)에 올리기
github에 새 리포지토리를 생성한 후
- 터미널 열기(Ctrl + `)
- Git 초기화 : git init
- 원격 리포지토리 추가 git remote add origin github주소
- 변경 사항 스테이지 : git add .
- 커밋 : git commit -m "커밋사항"
- 로컬 리포지토리에서 GitHub 리포지토리로 푸시 : git push -u origin master
728x90