[Javascript] 자료형, 문자열, 배열
* Javacript
JavaScript 는 client(브라우저)에서 구동되는 스크립트 프로그램.
주로 HTML 페이지 내의 element 들의 동적인 변화, 폼 데이터 검증, 브라우저 제어, AJAX 등에 사용.
HTML element 에 접근 할때는 id, class, name, tag명 을 통해서 접근가능.
JavaScript 를 HTML 에 적용하는 방법 3가지
1. inline 방식 : 태그의 onxxx 속성(이벤트) 값으로 JavaScript 코드 동작.
2. internal 방식 : <script></script> 태그 안에 JavaScript 코드 기입
3. external 방식 : <script src="myScript.js"> 와 같이 src 속성에 외부 JavaScript 파일 명시
JavaScript 의 주요동작 3가지
1. HTML element 의 content 를 바꾸는 동작
2. HTML element 의 attribute 를 바꾸는 동작
3. HTML element 의 style 을 바꾸는 동작
웹개발자에게 있어서
HTML + CSS + JavaScript 는 'MUST LEARN' 이다.
** JavaScript:
웹 브라우저에서 가동하는 웹페이지 가동용 기본 스크립트 언어로서 개발됨
jQuery 와 같이 산업표준화된 라이브러리 풍부.
JSON 데이터 교환 포맷
다양한 프레임워크 : vue.js, react.js, angular.js 등...
그밖에도 다양한 영역에서 사용됨
TypeScript : 컴파일 가능한 JS
서버사이드 개발 : Node.JS
하이브리드앱 : IONIC
크로스플랫폼앱 : React Native
데스크탑 어플리케이션 : electron
게임 : PhaserJS, ImpactJS
3D,VR,: three.JS
AR : Aframe, AR.js
머신러닝 : tensorflow.js
Unity3D 같은 게임개발 엔진에서도 채택
** 최초 1995년 개발 (설계자 '브렌던 아이크')
이후 자바스크립트 는 ECMAScript(ES) 표준이 됨 (1997, ECMA262)
모질라 재단, ECMA 인터네셔널, 에서 만들고 관리함.
** 주요 버전
ES5(2009) : 대부분의 브라우저에 지원, (웹페이지 작성 기준?)
ES6(2015) : 가장 많은 변화, (IE 지원안함)
** JavaScript 는 Java 와 관련이 없다!
(둘다 C언어 구문을 계승한 부분은 닮았다.)
** 자바스크립트 구동 환경 = 엔진 + 런타임
엔진 과 런타임에 따라 ECMAScript 규격 지원하는 내용 범위, 제공 객체, 함수들이 다른 부분 존재
** V8 엔진 : 구글에서 개발한 크롬 브라우저용 JS엔진, Node.js 의 엔진으로도 사용됨.
** JavaScript 상표권은 현재 오라클.. 그러나, 모질라 재단과 라이선스 하에 운용됨.
** DOM( Document Object Model ) 을 구동시키기 위한 목적으로 개발되었기 때문에
DOM 구조를 갖고 있는 HTML과 찰떡궁합.
1. JavaScript 는 Content 를 바꿀수 있다.
2. JavaScript 는 attribute 를 바꿀수 있다.
3. JavaScript 는 Style 를 바꿀수 있다.
* JavaScript가 출력하는 4가지 방법.
1. HTML element 에 출력 ← innerHTML 사용
2. HTML 에 직접 출력 ← document.write() 사용
3. alert 팝업 ← window.alert() 사용
4. 브라우저 console 에 출력 ← console.log().
JavaScript 는 브라우저에서 실행 (Client side script) 이기 때문에 브라우저에서 디버깅도 가능하다.
크롬의 경우 Sources 탭에서 Scources 선택하고, breakpoint 추가한 뒤에 실행 가능.
클라이언트 쪽(브라우저)에서 정상적인 동작이 안된다면
1. 우선 '소스' 확인. 제대로
2. console 창에서 에러 (예외) 발생여부 확인하기
3. source 창에서 디버깅
* JS의 자료형(data type) : https://www.w3schools.com/js/js_datatypes.asp
- number
- string
- boolean
- array
- object
- function
- undefined
JS의 자료형(타입)은 가변적(dynamic)이다.
1. number, string 타입
x = 5; // x 는 number -> 타입 x = 5 [ number ]
x = "5"; // x 는 string 타입 -> x = 5 [ string ]
x = 'John'; -> x = John [ string ]
x = 16 + 4 + "Volvo"; -> x = 20Volvo [ string ]
x = "Volvo" + 16 + 4; -> x = Volvo164 [ string ]
x = undefined; // 다시 undefined 로 변경 가능 -> x = undefined [ undefined ]
x = "10" + 10; // "1010(string)" + 문자열연결연산 -> x = 1010 [ string ]
x = "10" * 10; // 100(number) * 산술연산, "" 로 해도 산술연산이 된다 -> x = 100 [ number ]
x = "10" - 10; -> x = 0 [ number ]
x = "10" / 10; -> x = 1 [ number ]
x = "10" > 2; // true -> x = true [ boolean ]
x = "a" * 10; // NaN : Not a Number 에러는 아니다. -> x = NaN [ number ]
x = 10 / 0; // Infinity 에러 아님. -> x = Infinity [ number ]
x = null; -> x = null [ object ]
★ 웹 화면에 undefined, NaN, null, Infinity 가 출력되고 있다면 무언가 잘못 페이지가 만들어졌다는 뜻이다.
2. boolean 타입
x = 10 > 5;
x = (10 == "10"); // true. == 연산자는 '값' 만 비교
x = (10 === "10"); // false, === 연산자는 '값' 뿐 아니라 '타입' 도 비교
// 마찬가지로, !=, !== 연산자도 있다.
* 조건식에서 '참'/'거짓' 판정 (Truthy / Falsy)
boolean 값은 그대로.
x = (true) ? 'Truthy' : 'Falsy';
write("true → " + x);
number 타입 판정 : 0은 거짓, 0 이외의 숫자는 참 판정
x = (10) ? 'Truthy' : 'Falsy';
write("10 → " + x);
y = 0
x = (y) ? 'Truthy' : 'Falsy';
write(y + " → " + x);
* string 타입 판정 : 비어있는 문자열은 거짓, 나머지는 참 판정
y = '0';
x = (y) ? 'Truthy' : 'Falsy';
write(y + " → " + x);
y = '';
x = (y) ? 'Truthy' : 'Falsy';
write(y + " → " + x);
y = ' ';
x = (y) ? 'Truthy' : 'Falsy';
write(y + " → " + x);
y = 'hello';
x = (y) ? 'Truthy' : 'Falsy';
write(y + " → " + x);
* 배열의 경우. 비어있건 없건 무조건 참으로 판정.
y = [10, 20, 30];
x = (y) ? 'Truthy' : 'Falsy';
write(y + " → " + x);
y = [];
x = (y) ? 'Truthy' : 'Falsy';
write(y + " → " + x);
* object 의 경우. null 이 아니면 참으로 판정
// 비어있는 object 도 참으로 판정
y = {name: "홍길동"};
x = (y) ? 'Truthy' : 'Falsy';
write(y + " → " + x);
y = {};
x = (y) ? 'Truthy' : 'Falsy';
write(y + " → " + x);
* null, undefined, NaN, Infinity
y = null;
x = (y) ? 'Truthy' : 'Falsy';
write(y + " → " + x);
y = undefined;
x = (y) ? 'Truthy' : 'Falsy';
write(y + " → " + x);
y = NaN;
x = (y) ? 'Truthy' : 'Falsy';
write(y + " → " + x);
y = Infinity;
x = (y) ? 'Truthy' : 'Falsy';
write(y + " → " + x);
boolean 타입
array 타입
function 타입
object 타입
* String
기본적으로 string 의 모든 함수는 immutable 하다. 즉 원본을 변화시키기 않고, 새로운 string 을 만들어 리턴한다.
문자열은
1. "~" 혹은 '~' 으로 정의
2. new String() 으로 정의 (비추)
* '~', "~" 둘다 사용하는 이유
str = "It's alright"; write(str);
str = 'He is called "Johnny"'; write(str);
* new 사용하여 생성하는 경우
str1 = "John";
wrType(str1, str1);
str2 = new String("John")
wrType(str2, str2);
* .length : 문자개수
var str = "ABCDEFGHIJKLMNOPQRSTUVWXYZ";
write(str.length);
* 이스케이프 문자 escape character
\' \" \\ \n \t
* indexOf(), lastIndexOf(), search() : 문자열 안에서 문자열 찾기
- 찾은 위치 인덱스 리턴, 못찾으면 -1 리턴
search() vs indexOf() : 둘은 다르다!
- search() : 두번째 매개변수 없다, regexp 사용 가능
- indexOf() : regexp 사용 불가
* 문자열 추출
- slice(start, end) : start 부터 'end직전'까지 문자열 추출
- substring(start, end)
- substr(start, length)
* 문자열 치환
- replace() : 치환한 결과 문자열 리턴, 정규표현식 사용 가능
- 기본적으로 첫번째 매칭된 문자열만 치환
- 정규 표현식 /~/i -> 대소문자 구분없이 매칭, /~/g -> 전체 매칭되는 문자열 치환
* 대소문자 전환
toUpperCase(), toLowerCase()
* 문자열 연결
concat()
* 좌우 공백 제거
trim()
* 문자 코드 :
- charAt(position)
- charCodeAt(position)
- Property access [ ]
* string -> array : split()
* array -> string : join()
Array 배열
* 배열생성
- 방법 1
var points = [40, 100, 1, 5, 25, 10];
var fruits = ["Banana", "Orange", "Apple", "Mange"];
- 방법 2 : new 사용
var cars = new Array("Saab", "Volvo", "BMW"); // 비추
* 배열원소 추가
.push
* 배열여부 판단
- typeof 로는 배열여부 알 수 없다.
Array.isArray()
join()
- 배열의 원소들을 주어진 문자열로 묶어서 하나의 문자열로 리턴
- 문자열을 붙여 나갈시. 연이어 += 연산하기보단. push() + join() 사용 추천
arr.join("-")
* push() pop() shift() unshift()
push() : 배열끝 원소 추가, 새로운 length 리턴
pop() : 배열 끝 원소 추출 (배열에서 제거). 추출할 원소가 없으면 undefined 리턴
shift() : 배열 첫 원소 추출 (배열에서 제거)
unshift() : 배열앞에 원소 추가, 새로운 length 리턴
* splice()
- 첫번째 매개변수 : 삽입될 데이터 위치
- 두번째 매개변수 : 삭제될 데이터 개수
- 세번째 이후 .. : 삽입될 데이터 들..
- 리턴값: 삭제된 원소들의 배열
* 배열 데이터 삭제 - delete 보다는 pop(), shift(), splice() 를 사용하길 추천
* concat()
* slice()
* indexOf()
* includes()
* for 문 사용
write('');
for(i = 0; i < x.length; i++){
wrType("x[" + i + "] = ", x[i]);
}
* for~in 문으로 추출 가능
단 아래의 i 는 '배열원소' 값이 아니라 '배열 인덱스' 다
write('');
for(i in x){
//wrType("x[" + i + "] = ", x[i]);
// Template Literal 구문 (ES6 < ) (파이썬의 f-string 과 비슷)
wrType(`x[${i}] = `, x[i]);
}
* for~of 문으로 추출
v. 배열원소 값을 추출하여 순환
for(v of x){
wrType('v = ', v);
}
forEach(함수)
x.forEach(function(e){ // 이름없는 함수
wrType('e = ', e);
});
x.forEach((e)=>{ // 화살표 함수 (arrow function) 사용 (ES6 < )
wrType('e = ', e);
});
* 연습문제
1. 가장 긴 문자열 찾기 - 문장을 입력하면 가장 긴 단어(문자열)을 출력하세요.
<body>
<h3>가장 긴 문자열 찾기<br />문장을 입력하면 가장 긴 단어(문자열)을 출력하세요</h3>
문자열:<br>
<input type="text" id="txt" value="I am a student">
<br>
<input type="button" value="결과" onclick="longestWord()">
<h3 id="result"></h3>
</body>
<script>
function longestWord() {
var str = document.getElementById('txt').value; // id가 txt인 곳의 값
var words = str.trim().split(/\s+/);
// 단어별로 쪼개기(한 개 이상의 공백을 기준으로 쪼개라는 것. \s는 공백을, +는 1개이상(0개이상은 *)을 의미)
var max = 0; // 최대값 0번째
var max_word = words[0]; //word의 0번째
for(word of words){ // for~of 문 배열원소 값을 추출하여 순환 -> 배열에서 하나씩 뽑음 value가 나옴
if(word.length > max){
max = word.length; //max를 word.length로 업데이트
max_word = word;
}
}
document.getElementById("result").innerHTML = max_word;
// id가 result인 곳의 HTML을 max_word로 변경
}
2. 단어 첫문자 대문자로
<body>
<h3>LetterCapitalize<br />영어 문장을 입력하면<br />각 단어 첫 문자만 대문자로 만들기</h3>
영어문장입력:<input type="text" id="txt" value="i am a programmer">
<br>
<input type="button" value="결과" onclick="document.getElementById('result').innerHTML = letterCapitalize(document.getElementById('txt').value)"> <!-- 이런식으로 매개변수(argument) 넘겨줄수 있다-->
<h3 id="result"></h3>
</body>
<script>
var letterCapitalize = function(text) {
text = text.toLowerCase(); // 일단 죄다 소문자로.
var arr = text.trim().split(/\s+/); // 공백으로 단어 쪼개기
var result = ""; // 결과 문장
for(var i = 0; i < arr.length; i++){ // 각 단어별로.
var first = arr[i].charAt(0); // 첫글자 분리
var res = arr[i].slice(1); // 두번째 글자부터 끝까지
first = first.toUpperCase(); // 첫글자만 대문자로
result += first + res; // 단어 다시 합치기
// 문장 조립하기
if (i < arr.length - 1) {
result += " "; // 맨 끝이 아니면 공백 추가
}
}
return result;
}
</script>