Web Development/JavaScript 6

6. JQuery 사용해서 문서 내 특정 요소로 객체 찾기(JavaScript)

JQuery는 로직을 재사용할 수 있도록 고안된 소프트웨어 라이브러리 이를 사용하기 위해서는 HTML로 로드해야 한다. JQuery가 있는 파일을 웹페이지에서 구해야 한다. (src = "_" 부분) 필요한 소스는 다운로드없이 스크립트내에서 가져올 수 있다. body 태그 아래에 Hello world코드를 만든다. $('body').prepend('Hello world'); 부분외에 나머지는 거의 고정으로 사용한다. 기본 문법 양식 $('li').css('color','red'); -> # $('_') => JQuery Function # 'li' => css selector 예제 코드가 길어서 나눠서 쓰겠다. 위의 박스는 DOM방식 아래 박스는 JQuery방식 head에는 각각의 박스 모양과 스타일, ..

5. 문서 내 특정 요소로 객체 찾기 (JavaScript)

TagName으로 객체찾기 (태그로 객체찾기) ClassName으로 객체찾기 (클래스로 객체찾기) id로 객체찾기 querySelector로 객체찾기 1. TagName으로 객체찾기 var 변수 = document.getElementsByTagName('태그 명'); 예시 HTML CSS JavaScript li라는 태그명을 document에서 찾아 lis라는 배열로 저장 (getElementsByTagName은 리스트로 반환) 0번째 (HTML), 1번째 (CSS), 2번째 (JavaScript)를 반복하면서 빨간색으로 바꿔준다. 이렇게 특정 ul을 접근해서 찾는 방법도 있다. 2. ClassName으로 객체찾기 var 변수명 = document.getElementsByClassName('클래스 nam..

4. 버튼을 누르면 새창 만들기(창 제어하기) (JavaScript)

버튼을 눌러 새로운 창으로 이동하거나, 현재 창에서 새로운창으로 열어보자. 메시지를 입력하고 버튼을 눌러 새로운 창을 열어보자. 팝업 생성을 해보자. 새로운 창에 로드할 문서의 URL이다. 인자를 생략하면 이름이 붙지 않은 새 창이 만들어진다. 현재의 창에서 새로운 창으로 이동한다. 즉, _self는 스크립트가 실행되는 창을 의미한다. _blank는 새 창을 의미한다. 창에 이름을 붙일 수 있다. open을 재실행 했을 때 동일한 이름의 창이 있다면 그곳으로 문서가 로드된다. 새로운 창을 만드는데 그 창의 크기와 모양에 관련된 속성이 온다. demo.html은 위와같이 작성해주고 Hello world demo2.html은 이와같이 작성해준다. open이라는 button을 만들고 누르면 winopen()함..

3. JavaScript에서 경고창(alert), 선택창(confirm), 검색창(prompt) 만들기

경고창(alert) button을 누를때 alertnc()함수를 실행 경고창1, 경고창2를 뜨도록 함 선택창 버튼을 누르면 이와 같이 뜬다. 확인을 누르면 확인 메시지 취소를 누르면 취소 메시지 확인, 취소버튼을 만든다. (True or False로 변환) 조건문과 같다고 생각하면 된다. 버튼이라는 button을 눌렀을 때 func_confiem()함수로 이동한다. 만일 ok?메세지를 보여주고 확인(True)을 선택했다면 'ok'라는 경고창 출력 취소를 선택했다면 'cancel'이라는 경고창 출력 입력창 사용자가 입력받은 값을 전달하거나 수행할 때 사용한다. 입력 창이라는 button을 클릭했을 때 func_prompt()함수를 실행한다. 그때 아이디를 입력하시오 라는 메시지를 띄우고 입력값이 egoin..

2. HTML에서 JavaScript 로드하고 경고창 만들기

주요 문법 HTML안에 JavaScript문법 넣어 버튼 만들기 alert('Hello world'); Hello world라는 경고창 띄우기 예제 우선 작성된 파일을 열기 위해서는 폴더를 더블클릭하거나 구글에서 ctrl+O 를 눌러 이와같이 선택해준다. "button"을 클릭했을 때 onclick(HTML)안에 alert(JavaScript)문법을 실행시킬 수 있다. 즉 button에 대한 동작을 진행한다. 이 방법은 HTML와 JavaScript가 함께 있으므로 비효율적이다. button이라는 클릭타입을 만들고 id는 hw로 선언한다. 그 값은 (보이는 값) Hello world이다. hw라는 element를 가져오고 변수 hw로 선언 addEventListener로 click이라는 반응이 일어났을 ..

1. JavaScript 실습을 위한 Sublime Text 설치하기

Download - Sublime Text Sublime Text 4 has been released, and contains significant improvements over this version. Sublime Text may be downloaded and evaluated for free, however a license must be purchased for continued use. There is currently no enforced time limit for the evalu www.sublimetext.com 사이드바를 생성하자. 위 상단에 [View] - [Side bar] - [Hide Side Bar]를 선택해서 이와같이 만들어준다. 그 이후 [File] - [New File..