자바스크립트(기초, 변수의 타입)

자바스크립트 

• 브라우져 내에서 실행되는 프로그램을 개발할 수 있는 프로그래밍 언어이다. 
• java와 문법적인 유사성이 많아서 쉽게 배울 수 있다. 
  • 인기편성을 위해 동일하게 이름을 지은 것 뿐, java와 상관없다. 
• 인터프리터 프로그래밍 언어다.
  • 컴파일의 과정없이 소스가 실행파일로 사용된다. 
  • 컴파일이 없이 소스가 실행된다. 
  • 스크립트 언어, 인터프리터 프로그래밍 언어라고 불린다. 
• 자바스크립트로 할 수 있는 일
  • html컨텐츠를 변경할 수 있다. 
    • 일부 혹은 전체를 변경할 수 있다. 
    • 브라우저를 통해서 현재 보고있는 웹 페이지를 변경할 수 있다. 
• html태그의 속성을 변경할 수 있다.
• html 컨텐츠의 스타일을 변경할 수 있다. 
  • CSS변경할 수 있다. 
• 사용자와 상호작용하는 프로그램을 작성할 수 있다. 
  • 이벤트 모델을 사용한다. 
  • 클릭할 경우 내보내고, 바뀌는 것을 의미한다. 
• 브라우져의 도움없이 서버와 데이터 통신을 할 수 있다. 
  • AJAX기술을 활용하면 가능하다. 
  • 원래의 경우 브라우져는 웹서버를 통해서 데이터 통신을 진행했다. 
  • AJAX의 기술은 웹서버와 화면은 가만히 있는데, 검색창이 변경되는 것처럼, 인기많은 검색어가 도출되는 것처럼 
    화면은 가만히 있는데, 일부분만 변경이 가능하다. 
• 특징
  • 스크립트 언어이다. 
  • 인터프리터 언어이다. 
  • 객체지향 프로그래밍 언어이다.
    • 설계도가 필요없는 객체지향 언어이다. 
    • 프로토타입을 사용하여, 설계도가 필요없는 언어이다. 
  • 동적데이터 타입을 지원한다. (데이터 타입이 존재하지 않는다. )
    • typeof으로 타입을 확인 할 수 있다. 
    • undefined는 변수를 생성하긴 했는데, 값이 설정되지 않은 상태를 의미한다. 정해지지 않은 값을 의미한다. 
  • 자바스크립트의 함수는 1급시민이다. 
    • 변수, 값, 매개변수 ,함수 모두 반환값으로 사용이 가능하다. 
    • 자바로 치면 함수는 메소드에 해당이 되는데, 메소드를 변수에 담을 수 있다. 
  • 자바의 변수의 경우 저장된 값에 따라서 값이 달라진다. 동적데이터 타입이다. 알아서 변경이 된다. 
• 자바스크립트 작성하기 
  • 스크립트내에서 작성하는 방법
    • <script>의 태그로 웹 문서에 포함시키는 방법이 있다. 
    • <script>의 여는 태그와 닫는 태그 사이에서는 자바스크립트 코딩을 할 수 있다. 
    • 브라우져는 <script> 태그에서 자바스크립트 문법으로 작성할 프로그램을 내장된 자바스크립트 엔진으로 실행한다. 
    • 구글과 사파리에서 개발한 v8이 제일 좋은 자바스크립트의 엔진으로 실행된다. 
    • 위치는 body의 맨 끝부분으로 작성하는 것이 좋다. 
      • html 태그들이 로딩된 후에 작성이 된다. 
      • 조작할 html태그들이 조작한 다음에 작성이 되는 것이 좋다. 
      • 자바스크립트의 처리 용량이 너무 많으면 본문의 로드가 어렵다.
  • 별도의 자바스크립트 파일을 만드는 방법이 존재한다. 
    • 확장자를 js로 작성하면 자바스크립트의 파일이 된다. 

자바의 데이터 타입

• 자바의 데이터타입은 변수 선언시 지정되지 않는다. 값에 따라서 결정된다. 
• undefined의 값으로 존재하다. number의 10이 대입이 되면, number로 변환이 된다. 
• 자바의 변수선언은 var 변수명; 으로 진행한다. 
  • 변수의 초기화 방법
    • tel = "010-1111-2222" , email = "hong@gmail.com" , age = 30;
    • 한 줄로 초기화하는 방법이 있다. 
    • name = '홍길동';
      tel = "010-1111-2222";
      email = "hong@gmail.com";
      age = 30;
    • 개별적으로 초기화하는 방법이 있다. 
• 변수의 선언과 초기화가 한번에 가능하다. 
  • 문자열의 경우 '' 와 "" 그리고 ``을 사용해도 상관없다. 
  • var title = '이것이 자바다'; //문자열 -> ''
    var writer = '신용권'; //문자열 -> "" 구별이 존재하지 않는다.
    var price = 35000;
  • var studName = "홍길동" ,kor = 100, eng = 80, math = 90;
    • var하나도 전부 작성해도 된다.

javascript의 변수가 가지는 타입들

• 타입은 있어도 되고, 없어도 되지만, 브라우져가 어떤 언어를 사용하는지 구별하기 위해서 작성을 하는 것이 좋다. 
• 자바스크립트의 기본자료형 타입
  • undefined 타입
    • 초기화가 되지 않은 변수가 가지는 타입이다. 
      • 값이 할당되지 않는 변수를 가르킨다.
    • undefined타입의 변수는 undefined의 값을 가진다. 
    • 변수를 정의하면, 그 변수는 undefiend 타입의 변수가 되고 값은 undefiend를 가진다. 
    • 값이 할당되지 않은 변수로, 초기화 되지 않은 변수라고 부른다. 
      • var a;
  • number의 타입
    • 변수에 정수 혹은 실수가 대입되면 number의 타입이 된다.
    • 자바스크립트는 소수점과 숫자의 구별이 전부 number type으로 출력된다.
  • string타입
    • 변수에 문자열이 대입되면 string타입이 된다.
    • 빈문자열을 대입하던지, 문자를 대입해도 string타입이 된다. 
  • boolean타입
    • 변수에 true 혹은 false가 대입이 되면 boolean 타입이 된다.
    • 자바스크립트에서 false로 판정되는 것 
      • false, 길이가 0인 문자열 
        • 빈문자열
        • 0
        • undefiend
        • nullNaN (Not a Number) --> 숫자가 아닌것과 연산했을 때 결과 값으로 나오는 것을 의미한다.
      • 위에 나열한 6가지를 제외한 모든 값은 true다 
      • 자바에서는 false만 false이다. 
      • 그러나 자바스크립트는 위의 6가지가 false로 표현된다. 
• 자바스크립트의 객체타입 
  • 배열
    • 자바의 List와 유사하다. 
    • 값을 여러개를 담는 자료구조, 0부터 시작하는 index가 존재한다.
    • 배열에 저장되는 값의 타입은 상관이 없다. 
    • 가변길이의 배열이다. 
    • var arr1= [];
      • 길이가 0인 배열을 생성한다. 
      • 자바의 배열보다 기능이 훨씬더 많다. 
    • arr1[0] = 100;
      arr1[1] = 200;
      arr1[45] = 450;
      arr1[75] = 500;
      arr1[99] = 10000;
      • 배열의 특정 인덱스에 값을 저장하기 
      • 배열의 길이를 미리 설정하지 않아도 된다. 
      • 따로 입력하지 않으면 empty의 값이 들어간다.
    • 위에 설명한 것 외에는 전부 Object의 타입을 가지고 있다.
    • console.log("arr1 배열의 0번쨰 값", arr1[0]); //100출력
      console.log("arr1 배열의 1번쨰 값", arr1[1]); //200출력
      console.log("arr1 배열의 2번쨰 값", arr1[2]); //undefined 출력
  • 배열에 여러 종류의 값을 저장할 수 있다. 
  • 배열에 여러 종류의 값을 저장할 수 있지만, 실제 프로젝트에서는 배열에 같은 종류의 값만 담는다. 
    • 어디에 뭐가 들어가는지 파악이 필요하기 때문이다. 
  • 차트 그리는 경우에는 값을 사용할 수 있지만, 그외에는 되도록 사용하지 않는다.
  • var arr2 = [10,"강감찬", "김유신" , [100,200,300],3.14];
    • 배열의 경우 동적 데이터 타입을 지원한다. 
    • 배열안에 문자가 오는지가 들어간다. 
• 객체 
  • 이름:값 쌍으로 저장하는 자료구조를 가진다. 
  • java의 Map과 유사하다. 
  • 자바스크립트의 객체는 class가 필요없다 - > 아예 존재자체가 없다. 
  • 자바스크립트의 객체는 프로그램실행 중에 그 구성요소를 자유롭게 추가/ 삭제할 수 있다. 
  • 값은 숫자, 문자열, boolean값, 배열, 객체, 함수(메소드)등이 가능하다. 
  • 객체 생성의 경우 {}가 사용된다. 
    • var obj2 = {name:'홍길동',kor:100, eng:100, math:100, passed:true};
  •  함수는 java에서 메소드와 유사하다. 
  • 이름이 있는 코드 블록이다. 
  • java는 접근제한자가 있는 반면에 자바스크립트는 접근제한자가 없고,public으로 전부 공개가 되어있다. 
    • 반환타입이 존재하지 않는다. 
    • private으로 설정은 가능하다. 
    • 매개변수는 변수명만 적는다. 
    • function plus(x, y) { //원래대로라면 var x, var y로 
      var z = x + y;
      return z;
      }
    • 기능 그 자체를 담을 수 있다.
• 타입이 미리 지정 되지 않는다면 
  • 자바의 경우 int= 3.14로 입력하면 error가 발생되는 것을 확인할 수 있다. 
  • 개발 툴에서 오류를 검출하기 힘들다. 
  • 실행되기 전까지는 오류검출이 힘들다. 
  • 그것을 보완하기 위하여 자바스크립트에 type을 합친 타입 스크립트가 존재한다. 
    • 정적인 타입을 명시하고, class를 존재하게 만든다. 

자바의 함수는 public class A{
          public void plus(int x, int y){...}
          public  int minus(int x, int y) {...}
};라면 

A a = new A();
a.plus(10, 5);
a.minus(10, 5); 처럼 설계도를 우선적으로 만들어서 설계도를 변경하기 전까지는 변겨잉 불가능하다. 

그러나 자바스크립트의 경우 var obj = {};
obj.plus = function(x, y) {return x + y}처럼 프로그램의 실행중에 추가로 가능하고, 삭제도 가능하다. 자유롭게 수정과 삭제를 할 수 있다. 

각기 다른 특징을 가지고 있는 것이다. 

사용자와 상호작용시 컨텐츠를 입력하려면, ID로 찾아야한다. element의 객체가 선택되기 때문인데, 

element객체란 태그를 표현하는 객체이다. 

• 속성 : 변수, 필드, 멤머변수, 프로퍼티로 
• textContent와 htmlContent로 나눠진다. 
• 기능 : 메소드, 함수 

document내부에는 element객체의 태그가 부모와 자식으로 연결된다. 
항상 tree구조의 형태를 가지고 있다. html을 조작하면 화면이 달라진다. 
자바스크립트는 html문서를 조작하는 것이다. 

• 사용자가 뭔가를 할 떄에 함수, 연결짓기, 조직대상의 엘리먼트를 찾아야한다. 
• 변결할 element를 찾는다. 
  • document내에서 찾아야한다.
• 프로퍼티의 메소드 (document의 객체에 존재하는 기능이다)
  • getElementById(아이디);
  • getElementByTagName(태그명);
  • querySelector(선택자표현);
  • querySelectorAll(선택자표현);
• element의 객체 (프로퍼티)
  • textContent
  • htmlContent
  • innerHtml 
• element를 찾을 때 위의 메소드의 기능을 사용하여 찾아야한다. 
• document.querySelector("#content").textContent = "안녕하세요 ";//id가 content를 가지고 와라, 선택해라 
• document.querySelector("#content").textContent = "";

html의 문서는 브라우져가 만든다. 
포함관계를 따져서 이러한 구조를 만든다. 

java의 경우 class의 중심이다. 
자바스크립트는 event중심으로 상호작용을 위한쿼리이다. 
함수와 메소드는 구체적으로 작성하고, event의 환경을 보여준다.