728x90 반응형 전체 글244 [JavaScript] Element 식별자 엘리먼트를 제어하기 위해서는 그 엘리먼트를 조회하기 위한 식별자가 필요하다. HTML에서 엘리먼트의 이름과 id 그리고 class는 식별자로 사용된다. 객체를 만들어줄때 property에 조회,생성,변경,삭제 등을 세팅해줄 수 있다. tagName 조회만 가능하게 하는 property이다. 변경되지않는다. Javascript 현재 javascript의 tagName은 "javascript"인데 "a"로 변경하려고 한다. 이때 ""안에 오는 선택자는 항상 문자열이어야한다. 마지막 write를 보면 이름이 변하지않고 그대로 LI로 출력되는데, 변경되지 않는다는걸 알수 있다. id 변경이 가능한 property이다. Javascript 브라우저에서 f12를 눌러서 elements에서 보면 로 변경되있는걸 확인.. 2023. 3. 6. [JavaScript] 문서 객체 모델(DOM) 접근 문서 객체 모델(DOM)은 HTML과 XML 문서에 대한 어플리케이션 프로그래밍 인터페이스이다. DOM은 문서를 노드의 계층 구조 트리로 표현하며 개발자는 이를 통해 페이지 각 부분을 추가, 제거, 수정한다. Document 타입에서 제공하는 메소드 (제어 대상 찾기) getElementById() getElementsByTagName() querySelector() querySelectorAll() getElementById() id를 사용해 속성을 제어한다. id는 객체로 가져온다. {} 객체가 없으면 null값이 return된다. id만 가져올 수 있다고 명시되어 있어 선택자에 id구분자#를 넣지 않는다. 여러 객체를 가져올땐 배열로 가져온다고 하고 하나의 객체를 가져올땐 객체로 가져온다고 한다. .. 2023. 3. 6. [JavaScript] Date 객체나 함수는 리터럴로도 사용할수 있는데, date는 new Date()으로만 사용이 가능하다. 1의 경우, 월 month가 index로 작용해서 dec으로 반환된다. 2의 경우는 (년,월,일,시,분,초)이다. 3의경우는 그대로 월 month가 11월 nov를 출력한다. 4의경우 ie에선 지원하지 않는다. 이때 getMonth는 월이 -1값으로 출력됨을 유의해야 한다. 요일은 일:0,월:1,화:2... 이런식으로 0부터 6까지 return값이 출력된다. 오늘 날짜를 출력해본다. 이 두 방법은 10월같은 달에도 앞에 0이 붙는다. 그래서 삼항연산자를 사용하는 다음과 같은 방법으로 한다. 삼항연산자를 사용해 월 month와 일 date가 10보다 작을땐 앞에 0을 붙여준다. 브라우저 객체 모델 브라우저 객체.. 2023. 3. 6. [JavaScript] 배열 Array 2 map Map 메소드는 각 배열 요소에 대해 함수를 수행하여 새 배열을 생성한다. 제공된 함수를 배열의 각 요소에 대해 한번 호출하고 원본데이터는 변경되지 않는다. 문법: 변수.map(function(){}); 배열의 map을 실행시키면 인자로 사용한 펑션이 배열의 length만큼 반복되어 실행된다. filter 테스트 통과한 item만으로 새배열을 생성한다. every와 some은 boolean값으로 return한다. every every는 모든 return값이 true인경우에만 최종 return값이 true가 반환된다. 하나라도 false이면 false값을 반환하고 and로 묶인다고 생각하면 된다. 1>3 : false 2>3 : false 3>3 : false 4>3 : true 5>3 : true.. 2023. 3. 6. [JavaScript] 배열 Array Javascript의 배열은 다른 프로그래밍 언어의 배열과 다르게 배열 슬롯에 어떤 타입의 데이터라도 넣을 수 있다. 즉 배열의 첫 슬롯에는 문자열, 두 번째에는 숫자, 세 번째에는 객체를 넣는 식으로 사용할 수 있다. 또한 Javascript 배열은 동적으로 크기를 조절하므로 데이터를 추가하면 자동으로 커진다. 배열을 생성할땐 new Array()로 사용하거나 리터럴 [] 을 사용한다. 후자를 많이 사용한다. 배열의 인덱스는 0부터 시작한다. 객체의 리터럴은 {}이다. new Array [0] 인덱스 위치에 데이터 Benz를 넣는다. 리터럴 [] 사용 length 배열의 건수는 length로 표현되는데, 데이터를 추가하거나 삭제하면 length가 커지거나 줄어든다. 그래서 for문과 자주 같이 사용된다.. 2023. 3. 6. [JavaScript] 원시값과 참조값 ECMAScript의 변수는 원시 값과 참조 값 두 가지 타입의 데이터를 저장할 수 있다. 변수에 값을 할당하면 자바스크립트 엔진은 해당 값이 원시 데이턴인지 참조인지 판단한다. 원시 값은 단순한 데이터이다. Undefined와 Null, Boolean, 숫자, 문자열같은 데이터들을 말한다. 이들 변수는 ‘값으로’ 접근한다고 하는데 변수에 저장된 실제 값을 조작하기 때문에 이렇게 말한다. 참조 값은 여러 값으로 구성되는 메모리에 저장된 객체이다. 자바스크립트는 메모리 위치에 직접 접근하는 것을 허용하지 않으므로 객체의 메모리 공간을 직접 조작하는 일은 불가능하다. 객체를 조작할 때는 사실 객체 자체가 아니라 해당 객체에 대한 ‘참조’를 조작하는 것이다. 이런 이유로 객체를 가리키는 값은 ‘참조로 접근한다.. 2023. 3. 6. [JavaScript] 함수와 매개변수 함수 Function 함수는 문장을 캡슐화하여 어디서든, 언제든 실행할 수있게 해준다. function 펑션이름(매개변수) {for, if, switch, while...} 매개변수 갯수는 정해져 있지 않다. 하나든, 여러개든 사용 가능하다. 펑션마지막에 펑션이름(); 하면 펑션에 값없어도 실행할수 있게 한다. return키워드 있는경우 펑션실행한값 바로 변수에 넣어줄수있다 실행할때 값을 넣어주면 매개변수에 바로 값 넣어준다 //return값이 없는 함수 function sayHi(name, message) { alert("저는 " + name + "입니다. " + message); //alert 알림창 } sayHi("니언","반갑습니다"); //return값이 있는 함수 function sayHi(n.. 2023. 3. 6. [JavaScript] 제어문 조건문 [ IF문 ] 문법: if(조건) {조건이 true일 경우} else {조건이 false인 경우} 여러조건일 경우: if(조건1) {로직1} elseif(조건2) {로직2} elseif(조건n) ... else if는 조건이 필요하고 여러번 사용할수 있는 반면, else는 조건이 불필요하며 한번만 사용할 수 있다. sName !== sName2 조건 자체는 fales지만 !는 not연산자이기 때문에 true값으로 반환된다. 반복문 [ Do While 문 ] do-while 문은 평가전 반복문이다. 조건을 평가하기 전에 루프 본문을 먼저 실행하기 때문에 최소 한 번은 반드시 실행된다. 그래서 최초한번은 조건이 true이든 false든 실행한다. 문법: do { 실행 } while (조건); 여기서 .. 2023. 3. 6. [JavaScript] 연산자 Javascript에는 데이터 조작에 쓸 수 있는 연산자가 여러가지 존재한다. 연산자 계산 순서 단항 연산자( !, ++, --) → 산술 연산자 → 비교 연산자 → 논리 연산자 → 할당 연산자 산술연산자 [ 증감연산자 ] 피연산자의 앞에 쓸 수도 있고 뒤에 쓸수도 있다. 증가는 ++를 사용하고 감소는 --를 사용한다. 증감 연산자의 위치 ex) ++a -증감연산자가 피연산자 앞에 위치 -전체 수식 처리하기 전에 적용됨 ex) a++ -증감연산자가 피연산자 뒤에 위치 -전체 수식의 처리가 끝난 뒤 적용됨 현재 경우엔 수식이 없어서 앞에 위치하거나 뒤에 위치하거나 결과가 똑같다. 연산자가 피연산자 앞에 위치하게 되면 수식 처리하기 전에 적용되기 때문에 21이 되고 합한 결과값은 23이된다. [ 나머지 연산.. 2023. 3. 6. 이전 1 ··· 8 9 10 11 12 13 14 ··· 28 다음 728x90 반응형