@keyframe 이름 {0~100%}
animation-duration
animation-delay
animation-iteration-count
animation-direction : reverse | alternate
animation-timing-function
animation shorthand
animation 속성종류
semantic tag : Header는 header태그, 내용은 article, 내용에 연관있는거라면 section태그로 묶고, Sideinfo는 aside태그, Footer는 footer태그를 사용해라!
태그의 의미에 맞게 내용을 작성할때만 screenreader가 의미있게 해석가능
자바스크립트 : 정적인페이지에 dynamic한 효과들을 만들어줌. 이벤트기반으로 작동. 데이터를 객체형식으로 보관해줌.
자바는 COMPILE방식의 언어이다.
프로그램이 작동하는데있어서
자바는 SOURCE파일이있고 (JVM이 우리가만든 자바파일을 실행할때) 실제로 작동(실행)하는 목적파일-OBJECT파일(JVM에 전달되서 실행)이 다른데 이 경우를 COMPILE방식이라고 한다. 여기서 SOURCE파일을 OBJECT파일로 변환하는 과정을 COMPILE, BUILD라고 한다. 이런 COMPILE방식의 언어에는 C언어, 자바 등이 있다.
자바스크립트는 INTERPRETER방식의 언어이다.
SOURCE파일이 곧 목적파일(OBJECT파일)이다. 변환작업이 없다. 브라우져에 SCRIPT엔진(브라우져에서 SCRIPT만 처리하는)이 따로 내장되어있는데 우리가 작성한 코드(SCRIPT)가 따로 변환되는 과정없이 SCRIPT엔진에 의해서 그 즉시 한줄한줄 읽으면서 실행되는 경우를 INTERPRETER방식이라고 한다.
COMPILE <-> INTERPRETER
기존의 어떤 언어를 보완하거나 제어(조종)하기위해서 사용되는(역할을하는) 언어들을 SCRIPT언어라고 한다. JAVASCRIPT는 HTML과 CSS를 제어함.
자바스크립트는 INTERPRETER방식의 프로그래밍언어이면서 SCRIPTING언어이다.
래플(브라우져 개발도구의 콘솔에서 제공하는 기능)방식
READ : 읽어내고
EVALUATE : 평가(변수에들어있는게 얼마냐 이런것들)하고
PRINT : 출력하고
LOOP : 반복하고
명령어들이 하는 기본적인 기능들을 묶어서 REPL이라부름
자바스크립트는 래플(REPL)방식을 지원한다. 아주 간단하게 브라우져 개발도구(F12)의 CONSOLE창에서 래플이라는 방식을 사용해 볼 수 있음
CF)참고
SERVER APPLICATION을 만들수 있는 언어가
JSP(JAVA SERVER PAGE), ASP, PHP 이렇게 있었는데
node.js가 탄생함.
스크립트가 처음엔 브라우져에서 HTML CSS를 제어하기위해 탄생됐었는데 자바스크립트를 이용해서 서버언어를 구축할 수 있게됨. 더이상 SCRIPT형식이 아니게됨(HTML이나 CSS를 제어하기 위한 목적이 아니라 그자체로 서버의 역할을 하기 위해서 사용됨)
javascript의 다른 표현방식
Javascript2015(출시된 년도(현존최신버젼:2015)를 뒤에 붙인표현)
=ECMAScript2015(ECMA 스크립트에 출시된 년도를 뒤에 붙인표현)
=ES6(출시된 넘버링순으로 나타낸 표현)
CF)참고
자바스크립트는 자바에비해 유하게 처리하는게 많음. 엄격한 문법에의한 것이 아닌 이래도 되고 저래도 되는(?) 편인데 잠재적 오류를 유발함. 오류가 발생했을때 어떤것이 원인인지 찾기 힘든상황이 생김. 이걸 엄격하게 쓰기위해 만든것이 TYPESCRIPT(MICROSOFT사에서 만듦). 점차 유연한 언어가 엄격하게 가려는 방향들이 있음. 유연하다고 마냥 좋은게 아님.
참고로 자바와 자바스크립트는 연관없음. C언어를 베이스로한거라 유사성이있을수있으나, 다른언어임. 굳이 연관을 찾자면 그당시 JAVA가 핫해서 이름이 mocha였다가 -> livescript -> javascript 과정을 거쳐 바꼈다는 것 뿐이다. 참고로 자바스크립트는 1인개발자가 LISP라는 언어를 베이스로 일주일만에 만든 언어라고함.
javascript 이벤트속성 태그 : 이름이 on으로 시작함.
자바스크립트 공간
자바스크립트에서 문자열은 ''(홑따옴표) or ""(쌍따옴표)로 감싸줘야함.
누르면 클릭이벤트가 발생하고 안에 작성해준 내용이 실행됨.
alert()
브라우져마다 기본제공하는 폰트나 UI도 다 다르고 alert창도 다르게뜸.
이 안은 자바스크립트를 여러줄 쓸수있음. 세미콜론으로 구분
console.log : 개발자도구 Console에서 확인가능
내부스크립트 태그를 이용하는 방법. 문서내의 stript 태그를 작성.
script best positon : head태그 안에 작성시 브라우져가 html문서를 읽을때 위에서부터 아래로 실행시키는데 스크립트 안의 alert()를 만나게 되면 그 즉시 실행시킴. 그후 밑에있는 h1태그나 h2태그 등등 읽어옴.
script 태그내의 한줄주석(//), 여러줄주석(/* /)
함수(function)와 메서드의 차이 : function > method
function : 일련의 절차를 모아놓은 것. 일련의 절차를 처리하는 묶음.
method : 객체소속의 함수
Console은 결과만 출력하는게 아니라, 그 안에서 script를 실행할수 있음.
대화형으로 한줄 입력하면 한줄 결과를 돌려주는식으로.
현재 페이지내 요소(test1();)도 접근가능.
자바에서는 메서드를 변수에 못담음. 위와 같은 모습은 본적도없음!!!
여기서 변수 i에 담긴 값은?
console.log(i); 해보면
ƒ (x,y){ return x + y; } 가 변수 i에 담겼다는 걸 알수있다.
cf) 자바스크립트는 function타입이라는것도 있음 object타입, number타입, string타입, boolean타입...처럼
자바와 비교를 하자면, 자바는 클래스가 타입이었음. 클래스를 작성하면 곧바로 타입이됨. 자바스크립트는 그렇지않음.
자바스크립트도 객체지향언어이다. 자바처럼 객체를 사용하는 언어인데, 성격이 자바하고는 완전 다름. 자바가 클래스 기반으로 상속을 했다면, 자바스크립트는 프로토타입을 사용. 처리하는 방식이 다르다.
js에서 html태그를 가져올때 li에다가 getElement한 이후에 console.dir(li)해서 li의 객체구조를 열람하면 '속성명 : 속성값'으로 많은 속성들을 담고 있다는 걸 알 수있다. 내리다보면 이전에 배웠던 style속성도 있다는걸 확인할 수 있다.
DOM = Document Object Model
브라우져(내의 자바스크립트 엔진)에서는 문자열에 불과한 html문서를 자바스크립트 객체(DOM or Document)로 변환해서 저장해둠.
html, head, h1, li... 모두 다 하나의 자바스크립트 객체임. 그리고 이 모든 객체를 최상위 Document 객체 안에 변환해서 보관하고 있음.
li객체 밑에 style속성 겸 객체 밑에 backgroundColor속성 magenta로 변경!
