JS, TS 썸네일형 리스트형 [Javascript] document 객체와 DOM 객체의 API(프로퍼티, 컬렉션, 메소드) 출처 : 명품 웹 프로그래밍 브라우저는 HTML 태그로부터 DOM 객체를 생성하고 DOM 트리를 구성한 후, DOM 객체를 화면에 출력한다 DOM의 목적은 HTML 태그가 출력된 모양과 콘텐츠를 제어하기 위해서이다 DOM 트리의 루트는 document 객체이다 하지만 document 객체는 DOM 객체가 아니다 DOM 객체의 구성 요소는 프로퍼티/ 메소드/ 컬렉션/ 이벤트 리스너/ CSS3 스타일이다 document 객체의 주요 프로퍼티, 컬렉션, 메소드 [프로퍼티] - location - domain - referrer - cookie - lastModified - readyState - title : 문서의 제목 문자열. 태그가 없으면 빈 문자열 - body - head - defaultView - .. 더보기 [실습][Javascript] 갬블링 게임 웹 페이지 만들기 출처 : 명품 웹 프로그래밍 3개의 숫자가 모두 같으면 성공하는 갬블링 게임 웹 페이지를 작성하라. 처음에는 3개의 숫자 모두 0으로 출력되지만, 각 숫자를 클릭하면 1~3 사이의 랜덤한 값으로 출력한다. 마지막 숫자를 클릭할 때 3개의 숫자를 검사하여 모두 같으면 성공한 것으로 한다. 우선, 다음과 같이 초기화면을 구성한다 겜블링 게임 각 숫자를 클릭하면 1~3 사이의 난수로 바뀝니다. 모두 같은 수가 나오면 승리합니다. 차례대로 클릭해주세요. 0 0 0 @charset "UTF-8"; body { margin: 100px 0 0; padding: 0; } .main_box { width: 500px; margin: 0 auto; text-align: center; } .game_box { width:.. 더보기 [부스트코스][BoostCourse] 10. Javascript 활용(2/2) (UI-API / JS 심화공부 키워드) / 서포터즈 활동 끝 본 게시글은 생활코딩 강의를 듣고 정리한 글입니다 UI-API UI는 User Interface의 약자로, 사용자들이 시스템을 제어하기 위해서 조작하는 장치를 말한다 예시) 인터넷 사용자가 로그인하는 "입력창과 로그인 버튼" API는 Application Programming Interface의 약자로, 프로그래머들이 사용하는 조작 장치를 말한다 예시) 경고창을 띄우도록 하는 코드 "alert" 이처럼 우리는 API를 적절히 사용하며 프로그래밍을 하게 된다 "API/프로그래밍"의 관계는 "단어/문법"의 관계, "조립 부품/조립 방법"의 관계와 같다고 볼 수 있다 그렇다면 UI는 어떻게 표현할 수 있을까? 영어를 사용하는 "회화", 조립된 장치를 적절히 작동시키는 "버튼" 등으로 비유할 수 있을 것이다 더.. 더보기 [부스트코스][BoostCourse] 9. Javascript 활용(1/2) (JS 파일 저장 / 라이브러리-프레임워크, JQuery) 본 게시글은 생활코딩 강의를 듣고 정리한 글입니다 .js 파일 이용 태그 안의 css 코드를 .css 파일로 분리시킬 수 있는 것처럼, JS 파일도 따로 분리시킬 수 있다 '파일명.js' 이름으로 파일 분리 후 -> ... 위와 같이 src='' 속성을 추가하면 파일을 불러올 수가 있다 되도록이면 파일 수를 줄여야 페이지를 불러올 때 성능이 향상되고, 로딩시간이 감소한다 이처럼 파일을 분리할 경우 다음과 같은 장점이 있다 유지보수가 편리하다 : 여러 곳에 쓰이는 JS를 동시에 수정할 수 있다 가독성이 좋아진다 캐시에 저장할 수 있다 : 페이지에 JS 파일을 다운로드하여 캐시에 저장해두면, 후에 더 빨리 페이지를 표시할 수 있다 라이브러리-프레임워크 라이브러리는 단순 활용가능한 도구(소프트웨어)들의 집합을.. 더보기 [부스트코스][BoostCourse] 8. Javascript 객체 본 게시글은 생활코딩 강의를 듣고 정리한 글입니다 객체의 개념 snupi.tistory.com/100 [부스트코스][BoostCourse] 6. Javascript 함수(1/2) (JS 함수의 개념 / 장점) 본 게시글은 생활코딩 강의를 듣고 정리한 글입니다 개념 함수는 데이터를 전달받아 처리한 후 결과를 출력하는 코드 블록이다 예시를 자판기로 들어보자 ex) 우리는 돈을 넣고 음료수 버튼(매 snupi.tistory.com 우리는 전 포스팅에서 함수를, 한 줄이라도 그 구현의 의미를 명확하게 하기 위해 활용하였다 하지만 프로그램에서 기능들이 많아진다면, 중복이 되지 않게 함수의 이름을 계속 길게 작성할 것이다 이를 방지하게 위해 우리는 폴더로 정리한다 이와 같이 우리는 함수(메소드)와 속성(프로퍼티)들.. 더보기 이전 1 2 3 4 5 6 다음
