2022.03.04_19일차_javascript(2)

19일차 학습내용

 

 

---

2) 스코프
: 변수 또는 함수의 유효범위를 말함

#1. 전역변수 Global Variable
선언위치 : 함수 밖, {} 밖
사용범위 : 자바스트립트 전체 영역
var a = 10;
var a = 1.23; //이렇게 써도 에러가 안남 이름 동일해도... 
a = 100; // 이렇게 해도 자동으로 var로 하는 것과 동일... 
//문제: API 가져와서 쓸때가 변수 겹치는 경우가 생길 수 있어서 문제...
//규칙 : 처음 만들때만 var / 변수이름 중복 피하기 / var보다 let const쓰기

#2. 지역변수 Local Vaariable (var 기준)
선언위치 : 함수 안
사용범위 : 함수 안에서만 가능
* 함수 안에서 동일이름의 변수에 대한 우선순위 : 지역 > 전역 (자바랑 동일 인스턴스보다 지역이 높았지)

#3. 전역 함수
전역변수랑 동일
#4. 지역 함수
정의 위치 : 함수 내
사용 범위 : 정의된 함수를 품고 있는 외부함수 내~~~~

js05.html /#1. 호이스팅이란 / #2.전역변수수정가능 10:4 ㅡㅡㅡㅡㅡㅡㅡㅡㅡ/ #3. 전역함수와 지역함수


3) 변수에 함수를 저장
자바 스크립트에서는 함수도 변수에 저장 가능.
변수에 함수를 저장하면 변수를 함수처럼 사용할 수 있다.

js06.html/ #1.

4) 함수를 매개변수값으로 사용
매개변수도 역시 변수이기 때문에 
매개변수

#2. 

10:32 함수도 js에서는 하나의 객체. 이름이 함수의 레퍼런스값이된다. 

5) 리턴값으로 함수 사용
함수는 어떤값이든 리턴 가능. //변수 배열 객체까지 자바랑 동일. + 함수까지 리턴 가능.

#3. 

12. 함수리터럴과 익명함수  <
1) 리터럴 //
JS에서 데이터 만드는 방법 크게 2가지, /// 자바 JS 모두 객체지향언어. 차이점은 java는 컴파일언어. 한방에 컴파일해서 .class파일이 됨/ JavaScript는 인터프리터언어~~~~(C언어도) 코드를 줄마다 번역후 실행, 번역후 실행, 번역후 실행~~실시간.

타입  리터럴 방식  &  객체 생성방식 
ㅡㅡㅡㅡㅡㅡㅡㅡㅡㅡㅡㅡㅡㅡㅡㅡㅡㅡㅡㅡㅡㅡㅡㅡㅡㅡㅡㅡㅡㅡㅡㅡㅡㅡ
숫자  var num = 10;  var num = new Number(10);
문자 var name = "abc";  var name = new String("abc");
불린 var play = true;  var play = new Boolean(true);
배열 var arr = [1,2,3];  var arr = new Array(1,2,3); 

js에서는 리터럴 방식을 더 많이 사용함. 간결 편리.. 객체생성방식으로 자동 변환대서 처리됨~~

2) 함수 리터럴
: 함수 이름을 주지 않고 만들면 된다.

# 함수 만들기 3가지 방법 : 뭐가 나은건 없고 경우에 따라 달라~
#1. 일반적인 방식  //우리가 했던
function hello(name){
console.log(name+"님 안녕!");
}
hello("피카츄")

#2. 리터럴 방식 //이름없이 바로 매개변수 ===== 리터럴은 익명함수다. ? 객체방식은 익명함수가 아닌가봉가. 아니다. 리터럴방식은 선언과 동시에 다 만들어줘서 호이스팅이 가능...특이케이스인거로 기억
var hello = function(name){
console.log(name+"님 안녕!");
}
hello("피카츄"); // 변수가 익명함수를 담았으니까

#3. 객체 방식
var hello = new Function("name", "console.log(name+"님 안녕하세요!!";");//변수에 담아줘야 유의미
hello("피카츄");

3) 익명함수
: 리터럴방식의 함수를 익명함수라 함
* 호이스팅 불가능 ///ㅡㅡㅡㅡㅡㅡ (계속 부를거면 일반함수로 써야~ 재사용 안하면 익명으로~)

#4. 익명함수 호이스팅 불가능
 jQuery

#5.매개변수인자로 익명함수던저줌
click이 jquery.에 구현되어있음 ready도 ㄱ구현되어있음. 우리는 매개변수값으로 함수를 던져주기만 하는것


js07.html  ㅡㅡㅡㅡㅡㅡㅡㅡㅡㅡㅡㅡㅡㅡㅡ문제되는거 다시해보기

함수 내 var 생략하면 -> 전역변수로 선언됨!!

13. 자바스크립트 변수 선언 방식

Ecma International 표준화기구에 넷스케이프사에서 표준화 요청,
  96년 11월에 ECMA-262 라는 표준화 명세서 작업이 시작됨.
표준화된 언어의 공식이름은 ECMAScript, 대외적으로 javascript

넷스케이프사에서 만든 자바스크립트. 웹상에서도 인기많아지면서 마이크로소프트에서도 호환하려고 했었고.
넷스케이프사에서 표준화기구인 Ecma International에 js 표준화할걸 요청함 
96년 11월에 Ecma-262라는 이름으로 표준화 명세서 작업이 시작됨. 표준화로 이름지어야하는상황에서 somemicro systems 에서 만들었는데 oracle이 인수... 등록 미리 되어있으니까 javascript라는 이름으로 표준화 이름을 없는 상황이 됨. java명칭때문에.. 그래서 표준화된 언어의 공식 이름은 ECMAScript . 대외적으로 쓰는 이름은 javascript

표준 업데이트 줄여서 ES 몇버전...
ES6(2015)부터 var let const 문제도 해결/ 크로스브라우징 문제 많이 해결... 
원형 바닐라스크립트... 타입스크립트Typescript랑 비교하려고. 
리액트는 타입스크립트로 많이 써. 

2015년 ES6 부터 var/ leg/ const 사용가능해짐.

* 블록스코프 : {} if for function // 중괄호 기준으로 범위가 나뉨
  함수스코프 : 블록스코프 중 함수 범위갖는 스코프 //함수기준으로 범위가 나뉨

1) var  : 함수스코프 : 변수를 같은 이름으로 재선언이 가능하다. (문제점) 외부API 가져오면 데이터손실올수.
2) let : 블록스코프 : 변수 같은이름으로 재선언 불가능. 값수정은 당연히되지. (자바의 일반 변수~)
2) const : 블록스코프 : 변수 같은이름으로 재선언 불가능. 값수정이 불가능! -> 상수. 선언시 값대입이 필수!


js08.html 



14. Symbol  
unique한 값을 만듦

15. 스크립트 태그 위치 
자바 스크립트는 HTML 내 어디서나 둘 수 있으나
"위치"는 자바스크립트의 처리 시점을 결정한다. 위-> 아래

[ 웹 브라우저의 HTML 문서 렌더링 과정 ]
1. 불러오기 : 서버에로부터 전달받은 리소스 읽어들임
2. 파싱 Parsing : 웹엔진이 파서를 통해 문서를 파싱해 DOM Tree를 만든다. 
3. 렌더링 트리 만들기 : 그리기위한 별도의 트리를 만든다. (화면에 안그릴거 걸러내고 만듦)
4. CSS 결정
5. 레이아웃
6. 그리기

- 내가 만든 js는 body닫히기 전에 추가.
- 로딩할 때 필요한 외부소스가 있다면  안에 작성/스타일시트는 헤드에 . 틀이 나와야 하니까/ js 돔객체로 컴포넌트들을 조작을 하니까 parsing하다가 멈추고 script파일을 읽게되면 늦어짐. 이미지다운.. 이런거 마지막에 놔야... 사용자 입장에서 빨리웹이작동해야하니까. 요소가 다 있어야 js가 만질 수 있지... 객체구현도 안된상태니까 효과가 안된다.  

onload : 웹페이지(DOM데이터)의 로딩이 끝나는 시점(이벤트)에 실행됨. 동일문서에 온로드는 하나만 실행되야 함.
어떤 파일은 마지막에 둬도 안되는 경우가 있으니까 온로드로
html태그 속성을 사용하면 :  </body onload ="스크립트함수()">
스크립트로 하려면 : window.onload = function(){}; // window가 바디랑 시점 거의 비슷....이벤트가 실행되는 시점... 원하는 객체가 로딩됐을 때 이벤트로 할수도 있어.
jquery : $(window).load(function(){}); 로딩되면 뭐해라~~ jQuery로 하려면. 

* onload vs jquery의 ready()  //////////덮어쓰기 주의 
ready : DOM 트리 생성 직후 실행 (문서준비)
onload : 페이지 이미지, 외부파일까지 로드된 후 실행
선ready -> 후onload
 
16. 자바 스크립트 객체

1) 내장객체 Built-in Object
자바 스크립트 엔진에 내장
문자(String), 날짜(Date), 배열(Array), 수학(Math) 등

2) 브라우저 객체 모델 BOM Browe Object Model
브라우저에 계층 구조로 내장되어있는 객체를 말함
window, screen, location, history, navigator 등
  (|_ document와 location의 상위객체)

3) 문서 객체 모델 DOM Document Object Model
HTML 문서구조를 객체화 // 모질라 웹 독스

프론트앤드개발자 : 문서를 클라이언트(브라우저)에서 동적으로 만드는 기술 

프론트단에서 웹 문서를 동적으로 만들 수 있는 js 개발자가 알아야 하는 것 : DOM (html과 css가 객체화시키는 모델- w3c에서 문서객체를 어떻게 만들지 설계문서를 만든 document 객체  ) + 이 객체를 메모리상에서 제어하기 위해 javascript를 이용. 동적으로 만들거나 dom만으로 문서를 만들수도 있음. 

문서 제어를 넘어 차트를 그린다든지 소켓을 이용한다든지 하려면

HTML5에서 제공하는 API를 사용할 수 있다. (canvas audio web-socket 등..) 막강한 웹 어플리케이션 만들 수 있지. 
또는 jQuery - dom 사용할 때 브라우저마다 차이가 있는 것들을 단일화된 인터페이스 집합을 제공(익스플로러, 크롬,, 종류 버전에 따라 체크하는 if문 필요없어 과거 웹표준 없었을 때. 도움을 받았음) 해서 자바스크립트로 문서 객체를 직접 사용하지 않고 jQuery로 문서 객체를 접근하는 방법을 썼었다. 요즘엔 거의 안씀 . document 객체를 제어 조작 직접 하기보다 Angular나 React.js 또는 Vue.js 를 이용해 MVVM패턴을 이용해서 모델을 기반으로 뷰를 자동 업데이트 하는 양방향 바인딩 기법을 쓰기 때문.  (양방향 바인딩 기봅 선두주자 : MS silverlight 나 WPF 처럼) javascript에서도 양방향 바인딩기법 생긴거.. 리액트는 이걸 좀 더 개조해서 flux 라고도 하는데 의미는 비슷

스크립트로 api의 막강한 기능을 사용하면서 + DOM조작에는 Angluar나 리액트를 이용하면 됨

 
4) 사용자 정의 객체 

* 문서 : https://developer.mozilla.org/ko/docs/Web/JavaScript

17. 내장객체 (Built-in Object)

1) 객체 생성
참조변수 = new 생성함수();

2) Date 객체
js09.html 

3) Math 객체
:객체 생성 없이 Math.으로 사용가능

4) Array 객체
5) String 객체
: 문자열 취급

let str = new String('문자형데이터');
let str = '문자형데이터';



18. 브라우저 객체 모델 BOM Browe Object Model
: 브라우저에 내장된 객체가 계층적 구조로 이루어져 있는 것

 window
   |
      ㅡㅡㅡㅡㅡㅡㅡㅡㅡㅡㅡㅡㅡㅡㅡㅡㅡㅡㅡㅡㅡㅡㅡㅡㅡㅡㅡ
| | | | |
document screen location history  navigator


1) window 객체 
: 최상위 객체


# 메서드
open("url", "새창이름", "새창 옵션들")  : 팝업창! 
alert(data) : 경고창에 데이터 보여줌 -> 확인만 있음
prompt("질문", "기본답변") : 입력창
confirm("질문") : 확인/취소 확인 = true/ 취소 = false 리턴
moveTo(x, y) : 지정한 새창에 위치를 이동
resizeTo(width, height)  : 창 크기 변경
clearInterval(인터벌객체)
setInterval(function(){}, 일정 시간간격) : 간격으로 function() 호출 실행 반복~
setTimeout(function(), 일정시간간격) : 간격 이후 함수 한번 실행
clearTimeout(타임아웃객체)

#1. open()  ( close()창닫기 )
#옵션
width
height
left : x축값. x좌표 
top : y축값. y좌표
scrollbars  : no숨김, yes 노출
location  : no/ yes
status : 상태표시줄영역 숨김/ 노출
toolbars : 도구 상자 영역 숨김/ 노출

2:40 open
  2:43 confirm 확인 취소에 따라 다른 결과를 가져오고 싶을 때
2:46 moveTo

2) screen 객체  <
: 사용자의 모니터 정보(속성)를 제공하는 객체

screen.속성; // 보이는 영역 전부 다

width
height
availWidth : 작업표시줄을 제외한 화면 너비
availHeight : 작업표시줄을 제외한 화면 높이
colorDepth : 사용자 모니터가 표현가능한 컬러 bit



3) location 객체 
: 현재 url관련 속성들(주소, 호스트가 누구인지, 프로토콜 뭐쓰는지... 주소창 관련 정보)과 새로고침 메서드등을 제공

href  : 주소를 설정하거나, 현재 주소를 꺼낼 수 있음
hostname  : 호스트이름 설정하거나, 현재 호스트이름 알아낼 수 있음
host : 호스트이름, 포트번호 (현재상태꺼내거나 수정)
protocol
search : URL의 쿼리를 반환 (주소의 ?뒤)
~~.html?name=pick&age=10 물음표 뒤의 쿼리스트링(쿼리문자열), 파라미터
reroad() : 브라우저 새로고침 메서드, 함수.


4) history 객체  
  뒤로가기 앞으로가기 기능 메서드

back() : 뒤로가기
forward()  : 앞으로가기
go(이동숫자) : -2 2단계 뒤로가기, 2 2단계 앞으로가기
length : 방문했던 기록에 저장된 사이트 목록 개수

js11.html 

5) navigator 객체
현재 방문자가 사용하는 브라우저 정보와 운영체제 정보를 제공

appVersion  : 현재 브라우저의 버전 정보
language : 현재 브라우저가 사용하는 언어. 한글은 'ko'
product : 현재 브라우저의 엔진 이름
platform : 현재 컴퓨터 운영체제 정보. 
onLine  : 온라인 상태 여부 제공
userAgent  : 브라우저와 운영체제의 종합 정보 제공



6) document 객체
: 창에 표시되는 웹페이지를 관리
DOM 트리를 읽거나 함수를 이용하여 창을 관리할 수 있다.

characterSet : 문자 인코딩 (읽기 전용)
cookie   : 문서의 cookie를 쉼표로 연결한 문자열
location  : window.location 속성과 마찬가지로 location 객체 가르킴
readyState   : 문서를 읽어들인 상태 (읽기전용)

referrer   : 문서에 링크된 페이지 url(읽기전용)
title  : 문서 제목
URL   : 문서 URL(읽기 전용)

close()  : 문서 닫기. window.close()
open()  : 문서 열기
write()  : 문서 출력
writeln()  : 문서 출력 + enter값

19. 자바스크립트 내장 함수
: 자바스크립트 엔진에 내장된 함수

parseInt()
parseFloat()
String()
Number()
Boolean()
isNaN() : is Not a Number의 약자. 숫자가 아닌 문자가 포함되어있으면 true
eval() : 문자형 데이터/코드를 (따옴표없이) 자바스크립트 코드로 처리

eval("10+10"); -> 20

20. 문서 객체 모델(DOM Document Object Model)

DOM 트리를 구성하는 객체 하나를 Node라고 함

문서노드 : 전체 문서를 가르키는 Document 객체
HTML 요소 노드 : HTML 객체
텍스트 노드 : 텍스트 객체

Document <-- 루트
  |

  / \

  |   \



# 노드 객체(html요소들) 가져오는 메서드
document.getElementById(id값)     : id 속성값으로 노드 가져오기


document.getElementByClassName(class속성값 : class 속성값으로 노드 가져오기
document.getElementByName(name속성값)  : name 속성값으로 노드 가져오기

document.getElementsByTagName(태그명)   : 태그명으로 노드들 가져오기  (배열로)
document.getElementsByClassName(class속성값 : class 속성값으로 노드들 가져오기 (배열로)
document.getElementsByName(name속성값)  : name 속성값으로 노드들 가져오기 (배열로)

document.querySelector("선택자")  : CSS선택자로 노드 가져오기
document.querySelectorAll("선택자")  : 선택자에 해당하는 노드들 전부 가져오기

document.head
document.body

js13.html