javascript란?
- 프로그래밍 언어 중 하나로 동적으로 콘텐츠 변환
- HTML상에서만
<script></script>이용해 사용 가능 - 정확한 문법이 필요
- 확장자는 .js
- java 언어와는 관계 없음
- 대소문자를 구분 - 변수나 함수의 이름 정확히 구분해서 사용해야 함
HTML - 웹페이지의 기본 구조 설계
CSS - 디자인
javascript - 웹페이지의 동작
주석
- /*을 사용해 여러 줄을 묶기
/* 아무 말 아무 말 아무 말 */
- //을 사용해 한 줄만 묶기
//아무 말
변수
- var, let, const를 사용하여 변수를 선언
var name = 'pyg'; let name = 'pyg'; const from = 'korean';
- 변수 사용 방법
ex) 이름들을 한 번에 바꾸고 싶을 때var name = 'pyg' alert("The poll from data analytics firm YouGov ranked New Jersey No. "+name+"48 out of 50, above only Mississippi and Alabama. “New Jersey is often "+name+" the butt of jokes, including for its occasional odor or for being the birthplace of "+name+" ‘The Jersey Shore’ franchise,” the researchers explained.")-> var name = ' ';
이것만 바꾸면 본문 안에 있는 모든 name에 적용 가능
리팩토링
- 코드의 효율성
- 가독성을 높임
- 유지, 보수 편리
- this 키워드 사용
- 변수 사용 - 중복 코드 제거
이벤트
- 이벤트가 일어났을 때 설정해 놓은 JS가 실행되도록 하는 것
- on으로 시작하는 속성들 (onkeydown, onchange, onmouseover 등)
- ex) 웹브라우저에서 onclick이라는 속성을 만나면 그 뒤를 기억한 후
실제로 onclick이 되었을 경우 기억했던 것을 실행한다
<input type="button" value="night" onclick="alert('night!');">-> night 버튼을 만들고 그것을 클릭하면 night!라는 경고창을 띄워주세요
-여기서 이벤트는 onclick
-alert('night');를 기억했다가 onclick이 되는 순간 경고창이 나타남
함수 (Function)
- 리팩토링의 일종
- 입력과 출력을 이용
- 간소화 (정리)
- 함수 기본 문법
function 이름 () { document.write(" "); } 이름();
Parameter, Argument, Return
- Parameter (매개 변수) : 인자를 받아서 함수 안으로 매개해주는 변수 (입력)
- Argument (인자) : (입력)
- Return : (출력)
function sum(left,right) { document.write(left+right+'<br>'); } sum(2,3);-> Parameter : left, right
-> Argument : 2, 3
function sum(left,right) { return left+right; } document.write(sum(2,3)+'<br>');-> Return은 돌려준다는 뜻
-> 무엇을?
-> 2와 3을 더한 값을
- CSS 사용
function sum(left,right) { document.write('<div style="color:red">' + left + right + '</div>');} sum(2,3);-> 결과는 빨간색 23
-> String + Number + Number + String = Number도 String화 된다
function sum2(left,right) { return left+right; } document.write('<div style="color:red">' + sum2(2,3) + '</div>');
익명 함수
- 함수명을 따로 두지 않고 함수를 만드는 것
- 전역 변수를 만들지 않기 위해서 사용
기본
function 함수명 {
~~
}
함수명(); --> 기본적으로 함수명(전역 변수 만들고) 이렇게 호출
즉시 호출 함수 표현식
(function() {})();
**(function()**{ var MYAPP = {} MYAPP.calculator = { 'left' : null, ----> 아직 일부러 값을 넣지 않았다는 것을 명시 'right' : null } MYAPP.coordinate = { 'left' : null, 'right' : null } MYAPP.calculator.left = 10; MYAPP.calculator.right = 20; function sum(){ return MYAPP.calculator.left + MYAPP.calculator.right; } document.write(sum()); }**())**
객체(Object)
- 서로 연관된 함수와 변수를 묶고 이름을 붙인 것
- 순서 없이 정리정돈 하는 것
- 순서대로 정리정돈 하는 건 배열
- { } 사용
- 나열할 때는 쉼표 사용
- 객체 안에 나열되는 것은 키(Key)값이라고 부름
- 인덱스로 문자를 사용하고 싶을 경우
- 기본 문법
var name = { };
- 객체를 만드는 법
1. var grades = {'pyg' : 10, 'sjho' : 9, 'angdre' : 8}; --> pyg는 key, 10은 값(value) 2. var grades = {}; grades.['pyg'] = 10; grades.['sjho'] = 9; grades.['angdre'] = 8; 3. var grades = new Object(); grades['pyg']; grades['sjho']; grades['angdre'];
- 객체 불러오는 법
1. alert(grades['pyg']); 혹은 grades['pyg']; 2. alert(grades.pyg); 혹은 grades.pyg 3. alert(grades['ang'+'dre']; 혹은 grades['ang'+'dre'];
var names = { "programmer" : "sjho", "deginer" : "gue" }; document.write("programmer : "+names.programmer+"<br>"); document.write("deginer : "+names.deginer+"<br>");-> 웹페이지 상에 programmer : sjho (줄 바꿈) deginer : gue가 출력
-> Key값 : programmer, deginer
-> 객체에 소속된 변수를 프로퍼티(property)라고 부른다
- 이미 만들어진 객체에 추가 시
var names = { "programmer" : "sjho", "deginer" : "gue" }; document.write("programmer : "+names.programmer+"<br>"); document.write("deginer : "+names.deginer+"<br>"); names.bookkeeper = "jungho"; document.write("bookkeeper : "+names.bookkeeper+"<br>");
- 객체 추가 시 띄어쓰기를 넣고 싶을 때 (배열에 넣기)
var names = { "programmer" : "sjho", "deginer" : "gue" }; document.write("programmer : "+names.programmer+"<br>"); document.write("deginer : "+names.deginer+"<br>"); names["data scientist"]="youngkyu"; document.write("data scientitst : "+ names["data scientist"] + "<br>";
function 이름(매개변수) { document.write('')=매개변수; }이름이 중복되면 안 됨 -> 이름이 길어짐
- 이를 방지하기 위해 객체가 필요
- 이름 : BodySetColor( ); 혹은 BodySetBackgroundColor( ); --> 너무 길다
- 객체 사용 : Body.SetColor( ); 혹은 Body.SetBackgroundColor( );
->Body는<body>를 의미
->이름은 SetColor와 SetBackgroundColor로 줄여짐
->여기서 이름 즉 객체 뒤에 붙는 것은 메소드(Method)라고 부른다 (ex.SetColor)- EX) document.write(' '); ---> document는 객체, write는 메소드
- 객체 안에 함수 넣기
var grades = { 'list' : {'pyg' : 10. 'sjho' : 9, 'angdre' : 8}; --> 객체 안에 객체 넣기 가능 'show' : function() { alert('hello'); } } grades['show'](); ---> 함수 부르기 혹은 grades.show();
파일로 쪼개기
- 확장자 js로 javascript 파일을 따로 만들어 첨부 가능
- 원하는 파일에 javascript를 적용 가능
- 가독성, 유지, 보수 편리
<head> <script src="저장명.js"></script> </head>
라이브러리(library)와 프레임워크(framework)
- 라이브러리(library)
-내가 만들고자 하는 프로그램에 필요한 부품들이 되는 소프트웨어를 잘 정리정돈 해 놓은, 재사용하기 쉽도록 되어 있는 소프트웨어
ex) 마라탕 셀프 바, jQuery($ 함수 이용)
jQuery 사용 코드
- 프레임 워크(framework)
-내가 만들고자 하는 것이 무엇이냐에 따라서 게임이면 게임 틀, 채팅이면 채팅 틀 등 언제나 필요한 것으로 이루어진 것
ex) 밀키트
UI와 API
- UI (User Interface)
-사용자가 시스템(웹페이지 혹은 애플리케이션)을 제어(다루다)하기 위해서 사용하는 조작 장치
ex) 수많은 버튼들
아이디와 비밀번호를 입력하고 로그인 버튼을 누른다
구글이나 네이버의 로고 버튼을 누르면 홈페이지로 이동할 수 있다
- API (Application Programming Interface)
-애플리케이션을 만들기 위해서 프로그래밍을 할 때 사용하는 조작 장치
-이미 기본적인(공통적인) 기능들이 담겨있는 API 중 하나를 가져와 사용
ex) alert
경고창 실행은 내가 만든 것이지만 경고창이 어떻게 생겼고 어디에 띄우고 하는 기능은 만들지 않았다
