본문 바로가기

🎪 놀고있네/Javascript12

[퍼온글] Intellij 에서 JavaScript 프로젝트 생성하기 https://jjam89.tistory.com/282 2023. 9. 18.
[JS] Javascript - Event 종류(form, document/windows events) 자바스크립트에서는 사용하는 이벤트는 일반적으로 4가지로 분류된다. mouse events, keyboard events, form events, document/windows events가 있는데, form events, document/windows events에 대해 알아보자. 이벤트 핸들러 종류이다. Event handler 설명 Form events onFocus 요소가 포커스를 얻었을 때 onBlur 요소가 포커스를 잃었을 때 onChange input 요소의 값이 바뀌었을 때 onSubmit 버튼을 클릭하여 폼 값을 제출할 때 onReset 리셋 버튼 클릭할 때 Document/Window events onLoad 웹페이지 로딩이 완료되었을 때 onUnload 웹페이지를 떠날 때 onresiz.. 2021. 12. 31.
[JS] Javascript - Event 종류(mouse, keyboard events) 자바스크립트에서는 사용하는 이벤트는 일반적으로 4가지로 분류된다. mouse events, keyboard events, form events, document/windows events가 있는데, 이번에는 mouse event, keyboard event에 대해 알아보자. 이벤트 핸들러 종류이다. Event handler 설명 mouse events onClick 마우스 버튼을 클릭 onDbclick 마우스 버튼을 더블클릭 onMouseover 마우스 포인터가 요소 위에 올라갔을 때 onMouseout 마우스 포인터가 요소 안에서 요소 밖으로 벗어날 때 keyboard events onKeydown 키보드의 키를 눌렀을때 onKeyup 키보드의 키를 눌렀다 떼는 때 onKeypress 키보드의 키를 눌.. 2021. 12. 30.
[JS] Javascript - Event 자바스크립트에서 이벤트(event)란 사용자가 웹페이지와 상호작용을 하는 모든 동작들을 말한다. 체크박스를 선택하고, 클릭하고, 키값 입력하고, 마우스를 움직이고하는 모든 동작들이 이벤트에 해당된다. 이벤트가 발생할때, 자바스크립트에 이벤트 핸들러(event handler, event listener) 는 이벤트를 감지하는 역할을 한다. 지정된 타입의 이벤트가 발생하면, 웹브라우저는 그 요소에 등록된 이벤트 핸들러를 실행시킨다. (e.g. 클릭이벤트 이벤트 핸들러는 onclick, 주로 on으로 시작함) 이벤트 핸들러를 가장 쉽게 사용하는 방법은 html 요소에 시작태그에 바로 추가하는 건데, 예를 들어 onclick 어트리뷰트를 버튼 요소에 추가해보면 1 Click Me cs Click Me 버튼을 클.. 2021. 12. 29.
[JS] Javascript - Data Types Java Script 에는 크게 3가지의 데이터 타입이 존재합니다. Primitive 는 원시타입이라고 불리고, string, number, booleans 가 있게됩니다. 다음으로는 obejct 타입이라고 불리는 composite 타입이 존재합니다. 나머지는 스페셜 타입으로 null, undefined data type 이 존재하게 됩니다. 크롬에서 한번 찍어보져 오브젝트도 한번 보져 쉽다쉽다 2021. 12. 13.
[JS] Javascript - Variable 이란 자바스크립트에서 variable 을 사용하는 방법입니다. variable: var variable_name: varName assignment operator: = value: value; 로 작성합니다. variable을 복잡하게 외우지 않아도 var 하나로 끝낼 수 있다는게 참 좋네여! 심지어 한번에 여러개의 variable을 선언할 수 있는데, comma (,) 로 구분해서 사용할 수 있습니다. 잘 되나 한번 볼까요? 쉽다쉽워 ㅃ2 너무 아무것도 안해서 쉬운거부터 천천히.. 허허허... 😥 2021. 12. 10.
[JS] HTML에서 JavaScript 분리하기 안녕하세요 냥장판 입니다 다른 일 하느라고 정말 진도가 안나가네요 😥 2주 내로 자바스크립트 끝내려고했는데... 허허허 이제 짬내서 열심히 해보도록 할게요 하하하하하하하 😁 완전 기초적인 것부터 시작해보려고 합니다! 이번 게시글에서는 HTML에서 JavaScript를 분리하는 것을 해볼거에요. 이렇게 하는 이유는 관리를 원활히 하려는 목적이 강해요. 아주 간단합니다! 1. JavaScript 파일 만들기 저는 example.js 로 된 파일에 간단한 스크립트를 작성해뒀어요. 2. script 태그에 src 사용하기 script 태그에 src를 사용할 거에요. 여기에 아까 만들었던 javascript 의 경로를 입력해줍니다. 소스코드는 아래와 같아요. 그럼 이렇게 바로 javascript가 호출되는 것을 .. 2020. 4. 21.
[JS] JavaScript 출력하기 - alert 메소드 안녕하세요 냥장판 입니다 지난 게시글에서는 JavaScript에서 사용하는 출력 메소드에 대해 알아보았는데요. 2020/03/13 - [놀고있네/Javascript] - [JS] JavaScript 사용하기 [JS] JavaScript 사용하기 목표: JavaScript 사용하기 - 기본편 요약: HTML 문서에서 JavaScript 출력하기 외부에 있는 JavaScript 파일 호출하기 안녕하세요 냥장판 입니다 지난 게시글에서는 JavaScript를 사용하는 이유에 대해서 살펴봤.. miaow-miaow.tistory.com 이번 게시글에서는 가장 간단하게 데이터를 출력할 수 있는 window.alert() 메소드에 대해서 알아보겠습니다! 1. alert() 메소드 사용하기 JS를 작성하는 방법은 HT.. 2020. 3. 30.
[JS] JavaScript 사용하기 목표: JavaScript 사용하기 - 기본편 요약: HTML 문서에서 JavaScript 출력하기 외부에 있는 JavaScript 파일 호출하기 안녕하세요 냥장판 입니다 지난 게시글에서는 JavaScript를 사용하는 이유에 대해서 살펴봤어요 2020/03/09 - [놀고있네/Javascript] - [JS] JavaScript 란 [JS] JavaScript 란 안녕하세요 냥장판 입니다 HTML과 CSS를 하다보면 JavaScript 라는 용어가 튀어나올 거에요. 이번 게시글에서는 JavaScript가 무엇이고 왜 사용하는지 알아볼거에요! 다 모르겠다고 하시면! HTML에 대한 설명은 아.. miaow-miaow.tistory.com 이번 게시글에서는 실제 JS(JavaScript)를 어떻게 사용해서.. 2020. 3. 13.