JavaScript (EventListener) Alert 박스 X 버튼1 버튼2 Parameter 포스팅에서 작성했던 코드입니다. 코드를 보시면 JavaScript 코드가 HTML에도 있어서 정리가 필요해 보여요. onclick과 같은 기능을 가지고 있으면서 HTML을 깔끔하게 정리해줄 수 있는 문법이 있어요. EventListener 문법이 우리의 HTML을 정리해줄 수 있는 문법이예요. EventListener : 이벤트를 듣는 자 어떠한 이벤트가 발생 했는지 확인을 하여 원하는 기능을 호출하는 것 입니다. Event, 이벤트 : 특정 행동 / 우리가 웹페이지에서 행하는 행동 click(클릭), mouseover(마우스오버), scroll(스크롤) 등과 같이 웹 페이지에서 이루어지는 행동을 이벤트라..
JavaScript (Parameter) function() 함수를 업그레이드 시킬 수 있는 바로 파라미터(parameter)입니다. 함수의 파라미터를 이해를 돕기 위해 "구멍"이라고 이야기를 하겠습니다. 앞서 사용했던 html을 parameter.html로 복사하여서 사용하였습니다. Alert 박스 닫기 버튼 위에 코드를 보시면 Alert 박스를 열고 닫기 위해 자바스크립트 함수를 두 개를 작성하였습니다. 여기에서 파라미터(parameter)를 사용하면 한 줄로 Alert 박스를 열고 닫을 수 있습니다. 파라미터(parameter) 사용하는 방법 1. 함수를 만든다 2. 데이터를 넣어줄 부분에 구멍을 만들어 준다 구멍은 여러개 사용할 수 있으며 콤마로 구별을 지어주면 됩니다. 예) alertOpen(구..
JavaScript (Function) 이번 포스팅에서는 function에 대해서 짧고 굵게 알아보겠습니다. 앞서 Alert에서 사용했던 코드를 활용해보겠습니다. Alert 박스 닫기 버튼 onclick 안에 작성된 코드를 보면 너무 길어 보입니다. 이렇게 긴 코드를 줄이기 위해 사용하는 기능이 function 입니다. function : 긴 코드를 깔끔하게 한 단어로 축약해서 사용하게 해주는 기능입니다. function 문법 function 아무렇게나작명(){ 긴 코드~~~ 긴 코드~~~ } '아무렇게나작명()'만 사용하여서 긴 코드를 불러와서 실행시킬 수 있습니다 그러면 Alert의 열기 버튼을 function을 사용하여 구현해보겠습니다. Alert 박스 닫기 버튼 길었던 코드 document.get..
JavaScript (Alert) 경고창과 같이 화면에 특정 행동을 했을 때 뜨는 창을 자바스크립트로 만들어 보아요~ ※ UI 만드는 법 1. 미리 디자인을 해놓고 숨긴다. 2. 버튼을 누르거나 특정 행동을 할 때 볼 수 있게 구현한다. UI 만드는 방법의 순서대로 Alert 기능을 구현해 보겠습니다. 1. 미리 디자인 하기! ① html 파일 생성 : alert.html (보여지는 디자인) Alert 박스 버튼 : css 파일을 html에 적용시키기 위해 링크로 불러오는 것입니다. href=""부분에 해당 css 파일의 이름과 경로를 작성하면 됩니다. Alert 박스 : Alert로 띄울 박스를 먼저 생성해 줍니다. ② css 파일 생성 : main.css (css로 숨기기) .alert-box { b..
단어 (풀단어) : [발음] 의미 * 주로 컴퓨터, 개발에 관련된 의미이며 모든 단어는 이 외에도 다양한 의미로 사용할 수 있습니다. compile : [컴파일] (컴퓨터)명령어를 번역하다 compiler : [컴파일러] (컴퓨터)명령어 번역 프로그램 print : [프린트] 출력하다, 인쇄하다 println (printline) : [프린트엘엔 / 프린트라인] 새로운 라인에 출력하라는 명령어 printf (print formatted) : [프린트에프 / 프린트 폴메티드] 형식에 맞게 출력하라는 명령어 format : [폴멧] 형식을 만들다, 구성하다 formatted : [폴메티드] 형식화된
JavaScript - Selector Selector 선택자 ※ selector: 선택장치, 선택자 요소를 제어하기 위해서는 어떠한 요소를 제어할 것인지 선택을 하여 컴퓨터에게 알려주어야 합니다. 컴퓨터에게 명령을 할 때는 자세히, 구체적으로 명령을 해주어야하기 때문에 어떤 요소인지 알려주는 방법이 바로 Selector(선택자)입니다. 선택자를 어떻게 사용할지 함께 연습해보겠습니다. ※ 저는 자바스크립트를 연습할 때 Brackets라는 프로그램을 사용했습니다. ※ 혹은 codepen.io를 사용하셔도 손 쉽게 HTML과 JavaScript를 실행시켜서 보실 수 있습니다. -> https://codepen.io/pen/?template=WNjggVm (codepen.io를 사용하여 Selector를 작성..