toUpperCase() / toLowerCase() toUpperCase()는 문자열을 대문자로 변경하고 toLowerCase()는 문자열을 소문자로 변경합니다. const str1 = "javascript"; const currentStr1 = str1.toUpperCase(); document.querySelector(".sample02_N1").innerHTML = "1"; document.querySelector(".sample02_Q1").innerHTML = "javascript"; document.querySelector(".sample02_M1").innerHTML = "toUpperCase()"; document.querySelector(".sample02_P1").innerHTML =..
trim() / trimStart() / trimEnd() 문자열의 앞/뒤 공백을 제거합니다. trim() : 문자열의 앞/뒤 공백을 제거합니다 trimStart() : 문자열의 앞 공백을 제거합니다 trimEnd() : 문자열의 뒤 공백을 제거합니다 const str1 = " javascript "; const currentStr1 = str1.trim(); document.querySelector(".sample03_N1").innerHTML = "1"; document.querySelector(".sample03_Q1").innerHTML = str1; document.querySelector(".sample03_M1").innerHTML = "trim()"; document.querySelecto..
concat() concat() 메서드는 둘 이상의 문자열을 결합하여, 새로운 문자열을 반환합니다. "문자열".concat(문자열) "문자열".concat(문자열, 문자열....) const str1 = "javascript"; const currentStr1 = str1.concat("reference"); //javascriptreference const currentStr2 = str1.concat(" ", "reference"); //javascript reference const currentStr3 = str1.concat(", ", "reference"); //javascript, reference const currentStr4 = str1.concat(", ", "reference", "..
replace() / replaceAll() replace() 메서드는 문자열을 부분 문자열로 구분하고 배열로 반환합니다. "문자열".replace("찾을 문자열", "변경할 문자열") "문자열".replace(정규식) "문자열".replace(정규식, "변경할 문자열") const str1 = "javascript reference"; const cirrentStr1 = str1.replace("javascript", "자바스크립트"); //자바스크립트 reference const cirrentStr2 = str1.replace("j", "J"); //Javascript reference const cirrentStr3 = str1.replace("e", "E"); //javascript rEferen..
split() 문자열에서 원하는 값을 추출 배열로 반환합니다. "문자열".split(구분자); "문자열".split(정규식 표현); "문자열".split(구분자, 갯수); const str1 = "javascript reference"; const currentStr1 = str1.split(''); // ['j','a','v','a','s','c','r','i','p','t','','r','e','f','e','r','e','n','c','e'] const currentStr2 = str1.split(' '); // ['javascript', 'reference'] const currentStr3 = str1.split('', 1); // ['j'] const currentStr4 = str1.spli..
repeat() repeat() 메서드는 문자열을 복사하여, 복사한 새로운 문자열을 반환합니다. const str1 = "javascript"; const currentStr1 = str1.repeat(0); //'' const currentStr2 = str1.repeat(1); //javascript const currentStr3 = str1.repeat(2); //javascript javascript
padStart / padEnd padStart() 메서드는 주어진 길이에 맞게 앞/뒤 문자열을 채우고, 새로운 문자열을 반환합니다. "문자열".padStart(길이) "문자열".padStart(길이, 문자열) const str1 = "456"; const currentStr1 = str1.padStart(1, "0"); //456 const currentStr2 = str1.padStart(2, "0"); //456 const currentStr3 = str1.padStart(3, "0"); //456 const currentStr4 = str1.padStart(4, "0"); //0456 const currentStr5 = str1.padStart(5, "0"); //00456 const curren..
includes() includes() 메서드는 문자열 포함 여부를 검색하여, 불린(true, false)을 반환합니다. "문자열".includes(검색값) "문자열".includes(검색값, 시작값) const str1 = "javascript reference"; const currentStr1 = str1.includes("javascript"); //true const currentStr2 = str1.includes("j"); //true const currentStr3 = str1.includes("b"); //false const currentStr4 = str1.includes("reference"); //true const currentStr5 = str1.includes("referen..
문자열 : 문자열 결합 / 템플릿 문자열 템플릿 문자열은 내장된 표현식을 허용하는 문자열 방식입니다. //01 const str1 = "자바스크립트"; const str2 = "제이쿼리"; document.querySelector(".sample01_N1").innerHTML = "1"; document.querySelector(".sample01_Q1").innerHTML = "자바스크립트, 제이쿼리"; document.querySelector(".sample01_M1").innerHTML = "문자열(string) 결합"; document.querySelector(".sample01_P1").innerHTML = str1 + str2; //02 const num1 = 100; const num2 = ..
slice() / substring() / substr() slice() 문자열에서 원하는 값을 추출하여 문자열을 반환하기 위한 메서드입니다. 시작 위치가 끝나는 위치보다 작아야하며, 새로운 배열 만드는 때 사용 "문자열".slice(시작위치) "문자열".slice(시작위치, 끝나는위치) //시작 위치의 값은 끝나는 위치 값보다 작아야 합니다. const str1 = "javascript reference"; const currentStr1 = str1.slice(0); //javascript reference const currentStr2 = str1.slice(1); //avascript reference const currentStr3 = str1.slice(2); //vascript refere..
indexOf() / lastIndexOf 문자열에서 특정 문자의 위치를 찾고, 숫자를 반환합니다. "문자열".indexOf(검색값) "문자열".indexOf(검색값, 위치값) 내장함수 indexOf() 함수는 문자열에서 원하는 문자열을 검색하여 찾거나, 배열에서 원하는 특정 배열값의 존재여부 등을 확인할 수 있습니다. 배열의 경우 위치값을 index로 반환하는 함수입니다. 중복되는 문자가 있을 경우, 가장 먼저 위치 하는 값이 출력 됩니다. 데이터가 없을 경우에는 -1이 출력 됩니다. 내장함수 lastIndexOf() 함수는 indexOf()와 다르게 뒤에서 부터 검색을 하여 찾습니다. 결과로는 앞에서 부터의 위치를 반환합니다. const str1 = "javascript reference"; cons..
정규표현식(RegExp) 정규표현식 객체는 정해진 문자의 패턴을 만들 때 사용합니다. 문자나 숫자 패턴 같은 간단한 정규표현식부터 조금씩 연습하는 것이 좋습니다. var reg = /Javascript/; var reg = new RegExp('Javascript'); 정규표현식 객체 주요 메서드 속성값 속성 설명 test() 정규표현식과 일치하는 문자열이 있으면 true, 없으면 false를 반환합니다. var reg = /Javascript/; consloe.log(reg.test('Javascript')); // true consloe.log(reg.test('script')); // false match() 정규표현식과 일치하는 문자열을 배열로 만듭니다. 일치하는 문자열이 없으면 null을 반환합..
내장 함수 내장 함수는 기본적으로 자바스크립트에 내장되어 있는 함수들을 말합니다. 인코딩, 디코딩 함수 URL 주소에 쿼리 정보를 전송하여 데이터를 처리해야 되는 프로그램의 경우 한글과 같은 유니코드 문자가 포함되어 있으면 오류가 발생할 수 있습니다. 이런 경우 인코딩 함수를 이용하여 문자를 부호화시키고 부호화된 문자를 다시 디코딩 함수를 이용하여 원래 문자로 되돌릴 수 있습니다. 함수명 설명 encodeURIComponent() 영문, 숫자와 ( ) - _ . ~ * ! ' 을 제외한 문자를 인코딩합니다. decodeURIComponent() encodeURIComponent()의 디코딩 함수 //인코딩, 디코딩 함수 var encodeStr = '자바스크립트'; console.log(encodeURI..
배열 메서드 배열 메서드 중에서 join(), push(), pop()을 알아봅시다. join() join() 메서드는 배열의 모든 요소를 연결하여 하나의 문자열로 만듭니다. 번호 기본값 메서드 리턴값 const arrNum = [100, 200, 300, 400, 500]; const text1 = arrNum.join(''); const text2 = arrNum.join(' '); const text3 = arrNum.join('★'); const text4 = arrNum.join('-'); push() / pop() push() 메서드는 배열 마지막 요소에 추가하고, pop() 메서드는 배열 마지막 요소를 삭제합니다. 번호 기본값 메서드 리턴값 결과값 //01 const arrNum = [100..
요소 선택 요소를 직접 선택하는 메서드 메서드 설명 getElementByld() document.getElementByld('content')일 경우 HTML 요소 중 id 속성이 'content'인 요소를 선택합니다. getElementsByClassName() document.getElementsByClassName('menu')일 경우 HTML 요소 중 class명이 'menu'인 요소들을 선택합니다. getElementsbyTagName() document.getElementsByName('ul')일 경우 HTML 요소 중 태그명이 'ul'인 요소들을 선택합니다. getElementsbyName() document.getElementsbyName('txt')일 경우 HTML 요소 중 name명이..
전역변수와 지역변수 변수는 함수 블록{}을 기준으로 변수와 선언 위치에 따라 '지역 변수'와 '전역 변수'로 나누어집니다. '전역변수'는 함수 블록{} 밖이나 안에서 자유롭게 사용 가능하지만, '지역변수'는 함수 블록{} 내에서만 사용할 수 있습니다. 전역변수와 지역변수 선언 위치 전연변수 지역변수 var 변수; function 함수() { } function 함수(){ var 변수; } 전역변수, 지역변수 예시 var kor = 90; function getScore() { kor = 100; // 전연 변수 console.log(kor); // 100 } getScore(); console.log(kor); // 100 함수 블록 안에 있는 kor 변수는 전역변수입니다. 따라서 getScore 함수를..
함수 반복적으로 사용되는 기능을 만들어 내기 위한 코드들의 집합. 함수의 종류로는 선언적, 익명, 매개변수, 리턴값 함수가 있습니다. 01. 선언적 함수 일반적인 방식. 함수를 선언할 때 이름을 붙여주는 함수를 말합니다. function func(){ document.write("함수가 실행되었습니다.1"); } func(); 결과보기 함수가 실행되었습니다.1 02. 익명 함수 코드명에 함수코드를 저장하는 방식 const func = function(){ document.write("함수가 실행되었습니다.2"); } func(); 결과보기 함수가 실행되었습니다.2 03. 매개변수 함수 호출할 때 인수로 전달된 값을 함수 내부에서 사용할 수 있게 해주는 변수. 함수의 인수(argument)는 함수가 호출될..
조건문 특정 조건 만족 시(true) 실행하는 명령. 조건문은 if문, switch문이 있습니다. 제어문 분류 제어문 조건문 if, switch 반복문 while, do while, for 중지, 건너뛰기 break, continue 01_ if문 if문에는 3가지 형식이 있습니다. if (조건식) { 실행문; } if (조건식) { 실행문1; } else { 실행문2; } if (조건식) { 실행문1; } else if(조건식2) { 실행문2; }else { 실행문3; } if문 안에 if문을 중첩하여 사용할 수 있습니다. if(조건식1){ if(조건식2){ 실행문; } } if 문 결과보기 평균 90점 합격 / 평균 59점 불합격 02_ switch문 switch(값)의 값과 case의 값들을 하나씩..
반복문 반복문은 프로그램에서 필요한 결과 값을 도출하기 위해 실행문의 순서를 반복적으로 실행시키는 문법을 말합니다. 반복문에는 while문, do while문, for문이 있으며 for문을 가장 많이 사용합니다. while문 while문은 조건식이 참이면 실행문을 실행합니다. 초기 값 while (조건식) { 실행문; 증가감식; } do while문 while문과 달리, do while문은 do를 먼저 실행하기 때문에 첫번째 실행은 조건에 상관없이 실행합니다. 초기 값 do { 실행문; 증가감식; } while (조건식) for문 for문은 조건식이 참인 동안 {}안의 실행문을 반복합니다. for문은 중첩하여 사용할 수 있습니다. for ( 초기값; 조건식; 증감값 ){ 실행문; } for문을 이용한 다..
데이터 타입 변수에 저장되는 데이터 유형으로 Primitive(원시), Object(객체)로 나눠집니다. 원시 = number, string, boolean, undefined, null, symbol 객체 = function, object, array number(숫자) 데이터 number 데이터는 정수, 소수점, 지수를 표현 var num1 = 10; var num2 = 10.5; var num3 = 1e+2; console.log(num1); // 10 console.log(num2); // 10.5 console.log(num2); // 100. 1e+2는 1*10의 2승을 의미합니다. string(문자) 데이터 string 데이터는 ''또는 "" 표현 var str1 = '문자'; var str..
for문 for문은 특정 구문을 여러번 반복하고 싶을 때 사용하는 반복문입니다. for ( 초기값; 조건식; 증감값 ){ 실행문 } 0부터 99까지 출력하기 //0부터 99까지 출력하기 for( let i=0; i100; i++ ){ document.write(i) }; //1부터 100까지 출력하기 //1부터 100까지 출력하기 for( let i=1; i=100; i++ ){ document.write(i) }; 1부터 100까지 출력하기(짝수) 짝수로 출력할 때는 증가값을 2로 해주면 됩니다. //1부터 100까지 출력하기(짝수) for( let i=2; i=100; i+=2 ){ document.write(i) }; for문을 이용해서 테이블 출력하기 중첩 for문을 이용해서 테이블을 만들 ..
자바스크립트 연산자 프로그햄에 필요한 수식을 만들 때 필요한 것이 연산자. 연산자에는 산술연산자, 대입연산자, 비교연산자, 논리연산자 등이 있습니다. 산술 연산자 산술 연산자는 사칙연산을 다루는 기본적이면서도 가장 많이 사용되는 연산자입니다. 산술 연산자 종류 속성 설명 + 더하기 연산을 할 때 사용합니다. 문자와 문자, 문자의 변수 등을 연결할 때 사용합니다. - 빼기 연산을 할 때 사용합니다. * 곱하기 연산을 할 때 사용합니다. / 몫을 구 할 때 사용합니다. % 나머지를 구할 때 사용합니다. ++ 1씩 증가시킬 때 사용합니다. -- 1씩 감소시킬 때 사용합니다. 대입 연산자 대입 연산자는 변수에 값을 대입할 때 사용하는 이항 연산자이며, 피연산자들의 결합 방향은 오른쪽에서 왼쪽 대입 연산자 종류 ..
기본 규칙 자바스크립트를 다루기 위해서는 기초적인 특징과 문법이 있습니다. 가장 기본이기 때문에 이 부분을 수지하고 자바스크립트를 공부해야합니다. 자바스크립트란? JavaScript는 웹 페이지에서 복잡한 기능을 구현할 수 있도록 하는 스크립팅 언어 또는 프로그래밍 언어입니다. HTML은 정적인 레이아웃을 표현한다면, 자바스크립트는 동적인 기능을 표현합니다. 자바스크립트는 1995년 넷스케이프 커뮤니케이션의 브렌던 아이크가 개발하였스며 Netscape Navigsator2.0에 구현되었습니다. 1996년에는 마이크로소프트사의 Internet Explorer3.0 탑재되었으며 java 애플릿으로 구현된 웹 브라우저의 지지부진한 보급과 맞물려 빠르게 보급되었습니다. 1997년부터 ESMAScript를 따르는..
