쌍용교육센터에서 공부한 내용을 정리하며 기록하는 글이고 주관적인 생각이 들어갈 수 있습니다.
잘못된 내용이나 피드백 및 생각 공유는 언제든 환영입니다.
댓글로 남겨주시면 확인 후 수정하겠습니다.
내용에 대한 소스 코드는 https://github.com/2jaehoon/html에 올려두었습니다.
JavaScript
- brendan Eich가 Mocha라는 이름으로 C언어로 개발한 언어
( Mocha -> LiveScript -> JavaScript( 1996년 ) )
- ECMAScript의 표준사양을 가장 잘 구현한 언어.
- 대부분의 웹 브라우저는 ES5를 지원한다.
- 최신 버전은 ES6고, 트랜스파일러(transpiler)를 사용하여 소스변환을 수행하고
웹 브라우저에서 실행한다. ( 웹 브라우저 간의 호환성 )
- 사용법: inline, embed, external file 3가지 방식으로 사용할 수 있다.
* Vanilla JavaScript( Vanilla JS )
- 플러그 인이나 라이브러리를 사용하지 않는 순수 자바스크립트
( 아무것도 설치하지 않아도 동작가능 )
* inline
- HTML tag 에 직접 정의하는 방식
- 적용 우선순위가 가장 높다.
- 코드의 중복성이 높다.
- 복잡한 코드를 작성하기 어렵다.
- 구조와 동작의 결합된다.
<태그명 onXxx = "자바스크립트 코드">
embed
- HTML에 <script>태그를 사용하여 정의하는 방식
- 코드의 중복성을 낮출 수 있다.
- HTML태그와 JS code를 분리할 수 있다.
<!DOCTYPE html>
<html>
<head>
<title></title>
<!--
HTML구조와 Script코드를 분리
Error가 발생하면 에러메시지가 사용자에게 제공되지않고
body의 내용이 그대로 보여진다
-->
<script type="text/javascript">
자바스크립트 코드
</script>
</head>
<body>
<!--
HTML구조와 Script코드가 합쳐진다.
Error가 발생하면 에러메시지가 사용자에게 제공되고 사용자가
에러메시지를 모두확인 후 body의 내용이 보여진다.
-->
<script type="text/javascript">
자바스크립트 코드
</script>
</body>
</html>
external file 방식
- 확장자가 .js인 파일을 만들고 필요한 HTML에서 사용하는 방식
- 코드의 중복성이 가장 낮은 방식
- 자바스크립트 라이브러리가 개발되고 배포되는 방식
- js 파일의 인코딩과 HTML파일의 인코딩이 같을 것( 같지 않으면 한글이 깨진다. )
- .js파일을 생성한다.
- 필요한 HTML에서 연결하여 사용
<script type="text/javascript" src="연결할 JS URL">
<!--
외부파일을 연결한 <script>태그 사이에는
절대로 자바스크립트 코드를 정의하지 않는다.
-->
</script>
JavaScript 출력
// 경고창 출력( 코드의 실행을 멈추고 출력을 수행 – Debug용 )
alert( 값 );
// HTML Body 출력
window.document.write( 값 );
// 개발자 도구( F12 )의 console 출력( 제일 많이 씀 )
console.log( 값 );
주석( comment )
- 코드의 실행을 막거나, 코드의 부연설명을 기술할 때
- // 한 줄 주석
- /* 여러 줄 주석 */
코딩 주의사항
- 대, 소문자를 구분한다.
- 괄호는 짝으로 정의. (), {}, []
- ;은 생략할 수 있다.
- 자바스크립트 오류시 페이지에서 f12( 인스펙터 )누르고 f5 눌러 소스 확인
변수( Variable )
- 프로그램에서 필요한 값을 일시적으로 저장하고 사용하기 위해 사용
- 가독성 향상
- 변수를 선언할 때 데이터 형을 직접 지정할 수 없다.
데이터 형은 변수에 값이 할당 될 때 동적으로 결정된다.( 동적할당 )
- hoisting : 아래 라인에서 선언된 변수를 윗 라인 에서 사용할 수 있다.
- 지역변수와 전역변수를 제공한다.
// 지역 변수
// 1. 선언 – 데이터형을 설정하지 않고 var을 사용
var 변수명;
// 2. 값 할당
변수명 = 값;
// 숫자 (number): 9, 9.2
// 문자열(string): “문자들”, ‘문자들’
// 불린 : (boolean) : true, false
// 데이터 형명 얻기: typeof( 값 );
// 3. 값 사용 - 출력, 재할당, 연산
document.write( 변수명 );
// 전역변수
// 1. 선언 및 값 할당 - var을 쓰지 않는다.
변수명=값;
// 2.값 사용
console.log( 변수명 );
ES6에서 지원하는 변수 타입
- const : 상수로 만들 때 사용
const 상수명 = 값; // 값 할당은 선언할 때만 가능
- let : hoisting 을 막을 때 ( 존재하지 않는 변수를 사용하게 되는 상황을 막기 위해서 )
같은 이름의 변수의 중복 선언을 막을 때
let 변수명 = 값;
Operator( Java 연산과 같음 )
- 연산에 사용되는 예약된 부호들.
- 단항 산술 쉬프트 관계 논리 삼항 대입 콤마( 우선 순위 )
* 단항
- ~, !, +, -, ++, --
* 산술연산자
- +, -, *, /, %
* 쉬프트 연산자( 비트밀기 연산 )
- <<, >>, >>>
* 관계연산자
- >, <, >=, <=, ==, ===, != , !==
- 데이터형을 개발자가 선택하지 못하는 언어는 값의 비교가 느슨하다.
// === ( 값과 데이터형이 둘 중 하나라도 다르면 true 그렇지 않으면 false )
var num=10; // number
var num2="10";//string
num == num2 => true ( 데이터 형이 달라도 값이 같다면 true)
num === num2 => false ( 값은 같으나 데이터 형이 다르기 때문에 false)
* 논리연산자
- 일반논리 : &&, ||
- 비트논리 논리 : &, |, ^
* 삼항( 조건 ) 연산자
- ? :
* 대입연산자
- =, +=, -=, *=, /=, %=
- <<=, >>=, >>>=
- &=, |=, ^=
prompt
- web browser에서 제공하는 입력 값을 받을 수 있는 객체
- 입력 값은 문자열로 반환된다.
- 입력 폼을 만들지 않고 값을 동적으로 얻을 때 사용
var 변수명 = prompt("메시지", "기본 값");
제어문
- 프로그램의 순차적인 흐름을 변경하기 위한 문장들
* 조건문
- if, switch~case : 모든 값을 비교할 수 있다.
- if – 범위 비교 가능.
- 단일 if : 조건에 맞을 경우에만 코드를 실행해야 할 때.
if( 조건식 ){
조건에 맞을 때 수행될 문장들
}
- if~else : 둘 중 하나의 코드가 반드시 실행되어야 할 때
if( 조건식 ){
조건에 맞을 때 수행될 문장들
}else{
조건에 맞지 않을 때 수행될 문장들
}
- else ~if ( 다중 if ) : 연관된 여러 개의 조건을 비교할 때
if(조건식){
조건에 맞을 때 수행될 문장들
}else if( 조건식 ){
조건에 맞을 때 수행될 문장들
.
.
}else{
모든 조건에 맞지 않을 때 수행될 문장들..
}
- switch~case : 일치하는 모든 값( string, number, boolean )을 비교할 때.
switch( 변수명 ){
case 상수 : 변수값이 상수와 같을 때 수행문장; break;
case 상수 : 변수값이 상수와 같을 때 수행문장; break;
.
default: 비교될 상수가 없을 때 수행문장;
}
* 반복문
- 조건에 맞을 때까지 코드를 반복 실행해야 할 때.
- for, while, do~while
- for : 시작과 끝을 알 때 사용
for( 초기값 ; 조건식; 증.감소식 ){
반복수행할 문장들
}
- while : 최소 0번 실행에서 최대 조건까지 실행할 때
초기값;
while( 조건식 ){
반복수행 문장들
증.감소식;
}'성장 일기 > 쌍용교육센터' 카테고리의 다른 글
| 0222/JavaScript 함수 (0) | 2023.02.22 |
|---|---|
| 0221/JavaScript (0) | 2023.02.22 |
| 0217/CSS (0) | 2023.02.20 |
| 0216/CSS (0) | 2023.02.20 |
| 0215/CSS, selected (0) | 2023.02.15 |
