본 게시글은 유튜브 생활코딩 온라인강의를 시청한 후 학습한 정보를 기록하는 목적의 게시글입니다.
생각의 흐름에 따라 작성된 게시글입니다. 가독성이 떨어질 수 있습니다.
생활코딩
일반인에게 프로그래밍을 알려주는 온라인/오프라인 활동 입니다.
www.youtube.com
생활코딩
hello world 생활코딩의 세계에 오신 것을 환영합니다. 생활코딩은 일반인들에게 프로그래밍을 알려주는 무료 온라인, 오프라인 수업입니다. 어떻게 공부할 것인가를 생각해보기 전에 왜 프로그래밍을 공부하는 이유에 대한 이유를 함께 생각해보면 좋을 것 같습니다. 아래 영상을 한번 보시죠. 온라인 강의 소개 입문자의 가장 큰 고충은 '무엇을 모르는지 모르는 상태'일 겁니다. 온라인에는 프로그래밍을 익히는 데 필요한 거의 모든 정보가 있지만, 이 지식들은
opentutorials.org
"어떤 문제가 우리 삶에서 중요하고 심각할 수록
그 문제를 해결해 주는 공부는 문제로부터 우리를 해방시켜줄겁니다."
(생활코딩 : Web1 -1 수업소개. 중)
#0.
생활코딩 학습 두번째 파트입니다.
시작해보겠습니다!
JavaScript의 첫 단원은 HTML과 JavaScript의 만남입니다.
#1.
기본적으로 자바스크립트는 HTML위에서 동작하는 언어입니다.
HTML 안 <script>의 코드 내부에는 자바스크립트의 코드가 위치하도록 약속되어 있습니다.
그렇다면 단순한 html 코드와의 차이점이 무엇일까요?
자바스크립트는 계산등의 다양한 활동들이 지원된다는 점이 가장 큰 차이점으로 뽑을 수 있습니다.
#2.
<!DOCTYPE html>
<html>
<head>
<meta charset="utf-8">
<title></title>
</head>
<body>
</body>
</html>기본 html의 구조입니다.
제일 좌측에 'hi'의 버튼 먼저 살펴보겠습니다.
<input type="button"> 으로 버튼을 생성할 수 있습니다.
value="value"로 버튼 위에 value를 표시할 수 있습니다. 여기서는 hi가 되겠네요.
onclick="alert('value')"로 버튼을 클릭 시 value를 출력하는 경고창을 뛰울 수 있습니다.
여기서 onclick이란 속성에 대하여 잠시 살펴보겠습니다.
html에서 onclick의 속성 값은 반드시 자바스크립트가 와야합니다.
웹브라우저 입장에서 onclick 코드를 만나면, 그 속성을 기억하고 있다가 클릭이 이루어지면 실행하게 됩니다.
이러한 일련의 활동을 '이벤트(event)'라고 말합니다.
두 번째 줄의 onchange는 text의 내용이 바뀌었을 때,
onkeydown은 key가 눌러졌을 때 반응하는 이벤트입니다.
여러가지 사건들 중 기념할만한 사건들은 event라는 이름으로 웹브라우저가 기억하고 있는 것입니다.
다른 이벤트의 내용은 JavaScript event로 검색한다면 정보를 알 수 있겠죠?
https://www.w3schools.com/js/js_events.asp
JavaScript Events
JavaScript Events HTML events are "things" that happen to HTML elements. When JavaScript is used in HTML pages, JavaScript can "react" on these events. HTML Events An HTML event can be something the browser does, or something a user does. Here are some exa
www.w3schools.com
#3.
생활코딩 유튜브에서는 다른 예시를 들었지만 저희는 다른 방법으로 JavaScript의 또 다른 만남을 알아보겠습니다.
Crome브라우저 기준 우클릭 > 검사를 누른다면 그 페이지의 html코드를 확인할 수 있습니다.
이후 Elements 탭에서 esc 버튼을 클릭한다면 Console 창을 띄울 수 있습니다.
위 사진처럼 JavaScript의 코드를 콘솔창에서 활용할 수 있습니다.
.length는 해당 문자열의 개수를 알려주는 코드입니다.
이 콘솔에서 작업하는 그 과정은 임시로 수정된 html 파일을 반영하여 확인할 수 있습니다.
예시는 html코드를 들었지만, 이는 자바스크립트 역시 가능합니다.
'오픈튜토리얼스 > 생활코딩 : Web1' 카테고리의 다른 글
| [생활코딩|WEB_JavaScript#2] 변수와 대입연산자 2020.01.21 (0) | 2020.01.19 |
|---|---|
| [생활코딩|WEB_JavaScript#1] Data Type, 문자열과 숫자 2020.01.19 (0) | 2020.01.19 |
| [WEB1|발전과제] 유니코드(Unicode)와 UTF-8 (0) | 2019.12.31 |
| [WEB1|발전과제] FTP 통신이란? 윈도우(방화벽, CMD), 리눅스(Ubuntu) FTP 환경설정 (0) | 2019.12.30 |
| [생활코딩|WEB1#7] 웹서버 운영하기:윈도우 2019.12.27 (0) | 2019.12.27 |
최근댓글