1. 객체 js에서는 python의 list와 유사한 배열(array)이란 개념을 사용할 수 있었다. 배열에는 인덱스 와 요소 가 있는데, 각 배열 요소를 사용할 때는 인덱스를 통해 접근(array[0])했다. 이러한 배열은 객체를 기반으로 만들어졌기 때문에 이 둘은 굉장히 유사한 개념! 차이점이라면 배열은 인덱스를 통해, 객체는 키를 통해 요소에 접근한다! 여기서 eat의 속성은 함수 자료형이므로 특별히 eat() 메서드 라고 부른다! 아니, 속성이니 메서드니 함수니 변수니 하는 말이 다 뭐람?? → 매번 헷갈렸는데... 드디어 정리한다. 단독 사용 다른 식별자와 함께 사용 식별자 뒤 괄호 X 변수 (ex input) 속성 (ex Array.length) 식별자 뒤 괄호 O 함수 (ex alrert('..

PNU Quiz의 result페이지에는 로딩바 기능이 있었다. result.html이 띄워질 때 메인 콘텐츠를 숨겨뒀다가 n초 뒤에 나타나게 하고, 로딩바는 n초 뒤에 사라지게 함으로써 유저가 로딩바를 n초 동안 봤다가 메인 콘텐츠를 볼 수 있게끔 만들었다. 해당 코드는 다음과 같다! 얼핏 보기에는 정상적으로 작동하나 싶었는데... 문제 발생. '익명 님의 성적표~~'에 해당하는 부분(메인 콘텐츠)은 분명 .hide()를 통해 숨겨뒀다. 하지만 웬걸, result.html이 뜨고 약 0.3초 정도 동안 이 녀석들이 나타나는 게 아닌가! 지금 생각해보면 당연한 일이지만 어째서 이런 일이 발생했는지, 어떻게 해결할 수 있는지 알아보자. 1. onload() ? result.js는 window.onload()..

js를 통해 열심히 페이지를 작성했는데... 브라우저마다 보이는 화면이 다르면 몹시 슬플 테다. '모든 웹 브라우저에서 정상적으로 작동하게 만드는' 것은 중요하면서도 꽤나 어려운 일. 이 때문에 다른 사람이 만든 라이브러리를 사용하곤 하는데, 이것이 바로 jQuery! 제일 먼저 html과 우리의 js를 연결. 그런데 jQuery는 다른 사람이 만들어 둔 라이브러리라고 했다. 따라서 요놈도 script로 받아와야 한다! 그럼 누가 만든 라이브러리를 받는디? 구글에 쳐보면 많다! 여기서는 made in 구글을 이용. 희한하게 생긴 $ 가 붙어있다. 요놈은 jQuery 라이브러리의 함수! 기본적으로 $().메소드(, ) 의 형태로 사용된다. jQuery에서 객체를 생성하기 위해서는? document, css..

js에서는 페이지에서 일어나는 여러 이벤트들을 지정할 수 있다. 대충 적어봐도... 마우스, 키보드, 사용자 인터페이스, 터치, 구조 변화 등! 생동감 있는 페이지를 위해선 어느 하나 빼놓을 수 없다. 역시나 js파일은 외부참조! webevent.js라는 파일을 만들었다. html상에 버튼을 하나 만들어줬다. onclick속성을 통해... 클릭하면 buttonClick이라는 함수가 작동된다. 요놈은 어디에? 아항! js 파일에서 이렇게 buttonClick 함수를 만들어줬다. 작동하면 클릭 이라는 경고창을 띄운다. 잘 뜨는구만. 이렇게 id를 지정해 불러올 수도 있다! id를 통해 객체를 지정할 테니 getElementById를 사용했다! 요 button은 onclick이벤트를 가지는데... 이 녀석을 ..

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..

행요를 개발했을 때, 카카오맵 API를 받아와서 사용했다. 처음 해당 코드를 본 순간... 느껴졌던 당혹감. 난생처음 만난 JavaScript. 뭐가 뭔지 도무지 알 수가 없었다. 덕분에 지도와 관련된 부분은 일절 다룰 수가 없었다. 속상. 그런고로... JavaScript를 정말 기초부터 시작할 예정. 참고 교재 : 자바스크립트 프로그래밍 입문 , 윤인성 저 1. 파일 생성 및 실행 JavaScript파일을 만들기 위해 js 확장자를 달아준다. 실행을 위해 python처럼 node + 파일명! 2. 연산자 파이썬의 print와 유사한 개념(인 듯 싶은...?) → console.log! 비교 연산자는? >, 30>20 ← 이렇게 적어버리면 False가 나온다..! 왜냐? 왼쪽부터 계산하므로 40>30 ..