자바스크립트19

• 

  [JavaScript] 학습정리 - 6.연산자 이번에는 자바스크립트의 연산자에 대해서 알아보자. 그동안 프로젝트를 수행하며 별생각 없이 사용하였는데 이번 내용을 정리하면서 알게 된 사실은 생각보다 많은 연산자가 존재한다. 각각의 연산자를 예제와 함께 정리할까 했는데 생각보다 연산자의 수가 많아서 아래와 같이 심플하게 정리해 본다. 산술 연산자 : 더하기(+), 빼기(-), 곱하기(*), 나누기(/), 나머지(%), 증가(++), 감소(--) 할당 연산자 : 할당(=) 복합 연산자 : 산술 연산자와 할당 연산자와 조합으로 구성. (+=), (-=) 동등 연산자 : 동등(==) 부등 연산자 : 부등(!=) 일치 연산자 : 일치(===) 불일치 연산자 : 불일치(!==) 관계 연산자 : 작다(=) 삼항조건 연산자 : 조건부(?:) 논리 연산자 : 논리 A.. ■ Front-End ■/JavaScript 2023. 3. 1.

• 

  [JavaScript] 학습정리 - 5.변수 이번엔 변수(Variable)에 대해서 알아보자. 자바스크립트 변수는 var로 선언하고 사용한다. 변수를 선언하고 값을 지정하지 않으면 undefined이다. var 선언 없이 변수를 사용하려고 하면 에러이지만 var 선언 없이도 값을 할당하면 자동으로 선언되어 사용할 수 있다. 자바스크립트 변수는 이름, 영역, 데이터 타입으로 구성되며 다른 언어와 달리 타입이 고정되어 있지 않다. 타입이 고정되어 있지 않기 때문에 문맥에 대한 값에 따라 자동으로 변환된다. 숫자형, 문자열, 불리언, null, undefined 타입은 기본타입이며 객체, 배열, 함수는 참조타입이다. 변수의 이름을 정할 때는 첫 글자는 반드시 문자, 달러기호, 밑줄 기호 중 하나로 시작해야 한다. 자바스크립트는 대소문자를 구분하며 키워드.. ■ Front-End ■/JavaScript 2023. 3. 1.

• 

  [JavaScript] 학습정리 - 4.데이터 타입 이번 시간에는 프로그래밍 언어의 특징으로 데이터 타입에 대해 알아보자. 자바스크립트의 가장 큰 특징 중에 하나는 데이터 타입이 상당히 관대한 점이다. 자바스크립트에서 문자열, 데이터 타입, 객체 간의 경계가 불분명하다. 자바스크립트의 데이터 타입 변환에 있어서는 문맥이 매우 중요하다. null과 undefined의 값을 갖는 타입이 있다. • null : 아무런 값이 정의되지 않음 • undefined : 선언은 되었지만 값이 할당되지 않음 기본적인 데이터 타입에는 숫자형, 문자열, 불리언이 있다. 숫자형에서는 다른 언어와 달리 자바스크립트는 모든 숫자가 실수로 표현된다. 무한대를 나타내는 Infinity와 -Infinity 같은 특수한 숫자 값이 있다. isFinite()로 무한여부 확인한다. 값이 숫.. ■ Front-End ■/JavaScript 2023. 3. 1.

• 

  [JavaScript] 학습정리 - 3.안녕 JavaScript 자바스크립트로 간단한 화면을 구현해 보자. 로딩 시 버튼에 이벤트를 부여하고 클릭하면 "Hello JavaScript. *^^*"를 표시한다. 코드는 이클립스에서 작성하였고 IE 브라우저에서 실행하였다. IE 브라우저의 개발자 도구를 사용하여 디버깅도 해본다. 아래는 전체 코드입니다. Here. Click Me. 처음 표시되는 화면에 제목은 "Hello"이고 화면에는 "Here."가 표시되어 있다. Click Me 버튼을 클릭하면 제목은 "Hello JavaScript."로 화면에는 "Hello JavaScript."로 표시된다. F12 키를 누르면 개발자도구 화면이 열린다. 디버거를 선택하면 아래와 같은 화면을 볼 수가 있다. 6번 라인에 중단점(Break Point)을 삽입하였고 조사식에 msg를 추.. ■ Front-End ■/JavaScript 2023. 3. 1.

• 

  [JavaScript] 학습정리 - 1.자바스크립트 소개 웹 프로젝트를 수행해 보았다면 자바스크립트는 이미 알고 있거나 사용해 본 언어이다. 자바스크립트 언어는 장점과 단점을 갖고 있다. 자바스크립트의 장점으로는 1) 함수형 언어와 2) 느슨한 타입, 3) 리터럴 표기법, 4) 동적인 객체등이 있다. 자바스크립트 언어를 잘 사용하면 보다 좋은 프로그램을 작성할 수 있다. 1) 함수형 언어: 자바스크립트 함수는 C 언어를 입고 있는 Lisp라고 할 수 있다. 2) 느슨한 타입: 느슨한 타입의 장점은 오류 찾기의 어려움이 아니라 표현의 자유로움이다. 3) 리터럴 표기: 자바스크립트는 매우 강력한 객체 리터럴 표기법이 있다. 4) 동적인 객체: 다른 객체지향프로그래밍보다 자유롭게 동적인 객체를 만들 수가 있다. 오래전에는 브라우저 내장되어 전세로 살고 있었는데 이런.. ■ Front-End ■/JavaScript 2023. 3. 1.

• 

  [JavaScript] 자바스크립트 모듈패턴과 이름공간 모듈패턴 1 이름공간 안에서 사용하는 함수와 외부로 노출하는 함수를 구분한다. var namespace = (function() { var namespace = {}; var i = 0; // 내부에서 사용하는 함수 function func1() { alert(i); } // namespace를 통해 외부로 노출하는 함수 namespace.func2 = function() { alert(i); } return namespace; })(); 모듈패턴 2 전역번수 $ 를 아래와 같이 지역변수로 전달하면 이름공간 내에서 지역변수로 사용하기 때문에 속도가 향상될 수 있다. var namespace = (function(namespace, $, undefined) { var i = 0; // 내부에서 사용하는 함.. ■ Front-End ■/JavaScript 2023. 3. 1.

• 

  [JavaScript] 자바스크립트 여러가지 유용한 팁 ㅇ try catch문 자바스크립트로 작업하다 보면 정말 어떨 때는 구문이 틀리지도 않았는데, 브라우저 버전에 따라 에러가 발생할 때도 있다. 그럴 때 다음의 try catch문을 사용하면 편리하다. 사용예 : try { // 실제 실행시킬부분 var a = opener.location.href; } catch (e) { // 위의 "실행시킬부분"에서 에러가 났을때 처리해줄 부분 alert ("opener를 찾을수 없습니다."); } finally { // 에러가 나든 나지 않든 무조건 실행시키는 부분 window.status = "opener.locatoin.href 부분 실행되었음"; } ㅇ typeof문 보통 데이터나 오브젝트 타입 등을 검사할 때 많이 사용하는데 만약 "undefined"이면 인식.. ■ Front-End ■/JavaScript 2023. 2. 28.