안녕하세요 JJU_DEVELOPER입니다.
이번시간에는 자바스크립트에 대한 기초 설명입니다~!
기초를 탄탄하게 배워봅시다~😊
목차
13-1 자바스크립트로 무엇을 할까요~?
13-2 웹 브라우저와 자바스크립트를 연결하는 방법은?
13-3 자바스크립트 용어와 기본 입출력 방법
13-4 자바스크립트 스타일 가이드
13-1 자바스크립트로 무엇을 할까요~?
자바스크립트는 프런트엔드의 필수 개발언어입니다.
자바스크립트는 정적인 HTML 콘텐츠를 프로그램 구현을 통해 동적으로 변경하거나
사용자와의 상호작용을 담당하게 됩니다.
자바스크립트는 C언어, 자바와 같은 일반 프로그램언어와 비슷한 구조를 가지고 있습니다.
따라서 단순히 콘텐츠 제작만을 생각하는 HTML이나 CSS와 달리 어려운 부분이라 할 수 있습니다.
자바스크립트는 객체(Object) 기반의 스크립트 언어로 기본적으로는 웹 브라우저에서 해석되는 인터프리터 언어이며
Node.js와 같은 프레임워크를 사용하면 서버 프로그래밍에도 사용할 수 있습니다.
| 자바스크립트로 할 수 있는 일! |
| 1. 웹 요소를 제어합니다 |
| 2. 다양한 라이브러리를 사용할 수 있습니다 |
| 3. 웹 애플리케이션을 만듭니다. *웹 페이지는 단순 정적페이지이며, 우리가 최종적으로 만드는것은 웹 애플리케이션을 만드는 동적 페이지를 만드는 것 입니다. |
| 4. 서버를 구성하고 서버용 프로그램을 만들 수 있습니다 |
13-2 웹 브라우저와 자바스크립트를 연결하는 방법은?
| 웹과 연결하는 방법 2가지 | 설명 |
| 웹 문서 안에 자바스크립트 작성하기 | 특징: • < script> 태그와 </script> 태그 사이에 자바스크립트 소스 작성 • 웹 문서 안의 어디든 위치할 수 있지만, 주로 </body> 태그 앞에 작성 • 자바스크립트 소스가 있는 위치에서 실행됨. 단점:
|
| 외부 스크립트 파일 연결해서 작성하기 | 특징: • 자바스크립트 소스를 별도의 파일(*.js)로 저장한 후 웹 문서에 연결
|
13-3 자바스크립트 용어와 기본 입출력 방법
| 자바스크립트 기본 입출력 방법 4가지 | 설명 |
| 1. HTML 문서에 출력 | * 5+6 의 연산결과를 웹브라우저에 출력 합니다. <script> document.write(5 + 6); </script> <body> <h2>Hello World</h2> </body> |
| 2. HTML 문서의 특정부분에 출력 | * 기존 HTML 소스를 유지하고 부분적으로 변경 됩니다. <script> document.getElementById("result").innerHTML = 5 + 6; </script> <body> <h2>Hello World</h2> <div id="result"> </div> </body> |
| 3. Alert 창을 이용한 출력 | * 웹브라우저에서 오픈되는 조그만 경고창(alert)을 이용한 출력 입니다. alert()을 사용합니다. 보통 프로그램에서 에러, 경고, 사용자 입력을 위해 많이 사용 합니다. <script> alert(5 + 6); </script>  <body>
<script>
alert("안녕하세요?");
</script>
</body>
 <body>
<script>
//alert("안녕하세요?");
confirm("정말 배경 이미지를 바꾸겠습니까???!!!!!??");
</script>
</body>
사용자에게 컨펌 받는 팝업입니다. |
| 4. 브라우저 콘솔창을 이용한 출력 | * 보통 프로그램언어의 출력문과 가장 비슷한 경우 입니다. console.log()를 사용하며 결과 확인은 웹브라우저의 콘솔창에 나타나게 됩니다. <script> console.log(5 + 6); </script> |
13-4 자바스크립트 스타일 가이드
자바스크립트 소스를 작성할 때 지켜야 할 기본 규칙에 대해 말씀드리겠습니다.
아래 5가지 기본 규칙은 꼭 지키셔야 합니다.
| 자바스크립트 소스를 작성 규칙 | 설명 |
| 1. 코드를 보기 좋게 들여쓴다 | • ‘Tab’ 키나 ‘스페이스바’를 눌러 2칸이나 4칸 들여씀 • 최근에는 공백 2칸 들여쓰기를 많이 사용함 |
| 2. 세미콜론으로 문장을 구분한다 | • 세미콜론을 붙일 것을 권장함 • 소스는 한 줄에 한 문장만 작성하는 것이 좋다 |
| 3. 공백을 넣어 읽기 쉽게 작성한다 | • 식별자나 연산자, 값 사이에 공백을 넣어 읽기 쉽게 작성한다 |
| 4. 코드를 설명하는 주석을 작성한다 | • 한 줄 주석 : 슬래시 2개(//) 바로 뒤에 작성 • 여러 줄 주석 : 여는 기호(/*)를 맨 앞에, 닫는 기호(*/)를 맨 뒤 에 넣고 그 사이에 주석 내용을 작성 • 주석 사이에 또다른 주석을 넣을 수 없음 |
| 5. 식별자는 정해진 규칙을 지켜 작성한다 | • 첫 글자는 반드시 영문자나 언더스코어(_), 달러 기호($)로 시작해야 한다 • 두 단어 이상이 하나의 식별자를 만들 때 단어 사이에 공백을 둘 수 없다 • 예약어는 식별자로 사용할 수 없다 |
예시 1) ->HTML 내부에서 자바 스크립트 스타일 변경하는 코드
일반 실행 시
->
핑크색 텍스트 자바스크립트를 클릭 시
->
사용자의 click이라는 액션을 취하게 되면 변경되는 스타일입니다.
코드를 보겠습니다.
<!DOCTYPE html>
<html lang="ko">
<head>
<meta charset="UTF-8">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<title>글자색 바꾸기</title>
<style>
body { text-align:center; }
#heading { color:rgba(255, 0, 191, 0.568); }
#text {
color:gray;
font-size:15px;
}
</style>
</head>
<body>
<h1 id="heading">자바스크립트</h1>
<p id="text">위 텍스트를 클릭해 보세요</p>
<p id="text">자바스크립트를 클릭시 색이 변경됩니다~!</p>
<script>
let heading = document.querySelector('#heading');
heading.onclick = function(){
heading.style.color ="red";
}
</script>
</body>
</html>이 script를 넣는 위치가 중요합니다.
인터프리터 랭귀지는 위에서 아래로 내려오면서 실행을 하게 되는데,
HTML은 한 라인을 보면서 해석하고 실행하는 것입니다.
이때, 자바 스크립트를 body가 아닌, head에 넣을 경우, 정의해놓은 heading을 찾을 수없기 때문에
없는 것을 클릭할 수가 없기 때문에 적용이 되지 않습니다~!!!!
그렇기 때문에 문서가 다 나온 뒤에, function을 만들어 주었습니다.
해석)
1. 변수의 이름은 heading으로 지정
2. 그 변수 안에 doc 객체를 생성하기, 선택자는 heading으로 지정
3. 만들어준 변수 heading에. onclick이라는 이벤트를 만들고 이름이 없는
함수를 만들어 줍니다.
fuction의 기능은 지정한 heading을 클릭했을 때, heading의 스타일 컬러가 red가 됩니다!!!!
이렇게 문서 내부에서 사용하는 방법을 보았습니다.
예시 2) ->HTML 외부에서 자바 스크립트 스타일 변경하는 코드
1. 외부로 js라는 파일을 만들고 자바 스크립트 파일을 따로 빼서 만들어 줍니다.
2. 기존에 html에는 태그로 불러옵니다.
<!DOCTYPE html>
<html lang="ko">
<head>
<meta charset="UTF-8">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<title>글자색 바꾸기</title>
<style>
body { text-align:center; }
#heading { color:rgba(255, 0, 191, 0.568); }
#text {
color:gray;
font-size:15px;
}
</style>
</head>
<body>
<h1 id="heading">자바스크립트</h1>
<p id="text">위 텍스트를 클릭해 보세요</p>
<p id="text">자바스크립트를 클릭시 색이 변경됩니다~!</p>
<script src="js/change-color.js"></script>
</body>
</html>바디 안에 위의 js 링크를 넣어주면 동일하게 작동을 합니다.
프롬프트 창에서 입력받기 예시 1)
• 텍스트 필드가 있는 창 표시
• 사용자 입력 값을 가져와 프로그램에서 사용
아래에 alert(reply)를 한번더 실행하여, 내가 넣어준 이름의 값을 한번더 alert으로 출력하게 하였습니다.
프롬프트 창에서 입력받기 예시 2)
바디에 해당 자바스크립트를 넣으면 어떻게 변할까요?
콘솔 창에서 입력받기 예시 1)
문서가 아닌, 콘솔에 출력되는 것 입니다.
똑같이 팝업 떠서 이름을 ㅇㅇ이라고 입력했는데,
문서에서는 보이지 않으며, f12누른 콘솔에서만 확인이 가능합니다~!
그럼 다음시간에는 자바 스크립트의 기본 문법에 대해 설명드리겠습니다~!!!
수고하셨습니다.
'주니어 기초 코딩공부 > Javascript & jQuery' 카테고리의 다른 글
| 제이쿼리(jQuery)란? + 선택자 상세 설명 (1) | 2023.01.12 |
|---|---|
| 자바스크립트JavaScript 문서 객체 모델(DOM) 개념 및 DOM의 이벤트 처리 및 삭제 방법 (1) | 2023.01.11 |
| 자바스크립트JavaScript 내장 객체, 브라우저와 관련된 객체 알아보기 (1) | 2023.01.11 |
| 자바스크립트JavaScript 함수표현식과 이벤트 처리기 개념 타파!! (3) | 2023.01.10 |
| 자바스크립트(JavaScript) 필수 문법 설명(자바스크립트 구구단출력) (0) | 2023.01.09 |