웹페이지를 동적으로 사용자와 상호작용 할 수 있도록 기능을 추가한 것이 자바 스크립트 ex) 게임
1. JavaScript를 넣는 방법
웹브라우저한테 HTML의 코드로 지금부터 J.S가 시작됩니다를 알려 줘야 한다.
웹브라우저는 <script></script> 사이에 있는 코드를 j.s로 해석한다. 어느 태그 밑에 써야하는 것은 아니고 <body> 사이에 넣든 <head> 사이에 넣든 상관없다.
<h1>JavaScript</h1>
<script>
document.write(1+1);
</script>
<h1>html</h1>
1+1
여기서 j.s 안 쓰고 그냥 1+1을 쓰면 되지 않느냐 하지만 j.s는 계산 기능까지 있기 때문에 차이점이 있다.
화면에 출력하면 1+1이 j.s는 2 / 밑에 1+1은 그대로 나온다.
SO, 웹페이지에 글씨를 출력할 때는 document.write를 쓴다.
2. JavaScript event = on 속성들 (html과 상호작용하는 데 핵심이 되는 것)
웹브라우저 위에서 일어나는 일들을 사건이라하고 event라 부른다.
버튼 만드는 방법: <input>태그 사용 + type속성 에다가 button + 글씨 넣고 싶으면 value 속성에다가 치면 된다
<input type="button" value="hi">
text를 쓸 박스를 만드는 방법: <input type="text">
버튼을 클릭했을 때 경고를 뜨게 하고 싶다:onclick 속성을 이용한다. 구글링: javascript alert
<input type="button" value="hi" onclick="alert('hi)">
내용이 변했을 때 이벤트를 체크하고 싶다:
<input type="text" onchange="alert('changed')">
를 입력하고 text 창에다가 아무거나 쓰고 enter를 누르거나 아니면 커서를 바깥에 클릭하면 changed가 뜬다.
ㄴ 그 text창에서 커서가 벗어나게 되면 뜬다는 것
ㄴ 내용을 뭐라쓰고 다시 원상태로 복귀해두고 바깥에 누르면 changed 안됐으니 안 뜬다.
사용자가 어떤 키를 눌렀을 때 이벤트가 발생하게 하고 싶다: 구글링: javascript key down event attribute
어떤 타자를 칠 때 마다 경고가 뜬다.
<input type="text" onkeydown="alert('key down!')">
이렇게 웹브라우저는 웹브라우저 위에서 일어나는 여러 사건 중에 기념할 만한 것들 약 10~20개 정도 되는 이벤트들을 정의해 놓고 있다. 우리는 이런 이벤트를 이용해서 사용자와 상호작용하는 웹페이지, 웹사이트를 만들 수 있다.
3. 실용적인 js방법 = Console
웹페이지에서 개발자도구안에 있는 console에 들어가면 된다. 그러면 따로 파일을 만들지 않고도 js 코드를 즉석에서 실행할 수 있다. 데이터를 처리해야할 때 console을 계산기 쓰는 것 처럼 쓰면 된다.
긴 텍스트의 총 글자수를 알고 싶을 때면 'xx' 로 묶어준 후, 앞에는 alert( 뒤에는 .legnth) (문자열의 문자 개수를 알려주는 명령어)로 묶어주면 뜬다.
alert('xx'.length)
js를 이용해서 엄청나게 많은 사람들이 참여한 댓글 이벤트에 랜덤으로 4명 혹은 2명 등 뽑기가 가능하다.
ex) FB에서 역시 개발자도구를 사용할 수 있는데 Elements 탭에서 ESC를 누르면 밑에 console이 뜬다. 다시 ESC를 누르면 사라지고. 이 console에다가 알맞은 코드를 넣으면 내가 원하는 기능을 실행시킬 수 있다.
이렇듯 만들고 있는 웹사이트 뿐만 아니라, 이미 만들어져 있는 웹사이트에다가도 js를 이용하여 현실의 문제를 간단히 해결할 수 있다.
4. 데이터 타입(자료형) 알아보기
js에는 어떤 형태의 데이터들이 있는가를 살펴보고, '문자와' '숫자'를 이해하는 시간
.가 무슨 의미인지, ()가 어떤 문법인지 이해할 필요보단 익숙해지는 것이 먼저이다.
나중에 이론을 통해서 경험을 좋게 압축할 수 있을 것이다.
구글링: JavaScript data type
string: 문자
문자열과 숫자라는 데이터 타입을 통해서 어떤것 . 성격을 알아보자
숫자에는 연산이 중요하다 ( +,-,/,* ) = 산출 연산자 4개
#문자
"로 시작 "로 끝
'로 시작 '로 끝
'~'.length
javascript string 을 구글링하면 많은 예시가 있다
'hello world'.toUpperCase
= 소문자를 대문자로 바꿔준다
'hello world'.indexOf('문장에서 몇 번째에 나오는 지 알고싶은 문자')
'hello world'.indexOf('O') = -1 (대문자 O는 이 문장에서 없다)
'hello world'.indexOf('o') = 4 ( 0부터 시작을 기준으로 4번째에 o가 나온다)
'hello world'.indexOf('world') = 6 (6번 째에 이 단어가 나온다)
' hello '.trim()
→'hello' 로 공백 없애줌
1 = 숫자
"1" = 문자열
1+1 = 2
"1"+"1" = "11"
문자열이나 숫자냐에 따라 결과가 많이 달라질 수 있기 때문에 항상 데이터 타입을 정확하게 표현하는 것에 관심을 가져야한다.
5. 변수와 대입 연산자 활용 배우기
대입 연산자 = 변수 = 바뀔 수 있는 어떤 값 = variable = var
오른쪽 항의 값을 왼쪽의 변수에 대입한다. 좌항과 우항의 값을 결합해서 우항의 값을 만들어 낸다.
x=1; y=2; x+y = 2
상수 = constant
변수를 사용할 때는 가급족 var를 앞에 붙여준다.
var name = 'egoing';
실행을 유보하고 싶을 때는 shift + enter
오른쪽 클릭 개발자도구 console에 name이라는 변수를 입력해서 글 안에 "+name+"을 채워 넣으면 변수라는 sung 입력이 가능하다. sung을 바꾸고 싶을 때는 변수를 수정하면 끝!
name = 'sung';
alert("Web is a computer programming system created by Donald E. Knuth as the first implementation of what he called literate programming: the idea that one could,"+name+"create software as works of literature, by embedding source code inside d"+name+"escriptive text, than the reverse (as is common practice in most programming languages), in an order that is convenient for exposition to human readers"+name+", rather than");
6. JS로 웹페이지를 제어하는 구체적이고 중요한 테크닉 배우기
style라는 속성의 속성 값으로는 CSS라는 HTML과 JS와는 완전히 다른 컴퓨터 언어가 오도록 약속되어 있다. 이 언어의 역할은 디자인이다.
<body style="background-color:black; color:whie;">
HTML은 한 번 화면에 표시되면 자기를 바꿀 능력이 없는 정적인 언어이다.
7. CSS의 중요한 문법
- 어떤 특정 태그를 CSS라는 언어로 디자인하고 싶을 떄는 style라는 속성을 쓰고 그 안에 CSS의 속성이라는 문법을 쓰면 된다. 태그 선택자
- <style>라는 태그를 사용하는 방법 <head></head> 사이에 넣기.
- <body>안에 넣을 시, 중간에 <div stlye="~~: ~;" or class="~" stlye="~~: ~;" or id: stlye="~~: ~;">하고 싶은 말 </div> or <span>''</span>
- 선택자 class=xx사용시 .xx 을 쓴다.
- 선택자 id-:"xx" 사용시 #xx을 쓴다.
8. 실전
구글링해서 나온 코드들의 대소문자 구분은 중요하다. 마음대로 바꾸면 안된다.
<input type="button" value="night" onclick="
document.querySelector('body').style.backgroundColor = 'black';
document.querySelector('body').style.color = 'white';
">
<input type="button" value="day" onlclick="
document.querySelector('body').style.backgroundColor = 'pink';
document.querySelector('body').style.color = 'white';
">
구글링: javascript select tag by css selector
document.querySelector(".example");
웹브라우저에게 질의한다. css의 selector
이 웹페이지에 있는 모든 태그 중에 클래스명이 myclass인 태그를 선택하는 선택자
구글링: javascript element style
document.getElementById("myH1").style.color = "red";
== document.querySelector
글자색을 의미하는 stlye.color 만 가져간다.
구글링: javascript style background color
document.body.style.backgroundColor = "red";
같은이유 .style.backgroundColor 만 가져가고 배경색을 의미
#QUESTION.
backgroudcolor에 대한 태그를 검색하니 style.backgroundColor = "red"; <---이렇게 나오더라고요. red를 감싸는 따옴표가 큰 따옴표(" ")로 나오는데, 이렇게 큰 따옴표(" ")를 넣으니 안되고, 작은 따옴표( ' ' )를 넣으니 되더라고요. 이고잉님께서도 영상에서 작은 따옴표를 사용하셨구요. 그렇다면 저기 w3school에 나와있는 문법이 잘못된 건가요?? 아니면 제가 이해를 못한 건가요???
#ANSWER
onclick=" 여기서 이미 "를 사용했기 때문에 만약에 "black"으로 사용한다면 닫을 때 " " 두 번을 닫아야 하기 때문에 그렇게 되면 실행이 안 된대요! 그래서 ' '를 써야 한답니다 ㅎㅎ
#사람이 하기 힘든 일을 하도록 만든 컴퓨터 언어
시간에 순서에 따라서 실행되어야 할 기능을 프로그래밍 언어의 문법에 맞게 글로 적어두는 방식
HTML은 컴퓨터 언어 = 웹페이지를 묘사하는 목적 BUT 시간의 순서에 따라 실행되는 것이 없다.
JS는 컴퓨터 언어 이자 컴퓨터 프로그래밍 언어 = 사용자와 상호작용 하기 위해 만들어진 언어
순서를 만드는 행위 = 프로그래밍
만드는 사람 = 프로그래머
'[자기계발] > 유튜브로 코딩배우기' 카테고리의 다른 글
| <유튜버 - 생활코딩> WEB2 - JavaScript 24~ (0) | 2021.01.22 |
|---|---|
| <유튜버 - 생활코딩> WEB2 - JavaScript 14~ (0) | 2021.01.19 |
| <유튜버 - 생활코딩> WEB2 - CSS - 2 (0) | 2021.01.13 |
| <유튜버 - 생활코딩> WEB2 - CSS (0) | 2021.01.12 |
| <유튜버 - 생활코딩> WEB1 - INTERNET 17~32 따라하기 (0) | 2021.01.12 |
