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

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

728x90

자바스크립트

브라우져 내에서 실행되는 프로그램을 개발할 수 있는 프로그래밍 언어이다.

java와 문법적인 유사성이 많아서 쉽게 배울 수 있다. 인기편성을 위해 동일하게 이름을 지은 것 뿐, java와 상관없다.

인터프리터 프로그래밍 언어다. 컴파일의 과정없이 소스가 실행파일로 사용된다. 컴파일이 없이 소스가 실행된다. 스크립트 언어, 인터프리터 프로그래밍 언어라고 불린다.

자바스크립트로 할 수 있는 일 html컨텐츠를 변경할 수 있다. 일부 혹은 전체를 변경할 수 있다. 브라우저를 통해서 현재 보고있는 웹 페이지를 변경할 수 있다.

html태그의 속성을 변경할 수 있다.

html 컨텐츠의 스타일을 변경할 수 있다. CSS변경할 수 있다.

사용자와 상호작용하는 프로그램을 작성할 수 있다. 이벤트 모델을 사용한다. 클릭할 경우 내보내고, 바뀌는 것을 의미한다.

브라우져의 도움없이 서버와 데이터 통신을 할 수 있다. AJAX기술을 활용하면 가능하다. 원래의 경우 브라우져는 웹서버를 통해서 데이터 통신을 진행했다. AJAX의 기술은 웹서버와 화면은 가만히 있는데, 검색창이 변경되는 것처럼, 인기많은 검색어가 도출되는 것처럼

화면은 가만히 있는데, 일부분만 변경이 가능하다.

특징 스크립트 언어이다. 인터프리터 언어이다. 객체지향 프로그래밍 언어이다. 설계도가 필요없는 객체지향 언어이다. 프로토타입을 사용하여, 설계도가 필요없는 언어이다. 동적데이터 타입을 지원한다. (데이터 타입이 존재하지 않는다. ) typeof으로 타입을 확인 할 수 있다. undefined는 변수를 생성하긴 했는데, 값이 설정되지 않은 상태를 의미한다. 정해지지 않은 값을 의미한다. 자바스크립트의 함수는 1급시민이다. 변수, 값, 매개변수 ,함수 모두 반환값으로 사용이 가능하다. 자바로 치면 함수는 메소드에 해당이 되는데, 메소드를 변수에 담을 수 있다. 자바의 변수의 경우 저장된 값에 따라서 값이 달라진다. 동적데이터 타입이다. 알아서 변경이 된다.

자바스크립트 작성하기 스크립트내에서 작성하는 방법

자바의 데이터 타입

자바의 데이터타입은 변수 선언시 지정되지 않는다. 값에 따라서 결정된다.

undefined의 값으로 존재하다. number의 10이 대입이 되면, number로 변환이 된다.

자바의 변수선언은 var 변수명; 으로 진행한다. 변수의 초기화 방법 tel = "010-1111-2222" , email = "[email protected]" , age = 30; 한 줄로 초기화하는 방법이 있다. name = '홍길동';

tel = "010-1111-2222";

email = "[email protected]";

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 null NaN (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의 환경을 보여준다.

728x90

from http://lionpower.tistory.com/245 by ccl(A) rewrite - 2021-11-23 20:28:03