JavaScript 내용정리

« 2025/02 »
일	월	화	수	목	금	토
						1
2	3	4	5	6	7	8
9	10	11	12	13	14	15
16	17	18	19	20	21	22
23	24	25	26	27	28

Archives

Recent Posts

02-01 21:40

Today

Total

Link

Recent Comments

관리 메뉴

연의 기록 🪁

JavaScript 내용정리 - 1 본문

WEB/HTML+CSS+JS

JavaScript 내용정리 - 1

kite707 2021. 1. 1. 22:09

https://opentutorials.org/course/3085

WEB2 - JavaScript - 생활코딩

수업소개 이 수업은 https://opentutorials.org 를 만들어가면서 JavaScript에 대한 지식과 경험을 동시에 채워드리기 위한 목적으로 만들어진 수업입니다. 수업대상 이 수업은 웹 페이지를 사용자와 상

opentutorials.org

자바 스크립트 강의는 위 링크에서 볼 수 있다.

자바스크립트를 사용하려면 내용을 <script></script>태그로 감싸주어야 한다.

글을 쓰려면 아래와 같이 한다.

<!DOCTYPE html>
<html>
  <head>
    <meta charset="utf-8">
    <title></title>
  </head>
  <body>
    <script>
      document.write('hello world');
      document.write(1+1);
      </script>
      <h1>HTML</h1>
      <br>hello world</br>
      <br>1+1</br>
  </body>
</html>

HTML은 1+1을 입력하면 그대로 출력하지만 자바스크립트는 자동으로 2라고 계산하여 출력한다.

이벤트

<!DOCTYPE html>
<html>
  <head>
    <meta charset="utf-8">
    <title></title>
  </head>
  <body>
    <input type="button" value="hi" onclick="alert('hi')">
  </body>
</html>

이렇게 위와 같이 웹 브라우저에서 특정한 일이 발생했을 때 그것을 이벤트라고 한다.

https://linuxism.ustd.ip.or.kr/1705

javascript - 이벤트 리스트(event list)

onabort 이미지의 다운로드를 중지할 때 (브라우저의 중지버튼) onactivate 개체가 활성화될 때 발생 (태그의 기능이 작용할 때 발생하는 이벤트로 예를 들어 링크를 누를 경우 링크가 옮겨질때 발생

linuxism.ustd.ip.or.kr

위 링크에 이벤트 리스트가 잘 정리되어 있다. 실습을 조금 해보자.

<!DOCTYPE html>
<html>
  <head>
    <meta charset="utf-8">
    <title></title>
  </head>
  <body>
    <input type="button" value="hi" onclick="alert('hi')">
    <input type="text" onchange="alert('changed')">
    <input type="text" onkeydown="alert('key down!')"
  </body>
</html>

input type="text"를 입력하면 글자를 입력할 수 있는 상자가 웹페이지에 생긴다.

여기서 onchange는 값이 무언가 변화가 생긴 뒤 마우스 커서가 상자 바깥을 클릭하게 되면 반응한다.

onkeydown은 키가 입력되면 반응한다.

콘솔

이번 실습은 이 링크에 들어가서 진행할 수 있다.

https://web-n.github.io/web2_javascript/

WEB1 - Welcome

web-n.github.io

링크에 들어가서 개발자 도구를 열고 아래 코드를 입력해보자.

alert('The World Wide Web (abbreviated WWW or the Web) is an information space 
where documents and other web resources are identified by Uniform Resource Locators (URLs), 
interlinked by hypertext links, and can be accessed via the Internet.[1] English scientist 
Tim Berners-Lee invented the World Wide Web in 1989. He wrote the first web browser computer 
program in 1990 while employed at CERN in Switzerland.[2][3] 
The Web browser was released outside of CERN in 1991, first to other research institutions 
starting in January 1991 and to the general public on the Internet in August 1991.'.length)

이렇게 콘솔창을 이용해 글자수를 셀 수 있다. 또한 영상을 보면 콘솔창을 이용해 이벤트 당첨자를 선정하기도 하는 등 무궁무진하게 사용할 수 있다. 나중에 공부를 해서 꼭 써먹어 보도록 하자.

'WEB > HTML+CSS+JS' 카테고리의 다른 글

JavaScript 내용정리 - 3 (0)	2021.01.03
JavaScript 내용정리 - 2 (0)	2021.01.02
CSS 내용정리 - 선택자 (0)	2020.12.31
CSS 내용정리 - 4 (0)	2020.12.31
CSS 내용정리 - 3 (0)	2020.12.30

'WEB/HTML+CSS+JS' Related Articles

연의 기록 🪁

JavaScript 내용정리 - 1 본문

JavaScript 내용정리 - 1

이벤트

콘솔

'WEB > HTML+CSS+JS' 카테고리의 다른 글

티스토리툴바