자바스크립트

6. window.open 활용

위 코드를 살펴보면, 버튼 타입의 태그 2개와 텍스트타입의 태그 1개를 만들었다. Open 버튼 클릭 시 onclick으로 winopen() 이라는 함수가 호출되고, 텍스트필드에서 onkeypress 를 통해 텍스트 입력 시 winmessage(this.value) 함수가 호출된다. 여기서 this.value는 텍스트필드에 입력한 값이 되며 이 내용에 대한 자세한 부분은 나중에 이벤트부분에서 설명한다. 그 다음 Close 라는 버튼 클릭 시 onclick으로 winclose() 함수가 호출된다. winopen() 함수는, open.html 문서를 작성한 width와 height에 맞게 새 창(window)으로 연다. 정리하면, window.open 이라는 메소드를 통해서 연 새로운 창의 window 객체..

5. window.open

window 객체는 전역객체이며 브라우저 창에서 가장 큰 단위의 객체라고 할 수 있다. 그 중 window의 open함수는 새로운 창(window)을 여는 것이다. 간단한 코드로 확인해보면, 여기서 태그는 리스트 관련 태그이다. ul은 unordered list 라고 해서 순서가 없는 목록을 만들 때 사용되며, li는 list item으로 ul 내부에 사용해서 각 항목을 표시한다. 순서가 없기 때문에 동그란 점 처럼 생긴 불릿(bullet, ●)으로 항목들을 나타낸다. input 태그는 버튼을 클릭했을 때(onclick) 각각 open1~5 의 함수를 호출한다. 해당함수는 window.open으로 각각 인자가 다르며 open.php 라는 파일을 각 인자값에 맞게 로드시킨다. # open.php open...

4. location 객체

location 객체란 ? 현재 브라우저 창에 열려있는 문서의 URL에 대한 정보를 얻을 수 있는 객체이다. 크롬 개발자도구를 이용해서 테스트 해본다. 1) 현재 브라우저의 URL 알아내기 console.log는 콤마(,)로 인자값을 더 할 수 있다. 현재 브라우저창에 띄워진 창의 URL 주소를 출력하는 것을 확인할 수 있다. 인자값으로 들어간 location.toString() 과 location.href 둘 다 현재 window의 URL을 알아낼 수 있는 방법이나, location.href 가 조금 더 선호되는 방식이다. 2) location 객체에 대한 정보 console.log(location)은 location 이라는 객체에 대한 정보를 보여준다. location 이라는 객체에 대한 프로퍼티들을..

3. 사용자와 커뮤니케이션[alert, confirm, prompt]

1. alert 경고창이라고 부르며 사용자에게 정보를 제공하거나 디버깅 등의 용도로 많이 사용된다. 경고창이 실행되는 동안(확인을 누르기 전까지는) 다음 코드가 실행되지 않는다. 단순한 경고(알람)창이 뜬다. alert('1') 이 실행된 후 다음코드인 alert('2') 가 실행되려면 저 확인버튼을 눌러야 한다. 그 전 까지는 멈춰있는 상태. 2. confirm 확인과 취소버튼이 있다. 확인을 누르면 true를, 취소를 누르면 false를 리턴한다. if 문에서 true 면 alert('OK') 를 실행하고 true가 아니라면 alert('NO') 를 실행한다. 3. prompt 사용자가 입력한 값을 받아 자바스크립트가 해당 값을 얻는다. 텍스트필드가 있으며 텍스트필드에 입력한대로 값이 리턴된다. pr..

2. 전역객체 window

Window 객체란 ? 웹브라우저에서 창(window)을 나타내는 객체이다. 이것이 무엇인지는 정확히 모르겠지만, 자바스크립트의 내장함수나 사용자가 임의로 만든 함수나 변수 등 모든 객체나 프로퍼티는 이 window 에 소속되어 있다. window 라는 객체의 메소드는 전역 함수를 의미하고, window 라는 객체의 프로퍼티는 전역 변수를 의미한다. 크롬의 개발자도구를 통해 확인해보면, alert('hello') 코드로 hello 라는 알림창이 떴다. 앞에 window. 을 붙혀도 위와 동일하다. 앞서말했다시피 자바스크립트의 모든 메소드, 프로퍼티들은 window에 속해있다. 위의 예로 알수있듯 모든 객체나 메소드 프로퍼티들은 앞에 window. 이 생략되어 있는 것과 같다. 다시한번 확인해보면, a=1..

1. HTML 에서 JavaScript 사용

* 생활코딩 유튜브 영상을 토대로 정리함 HTML 과 JavaScript(줄여서 "JS) 는 완전히 다른 언어이다. HTML은 정보를 제공하는 역할을 하고, JS는 제어를 담당하는 역할을 한다. JS를 작성하는 방식은 크게 3가지가 있다. 1. Inline 방식 태그에 직접 JavaScript(js)를 작성하는 방식이다. 태그에 연관된 js가 분명하게 드러나는게 장점이지만, 정보를 담당하는 HTML과 제어를 담당하는 JS가 섞여있어 가치가 떨어지며 유지보수가 어려운 단점이 있어 HTML과 분리하는 것을 권장하기에 잘 사용되지 않는다. 간단한 코드로 살펴보면, test 다른 부분은 visual studio code에서 'html:5' 키워드를 통해 자동으로 생성된 코드이며 body 영역만 작성했다. h1은..