![]()
DOM Document Object Model Document 웹브라우저 DOM은 트리 구조로 되어있다 DOM 시각화 예시) html 웹 문서 동작 1) 컴퓨터 웹브라우저에 html 문서를 읽어들임(파싱 : 문법 해석) 2) 파싱된 문서(DOM) => 메모리에 저장(DOM 저장됨) 노드(Node) html 문서의 특징 태그(tag) 속성 (attribute) 텍스트(text) 주석(comment) 를 통칭하여 노드(Node)라고 한다. 태그 , 속성 , 텍스트 , 주석별로 구분하여 트리구조로 메모리에 저장됨 querySelector() DOM(html태그) 접근하는(선택하는) 함수 사용법 document.querySelector("선택자") : html 선택자 선택 태그 : 속성(style등) , 상세속..
![]()
NULL null 자료형 변수는 있으나 공간이 비어있는 것 (js, 자바 , c/c++등에서 사용) 보통 옛날에는 초기화 할때 사용했었다. 현재는 null 초기화는 권장하지 않는다 (버그가 많이 발생한다.) 옛날 let char1 = null 현재 let char = " "; let num = 0; Undefined 자료형 객체의 속성명이 정의되지 않은 상태(것) JS에서만 있음
사용자 정의 함수 void형식과 return 형식 둘다 가능하다 사용법 function 함수명(매개변수) { 실행문; } 함수 호출 함수명(인수); 객체 실생활에서 보이는 모든 것 사용법 자료형 변수명 = { 속성1 = 값1, 속성2 = 값2, ... } 객체속성 출력 객체변수명.속성;
![]()
자료형 배열 자료형 : 문자열(string), 숫자(number) , 참/거짓(boolean, bool) (한마디로 모든지 다 들어갈 수 있다...) 배열 : 여러가지 값을 저장하는 장소 , 변수명은 동일하게 사용 , 인덱스번호를 사용 예시 1) let str 또는 const str = "boy" "boy"는 각각 boy[0] = 'b' boy[1] = 'o' boy[2] = 'y' 배열로 구분 되어 있다 (나는 매우 놀랐었다.. 나만 그런가) 예시 2) let a = [1,2,3.....]; console.log(a[1]) = 2가 출력 예시 3) let 또는 const 변수명 = new Array(배열 갯수); ※ java처럼 타입이 정해진것이 아닌 모든 타입들을 넣을 수가 있다... 거기다 모든 것..
![]()
조건문 if / else if ... / else 예제 ) 3항 연산자 let 변수명 = (조건문)? 실행1:실행2; switch switch(조건변수) {case 값 : 실행문... default : 실행문} 반복문 반복문 예약어 break(중단 예약어) continue(계속 예약어) for for(초기값;조건식;증감식) {반복문(문장)} 예제) 안녕하세요를 100번 출력하세요. while while(조건문) {실행문} do~while do{실행문} while(조건문); 특징 : 조건식이 거짓이라도 1번은 실행한다.
![]()
CSS 조금밖에 적지를 못했지만 여러 태그들을 제 기준에서 요약정리만 만들어 보았습니다. 물론 잘 적지는 못했습니다 . 태그 선택자와 태그 우선순위 margin , border , padding ,content영역 background font, text text - 중앙 정렬 list-style position display visibillity border와 radius float 2차원 함수와 3차원 함수 @keyframes와 animation
![]()
사칙연산자 + (덧셈) , - (뺄셈) , * (곱셈) , / (나눗셈) , % (나머지) 덧셈 예제 ) 뺄셈 곱셈 나눗셈 나머지도 이와 동일합니다. ※ JavaScript에서는 java에서 나눗셈을 할때는 나오지 않던 실수(소수점)도 같이 나오게 됩니다. 다만 정확한 것이 아닌 유사한 숫자가 나옵니다. 비교 연산자 >= , ,
![]()
① 문자열(String) ● " " 또는 ' ' 둘중 아무거나 사용해도 상관없습니다. 예시) ② 숫자형(number) ● 말 그래도 숫자요 ㅎ.. 예시 ) ③ 변수 (let) ● 변하는 수를 의미합니다. ● 따라서 값을 수정하는 것이 가능합니다. ● ' let 변수명 = 값 ' 을 많이 사용합니다. ● 변수를 사용하여 출력하는 것을 소프트 코딩(soft coding) 이라고 합니다. 소프트 코딩(soft coding) // 추천 방식 (위의 자료) vs 하드코딩 (hard coding) // 추천드리지 않습니다. ④ 상수 (const) ● 변하지 않는 수를 의미합니다. ● 따라서 값을 수정할 수 없습니다. ※ 주의 만약 상수를 수정하게 된다면 에러(Error)가 뜹니다. 식별자 ● 변수명 , 상수명 , ..
![]()
Visual Studio Code를 사용했습니다. 일단 script를 활용해 html과 js를 연결 시켜준다 화면 출력 방법 예시 1) ● alert("Hello Javascript"); 예시 2) ● console.log("Hello Javascript"); 결과 ※ 검사창의 console에서 확인이 가능하다. 들어가기에 앞서.. 제 기준으로 적는 것이기에 잘못 적을 수도 있습니다. 배우면서 끄적이기에.. java와 비교하면서 적을 것 같습니다아
![]()
position 속성 static 기본,좌표없음 absolute(절대좌표) 웹브라우저 화면에 좌표가 생김 (left / top / right / bottom) left / top 을 이용해서 태그를 이동시킬수 있음 한마디로 (0,0) = 웹브라우저 왼쪽/위 모서리부터 시작 참고 : 다른 태그들을 무시함 relative(상대좌표) 현재 태그가 있는 위치부터 (0,0)이 시작됨 (left / top / right / bottom) 참고 : 태그가 있으면 밑으로 감 부모(relative) 와 자식 (absolute) 활용 자식 div 태그에 absolute의 (0,0)이 웹브라우저가 아닌 부모 div박스의 왼쪽/위 모서리로 변경된다. fixed(고정) 좌표를 사용이 가능하다 (left / top / right..
![]()
Object 클래스 ● 모든 클래스의 최상위 클래스이다 ● 모든 클래스들은 import extends 가 없어도 Object 클래스가 상속이 되어있다 따라서 우리는 Object클래스의 메서드를 사용하고 있었는데 그중 재정의 할 수 있는 2가지 toString(), equals(Object obj) 를 알아보자 toString() toString 메서드는 이렇게 표시 되어있다 리턴 타입 String 으로 클래스와 이름을 가져와서 @ 해쉬태그(주소값)을 리턴해준다. 한마디로 주소값을 리턴하준다는 것인데.. 우리는 final 이 없기 때문에 재정의가 가능하다. Book이라는 클래스를 생성해서 bookId , title , author 멤버변수를 만들었다면 오버라이딩을 통해 책의 번호 , 제목 , 저자를 반환시..
![]()
인터페이스란? 구현된 것이 아무것도 없는 밑그림만 있는 기본 설계도이다. 특징 멤버 변수, 일반 구현 메서드를 가질수 없다. == 추상메서드와 상수만을 멤버로 가질수 있다. 인터페이스는 표준, 약속(강제성있는 규칙), 규약을 의미한다. 추상클래스보다 추상화가 더 높다. ★ 주의! ★ ● 모든 메서드가 추상 메서드로 선언됨 public abstract ● 모든 변수는 상수로 선언됨 public static final ● public abstract는 생략이 가능하다 ( = 컴퓨터가 자동으로 넣어줌) implements를 사용해 구현이 가능하다 또한 여러 인터페이스를 ,(콤마)를 통해 구현이 가능하다. ( = 다중구현이 가능하다) 인터페이스 정의와 구현 인터페이스 구현과 형 변환 ● 인터페이스를 구현한 ..
