스쳐가는비
devtravel
스쳐가는비
전체 방문자
오늘
어제
  • 분류 전체보기 (108)
    • 🎵 Daily (9)
    • 📚 Computer Science (9)
    • └ Algorithm (9)
    • └ Design Pattern (2)
    • 🔥 Programming (0)
    • └ Python (1)
    • └ OpenCV (9)
    • └ ML & DL (5)
    • └ C++ (5)
    • └ C# (3)
    • 🔥 Web (0)
    • └ JavaScript (7)
    • └ HTML (6)
    • 📌 Tool (0)
    • └ Etc (0)
    • └ Git (2)
    • 📖 Certificate (0)
    • └ ADsP (6)
    • └ 사무자동화산업기사 (0)
    • └ 정보처리기사 (0)
    • └ 리눅스 마스터 (0)
    • └ SQL 개발자 (2)
    • └ 컴활 1급 (2)
    • 💻 OnlineJudge (0)
    • └ GoormEdu (0)
    • └ Baekjoon (49)
GitHub Contribution
Loading data ...

인기 글

최근 댓글

최근 글

티스토리

hELLO · Designed By 정상우.
스쳐가는비

devtravel

[JavaScript] script 태그, event 주기
└ JavaScript

[JavaScript] script 태그, event 주기

2022. 9. 7. 10:14

JavaScript는 웹 페이지에서 사용할 수 있는 유일무이한 프로그래밍 언어입니다.
또한 웹에 기초하기 때문에 html과의 밀접한 관련이 있습니다.
JavaScript의 가장 큰 요소는 사용자와 상호 작용을 한다는 것입니다.
사용자의 반응에 따라 결과값이 달라집니다.
웹 페이지는 실행이 될경우, 스스로 변화를 주지 못합니다.

하지만 JavaScript는 html를 제어하는 언어이기 때문에, 웹 페이지에 변화를 줄 수 있습니다.
CSS는 웹 페이지를 좀 더 꾸미고, 디자인에 치우쳐 있다면,
JavaScript는 웹 페이지를 좀 더 사용자에게 최적화시키고, 동적으로 만들어 줄 수 있다고 생각 할 수 있겠습니다.

 

JavaScript는 정적인 웹 페이지를 동적으로 만들어 줍니다.
웹 페이지는 HTML, CSS, JS로 이루어져 있습니다.
그중 HTML은 웹 페이지의 구조를 나타내고,
CSS는 웹 페이지의 스타일을 나타냅니다.
하지만 JS는 웹 페이지의 구조와 스타일에 변화를
줄 수가 있기때문에 더욱 재밌습니다.

우선 JavaScript을 사용하는 방법을 알아볼까요?
첫째로, JavaScript를 사용하기위해선, 꼭 명심하셔야하는건
<script></script> 태그 안에 사용을 하셔야 합니다.
아래 코드에서 확인해 보겠습니다.

위 코드에서 document.write('Study JS!'); 의 
의미는 write('') 안의 문자를 페이지 상에 출력 하겠다 라는 의미입니다.
위와 같이 JavaScript는 항상 <script>태그 안에
위치해 있어야합니다.

두번째로 event 입니다. 
JavaScript에서 동작하는 모든 동적 메소드, 등을
event라고 부릅니다. 
event 에는 많은 종류가 있습니다.
아래에서 좀 더 많은 정보를 얻으실 수 있습니다.
http://heavening.tistory.com/23

우선 event 중 자주 사용하는 onclick event로 
예를 들어보겠습니다.
버튼을 하나 만들어, 그 버튼을 눌릴경우 Hello! 라는 
새로운 알림이 뜨는 코드를 작성해보겠습니다.

Onclick event는 앞의 type=""안에 있는 객체를 
클릭 하였을 경우 발생되는 event입니다.
위의 코드에선 button이 만들어 져있고,
버튼이름이 event practice로 주어져있습니다.

해석을 하면 "input 을 할건데 button 타입이고,
값은 event practice로 줄거야. 그리고 이걸 누르면
Hello! 라는 알람이 떠야해." 로 할수 있겠네요.
실행 화면입니다.

여기서 event 버튼을 누를경우

이렇게 새로운 알람이 뜨게 됩니다!

 

'└ JavaScript' 카테고리의 다른 글

[JavaScript] Element의 추가와 삭제  (0) 2022.09.13
[JavaScript] Element의 선택과 변경  (1) 2022.09.13
[JavaScript] DOM이란?  (0) 2022.09.13
[JavaScript] CSS 란? CSS 다루기  (1) 2022.09.13
[JavaScript] Console 창 사용법, window 객체  (0) 2022.09.07
    '└ JavaScript' 카테고리의 다른 글
    • [JavaScript] Element의 선택과 변경
    • [JavaScript] DOM이란?
    • [JavaScript] CSS 란? CSS 다루기
    • [JavaScript] Console 창 사용법, window 객체
    스쳐가는비
    스쳐가는비
    The biggest risk is not taking any risk

    티스토리툴바