첫 웹사이트 개설
함수(function)
- 함수(function)은 수납상자와 같다.
- 코드가 많아졌을 때 그 코드를 잘 정리 정돈하기 위한 아주 간단하면서도 강력한 도구이며, 이보다 더 큰 도구는 객체이다.
- 유지보수에 좋다.
<script>
function two(){
document.write('<li>2-1</li>');
document.write('<li>2-2</li>');
}
document.write('<li>1</li>');
two();
document.write('<li>3</li>');
two();
</script>매개변수(parameter)와 인자(argument)
- 함수는 입력과 출력으로 이루어져있다.
- 입력: 매개변수 또는 인자
- 출력: return
<script>
function onePlusOne(){
document.write(1+1+'<br>');
}
onePlusOne();
function sum(left, right){
document.write(left+right+'<br>');
}
sum(2,3);
sum(3,4);
</script>- 매개변수(parameter): left, right
- 인자(argument): 2, 3, 4
*키워드 return
표현식(expression)
Ex.
2 → 1+1
true → 1===1
<script>
function sum2(left, right){
return left+right;
}
document.write(sum2(2,3)+'<br>')
document.write('<div style="color:red">'+sum2(2,3)+'</div>')
document.write('<div style="font-size:3rem">'+sum2(2,3)+'</div>')
</script>객체(Object)
- 정리 정돈의 수단으로 활용도가 높음
- 연관된 함수와 변수를 같은 이름으로 그루핑해서 잘 정리 정돈하기 위한 도구
- 순서 없이 정보를 저장하는 것
(배열과 다른 점)
객체의 문법
- 객체 리터럴(object literal):
객체를 만들 때 사용하는 기호 - {중괄호}를 사용- 객체 접근 연산자(object access operator): 점(.)
코드에 공백이 있을 때는 문법적 오류 발생.
점(.)을 사용하지 않고 대괄호를 써서 문자열 형태로 기입함
<script>
var coworkers = {
"programmer":"A",
"designer":"B"
};
document.write("programmer : "+coworkers.programmer+"<br>");
document.write("designer : "+coworkers.designer+"<br>");
coworkers.bookeeper = "C";
document. write("bookeeper : "+coworkers.bookeeper+"<br>");
coworkers["data scientist"] = "D";
document. write("data scientist : "+coworkers["data scientist"]+"<br>");
</script>객체와 반복문
for ...in:
- 객체에 있는 key 값을 가져오는 반복문
- key: 가져오고자 하는 정보
(배열에서는 index라는 표현을 씀)- for: key를 꺼내 코드를 실행하는 명령어
<script>
for(var Key in coworkers){
document.write(coworkers[key]+'<br>');
}
</script>객체 프로퍼티와 메서드
- 메서드: 객체에 소속된 함수
- 프로퍼티: 객체에 소속된 변수
- 객체에서는 각 프로퍼티를 구분하기 위해 콤마(,)를 사용
<script>
coworkers.showAll = function(){
for(var key in this) {
document.write(key+' : '+this[key]+"<br>")
}
}
coworkers.showAll();
</script>메서드 추가: showAll
this: 객체 이름이 변경될 것을 고려하여 사용되는 약속된 기호.
파일 분리하기
- 공통된 코드가 있다면 js 파일로 별도 분리하여 사용하는 것이 좋음
- 모든 코드를 복사할 필요 없이 간단하게 .js 파일을 각 웹페이지에 포함시키기만하면 된다.
- 즉, 작성한 코드의 재사용이 가능하다.
- 가독성을 높일 수 있으며, 코드가 명확해진다.
라이브러리와 프레임워크
- 소프트웨어를 만드는 것의 기본은 이미 잘 만들어져 있는 부품을 활용하여 빠르게 조립하는 것을 통해 원하는 것을 도출하는 것.
- 라이브러리:
정리 정돈 되어있는 곳.
재사용하기 쉽게 되어있음- 프레임워크
어떤 것을 만들어 낼 때, 공통적으로 필요한 부분(제작할 것의 기본이 되는 공통적인 성질?).
반제품과 같은 것
라이브러리 소개
jQuery:
안정적이고 유명한 자바스크립트 라이브러리.
jQuery 사용 시 반복문을 사용하지 않아도 된다는 장점.
방법1.
jQuery 라이브러리 다운로드 후 내려 받은 파일을 프로젝트 디렉터리로 옮김
방법1-2.
CDN(Content Delivery Network) 검색 :
라이브러리들이 CDN을 통해 자신들의 서버에 파일을 보관해 놓고, 사용자는 < script > 태그의 scr 속성을 통해 가져가는 방식을 취함
방법2.
활용을 원하는 js 파일에 코드 복붙 (3x snippet)
방법3.
$(''): 웹 페이지에 있는 모든 괄호 안의 태그를 jQuery로 제어하겠다는 뜻.
css() 사용
*참고: jQuery css 등으로 검색
$('a').css('color', color);방법4.
CDN을 삽입한 코드를 필요한 웹 페이지에 붙여 넣음.
UI와 API
UI(user interface): 사용자가 시스템을 제어하기 위해 사용하는 조작 장치
API(application programming interface): 애플리케이션을 만들기 위해 프로그래밍할 때 사용하는 조작장치
유용한 팁
주석
ctrl + / : 주석 생성(해당 코드 실행되지 않고 무시됨)
유용한 추천 검색어
document 객체
어떤 웹 페이지의 태그를 삭제하고 싶거나 태그의 자식 태그를 추가하고 싶은 경우 활용.
안될경우 DOM 객체 활용.
window 객체
웹 페이지가 아닌 웹 브라우저 자체를 제어해야하는 경우 활용.
현재 열려있는 웹 페이지의 주소가 무엇인지 알아내거나 새창을 열어야할 때, 웹브라우저의 화면 크기를 알아야하는 등의 경우 window 객체에 속한 프로퍼티나 메서드 활용
Ajax
현대적인 웹 앱을 만드는데 필수적.
웹 페이지를 리로드하지 않고도 정보를 변경하고 싶을 때 활용.
cookie
웹 페이지가 리로드돼도 현재 상태를 유지하고 싶은 경우 활용
사용자를 위한 개인화된 서비스 제공 가능
offline web application
인터넷이 끊겨도 동작하는 웹 페이지를 만들고 싶을 때
webRTC
화상 통신 웹 앱을 만들 경우
speech API
사용자의 음성을 인식하고 음성으로 정보를 전달하고 싶을 때
WebGL
3차원 그래픽으로 게임을 만들고 싶을 때
WebVR
가상현실과 관련한 제작을 한다면
