자바스크립트 공부 : 1. 자바스크립트의 기초
- IT 기획자/IT기획자의 개발공부
- 2020. 2. 6. 15:57
자바스크립트 공부 : 1. 자바스크립트의 기초
#다시 시작
자바스크립트를 한참 공부하다가..
회사에서 직무가 바뀌어서 공부를 중단했었는데..
다시 돌고돌아서 자바스크립트가 필요한 상황이 되었다.
사람은 역시 게으르면 안된다.
무슨 일이 벌어질지 모르니, 공부할 수 있을때에는
공부에 열중하도록 해야겠다.
자바스크립트의 기초부터 다시 복습할겸
포스팅을 이어가보도록 하겠다.
#자바스크립트란?
자바스크립트(JavaScript)란?
자바스크립트(JavaScript)는 객체(object) 기반의 스크립트 언어.
HTML로는 웹의 내용을 작성.
CSS로는 웹을 디자인.
자바스크립트로는 웹의 동작을 구현.
자바스크립트는 주로 웹 브라우저에서 사용되나,
Node.js와 같은 프레임워크를 사용하면 서버 측 프로그래밍에서도 사용 가능.
* http://www.tcpschool.com/ 참고
#코드로 복습하기
생활코딩의 WEB > WEB2 - JavaScript 강의.
수업의 목적
HTML과 JavaScript의 만남 1 (script 태그)
HTML과 JavaScript의 만남 2 (이벤트)
을 복습한 내용의 코드이다.
<!DOCTYPE html>
<html lang="en" dir="ltr">
<head>
<meta charset="utf-8">
<title></title>
</head>
<body>
<input type="button" name="버튼1" value="버튼1" onclick=alert("hi")>
<input type="text" onchange=alert("changed");>
<input type="text" onkeydown=alert("keydown!")>
<!--
웹브라우저에서 이뤄지는 사건, 즉 이벤트
onclick이라는 이벤트가 실행되면 alert라는 자바스크립트코드가 실행된다.
onclick onchange onkeydown 어트리뷰트와 같은 여러 이벤트들로 웹페이지는 유저와 상호작용한다.
--!>
<br>
<h1>동적인 javascript</h1>
<script type="text/javascript">
//웹페이지는 이 안에 있는 내용은 자바스크립트로 인식한다.
document.write(1+1);
</script>
<h1>정적인 HTML</h1>
1+1
</body>
</html>
1. 정적인 HTML & 동적인 자바스크립트
<h1>동적인 javascript</h1>
<script type="text/javascript">
//웹페이지는 이 안에 있는 내용은 자바스크립트로 인식한다.
document.write(1+1);
</script>
<h1>정적인 HTML</h1>
1+1
HTML은 정적인 것을 표현
자바스크립트는 동적인 것을 표현
HTML코드는 1+1이 출력
자바스크립트는 2가 출력
2. 이벤트
<input type="button" name="버튼1" value="버튼1" onclick=alert("hi")>
<input type="text" onchange=alert("changed");>
<input type="text" onkeydown=alert("keydown!")>
웹브라우저에서 이뤄지는 사건, 즉 이벤트
onclick이라는 이벤트가 실행되면 alert라는 자바스크립트코드가 실행된다.
onclick, onchange, onkeydown 어트리뷰트와 같은 여러 이벤트들로 웹페이지는 유저와 상호작용한다.
'IT 기획자 > IT기획자의 개발공부' 카테고리의 다른 글
| 자바스크립트 : 객체와 반복문 사용방법 및 예제 (0) | 2020.02.10 |
|---|---|
| 자바스크립트 : 객체 쓰기와 읽기 방법 요약정리 (0) | 2020.02.10 |
| HTML 한글깨지는 경우 해결방법 (0) | 2020.02.05 |
| HTML/CSS 공부하기 좋은 사이트 모음 (0) | 2020.02.04 |
| HTML 에디터 Atom 설치방법 (1) | 2020.02.03 |
