728x90 반응형 source-code/JavaScript18 JavaScript _ 문서 객체 모델 문서 객체 모델을 사용하면 HTML 페이지에 태그를 추가, 수정, 제거할 수 있다! 1. DOM 관련 용어 문서 객체 모델(DOM)! 그런데 태그니, 문서 객체니, 노드니 하는 용어가 등장한다. 우선 태그는? 우리에게 익숙한, HTML 페이지에 존재하는 , 같은 녀석들! 이 태그를 js에서 이용할 수 있는 객체로 만들면? → 요놈이 문서 객체다! (var header = document.getElementById('header')시 header가 문서 객체! document 객체를 사용한걸 이제 안다!) 마지막으로 노드 란... HTML 페이지는 위 그림처럼 트리 모양으로 나타낼 수 있다. 이 때 그림 속 각 요소들을 노드 라고 부른다! 노드는 요소 노드와 텍스트 노드로 구분할 수 있는데, 요소 노도는 .. 2021. 2. 5. JavaScript _ 브라우저 객체 모델 브라우저 객체 모델(BOM)이란? 웹 브라우저와 관련된 객체의 집합! 그림처럼 최상위의 window, 하위의 location, navigator, history, screen, document 객체가 있다! 이중 document 객체와 관련된 객체의 집합을 DOM이라 부르는 것! 1. window 객체 브라우저 기반 js의 최상위 객체인 window 객체! open() 메서드를 통해 새로운 window 객체를 생성할 수 있으며, 만들어진 객체에 접근할 수도 있다. 역시나 다양한 기본 메서드를 제공하고 있으며, 위 예시처럼 작성하면... 새로운 window 객체가 뜨며, 1초마다 왼쪽으로 10px 아래쪽으로 10px씩 이동한다! 참말로 신기하고만. 2. screen 객체 다음은 운영체제 화면의 속성을 가지.. 2021. 2. 5. JavaScript _ 기본 내장 객체 JavaScript에 내장된 객체 중 가장 기본적인 내장 객체를 살펴보자! 1. 기본 자료형과 객체의 차이 변수 primitiveNumber은 기본 자료형 숫자, 변수 objectNumber은 객체에 해당한다. 이 둘을 출력해보면... 같은 값이다! 심지어 속성과 메서드는 객체가 가질 수 있는 것인데... 기본 자료형에도 속성과 메서드가 존재한다. 이게 어찌 된 일? 기본 자료형의 속성이나 메서드를 사용하면 기본 자료형이 자동으로 객체로 변환되기 때문! 예를 들어 기본 자료형 숫자의 속성이나 메서드를 사용할 때는 자동으로 Number 객체로 변환된다. 따라서... 기본 자료형과 객체의 차이점은 찾기 어렵다! 굳이 굳이 찾자면 기본 자료형은 객체가 아니므로 속성과 메서드를 추가할 수 없다는 점. 따라서 기.. 2021. 2. 5. JavaScript _ 객체지향 프로그래밍 1. 객체 js에서는 python의 list와 유사한 배열(array)이란 개념을 사용할 수 있었다. 배열에는 인덱스 와 요소 가 있는데, 각 배열 요소를 사용할 때는 인덱스를 통해 접근(array[0])했다. 이러한 배열은 객체를 기반으로 만들어졌기 때문에 이 둘은 굉장히 유사한 개념! 차이점이라면 배열은 인덱스를 통해, 객체는 키를 통해 요소에 접근한다! 여기서 eat의 속성은 함수 자료형이므로 특별히 eat() 메서드 라고 부른다! 아니, 속성이니 메서드니 함수니 변수니 하는 말이 다 뭐람?? → 매번 헷갈렸는데... 드디어 정리한다. 단독 사용 다른 식별자와 함께 사용 식별자 뒤 괄호 X 변수 (ex input) 속성 (ex Array.length) 식별자 뒤 괄호 O 함수 (ex alrert('.. 2021. 2. 4. JavaScript _ onload vs ready PNU Quiz의 result페이지에는 로딩바 기능이 있었다. result.html이 띄워질 때 메인 콘텐츠를 숨겨뒀다가 n초 뒤에 나타나게 하고, 로딩바는 n초 뒤에 사라지게 함으로써 유저가 로딩바를 n초 동안 봤다가 메인 콘텐츠를 볼 수 있게끔 만들었다. 해당 코드는 다음과 같다! 얼핏 보기에는 정상적으로 작동하나 싶었는데... 문제 발생. '익명 님의 성적표~~'에 해당하는 부분(메인 콘텐츠)은 분명 .hide()를 통해 숨겨뒀다. 하지만 웬걸, result.html이 뜨고 약 0.3초 정도 동안 이 녀석들이 나타나는 게 아닌가! 지금 생각해보면 당연한 일이지만 어째서 이런 일이 발생했는지, 어떻게 해결할 수 있는지 알아보자. 1. onload() ? result.js는 window.onload().. 2021. 2. 2. JavaScript with jQuery js를 통해 열심히 페이지를 작성했는데... 브라우저마다 보이는 화면이 다르면 몹시 슬플 테다. '모든 웹 브라우저에서 정상적으로 작동하게 만드는' 것은 중요하면서도 꽤나 어려운 일. 이 때문에 다른 사람이 만든 라이브러리를 사용하곤 하는데, 이것이 바로 jQuery! 제일 먼저 html과 우리의 js를 연결. 그런데 jQuery는 다른 사람이 만들어 둔 라이브러리라고 했다. 따라서 요놈도 script로 받아와야 한다! 그럼 누가 만든 라이브러리를 받는디? 구글에 쳐보면 많다! 여기서는 made in 구글을 이용. 희한하게 생긴 $ 가 붙어있다. 요놈은 jQuery 라이브러리의 함수! 기본적으로 $().메소드(, ) 의 형태로 사용된다. jQuery에서 객체를 생성하기 위해서는? document, css.. 2021. 1. 18. JavaScript in WebEvent js에서는 페이지에서 일어나는 여러 이벤트들을 지정할 수 있다. 대충 적어봐도... 마우스, 키보드, 사용자 인터페이스, 터치, 구조 변화 등! 생동감 있는 페이지를 위해선 어느 하나 빼놓을 수 없다. 역시나 js파일은 외부참조! webevent.js라는 파일을 만들었다. html상에 버튼을 하나 만들어줬다. onclick속성을 통해... 클릭하면 buttonClick이라는 함수가 작동된다. 요놈은 어디에? 아항! js 파일에서 이렇게 buttonClick 함수를 만들어줬다. 작동하면 클릭 이라는 경고창을 띄운다. 잘 뜨는구만. 이렇게 id를 지정해 불러올 수도 있다! id를 통해 객체를 지정할 테니 getElementById를 사용했다! 요 button은 onclick이벤트를 가지는데... 이 녀석을 .. 2021. 1. 13. JavaScript in Web js의 꽃! 페이지 동작의 핵심! web에서 js를 이용해 여러 기능들을 구현해보자. inweb.html html상에 js 코드를 입력해도 되지만... 길어진 코드가 보기 좋을 리 없다. 따라서 (CSS 연결처럼) head태그 안에 다음과 같이 적어줘 외부 js 파일과 연결시키자. 1. window 객체 제일 먼저 window 객체! prompt는 입력 받을 수 있는 프롬프트를, alert는 경고창을 출력한다. 2. location 객체 setInterval 은 지정한 시간(여기서는 3초) 이후 함수를 작동시킨다. ↑이는 setTimeout 함수에 대한 설명! setInterval은 지정한 시간 간격마다 반복해서 함수를 실행한다! location은 html의 href와 유사한 기능! 뒤에 href, as.. 2021. 1. 13. JavaScript 기초 행요를 개발했을 때, 카카오맵 API를 받아와서 사용했다. 처음 해당 코드를 본 순간... 느껴졌던 당혹감. 난생처음 만난 JavaScript. 뭐가 뭔지 도무지 알 수가 없었다. 덕분에 지도와 관련된 부분은 일절 다룰 수가 없었다. 속상. 그런고로... JavaScript를 정말 기초부터 시작할 예정. 참고 교재 : 자바스크립트 프로그래밍 입문 , 윤인성 저 1. 파일 생성 및 실행 JavaScript파일을 만들기 위해 js 확장자를 달아준다. 실행을 위해 python처럼 node + 파일명! 2. 연산자 파이썬의 print와 유사한 개념(인 듯 싶은...?) → console.log! 비교 연산자는? >, 30>20 ← 이렇게 적어버리면 False가 나온다..! 왜냐? 왼쪽부터 계산하므로 40>30 .. 2021. 1. 13. 이전 1 2 다음 728x90 반응형
