JavaScript 1탄

띠로리·2021년 3월 23일
0

자바스크립트

  1. 웹 페이지에 생동감을 불어넣기 위해 만들어진 프로그래밍 언어
  2. 자바스크립트는 안전한 프로그래밍 언어로 메모리나 CPU 같은 저수준 영역의 조작을 허용하지 않는다.
  3. 자바스크립트의 능력은 실행 환경에 상당한 영향을 받는다.
  4. Node.js환경에서 임의의 파일을 읽고, 쓰고, 네트워크 요청을 수행하는 함수를 지원한다.

스크립트

  1. 자바스크립트로 작성한 프로그램.
  2. 스크립트는 웹 페이지의 HTML 안에서 작성할 수 있는데, 웹페이즈를 불러올 때 스크립트가 자동을 실행된다.
  3. 스크립트는 특별한 준비나 컴파일 없이 보통의 문자 형태로 작성할 수 있고 실행할 수 있음.

    Java 랑 JavaScript는 아무런 관계가 없다.

브라우저에서 할 수 있는 일

  1. 페이지에 새로운 html을 추가하거나 기존 html 스타일 수정하기
  2. 마우스 클릭이나 포인터의 움직임, 키보드 키 눌림 등과 같은 이벤트? 에 반응하기
  3. 네트워크를 통해 원격 서버에 요청을 보내기, 파일 다운로드, 업로드
  4. 쿠키를 가져오기, 설정하기, 사용자에게 질문을 건네거나 메세지 보여주기
  5. 클라이언트 측에 데이터 저장하기(로컬 스토리지)

브라우저에서 할 수 없는 일

자바스크립트의 기능에 제약을 걸어놓은 이유: 악성 웹페이지가 개인 정보에 접근하거나 데이터를 손상하는 것을 예방하기 위해 만들어짐

  1. 카메라나 마이크같은 디바이스와 상호 작용하려면 명시적인 허가가 있어야 함.
  2. 브라우저 내 탭과 창은 서로의 정보를 알 수 없다.

자바스크립트의 강점

  1. HTML과 CSS 를 완전히 통합할 수 있다.
  2. 간단한 일을 간단하게 처리하도록 도와준다?
  3. 모든 브라우저에서 지원하고 기본 언어로 사용된다.
  • 이런 특징 때문에 자바스크립트는 브라우저 인터페이스를 만들 때 가장 널리 사용되고 있으며, 서버나 모바일 앱 등을 만드는 것도 가능하다.

MDN JavaScript Reference

https://developer.mozilla.org/en-US/docs/Web/JavaScript/Reference

  • 특정 함수나 메서드에 대한 정보를 얻을 수 있다

개발자 도구

브라우저에는 '개발자 도구'라는 것이 내장되어 있다.
이를 통하여 에러를 확인하고 스크립트에 대한 정보도 얻을 수 있다.

  • F12 키를 눌러서 확인할 수 있다.
    여기서 파란색 > 표시가 커맨드 라인을 의미한다.
    커맨드 라인에 명령어를 입력해서 실행시킬 수 있다.

profile
제 소개를

1개의 댓글

comment-user-thumbnail
2021년 3월 23일

동창님의 발표를 들으면서...

변수는 let 키워드를 활용한다.
변수 생성할 때는 카멜 표기법을 흔히 따른다.
보통 다른 언어같은 경우 외부 변수를 불러올 때 제약이 많은데, 자바스크립트의 경우에는 그 경계를 좀 원할하게 넘어간다.
모달 창(modal window) 모달이란 페이지 나머지부분과 상호작용이 불가능하다는 뜻
문자형 변환: 예측 가능한 방식으로 알아서 바꿔준다.
숫자형 변환: 숫자 이외에 글자가 들어가면 NaN이 된다.
불린형 변환: 문자열 '0'도 true로 반환된다.
===: 자료형의 동등여부까지 검사
==: 자료형이 다르더라도 문자형과 숫자형 0을 동일하게 취급한다.
?? 연산자 : 0을 true로 인식, undefine만 false로 인식

함수는 외부 변수 접근 및 수정도 가능하다.
함수 자체가 주석의 역할을 한다.
긴 코드를 함수로 묶은 후, 함수 이름으로 그 코드의 역할을 설명하는 식

콜백함수: 함수를 값처럼 전달할 수 있다.
function() : 익명 함수 (이름 없이 선언한 함수)

객체: 여러가지 property를 함께 가지고 있는 자료형
객체가 할당된 변수를 복사할 땐, 주소가 복사되는 것이고 객체 자체가 복사되는 것이 아니다.
동일한 객체를 가르키는 두 변수끼리 비교하면 참을 반환한다.

new 연산자와 생성자 함수
자가 클래스 느낌과 유사하다.
*객체와 심볼

심볼은 유일한 식별자를 만들 때 사용!
식별자에는 설명을 붙여줄 수 있음.
설명이 같다고 같은 식별자가 되지는 않는다. (유일성 보장)

자료구조와 자료형
원시값과 객체는 구분되어야 한다.
객체는 함수를 property로 정할 수 있기때문에 java의 메서드처럼.
원시값도 메서드를 이용해 작업을 수월하게 활용하는 방법이 있을 듯.
원시값을 임시로 객체화 시켜주는 원시 래퍼 객체(object wrapper)를 만들어준다.

배열
key가 숫자인 점을 제외하면 배열의 근본은 결국 객체이다.
배열의 특성을 살리지 않으면 메소드로 사용하는데 어려움이 있다.

iterable 객체
이터러블 vs 유사 배열
둘이 아주 다른 개념
이터러블은 Symbol.iterator가 구현된 객체
유사배열은 index와 length property가 있어 마치 배열처럼 보이는 객체
하지만 이 둘다 모두 배열이 아니기에 push, pop과 같은 메서드 지원X

맵과 셋
맵: 객체와 유사하지만, 키값에 다양한 자료형을 허용한다.
맵은 삽입 순서를 기억하기 때문에 객채와 구분된다.
Object.fromEntries 이용하면 맵을 객체로 바꿀 수 있다. (키값에 객체가 포함되어 있다면 에러가 날까?)

셋: 중복을 허용하지 않는 자료구조
키가 없다.

캐시(cache)
함수의 실행결과를 저장해둔 뒤, 다음에 다시 호출되면 빠르게 재활용한다.

객체 분해 할당

  • 함수 매개변수
    원래 함수에서 매개변수는 선택적으로 쓰일 때가 많다.
    그래서 기본값을 설정해두면 문제가 되지 않지만, 매개변수를 넣을 때 순서를 잘 못넣으면 문제가 발생한다. --> 객체 분해를 이요하면 해결할 수 있다.

렉시컬 환경
내부 숨김 연관 객체
-함수가 왜 외부 변수를 활용할 수 있는지에 대한 내용

전역 객체
어디서나 사용가능한 변수나 함수를 만들 수 있음 (자바 스크립트는 변수를 외부에서도 쓸 수 있는 것 아닌가?)
선언되기 전에 쓰려고 만든 것이 전역 객체인가?

답글 달기