1. script 선택자 document.getElementById(''); // ID로 html 호출 document.getElementsByClassName(''); // Class로 array 호출 document.querySelector(''); // css 방식으로 호출, array에서 첫번째 값만 가져옴 document.querySelectorAll(''); // css 방식으로 호출, array 전체 2. event listen 1) addEventListener("event name", function name); - removeEventListener로 나중에 지울 수 있음 const title = document.querySelector("div.hello:first-child h1")..
- 문자열에서 특정한 문자를 찾아내는 도구 (찾아내서 삭제, 치환 등..) - 정규표현식을 java script에서 사용하는 방법
UI - User Interface - 컴퓨터가 사용자를 대면하는 접점 - 사용자의 의도를 시스템에게 전달, 시스템의 상태를 사용자에게 전달 API - Application Programming Interface - 기반이 되는 시스템이 제공한 interface ex) alert창 - 개발자는 API를 자신의 맥락에 맞게 응용 -> 운영체제가 제공하는 API를 이용해서 웹브라우저 개발자들이 웹 API를 만들게 되고... 또 그걸 웹개발자들이 응용하고...계층적 구조를 가짐 - 계층의 사이사이에 interface가 존재 - 튜토리얼 : 언어의 문법, 안내서 / 레퍼런스 : 명령어 사전 - 자바스크립트의 API는 자바스크립트 자체의 API와 자바스크립트가 동작하는 호스트 환경의 API로 구분됨
1. 모듈 - 코드의 재활용성, 유지보수를 쉽게 하기 위해 - 코드를 부품화 시키는 것 (코드를 여러개의 파일로 분리 ) - 순수 자바스크립트에는 모듈이라는 개념이 분명하게 존재하진 않지만, 자바스크립트가 구동되는 환경(호스트)에 따라 서로 다른 모듈화 방법이 제공 ex) 웹 : script src / node.js : require *모듈의 효과 - 자주 사용하는 코드를 별도의 파일로 만들면 필요할 때마다 재활용 가능 - 코드 수정시 필요한 로직을 빠르게 찾을 수 있음 - 필요한 로직만을 로드해서 메모리 낭비를 줄임 - 한번 다운로드 된 모듈은 웹브라우저에 의해서 저장, 동일한 로직을 로드할 때 시간과 네트워크 트래픽 절약 가능 2. 라이브러리 - 모듈과 비슷한 개념, 자주 사용되는 로직을 재사용하기 ..
- 연관된 데이터를 담는 그릇 (배열과 유사) - 데이터에 인덱스가 아닌 이름을 붙일 수 있다는 것이 배열과 다른점 - 다른 언어에선, 연관배열, 맵, 딕셔너리라는 데이터 타입이 해당 - key : value var age = {'name1':28, 'name2':25, 'name3':29} // name$ 는 key 값, 숫자는 value //value값에 접근하기 alert(age['name1']); //alert(age['na'+'me1']); 문자열을 결합할 때 사용하기 편함, []안에는 string 삽입 가능 alert(age.name1); - 다른 선언 방법 var age = {}; age['name1'] = 28; age['name2'] = 25; age['name3'] = 29; var a..
- 연관된 여러 개의 데이터를 모아 통으로 관리하기 위함 (데이터를 담는 그릇) - index값을 가짐 (0부터 시작) var member = ['egoing', 'k8805', 'sorialgi'] alert(member[0]); alert(member[1]); alert(member[2]); 1. 배열의 사용 : 배열과 반복문 function get_members(){ return ['egoing', 'k8805', 'sorialgi']; } var members = get_members(); for(var i = 0; i < members.length; i++){ // members.length는 배열에 담긴 값의 개수 document.write(members[i].toUpperCase()); //..
- 코드의 재사용, 유지 보수가 용이 function 함수명( [인자...[,인자]] ){ 코드 내용 return 반환값 } //함수실행 함수명(); 1. 함수의 출력 - return : 함수 종료 / 옆의 값을 출력값으로 반환 function get_member(){ return 'bread'; return 'cheese'; return 'milk'; } alert(get_member()); //bread 출력 (그 다음 단어는 출력되지 않음 - 함수 종료되었으므로) 2. 함수의 입력 - 함수의 ()안에 매개변수(parameter) 입력 ex) arg - 매개변수로 전달된 값은 인자(argument) ex) 1, 2 function sayHello (nameOfPerson){ console.log("H..
- loop, iterate : 반복하다 - 조건을 종료시켜주는 것이 중요 (무한 루프를 시키면 웹사이트가 작동하지 않음) 1. while - i 변수 초기화, 반복 조건, i 변수 증가 var i = 0; while(i < 10){ // 종료조건으로 i의 값이 10보다 작다면 true, 같거나 크다면 false document.write('coding everybody '); // 반복이 실행될 때마다 출력 i++; // i의 값이 1씩 증가 } 2. for - while문의 3가지 조건들을 하나의 문법으로 선언 for(var i = 0; i < 10; i++){ document.write('coding everybody'+i+' '); } *i++; 와 ++i;는 다름 - i++; i값 대입 후 증가..
- Conditional Statement, 주어진 조건에 따라 다르게 동작 - if 문으로 시작, 조건이 false면 실행되지 않음 - 조건은 항상 true or false로 나뉘어야 함 if(true){ //실행 alert('result : true'); } if(false){ //실행되지 않음 alert('result : true'); } - else : if가 false일 때 실행 - else if : 여러 조건 연결 가능 if(false){ alert(1); } else if(true){ //if가 실행되지 않을 때, 그리고 어떠한 조건일 때 실행 alert(2); } else if(true){ // 건너뜀 (2번째에서 실행) alert(3); } else { //건너뜀 (2번째에서 실행) al..
1. 대입연산자 a = 1; 2. 비교연산자 - 좌항과 우항의 값이 같은지, 큰지, 크거나 같은지 판별 - true, false 두 가지 값을 가짐 (boolean형) 2-1 .동등연산자 == (equal operator) - 이퀄을 2개 써줘야 함 (하나쓰면 대입연산자) alert(1==2) //false alert(1==1) //true alert("one"=="two") //false alert("one"=="one") //true 2-1 .일치연산자 === ( strict equal operator) - 좌항과 우항의 값과 데이터 형식 모두 일치 alert(1=='1'); //true alert(1==='1'); //false 숫자와 문자이기 때문 **왜 ===를 써야하는가? alert(null ..