WEB39 06-01. 비동식 키워드 1.비동식 키워드란? - JavaScript의 새로운 기능이자 기존 구문의 개선된 방식이다. - 비동기 코드를 깔금하게 작성하도록 돕는 함수이다. ( Internet Explorer에서는 지원 안한다.) 2. async async 자체가 함수를 비동기 함수로 선언하는 키워드이다. async function hello() { return 'hello world!'; } hello(); 위와 같이 할경우 함수는 자동으로 Promise를 반환한다. 아래는 예시이다. 처음에는 그냥 hello world!를 반환하지만 async를 붙였을 경우 Promise를 반환한다. 3.await await 키워드는 비동기 코드를 쓰면서 동기적으로 보이게 해준다. Promise가 값을 반환할 때까지 기다리기 위해 비동기 함수의.. 2023. 6. 19. [HTML5] target 속성과 src 속성에 대해 자세하게 알아보자 target 속성과 src 속성을 자세하게 알아보자 target 속성 target 속성은 a 태그로 링크를 생성할 때 대상이 연결 되는 방식을 지정합니다. 속성값으로 _blank, _parent, _self, _top 을 사용할수 있습니다. 가장 많이 사용 하는 것은 _blank 로 알려져 있습니다. target 속성값 _blank 는 새 창으로 열리는 방식입니다. _parent 는 기존창의 부모 창에서 새 창이 열리는 방식입니다. _self 는 기존창에 그대로 웹페이지를 여는 방식입니다. _top 은 현재 열려져있는 창의 최상위 인터넷 창에서 열리는 방식입니다. src 속성 src 속성은 삽입하려는 이미지의 경로를 입력하는 속성입니다. 여기서 이미지 경로를 현재 폴더로 할지 상위폴더로 할지 정할 수 있.. 2023. 5. 17. DOM_4 1. 키보드 이벤트 키보드를 누르고 땔때 마다 이벤트를 발생시킬수 있다. -html click me! -js const input = document.querySelector('input'); input.addEventListener('keydown',function(){ console.log("DOWN") }) input.addEventListener('keyup',function(){ console.log("UP") }) 추가로 키보드를 길게 누르는것도 반응 할수 있다. 2. key 와 code 키보드에서의 실제 위치를 알 수 있다. const input = document.querySelector('input'); input.addEventListener('keydown',function(w){ c.. 2023. 3. 6. DOM_3 1. 계층이동 parentElement 한단계 위로 올라가서 부모 요소가 나오는 대신에 밑으로 내려가서 자녀요소를 출력하는 것이다. -모든요소에게 그 요소를 포함하고 있는 직속 부모 요소는 단 한개이다.(자식요소는 여러개일 수 있다.) 2. 새 DOM 요소 만들기 appendChild() 한 특정 노드를 특정 부모 노드의 자식 노드 리스트 중 마지막에 삽입하는것이다. append() 한번에 한개 이상을 삽입할수 있고 최근에 나왔다. 그래서인지 익스플로어에서는 실행이 불가하다. prepend() 특정 요소의 앞에 무언가를 삽입할때 사용한다. 3. 제거하기 -removeChild 먼저 제거하려는 부모요소를 부르면 되는데 parentElement 로 불러주고 removeChild(제거할 요소)를 입력하면 제거.. 2023. 3. 1. DOM_2 1. 속성 (id 바꾸기) - id가 banner인 이미지가 있다고 하면 아래와 같이 된다. Silkie Chickens 위 id를 변경해서 완전히 다른 id를 부여할수 있다.(예시로 loui3을 id로 해본다.) 그러면 아래와 같이 loui3이 id인 이미지가 있다라는것을 알 수 있다. 2. getAttribute, setAttribute getAttribute은 HTML 자체에서 직접 가져오게 한다.(해당요소에 지정된 값) -제목,id,class등을 갖고 오게 할 수 있다 setAttribute은 선택한 요소에 선택한 값을 넣는것이다. -type을 바꿀수 있다. 3. 스타일 변경하기 마크업을 직접 변경하지 않고 자바스크립트를 통해 스타일을 변경할수 있다. I ♥ Trees 위그림을 html 파일을 건.. 2023. 2. 26. DOM 1. DOM이란? - DOM은 바로 문서 객체 모델을 뜻한다. - 쉽게 말해 웹페이지를 구성하는 자바스크립트 객체들의 집합이다. 2. DOCUMENT - 새로운 페이지를 열때마다 해당페이지의 콘텐츠를 이용한 문서 객체 모델이 생성되는데 DOCUMENT는 페이지의 콘텐츠를 나타내는 객체의 모음집과 같다. - CSS 스타일을 바꾸거나 요소를 숨기거나 할 수 있다. 3. getElementByID() - 이 메서드에 문자열을 전달하면 일치하는 ID를 가진 요소를 찾아 나타낸다. - id가 일치하는 요소를 찾으면 해당값이 나타나고 없으면 null로 나타낸다. - id로 선택할때만 작동하며 클래스 이름으로는 작용하지 않는다. ID가 name인 경우 4. getElementByTagName() -이 메서드에 문자열.. 2023. 2. 22. 이전 1 2 3 4 ··· 7 다음
