본문 바로가기

분류 전체보기

(153)
[자바스크립트] - 변수 let / 함수레벨의 스코프(함수영역) , 블록레벨의 스코프(블록영역) let과 const var 예약어를 사용한 변수는 함수 영역의 스코프를 가진다. 즉 스크립트 소스 전체에서 사용할 수 있는 변수이다. 또한 재할당과 재선언이 가능하다. 그래서 var 예약어를 사용하면 잘못했을 경우 예상하지 못한 프로그램 오류를 발생시킬 수 있다. 그래서 ES6버전부터는 var의 단점을 보완한 let과 const라는 예약어가 새롭게 등장했다. let과 const도 var와 마찬가지로 변수를 키워드이다. ES6 이전의 자바스크립트 프로그램에서는 var예약어로만 변수를 선언할 수 있었다.그래서 실수로 var라는 예약어를 빠트리면 의도하지않게 전역변수가 되기도 하고,프로그램 길이가 길어지다보면 실수로 사용하는 변수를 다시 재선언하거나 값을 재할당 해버리는 경우가 생기기도 한다.그래서 let과 ..
[자바스크립트] -스코프 / 지역변수(로컬변수) / 전역변수(글로벌변수) 스코프란? scope변수를 선언하고 사용할 때 변수가 적용되는 유효범위를 뜻함.변수가 유효하게 쓰일 수 있는 영역을 가리키는 것이다. 자바스크립트에서 함수에서 변수를 사용할 때 영역에 주의해야한다. 한 함수 안에서만 사용하고 다른 함수에서 사용할 수 없는 변수가 있는가 하면, 어느 함수에서나 다 사용할 수 있는 변수가 있다. 한 함수에서만 사용할 수 있는 변수를 '지역변수' 또는 '로컬변수'라고 한다.어느 함수에서나 다 사용할 수 있는 변수를 '전역변수' 또는 '글로벌변수'라고 한다.  ( 전역변수는 script부분안에서 어디든지 접근할 수 있기에 어디서 값을 바꿀지 몰라 위험해서 되도록 안쓴다.주로 지역변수를 쓴다. 함수 안에 들어있으면 지역변수. )  var처럼 전역에서 쓰이는 변수는 '함수 레벨의 ..
[자바스크립트] - var를 이용한 변수의 특징 - 호이스팅 hoisting을 한다 실무에서 변수 var는 사용을 자제한다 .var 예약어를 사용한 변수는 함수 영역의 스코프를 가진다.즉 스크립트 소스 전체에서 사용할 수 있는 변수이다. 또한 재할당과 재선언이 가능하다.그래서 var 예약어를 사용하면 잘못했을 경우 예상하지 못한 프로그램 오류를 발생시킬 수 있다.  var를 이용한 변수의 특징 - 호이스팅자바스크립트에서 변수를 사용할 때 조심해야하는 개념이 있다.  바로 '호이스팅 hoisting'이라고 하는데, 호이스팅이란 '끌어올리다'라는 뜻을 가지고 있다.  상황에 따라 변수의 선언과 할당을 분리해서 선언 부분을 *스코프의 가장 위쪽으로 끌어올리는 것을 말한다.  끌어올린다고 해서 실제로 소스코드가 맨 위로 올라간다는 것이 아니라, 그런 식으로 자바스크립트 엔진이 해석한다는 뜻이다..
[자바스크립트] - 함수 > 일반 함수 정의문, 익명 함수 함수 function  함수는 숫자를 담는 상자라는 뜻으로, 어떠한 데이터를 넣으면 함수에 들어있는 여러 코드를 통해 원하는 결과값을 반환하게 만들어주는 코드이다. 예를 들면 사과, 오렌지 파인애플같은 데이터를 넣으면 함수라는 공장에서 여러가지 첨가물이나 공정과정으로 통해 '주스'라는 결과값을 만들어주는 기능을 뜻한다.  함수는 공장, 기계로 버튼을 눌러주면 실행되는 기계라고 생각하면 쉽다. 함수의 장점은 함수를 하나 만들어두면 여러 번 재사용을 할 수 있다는 큰 장점이 있다.  매번 같은 코드를 새로 작업하지 않아도 함수를 호출만 해주면 여러 번 같은 코드를 반복 사용할 수 있다. *만들었다고 바로 실행하는 게 아니라 호출해줘야지 실행한다* 함수는 크게 '일반 함수 정의문'과 '익명함수'로 나누어진다...
[자바스크립트] - 브라우저 객체 모델 history / location / navigator / screen 2. history 객체  histoty객체는 사용자가 방문한 사이트의 기록을 남기고, 이전 방문 사이트와 다음 방문 사이트로 다시 돌아갈 수 있는 속성과 메서드를 제공한다.         [기본형]         history.속성;         history.메서드();         history.메서드(숫자);         [속성 및 메서드]         - history.back(숫자) : 이전 방문 사이트로 이동한다.                               만약 인수자리에 숫자가 없으면 1단계 이전 방문 사이트로 이동한다.                              홈페이지 뒤로 가기 버튼에 이게 들어가 있는 것.         - history.foward(숫자)..
[자바스크립트] - 브라우저 객체 모델 종류 > window 객체 / 일정한 시간 간격으로 코드 실행하는 메서드 setInterval , setTimeout / 를 멈추는 clearInterval , clearTimeout 객체 - 인스턴스 / 속성 - 프로퍼티  브라우저 객체 모델(Browser Object Model : BOM)웹 브라우저가 창에 문서가 표시되는 순간 브라우저는 html소스를 한 줄씩 읽으면서 화면에 내용을 표시하고 관련된 객체를 만들어낸다. 웹 브라우저가 열리면 가장 먼저 window라는 객체가 만들어지고 밑으로 하위요소에 해당하는 객체들이 생성된다. 이 하위 객체는 웹 문서와 주소 표시줄처럼 브라우저 요소에 해당하는 하위 객체를 가리킨다.[ 종류 ]1. window : 브라우저 창이 열릴 때마다 하나씩 만들어진다. 브라우저 창 안의 요소 중 최상위(부모)객체이다.2. document : 웹 문서마다 하나씩 있고 태그를 만나면 만들어진다. html문서의 정보가 담겨있다. 3. navigator : 현재..
[자바스크립트] - ★객체 표현 방식 / 변수에 간단하게 객체를 넣기 / 객체 생성 객체 - 인스턴스 / 속성 - 프로퍼티   객체 표현 방식   변수에 간단하게 객체를 넣고자 할 때 사용하는 방법.  객체를 생성할 때 new키워드를 이용해서 객체를 생성했다.  만약 이것을 좀 더 간략하게 표현하면 아래와 같은 문법을 쓸 수 있다.  [ 기본형 ]          var 참조변수 = {             속성1 : 속성값1,             속성2 : 속성값2,             속성3 : 속성값3,             속성4 : 함수          } - 객체의 속성값을 불러올 때  객체의 속성값을 확인하고자 할 경우객체(변수명).속성명; 을 해주면 해당 객체 속성의 속성값을 확인할 수 있다.          - 만약 속성 값을 바꾸고 싶다면  객체(변수명).속성명 =..
[자바스크립트] - 문자열 객체String Object 예제 실습 _ 간단하게 이메일 유효성 검사해보기 예제 1) 사용자로부터 핸드폰 번호를 입력 받은 후 정보가 노출되지 않도록 뒤의 네자리를 ****로 표시      var phoneNum = prompt(        "핸드폰 번호를 입력해주세요",        "-을 포함해서 입력해주세요"      );      var phone = phoneNum.substring(0, phoneNum.length - 4) + "****";      document.write(phone); 예제 2) 이메일 유효성 검사하기    var userEmail = prompt("이메일 주소를 입력");  var arrUrl = [".co.kr", ".com", ".net", "or.kr", ".go.kr"];      var check1 = false;      var c..
[자바스크립트] - 문자열 객체String Object / 문자열 객체의 메서드, 속성 문자열 객체(String Object) 문자열 객체는 문자형 데이터를 객체로 취급하는 것으로, 자바스크립트에서 가장 많이 사용된다.  즉, 문자형 데이터는 문자열 객체이다. 문자형 데이터는 배열처럼 첫번째 글자부터 index 번호를 0번부터 부여받는다. 이 인덱스 번호를 이용하면 특정 문자 구간을 잘라내거나 특정 문자를 추가하는 등 다양하게 활용할 수 있다.   *index로 잘라내는 애들은 전부다 그 앞에 있는 번호까지만 잘라낸다          [기본형] var 참조변수 = '문자형데이터'" "따옴표 안에 들어오면 문자형 객체다▶ 자주 쓰는 문자열 객체의 메서드 및 속성 .charAt(index)  문자열에서 인덱스 번호의 해당하는 '문자'를 반환 / 변수.charAt(16) 하면 16번째 문자 반환..
[자바스크립트] - Array 배열 매서드 ☆ * 콘솔창에서 화살표를 누르면 인덱스 번호와 lenght 데이터 총 갯수를 확인할 수 있다.   * index로 잘라내는 애들은 전부다 그 앞에 있는 번호까지만 잘라낸다배열의 다양한 메서드  배열 객체에 들어 있는 데이터의 순서를 바꾸거나 배열끼리 합치거나 혹은 배열의 특정 구간만큼을 잘라내고 싶을 때 사용하는 메서드들이 있다.  또한 배열 객체에 새 데이터를 넣거나 삭제할 수도 있다. .join(연결문자) 배열객체의 데이터를 연결문자를 기준으로 1개의 문자형 데이터로 반환 / 변수.join('-');  .reverse()  배열객체의 데이터 순서를 거꾸로 바꾼 후 반환 / 변수.reverse(); .sort()   배열객체의 데이터를 오름차순으로 정렬.slice(index1, index2)  배열객체의..