[DAY38] JavaScript
웹 구성요소(컴포넌트)들을 조정할 수 있는 프로그램이다
자바랑 상관 x
-> script 태그달기
-> 한줄짜리 주석, 여러줄 주석
-> ECMAScript(에크마스크립트)
script tag는 모든곳에 존재할 수 있다(정해져 있지 않음) - head, body 모두 가능함
-> int, double로 구분하지 않고 다 잡아서 number라고 부름
infinity 중요하지 x
+0으로 나누거나 -0으로 나누었을 때 발생함
char 묶을때 작은 따음표 string 묶을때 큰 따음표 -> 묶는 규칙 사라짐
-> 변수에 저장은 했는데 없는값을 저장했을때(초기화를 위해 저장한 경우)
-> (자바에서 차이) 자바에서는 null이 저장되어있음
-> (자바스크립트) undefined( 변수에 어떤 값도 저장된 적이 없는 경우)
-> (자바) 처음에 형 정해놓고 씀
-> (자바스크립트) 저장할때 타입이 결정 (a = 10 -> number 타입 저장, a= hello -> string 타입 저장)
-> 자바 스크립은 이런게 없음 ( int = a 정수 a다 선언자체가 없음)
-> ESC 가 나오면서 여러가지 형태 var/let/const 여러가지 생김
scope: 변수를 사용할 수 있는 범위, 위치(변수선언시 범위를 어디에서 어디까지 사용가능)
-> 우리가 알고 있는 level(block level)
-> 선언안하고 쓰면 var
-> 예전에는 var밖에 없었음
-> 타입 결정해서 프로그램 언어처럼 사용하기 위해서 나옴
재선언 : 변수를 선언하고 또 선언하는 행위
상수: 변하지 않는(final)=> 상수니까 저장된값을 바꾸지않음
-> C언어가 상수가 키워드임(constant :항상 같은 값을 가진다)
-> let은 초기화 생략 가능은 하지만 undefined 상태
-> 초기화가 되어있지 않아서 현재 생략되어있음
-> undefined값가지고 선언하려고 함
-> 생략은 했으나 a변수가 메모리에 만들어지지 않은 상태(실제로는 아무것도 안된상태)
-> a라는 상태가 없는 상태라서 사용하려고 하면 오류발생
-> 우리가 알고 있는 자바 특성을 가지고 있는 것 : let, const
-> document객체의 write 메소드
콘솔창을 이용한 출력
-> 작은따움표('')로 연습하기!
-> HTML 적어라(HTML해석해서 브라우저 화면을 만들어주겠다)
-> 값이 저장시키면서 타입이 저장됨(10이 저장되면서 number됨)
typeof : 키워드(연산자)
-> type과 값 모두 확인
-> 동적타입의 언어들(약간 근본없음)
: 파이썬(타입선언이 없음)-> 처음에는 쉽지만 나중에는 애가 뭘 저장하는지 모르니까 불편함
함수에서 사용할 수 있는 변수, 전역 변수(모든 지역에서 사용할 수 있는 변수)
-> undefined + 1(a에는 어떤 값도 저장될 수 없다)
-> 자바는 number라고 예상함 but 숫자인줄 알았는데 더하기 1이 안되니까
-> +1을 해서 number로 예상했지만 숫자가 아니다
isNaN() : NaN이다, NaN아니다 확인
-> 자바라면 arithmetic exception(0으로 나누는건 무한대)
<정리>
Hoisting(호이스팅)
-> 선언도 안했는데 미리 할당한다는 것? (선언을 안했는데 있다는 것?) 나중에 선언해도 된다
-> 초기화 되지 않음(무슨 값을 가진다고 표시되지x)
-> 안 만들었는데 부를 수 있다(안만들면 안되고 나중에 만들면 된다)
함수 = (자바) 메소드
메소드를 안만들었는데 호출할 수 있다
-> 선언이 되는 이유 : hoisting때문에
-> 선언도 안하고 쓴건데 잘 됨
코드의 최상단에 함수의 정의와 변수의 선언을 옮겨놓고 실행한다 (생각하기)
-> 코드를 두번 읽는다(1. 함수정의,변수 선언읽기 2. 나머지 정의)
-> 분리되서 처리된다
(hoisting에 의해서 선언부만 따로 빼고, 값을 넘는 대입부를 따로 함)
-> 두개의 코드로 자바스크립트 interpreter가 분리를했다
hoisting은 선언부가 빼서 위로 뺀 것
-> 오류 뜸
-> var y를 선행해서 위로 올림 (그때 undefined를 가짐)
-> let키워드는 let z 를 빼고 위로 올림(호이스팅되면 초기화되지 않아서 -> 값이 없음)
-> 자바는 애초에 컴파일 오류뜨면서 실행도 못하게 막음 여기서는 실행은 됨
int, double 구분 x
숫자-> 문자열로 바꾸기(빈문자열 더하기)
-> number를 만들때 쓰고 string을 만들때 쓴다고 해서
생성자는 객체를 만들떄 씀(별도로 구분해서 부르기 위해서 '생성자 함수')
생성자 함수 : 첫글자 '대문자'(관례 : 꼭 지키지 x)
-> 2.5을 정수로 바꾸라고 함수 쓴 것
-> 실제로 false 하고 0이 같지 않음
-> false는 0으로 같지만 둘의 타입은 다르다
-> 숫자 1 = 문자열 1 같은가?
-> 자바처럼 같다 할때는 등호 3개쓰기(===)(값이랑 타입이랑 같다)
-> 자바처럼 쓸거면 !== 쓰기!
-> 문자열 2 - 숫자 1 = 1
-> 12시간 일하면 -8해야 함
>★★★정확하게 비교하기
3개짜리 쓰기, 모든 타입에서 사용가능하다
-> 어떤 구성요소를 어디에 삽입하겠다, 수정하겠다 이런 작업을 수행하려면 모두 기반이 되는것이 어디에 생성할 것인가? 누구를 삭제할 것인가? 누구를 수정할 것인가?
-> 누구를 기준으로 작업을 할지 알아내기!!
document_object(문서객체 ; 문서를 구성하는 객체)
-> id 속성, class속성이 뭔지 찾아보기!
element 요소를 그대로 저장하고 사용할 수 있다
DOM
-> document(html 문서 자체를)
-> element byclass 사이에 s(복수형) 들어가기!
id(아이디) : HTML 문서 안에서 ID는 하나만 존재할 수 있다(똑같은 아이디 나오면 X)
-> 동일한 class가 여러개있을수 있어서 Elements임
-> 알아낸 구성요소가 하나인가 둘 이상인가에 따라서 구성요소 구분할 수 있음
elemetn, node 라고 부르는데도 잇고
-> 여러개 : nodelist
-> html을 인식시킨다음에(만들고) 가져오기(구성요소 알아내려면 먼저 만들어야 함)
-> ID 속성을 가지고 (혹시라도 동일한 ID를 여러개 만들면 첫번째 ID만 가지고 오겠음)
-> div태그 전체가 가지고 옴(태그채로 가지고있음)
1.태그이름 2.속성 3.태그 내부 텍스트
-> id와 class속성을 바꾸는 것 뿐만 아니라 새로운 속성을 넣고 싶다 하면 넣을 수 있음(완전히 바꿀 수 도 있음)
-> 일단 불러들이는 것이 우선임
-> id속성 이용해서 결과 확인
-> 대괄호[] : 배열 표기하는 방법
prototype : 미리 만들어놓은 doceument의 속성들, 함수들(class 속성, id속성 등 이러한 정보들)
-> 동일한 태그가 너무 많아서 tag이름으로는 잘 안씀
-> 선택자를 이용해서 , id(#box1)를 선택자로 써서 동일한건 하나뿐이다 => 그래서, querySelector 썼음
-> 결과는 같은데 Nodelist라고 이름만 바뀜
선택자 wrap 안에 있다(하위구성요소)
-> 어디에 있는 primary_box 라고 전부다 고르지 말고 명시하는것이 좋음
-> script 위 tag아래 -> 인식 x(null값)(순서잘못됨)
★tag 위, script 아래로 만들기!!(순서어기면 알아듣지 x)
-> p1에 p태그 자체가 저장됨
-> console에 Hello World나오는지 확인하기
태그 내부 텍스트
textContent : 태그 내부 text라는 뜻 (저장시키고 나서 호출하기)
-> 다르지 않음
-> 대입 연산 : 안녕하세요 전달
-> 내부 text가 바뀜
(원하는 태그 찾기 -> textContent 부르기 끝임)
-> 원래있던 Hello World는 덮어쓰기로 사라짐
-> 원래있던 것 뒤에 안녕하세요 + 반갑습니다 붙음
태그 내부 요소
-> tag strong은 빠지고 hello world만 나옴
-> strong 태그까지 인식시키고 싶다 하면
->innerHTML
-> mark는 형광펜 칠하기
-> 처음에 만들었던 Hello World보이지 않고 원래 있었던 것처럼
element에서 보이는 결과물은 javascript로 조작한 결과물을보는것(원래 태그라고 생각하면 틀림)
-> Hello World라고 만들었던 건 없음
-> ul 내부에 들어가는 것(결과 나옴)
->태그에 명시된 속성 : id
-> img에 명식된 속성 : src, width
태그 속성
-> p3문단 밑에 img
-> 속성값을 가지고 와서 어떤값이 적용되는지 알 수 있음
flower2로 바꾸기, 크기 절반으로 192px
-> img 태그이름만 남아있음(src다 사라짐)
setattribute
태그만 집어놓고 호출만 집어넣는과정
-> 자바스크립트는 문자열 내부에 ""(큰따음표)가 들어가는 경우가 많음
-> 작은따음표('')로 문자열 묶는 경우가 편함
site 밑에 li
li 태그 건너뛰어야 하니 : 후손 : 공백
-> setattribute를 한번더 부를 수도 있음
-> 셋다 똑같아짐
-> 빨간색 먼저 공부 ==> 파란색 공부하기!
객체 속성
-> 태그에 명시하는 것 ; 속성(attribute)
-> image : 객체
html을 그대로 가지고 와서 객체로 저장할때 속성들이 변환되서 드렁옴(id 속성, src속성,width속성도 다 변환되서 들어옴)
-> 똑같은 이름으로 들어오는 애들도 있고 다른 이름으로 변환되서 들어오는 애들도 있음
구성요소를 객체화 시켜서 저장될때 객체가 지닌 성격들(database 성격들) - 태그의 속성하고 동일한 경우도 있고 그렇지 않은 경우도있음
(ex) 자바객체가 가지고 있는 구성요소 ; field(필드)
이미지 태그가 문서 객체화 되서 저장될 때 가지는 속성들
이미지 태그 : attrvitue 는 2개(src , img)
properties 는 엄청 많음
attribute : 태그화 명시화 되는 속성 vs properties : 객체화 되서 가지는 속성
-> src 찾기
attribute ../../ 슬래쉬(태그에서 존재하는 attribute를 문서에서 가지고 올때)
변화과정을 거쳐서 같은값으로 올수도 다른 값으로 올수도
ip 주소 , 설치한 라이브 서버(5500 포트번호:라이브 서버로 설치)
-> width : px생략가능함
attribute와 properties는 둘다 '속성'이라 부르지만 (같은듯) 다르다
- attribute(태그속성) : 태그에 작성된 속성
- properties(객체속성) : 자바스크립트로 불러들였을때 저장했을때 나타나는 속성
-> 사실은 개념이지만 똑같지 않음(이름이 달라지고 저장하는 값이 달라짐)
-> 속성에 이름이 달라지는 case가 있음
radio 속성 input
-> true, false의 형태로 들어옴
attribute에서는 class
property는 className
checked 이름은 같으나 저장되는 값이 다름
- 모두 같은 경우
- 속성이름이 같은경우
- 속성이름은 같은데 저장된 값이 다른 경우
★★ 1) 마침표 표기법(객체 속성을 많이씀)
-> 객체뒤에 .(마침표) 찍고 속성을 부르는 경우
2) 대괄호 표기법
-> [대괄호]
-> 한가지는 안나와야함
**class : attribute는 문서객체로 저장될때 className이라는 값으로 저장됨
checked : 태그 적을때는 checked라고 되지만 저장될때는 true,false로 저장됨
**
-> 파란색 (뒤쪽에 적은게) proporties를 부른것( attribute와 같은 이름을 쓰는 경우가 대부분이지만 다른 경우와 쓰는 경우도 있음)
-> type을 적을때는 text로 작성하기
★★속성 : attribute인지? properties인지? 구분먼저하기!
★★★(면접) attr()과 prop() 차이? 하나는 태그 속성, 하나는 문서객체 속성
-> 일부러 외우지 x
properties 여는 방법
-> 여기 목록에 없으면 못 쓰는것
-> 참고하기(외우기는 불가:너무많음)
<properties 를 하는방법 vs attribute로 하는방법>
속성 이름 = 값 -> 속성값 생략할 수 있음
checked, readonly, disabled, requried, auto-focus --> 다 true, false로 바뀌어서 들어옴
-> 이미지를 바꾼다 , 링크를 바꾼다
-> 다 속성을 바꾸는 것이다
CSS처리하기
-> properties(문서 객체)
-> 뒤에 실제로 반영하고 싶은 CSS속성을 적어주기
text-align속성: 정렬 속성
-> 그대로 사용한다
-> -(하이픈 삭제), fontSize(s대문자로)
-> ''(작은따음표) 필요함
-> 둘 중에 한가지 방법 쓰기
-> line방식으로 적용된다
동일한 대상에 css여러번 들어가면
나중에 들어간 것이 반영됨(덮어쓰기)
-> inline으로 지정하는게 높은 순위
javascript로 CSS를 먹이면 100% 반영된다.(!important 제외하고 : 따로 중요하다고 체크해서)
(단, important 사용은 자제해라)
-> 32px (글자크기 2배로 키운다)
-> 16px이 기본
연습3. password 입력 상자를 text입력 상자로 바꾸기
간단한 while돌리더라도 DOM 처리하기 !
자바스크립트 개념은 사라지는데 J.QUERY라는 개념으로 나타남
-> J.query의 method인지? javascript의 method인지? 나중에 혼동이 옴
(javascript로만 코드를 짜면 어디서든지 돌아가지만 코드가 길어짐)
=> javascript가볍게 돌리고자 j.query 가 나옴(최종적으로 j.query배우는것이 목적임)
-> 같다, 다르다는 3개짜리로 하기
-> value(노란색) : proporties 임 / 앞에 document 객체가 있어서
-> attribute로 할거였으면 앞에 setAttribute가있음
-> javascript는 모두가 쓰는 언어 : jquery는 javascript 기반으로 만든 라이브러리(jar르 파일)
JSON library 많은것중에 하나 골랐음
j.query도 library인데 모든 사람들이 j.query로 쓰지않아서
-> 모두가 사용할 수 있는 javscript로 제공하는것
(j.query로 바꾸면 간단하게 줄이는것 가능)
화면에서 입력한 최종 목적지 : 데이터베이스
-> 데이터베이스에 저장된 칼럼이름이 있음
우편번호 어디에 저장, 주소 어디에 저장, 상세주소 어디에 저장
-> input인데 name 속성이 없으면 '서버'로 전달이 안됨(화면만 있는것)
-> 이런 예제 코드에 name을 추가해야함(수정작업해서 쓰기)
카카오 맵도 javascript로 만들어져있음(복사해서 쓰면 됨)
*웹 개발자의 50%가 javascript씀
