본문 바로가기
반응형

js17

[Express] Node.js , express 설치하기 , 웹서버(백엔드) 구축 , 미들웨어 1. Node.js 설치 nodejs는 JS를 터미널로 실행시킬수 있는 프레임워크 입니다. https://nodejs.org/ko/ Node.js Node.js® is a JavaScript runtime built on Chrome's V8 JavaScript engine. nodejs.org 위에 사이트에서 안정적인 LTS(long term support)버전을 설치해줍니다. 노드를 설치하면 자동으로 npm이 설치됩니다. npm(Node.js Package Manager)은 Node.js 패키지 관리자로, node의 여러 패키지들을 import할수 있는 관리자입니다. 파이썬에 pip같은 존재 입니다. 2. 노드, npm 설치 확인 윈도우 cmd / powershell , 맥(mac) terminal .. 2022. 6. 10.
[HTML/JS/jQuery] 용어 정의 리스트 (dl , dt , dd 태그) 위와 같이 용어의 뜻을 보여주는 용어 설명 리스트에 대해서 실습하겠습니다. 용어 정의 리스트 관련 태그 dl 태그 dl 태그는 definition List의 약자로 사전처럼 용어를 설명하는 리스트를 만듭니다. dt 태그 dt 태그는 definition term의 약자로 용어의 이름(제목)을 넣을때 사용합니다. dd 태그 dd 태그는 definition description의 약자로 용어의 정의(설명)을 넣을때 사용합니다. HTML 구조 Item 1 some explanation here. some explanation here. Item 2 some explanation here. some explanation here. Item 3 some explanation here. some explanation.. 2022. 6. 7.
[jQuery / JS] DOM, CSS 변경 / 반환하기 (text ,attr , css , show...) 목차 DOM 변경 CSS 조작 show / hide / fade DOM (브라우저 객체)에 반환하거나 변경하는 함수들 $(선택자).func(); ---> func에 대해 배워봅시다! 1. 반환하는 jQuery 함수 (get) $(selector).text() : 선택된 요소 반환합니다 $(selector).html() 선택된 요소의 html 반환합니다 $(selector).val() : 입력 필드/value값을 반환합니다 $(selector).attr(attributeName) : 선택된 요소의 인자로 주어진 것에 해당하는 속성의 값을 반환한다 $(selector).position() : top과 bottom 필드를 가지고 있는 객체를 반환합니다. ex) position 함수 사용법 var pos = $.. 2022. 5. 31.
[jQuery] 이벤트 처리 , 기초 세팅 jQuery는 오픈 소스 자바 라이브러리로, js 작성을 더 간편하게 할 수 있습니다. jQuery를 웹사이트에서 실시간 구동을 해주기 위해서는 head 태그에 소스코드를 입력해줘야합니다 핵심은 jQuery 소스코드가 js파일 소스코드보다 더 위에 선언되어야 된다는 것입니다. VScode jQuery 자동완성 extention https://marketplace.visualstudio.com/items?itemName=donjayamanne.jquerysnippets jQuery 문장의 구조 $("선택자").action(); $("p").show() : 모든 p태그 요소들을 찾아서 화면에 표시 $("#iden").slideup() : id = "iden" 인 요소를 슬라이드업 방식으로 표시한다 $(".c.. 2022. 5. 15.
[HTML/JS] 기본 이벤트 처리 다룰 이벤트 처리 Timing 이벤트 (매초마다, 시간이벤트) onclick 이벤트 (클릭시) onload/onunload 이벤트 (웹페이지 진입시) onchange (focus가 해제될시) onmouseover / onmouseout (마우스를 위에 올려놓을시) onmousedown / onmouseup (버튼을 누른 순간 / 누른 손을 뗀 순간) js를 이용한 이벤트 핸들러 Timing 이벤트 주어진 시간 주기에 따라 코드가 실행되도록 하는 함수입니다. 밀리초(milliseconds)는 천 분의 1초를 가리키는 말입니다. 1000milliseconds 가 1초겠죠?? window는 최상위 객체로 생략해도 됩니다! (java의 object격) 이벤트 처리에서 진짜 주의해야하는것은 함수를 인자로 받을때 .. 2022. 5. 2.
[HTML/JS] DOM(문서 객체 모델) 기초 목차 DOM이란? element 찾기 element 내용, 속성,CSS 변경 element 추가 및 삭제 DOM(Document Object Model) DOM은 HTML 문서의 계층적인 구조를 트리로 표현한 것 입니다. HTML을 구성하는 모든 요소들을 요소(element) , 속성 (attribute) , 문자(text)로 구분합니다. 태그들 -> element , 태그내의 속성 -> attribute , 태그안에 문자 -> text DOM은 트리구조이기 때문에 부모(parent)와 자식(child)로 구분할 수 있습니다. 부모에서 자식으로 접근을 할수 있는데요, firstchild , lastchild 등등으로 자식 노드로 접근 할 수 있습니다. 그리고 DOM의 함수를 이용해서 다음과 같은 기능을 .. 2022. 5. 2.
[HTML/JS] BOM(Browser Object Model) , window객체 브라우저 객체 모델 BOM이란? BOM은 웹브라우저의 객체들의 모음입니다. 최상위 객체는 window고, 그중 html에 해당하는 객체는 DOM(Document Object Model) 문서 객체 모델입니다. 밑의 사진에 노란색 부분이죠. 최상위 객체 , window window는 브라우저 하나의 윈도우를 표현하는 객제입니다. 모든 JS’s global objects, functions, variables는 window 객체의 멤버 중 하나입니다. window의 함수들 (상세내용X , 문법 요약) window.open(url, name, specs, replace); 새로운 윈도우를 엽니다. 반환값은 윈도우, 실패하면 null ex) window.open('http://www.google.com', '_.. 2022. 4. 18.

티스토리툴바