Javascript begin
Javascript 문법에 대해 간단히 요약 하겠습니다. 기본 사항은 많이 스킵 하고, 개념과 간단한 예제로만 구성하였습니다.
기본 구성을 알고 있다는 전제하에 리마인드 차원에서 작성하였습니다.
표준 웹 기술 레이어의 유기적인 구성
Web은 기본적으로 아래의 3가지 요소로 구성되어 있습니다.
- HTML은 웹 컨텐츠의 구조와 의미를 문단,제목,이미지,동영상등으로 정의 부여하는 마크업 언어
- CSS은 배경색, 폰트 등의 레이아웃 지정하는 스타일 규칙 언어
- Javascript은 동적으로 컨테르를 바꾸고, 멀티미디어를 다루고, 움직이는 이미지 그리는 스크립트 언어
Broswer API
우리가 사용하는 브라우저에서 제공되는 기본 API입니다. HTML5 이후 많이 지원해주고 있습니다.
- DOMAPI는 동적으로 페이지의 스타일을 정하는 등 HTML과 CSS를 알맞게 정의하는 역활을 합니다.
- GeoloactionAPI는 지리적 정보를 검색
- Canvas와 WebGLAPI는 2D와 3D 그래픽
3-rd API
브라우저 api를 제외한 다른 외부 API를 이용하는 모든 API이며, 실제 개발 시 Back-end 개발자들이 API를 만들어 주면 많이 Front-end 개발자는 해당 API를 연동하게 됩니다.
동적 코드 VS 정적 코드
"동적"은 클라이언트 측 서버측 모두를 가리킵니다. 각기 다른 정보가 보이고, 컨텐츠를 웹페이지나 앱 상에 계속적으로 노출 시키는 역할을 합니다. 서버측은 데이터베이스로 부터 데이터를 던지는 등 동적으로 새로운 컨텐츠를 만듭니다. 클라이언트측 자바스크립트는 새로운 HTML 표를 만들어 서버에서 요청한 데이터를 뿌려 사용자에게 보이는 등 동적으로 브라우저 안에서 작동됩니다. 동적으로 바뀌지 않은 페이지를 "정적"페이지
스크립트의 로딩 방법
일반적으로 HTML 요소를 로딩하는 중 <script> 태그를 만나면, javscript의 내용이 모두 다운로드될 때까지 대기하는데, <async> 요소를 사용하면, 멈추지 않고 다운로드하도록 유지시켜줍니다.
async & defer
async 스크립트는 페이지 렌더링의 중단 없이 스크립트를 다운로드하고, 다운로드가 끝나면 실행시킵니다. 외부 스크립트가 실행 순서를 보장하지 않음. 단지 나머지 스크립트가 비동기식으로 다운로드되어 중단되지 않음만을 보장합니다. defer 스크립트를 순서대로 다운로드 후 다운로드된 순서대로 실행을 합니다.
- 스크립트들이 의존하지 않고 독립적으로 파싱되도 상관 없다면, async를 사용합니다
- 스크립트들이 파싱될때까지 기다려야 한다면 defer를 사용합니다
프로그래머적으로 생각하기 (예제- 숫자 맞추기)
실력은 다작 多코딩이며, 프로그래밍 문법에 대한 경험과 노력, 그리고 창의성을 비롯한 노력의 조합이 필요합니다.
코드를 많이 작성할수록 얻는 것이 더 많아집니다. 아래는 간단한 예제입니다.
//1. 변수 선언
var random = Math.floor(Math.random() * 100) + 1;
var guesses = document.querySelector('.guesses');
var lastResult = document.querySelector('.lastResult');
var lowOrHi = document.querySelector('.lowOrHi');
var guessSubmit = document.querySelector('.guessSubmit');
var guessField = document.querySelector('.guessField');
var guessCount = 1;
var resetButton;
//2. 함수 선언
function checkGuess(){
// alert("placeholoder")
var userGuess = Number(guessField.nodeValue);
if(guessCount === 1) {
}
guesses.textContent += userGuess +' ';
// 이하 생략
}
/*3. 이벤트 등록 혹 호출
이벤트 핸들러 : 이벤트가 발생 했을 떄 실행되는 코드 블럭
이벤트 리스너 : 이벤트가 발생하여 발생된 이벤트를 처리하는 것
*/
guessSubmit.addEventListener('click', checkGuess)
Enter a guess 에러의 종류
Web상에서 에러의 종류는 크게 2가지로 나뉩니다.
- 구문에러(syntax error)
- 논리에러(Logic) error)
변수 이것만 알아둡시다!
변수 이름에 대한 규칙
- 변수 이름의 시작부분에 밑줄을 사용하지 마시오
- 변수 이름은 시작부분에 숫자 사용은 금지
- 명명범은 소문자로 시작하고 그 다음의 시작은 대문자로 시작
- 변수는 대소문자를 구분 합니다.
- 예약어는 사용하지 않습니다.
지정되지 않은 타입
javascript는 상당히 유연한 변수 체계를 가지고 있으며, loosely type language 즉, 다른 언어에서는 데이터 유형을 하는데 javascript는 지정할 필요가 없습니다.
문자열 찾기 Remind
. indexOf("해당하는 단어, 문자열") 문자열 내부의 하위 문자열을 찾을 수 있으면 해당 문자열을 추출합니다 찾아진 문자열의 index number를 반환을 합니다.
, slice("start number", "end number") 해당 문자열 시작과 끝 부분을 통해서 찾으려는 문자열을 추출을 한다.
문자열 변경 Remind
문자열 메서드 toLowerCase와 toUppercase()은 문자열을 가져와 대/소문자로 변경합니다.
배열 Remind
배열 method
문자열을 배열로, 배열을 문자열로 변환하기
split() method를 사용할 수 있습니다. split() 메서드는 사용자가 원하는 매개변수로 문자열을 분리하여, 배열을 표현해줍니다.
반대로 join() 메서드를 쓰면 배열을 다시 문자열로 만들 수 있습니다. 아니면. toString() 사용하는 것입니다.
배열 추가, 제거는 push와 pop를 사용합니다.
unshift()와 shift()는 같은 추가 제거이지만, 배열의 맨 끝이 아닌 첫 번째 Item을 추가 제거합니다
순환
여러 표현식이 존재합니다. for, while, do-while 어느 언어든 순환의 정석으로 쓰며, 제일 많이 쓰는 것은 for입니다. for 형식
- initializer - 일반적으로 숫자로 설정된 변수이며, counter variable이라고 합니다
- exit-condition - loop가 어디서 멈출지 정의 합니다. 종료조건이 충적되었는지 확인하는 테스트를 특징으로 하는 표현식 입니다
- final-expression - counter varibale를 증가 감소 하여 종료 조건값에 충족 시키도록 합니다.
break; 는 해당 조건이 맞으면 loop 종료, continue는 계속
while 그리고 do... while
우리는 for를 모든 것 중에 기억하기 쉬움으로 추천을 하며, 상황에 맞게 맞게 사용한다. 기능은 동일합니다
함수
익명 함수
이벤트 핸들러에서 주로 사용됩니다. 아래의 예시는 함수 내의 코드가 버튼을 클릭할때 따라 동작하는 걸 보여줍니다.
var myButton = document.querySelector('button');
//es5
myButton.onClick = function(){
alert();
}
//es6
myButton.onClick =() =>{
alert();
}
익명 함수는 가급적 자제하며, 익명 함수는 일반적으로 이벤트 핸들러 작동시킬 때 많이 사용합니다.
Scope
함수를 생성하게 되면 변수 및 함수 내 정의된 코드들은 Scope안에 자리 잡게 됩니다. 함수 바깥에 선언된 가장 상위 레벨의 스코프를 전역 스코프 < global scope >라고 부릅니다 Javascript는 안정성과 구조 때문에 이 기능을 제공합니다. 어떤 때는 변수 어떤 코드든 접근 가능한 변수가 되는걸 원치 않을 수 있습니다.
함수 예제
가장 기본이 되는 함수 형식 예제를 만들어 보겠습니다
const html = document.querySelector('html');
const pannel = document.createElement('div');
pannel.setAttribute('class', 'msgBox');
html.appendChild(pannel);
const msg = document.createElement('p');
msg.textContent = "this is a message box";
pannel.appendChild(msg);
const closeBtn = document.createElement('button');
closeBtn.textContent ='x';
pannel.appendChild(closeBtn);
closeBtn.onclick = function(){ //onClick 이벤트 핸들러
pannel.parentNode.removeChild(pannel); // DOM API 사용하여 삭제
}
Event
event가 많이 사용되는 목록은 아래와 같습니다.(영어 원본)
- the user selects a certain element or hovers the cursor over a certain element
- the user chooes a key on the keyboard
- the user resizes or close the broswer window
- a web page finishes loading
- a form is submitted.
- vedio played, paused, or finished
- error occurs
대부분 프로그램 언어는 다양한 이벤트 모델을 가지고 있습니다. webpage에 사용하는 javascript는 다른 환경의 javascript와는 차이가 있습니다. node.js 같은 경우는 서버사이드 언어로 listeners 위주로 구성이 됩니다. 또한, javascript to build cross-browser add-one - useing a technology called WebExtensions.
Event Handler Properties
여러 이벤트 핸들러가 존재합니다. 아래는 일부입니다.
- onClick : 버튼 동작시 수행되는 이벤트 핸들러
- onFoucus, onblur : 버튼에 focusing이 될때 색깔 변환 핸들러
- window.onkeypress, window.onkeydown, ... : 입력 키보드 버튼에 대한 이벤트 핸들러
- btn.onmouseover, btn.onmousout, ... : 입력 마우스 동작에 대한 이벤트 핸들러
addEventListener()와 removeEventListener()
//두개의 함수를 정의 할수가 없다.
var myElement = document.querySelector('btn');
myElement.onClick = functionA;
myElement.onClick = functionB;
// handelr를 이용하여 등록 합니다.
myElement.addEventListener("click", functionA);
myElement.addEventListener("click", functionB);
// 두번째는 가능 하다.
Event objects
event object is automatically passed to event handler to provide extra features and information.
e.target -button itself. the target property of the event object is always a reference to the element the event occureed upon.
Bubbling and capturing explained
In the capturing phase:
- the browser cheks to see if the element's outer-most ancestor has an onclick event handler registered on it for the capturing phase, and runs it if so.
- then it moves on to the next element inside html and does the same thing, then the next one, and so until reaches the element that was actually selected
In the bubbling phase:
- the brower checks to see if the element selected has an onclick evnet handler registerd on it for th bubling phasem ad runs it if so.