회고록 블로그
[공부 필기] 생활코딩 JavaScript 입문 강의 필기 (1) 본문
오리엔테이션
(1) JavaScript는 처음 웹브라우저를 제어하기 위함으로 고안되었음.
(2) 하지만 현재에는 JavaScript를 웹서버에서도 사용할 수 있도록 하는 기술이 등장함 (node.js가 대표적)
=> 자바스크립트는 만능이구나.
(3) 웹브라우저에서 실행되는 자바스크립트는 HTML이 꼭 필요함
수의 표현과 연산
(0) 소괄호 사이에 수(number)가 들어감
(1) 정수, 실수 모두 입력될 수 있고, 정수/실수에 대한 정의는 중요하지 않음 (포괄적으로 그냥 number라고 함)
...
<body>
<script type="text/javascript">
alert(1.1+1.1);
// 1이나, 1.1이나 그냥 number라고 한다
// alert(2*8);과 같이 사용도 가능
</script>
</body>
</html>
(2) "Math.pow(3, 2)"와 같이 연산을 할 수도 있음
- 여기에서 Math는 일종의 카테고리라고 생각을 하자. 그 카테고리에서 pow 라는 명령을 가져올 때 온점(.)을 사용함
- Math.round, Math.ceil, Math.floor, Mat.sqrt, Math.random 등이 있음
(3) <script> 태그는 body 태그 최하단을 추천
(4) alert 명령: 경고창을 띄움
※ 참고. alert의 오리지널은 사실 "window.alert()" 메서드이다.
문자의 표현
(1) 문자는 작은따옴표(') or 큰따옴표(") 사이에 입력함
(2) 이런 경우도 가능
* 작은 따옴표 사이에 큰따옴표(")가 들어가는 것 (=> 큰따옴표만 출력됨)
alert('coding everybody!"');
(3) 문장 내에 작은 따옴표(')와 큰따옴표(")가 둘 다 들어간다면?
* 역슬래쉬(\) 이용 (이스케이프라고 함)
alert("'나'는 \"안녕하세요\"라고 말했다");
<정리>
document.write("a"); // 큰따옴표
document.write('"b"'); // 작은따옴표 사이에 큰따옴표
document.write('c'); // 작은따옴표
document.write("\"d\""); //큰따옴표 사이에 역슬래쉬+큰따옴표
역슬래시(\)에 대해서 더 공부하기
document.write("a ");
document.write("\\b");
document.write("\nc");
역슬래시를 이용해서 큰따옴표, 작은따옴표, 역슬래시 등을 표현할 수 있음
다만, \n은 "줄바꿈" 기능임에도 불구하고 위의 그림에서는 줄바꿈이 되지 않는데..
document.write는 웹페이지에 HTML 문서로 출력하는 기능을 하기 때문에 \n(줄바꿈) 기능이 인식되지 않음
(위의 경우, 줄바꿈은 되지 않고 띄어쓰기 한 칸만 출력됨)
이때는 HTML의 태그인 <br/>을 사용하면 됨
단, 아래와 같이 alert을 사용할 때에는 \n(줄바꿈)으로 줄바꿈이 가능함
그리고 <br/>은 줄바꿈 기능으로 인식되지 않음
alert("a ");
alert("\\b");
alert("\nc");
alert("d<br/>");
참고 능력자님 블로그:
자바스크립트에서 BR태그 vs \n vs 엔터문자 / & nbsp vs 공백문자
자바스크립트에서 BR태그 vs \n, & nbsp vs 공백문자 자바스크립트 차원과 HTML 차원의 줄바꿈은 사실 다릅니다. HTML 에서는 pre, xmp 태그를 제외한 줄바꿈은 반드시 태그를 쓰셔야 줄바꿈이 인정됩니
linuxism.ustd.ip.or.kr
5/27 추가>
window.alert 메서드의 소괄호 안에는 "텍스트(문자열)" 혹은 "문자열로 변환해 나타낼 객체"가 들어간다.
즉, alert(11+11)을 입력했을 때 보여주는 값 22는 문자열(string)로 표현된다는 의미.
<br/>은 HTML의 문법이며, HTML의 규칙에 따라 "줄바꿈"이 되는 것이지,
단순히 문자로만 보면 아무 의미없는 "<br/>"일 뿐이다.
따라서, alert 메서드에서는 문자 그 자체로 출력(= <br/>) 된다.
하지만 document.write의 소괄호 안에는 마크업이 들어간다. 즉, 매개변수가 마크업인 것.
따라서, 마크업 언어인 HTML의 문법이 적용되고
<br/>은 HTML의 문법으로 해석하자면 "줄바꿈"이기 때문에, document.write("<br/>")은 줄바꿈이 된다.
https://developer.mozilla.org/ko/docs/Web/API/Window/alert
https://developer.mozilla.org/ko/docs/Web/API/Document/write
(4) 숫자 '1'과 큰따옴표 안에 있는 1이 같은 의미일까?
* typeof를 이용해서 타입 확인
* typeof 1 => number(숫자)
* typeof "1" => string(문자열)
(5) 숫자+숫자는 더한 값이 나오지만, 문자("1")+문자("1")는 두 문자를 연결한 결과가 나옴
※ length는 글자수를 말하는 것 같다. 한글로된 문자열에 length를 쓰면 아래와 같은 결과가 나온다. (바이트가 아닌 듯)
※ 자바스크립트에서 String에 사용할 수 있는 명령들을 알고 싶다면 생활코딩 사전(아래) 참고
opentutorials.org/course/50/37
String - 생활코딩
한줄요약 문자열 객체. 문자를 제어하는 다양한 메소드와 속성을 가지고 있다. 문법 String([stringText]) new String([stringText]) // String은 자주 사용하는 객체이므로 다음과 같은 형식을 사용하면 암시적
opentutorials.org
※ 실습
alert("code".indexOf("c"));
문자열(string)에 쓰는 명령어는 indexOf, length 등이 있음
5/27 추가>
주의. 개인적으로 C언어, JAVA를 배웠던 습관 때문에 자꾸 typeof()로 헛갈리는데 javaScript에서는 "typeof _____" 의 형태로 쓴다.
변수
(1) var 이라는 키워드를 사용함 (생략 가능함)
* 생략 가능한 이유를 명확하게 알고 생략해야함
(2) 변수의 값은 문자, 숫자 등이 올 수 있음
(3) 변수를 선언하고 초기화할 때에는 아래와 같이 사용도 가능함
var a = '1', b = '2'; //문자(string) 1과 2가 각각 변수 a와 b에 저장됨(4) 변수를 잘 쓰면 효용성이 높아짐
* 아래 코드에서 a의 값을 1000으로 바꿔야 한다면, 변수 a의 값만 변경해주면 됨 = 효용성이 높아짐
var a = 100;
a = a + 10; // a는 110인 상황
alert(a);
a = a / 10; // a는 110 나누기 10 = 11인 상황
alert(a);
a = a - 10; // a는 11 - 10 = 1인 상황
alert(a);* 변수 선언(=var 변수명)은 프로그램 코드의 군데군데 적기보다는 가장 최상단에 모아두는 등 일정 위치에 모아두기..?
(유지보수를 용이하게 하기 위함)
※ Tip1. 주석 한줄은 //
※ Tip2. 주석 두줄 이상은 /* */
※ Tip3. 세미콜론(;)은 하나의 구문이 끝났음을 명시적으로 나타내는 기호
(세미콜론은 생략할 수 있는데 이 경우 줄바꿈을 명령의 끝으로 간주함)
5/28 추가>
ES6 부터는 변수 선언 키워드가 var, let, const가 있다고 한다.
차이점은 아래 블로그를 참고 :
var과 let, const의 가장 큰 차이점은
"var"은 함수 레벨 스코프(함수를 기준으로 함. 그러다보니 for문, if문 등 안에서 선언된 var 변수는 전역변수가 됨)
"let과 const"는 블록 레벨 스코프(블록을 기준으로 함. 함수는 물론 for문, if문 등 안에서 선언된 let, const 변수는 지역변수가 됨)
인 것으로 보인다.
또한 let과 const의 가장 큰 차이점은 "값을 할당한 이후에 값을 변경할 수 있는가(let), 없는가(const)"인 것 같다.
그 외에도 차이점이 있는데 위의 블로그를 참고하기로 한다.
비교연산자 (operator)
(0) 변수 = 값 : 여기에서 '=' 기호는 대입을 의미함 (변수에 값을 대입하라는 의미) = 대입 연산자
(1) 비교 연산자를 통해 나오는 결과는 true/false임 (boolean)
(2) 동등 연산자(equal operator) : ==
* 데이터의 형식(number, string 등)이 달라도 실질적인 값이 같다면 true
alert(1=="1");
(3) 엄격한 동등 연산자(strict equal operator) : ===
* 좌.우 값이 엄격하게 동등하는가? (데이터의 형식도 동등해야함)
document.write(1=="1");
document.write("<br/>");
document.write(1==="1");
※ '==' 보다는 '==='를 사용하는 것을 강력하게 권고함
* 프로그래밍에서 데이터의 형식이 다른 것은 다른 값이라고 생각해야하기 때문에 '==' 사용을 권고하지 않음
※ 콘솔창이 지저분할 때에는 clear();
(4) 임의의 변수를 선언했지만 값이 초기화 되어 있지 않으면 'undefined' 이라고 나옴
(=프로그래머가 값이 없음/존재하지않음을 의도하지 않음)/
'값이 없음'으로 표시할 때에는 'null'을 변수에 대입함(=프로그래머가 값이 없음을 의도한 상황)/
계산 할 수 없는 경우(= 0/0 등)에는 값이 'NaN'으로 나옴/
* undefined, null은 모두 '값이 없다'는 것은 맞지만 프로그래머가 의도했는지, 하지 않았는지에 따라 다르게 사용됨
var a;
alert(a); //결과: undefined
var b = null;
alert(b); //결과: nulldocument.write(undefined == null);
document.write("<br/>");
document.write(undefined === null);
※ 동등 연산자(==)에서 문자1(="1"), 숫자1(=1)은 true로 간주하며, 문자0과 숫자0은 false로 간주함
* NaN은 연산으로 만들어진 특수한 데이터(결과)임
alert(true == 1); // 결과: true
alert(true == 2); // 결과: false
alert(true == '1'); // 결과: true
alert(true == '2'); // 결과: false
alert(true === 1); // 결과: false
alert(true === 2); // 결과: false
alert(true === '1'); // 결과: false
alert(true === '2'); // 결과: false
alert(0 == -0); // 결과: true
alert(0 === -0); // 결과: true
alert(NaN == NaN); // 결과: false
alert(NaN === NaN); // 결과: false5/28 추가>
주의할 점: 동등연산자에서의 결과값이 이러하다는 것이다.
0, 1, 2, 3, NaN, 빈문자열, null, undefined의 boolean 값을 확인해보면 아래와 같다.
(0, undefined, null, NaN, 빈문자열의 boolean은 "false"이며 나머지 1, 2, 3의 boolean은 "true"임)
※ 복잡하고도 아름다운(?) Boolean에 대한 세부 설명은
https://developer.mozilla.org/ko/docs/Web/JavaScript/Reference/Global_Objects/Boolean 참고
(5) 부정 : !=
alert(1!=2); // 1==2는 false이고 그 결과의 부정이므로 true(6) 정확하게 같은가에 부정 : !==
* strict equal operator(===)의 부정이라고 생각
(7) 비교 연산자: < , <= , >, >=
(8) 논리 연산자: && , ||
* 좌항과 우항을 and로 연결: &&
* 좌항과 우항을 or로 연결: ||
조건문(Conditional Statement)
(1) 형태는 아래와 같음
* 소괄호 안에 false가 들어가면 if문은 실행되지 않음
if(true){
alert('Hi everyone');
}(2) 예시
...
<body>
<script type="text/javascript">
if(1){
alert("Hi");
alert("everyone!")
}
</script>
</body>
</html>(3) if...else문도 있고, else if도 있음
if(true){
alert("Hi");
}
else{
alert("Goodbye");
}...
<body>
<script type="text/javascript">
var stat = 'pause';
if(stat === 'pause'){
alert("Music statement: Pause");
}
else if(stat === 'stop'){
alert("Music statement: Stop")
}
else{
alert("Music statement: Play");
}
</script>
</body>
</html>(4) prompt 명령어 : 프롬프트창이 뜨면서 사용자로부터 어떠한 값을 받을 수 있게됨
* alert과 prompt 명령을 둘 다 사용할 수도 있음
alert('당신의 나이는 '+prompt('당신의 나이를 입력하세요')+'세 입니다');
(5) if문, prompt, alert 명령을 이용한 예시
<!DOCTYPE html>
<html>
<head>
</head>
<body>
<script type="text/javascript">
id = prompt('아이디를 입력해주세요.');
if(id==='guest'){
alert("게스트로 로그인 하였습니다.");
}
else if(id==='student'){
alert("학생으로 로그인 하였습니다.");
}
else{
alert("존재하지 않는 아이디입니다.");
}
</script>
</body>
</html>(6) 중첩도 가능함
(7) 논리연산자와 if문 사용도 가능함
* 괄호 안에 괄호도 가능하구나 e.g. ((id === 'guest' || id === 'student') && password === '1111')
* && , || , ! 등
id = prompt('아이디를 입력해주세요.');
password = prompt('비밀번호를 입력해주세요.');
if((id==='guest' || id=='student') && password=== '1111'){
alert('인증했습니다.');
} else {
alert('인증에 실패했습니다.');
}
※ 유의!
prompt 명령으로 입력받은 값은 string 타입인 것 같다.
숫자형 타입이 필요할 땐, Number() 함수를 이용해 숫자형 타입으로 변환해주면 된다.
var midScoreKor = Number(prompt("중간고사 국어 점수를 입력하시오."));
var midScoreMat = Number(prompt("중간고사 수학 점수를 입력하시오."));
var midScoreEng = Number(prompt("중간고사 영어 점수를 입력하시오."));
var midAvg1 = (midScoreKor + midScoreMat + midScoreEng) / 3;
var midAvg2 = (midScoreKor + midScoreMat + midScoreEng) / 3.0;
document.write("국어 점수 : "+midScoreKor+"<br/>");
document.write("수학 점수 : "+midScoreMat+"<br/>");
document.write("영어 점수 : "+midScoreEng+"<br/>");
document.write("평균점수 1번 케이스 : "+ midAvg1+"<br/>");
document.write("평균점수 2번 케이스 : "+ midAvg2);
document.write("<br/>");
if(midAvg1 >= 90){
document.write("매우우수함");
}
else if(midAvg1 >= 80){
document.write("우수함");
}
else if(midAvg1 >= 70){
document.write("보통");
}
else if(midAvg1 >= 60){
document.write("약간미흡함");
}
else{
document.write("미흡함");
}
자바스크립트에서 "(정수+정수)/정수"를 계산하면 결과가 '실수'로 출력되는 것 같다.
(정수형으로 출력하고 싶으면 Math.round 메소드, toFixed 함수 등을 사용해야할 것 같다)
...
document.write("평균점수 1번 케이스 : "+ midAvg1.toFixed(2)+"<br/>");
// 소수점 아래 두자리까지 출력
...(8) 빈문자열(' '), undefined(초기값이 할당되지 않음), null, NaN은 모두 false로 간주함
(9) boolean : 1과 0 보다는 true와 false 사용을 권장
반복문(loop, iterate)
(1) document.write() : 괄호 안에 문자열을 웹페이지에 출력하는 명령어임
<!DOCTYPE html>
<html>
<head>
</head>
<body>
Hello world<br/>
Hello<br/>
<script type="text/javascript">
document.write("Coding Everybody<br/>");
</script>
</body>
</html>(2) while문: 아래와 같은 예시를 작성하면 'Coding Everybody'가 5번 출력됨
* 프로그램은 0부터 시작한다는 것을 잊지말 것(?)
* while문의 조건 영역에 true가 들어가면 무한 반복되는 사태(?)가 발생할 수 있음
<!DOCTYPE html>
<html>
<head>
</head>
<body>
Hello world<br/>
Hello<br/>
<script type="text/javascript">
var num = 5;
while(num !== 0){
document.write("Coding Everybody<br/>");
num = num - 1;
}
</script>
</body>
</html>
(3) for문: 한줄로 초기문, 조건문, 증감문을 써서 반복 작업을 할 수 있음
* 초기문/조건문/증감문은 세미콜론으로 구분하는 것 잊지말기
* 초기문을 먼저 실행 -> 조건문 체크 -> 조건 일치하면 for문 안의 코드 실행 -> 마지막에 증감문 실행
* 조건문의 조건이 일치하지 않으면 그대로 종료
<!DOCTYPE html>
<html>
<head>
</head>
<body>
Hello world<br/>
Hello<br/>
<script type="text/javascript">
for(var num=5; num!==0; num--){
document.write("Coding Everybody<br/>");
}
</script>
</body>
</html>while문 <-> for문
var cnt = Number(prompt('1에서 10까지의 숫자 중 하나를 입력하세요.'));
if(cnt > 10){
alert("1에서 10 사이의 숫자가 아닙니다.");
}
else{
while(cnt !== 0){
document.write(cnt+"<br/>");
cnt = cnt-1;
}
}var cnt = Number(prompt('1에서 10까지의 숫자 중 하나를 입력하세요.'));
if(cnt > 10){
alert("1에서 10 사이의 숫자가 아닙니다.");
}
else{
for(cnt; cnt!==0; cnt--){
document.write(cnt+"<br/>");
}
}※ 반복문 안에 조건문(if)이 들어갈 수 있고, 조건문 안에 반복문이 들어갈 수도 있음
※ num=num-1과 num--은 비슷한 의미임
※ num--과 --num의 차이는 한 문장(?)을 실행시킬 때 num의 숫자를 감소시키고 명령을 수행할 것인지, 명령을 수행하고 숫자를 감소시킬 것인지의 차이임
var i=5;
alert(i--); //결과는 5가 출력되고, 그 다음에 i에 5-1=4가 저장됨
var j=5;
alert(--j); //결과는 5-1=4가 출력되고, 그 다음에 j에 4가 저장됨(4) 특정 값에서 반복문을 종료하고 싶다면 break 사용
(5) continue : 특정 위치에서 진행되고 있던 반복문을 멈추고 다시 반복문의 처음으로 가서 반복문을 실행하는 것(?)
<!DOCTYPE html>
<html>
<head>
</head>
<body>
<script type="text/javascript">
for(var i=0; i<10; i++){
if(i===5){
break;
}
document.write('coding everybody'+i+'<br/>');
}
</script>
</body>
</html>(6) 반복문 중첩 가능
* 자바스크립트는 '문자열 '+'숫자'를 입력하게 되면 숫자를 '문자열'로 자동으로 치환해줌
<!DOCTYPE html>
<html>
<head>
</head>
<body>
<script type="text/javascript">
for(var i=0; i<10; i++){
for(var j=0; j<10; j++){
document.write('coding everybody'+i+j+'<br/>');
}
}
</script>
</body>
</html>※ debugger로 한 줄씩(?) 분석해보기
함수(function)
(0) 함수는 재사용성을 높여줌 (이 점에 주목하여 공부를 진행)
* 함수가 없다면 똑같은 기능을 하는 코드를 계속 중복으로 등장시켜야함
=> 사용할땐 문제가 없을 수 있지만 그 기능을 수정해야하는 날이라도 오면 사직서 내고 싶은 기분이 들 수 있음(?)
(1) function으로 시작해야함
function 함수명([인자1], [인자2], ...){
함수 내용 및 코드
return 반환값
}
(2) 함수를 호출할 때 '함수명()'과 같이 입력해야함
* 단순히 '함수명'만 입력하면 자바스크립트는 변수로 인식함
<!DOCTYPE html>
<html>
<head>
</head>
<body>
<script type="text/javascript">
function numbering(){
var i = 0;
while(i<10){
document.write(i+"<br>");
i++;
}
}
numbering();
</script>
</body>
</html>(3) 함수의 특징: 재사용성, 유지보수의 용이, 가독성
* 하나의 함수를 여러 곳에서 사용할 수 있다는 점
* 함수 안의 코드만 수정하면 그 함수를 사용하는 모든 곳을 수정할 수 있다는 점
(4) 함수에는 return이라는 반환값(함수에 입력과 출력이 있을 때, 출력에 해당함)이 있음
* return 뒤에 있는 코드는 실행되지 않음 (return을 만나면 값을 반환하고 함수가 종료되기 때문에)
* return 값은 하나만 받을 수 있음
(5) 함수는 매개변수(parameter)를 포함할 수 있음
* C언어의 함수와는 다르게 데이터타입 함께 입력할 필요 없음
* 매개변수(parameter) : 함수(function)에 있는 값 (함수를 호출할 때 전달받는 값을 저장하는 변수)
e.g. function get_argument(arg) { } ==> arg를 '매개변수'라고 함
* 인자(argument) : 함수를 호출할 때 괄호 안에 넣는 값
e.g. alert(get_argument(10) ==> 여기에서 10을 '인자'라고 함)
...
<script type="text/javascript">
function numbering(arg){
var i = 0;
while(i<arg){
document.write(i+"<br>");
i++;
}
}
var num = prompt('1~10까지 중 하나의 숫자를 입력하세요.');
numbering(num);
</script>
</body>
</html>(6) 함수를 정의할 때 아래와 같은 방법을 사용할 수도 있음
<script type="text/javascript">
numbering = function (){
i = 0;
while(i < 10){
document.write(i);
i += 1;
}
}
// 우변을 '익명함수' 라고 함
numbering();
</script><script type="text/javascript">
(function (){
i = 0;
while(i < 10){
document.write(i);
i += 1;
}
})();
// 익명함수
// 1회성으로 함수를 사용할 때 이용한다
</script>※ 위의 두 코드에는 익명함수가 있음
(보통 function 함수명(){ } 과 같이 사용할 때에는 선언적 함수라고 함)
※ 자바스크립트를 '함수형 언어'라고 부를 정도로, 다른 언어에 비해서 함수라는 것이 자바스크립트에서 차지하는 위상이 매우 높음
배열(Array)
(0) 연관된 데이터를 모아서 통으로 관리 (= 데이터를 담는 그릇)를 배열이라고 함
(1) 배열은 대괄호로 시작해서 대괄호로 끝남
var numbers = ['num1', 'num2', 'num3'];(2) 배열의 각각의 값을 '원소'라고 하고, 원소는 색인(index)를 가지고 있음
* 배열은 '순서'를 가지고 있음
* 색인(index)는 순서대로 0, 1, 2, 3, ... 으로 되어있음 (0부터 시작함을 기억할 것)
var numbers = ['num1', 'num2', 'num3'];
alert(numbers[0]);
(3) 배열은 반복문과 함께 사용했을 때 그 가치가 더 향상됨
반복문으로 정리하면 아래와 같이 작성 가능
function get_numbers(){
return ['num1', 'num2', 'num3'];
}
var numbers = get_numbers();
for(var i=0; i<numbers.length; i++){
document.write(numbers[i].toUpperCase()+"<br/>");
}
(4) length : 크기를 확인할 수 있음
function get_numbers(){
return ['num1', 'num2', 'num3'];
}
var numbers = get_numbers();
for(var i=0; i<numbers.length; i++){
document.write(numbers[i].toUpperCase()+"<br/>");
}(5)
push : 배열에 하나의 값을 추가하는 명령어 (배열의 마지막 위치에 추가됨)
concat : 여러개의 값을 배열에 추가할 때 사용함 (배열의 마지막 위치에 추가됨)
unshift : 배열의 첫번째 원소에 값을 추가하고, 기존 값들의 인덱스를 1씩 증가시킴
splice : 배열의 특정 구간에 새로운 값 추가 or 특정 구간에 있는 값 추출함 (상당히 복잡하니 설명을 잘 읽어볼 것)
opentutorials.org/course/50/110
splice - 생활코딩
요약(Summary) 배열의 특정구간을 추출하거나, 특정구간에 특정 배열을 추가함 문법(Syntax) array.splice(index, howmany, element1, ...., elementN); 인자(Parameters) 인자명 데이터형 필수/옵션 설명 index number 필수
opentutorials.org
var li = ['a', 'b', 'c'];
li.push('d');
document.write(li[3]); // d 문자열 출력됨 var li = ['a', 'b', 'c'];
li = li.concat(['d', 'e']); // concat의 인자는 '배열'임
document.write(li[3]+"<br/>");
document.write(li[4]);(6)
shift: 배열의 가장 앞에 있는 원소를 지움
pop: 배열의 가장 마지막(뒤)에 있는 원소를 지움
(7)
sort: 배열의 값 정렬(알파벳순 오름차순)
reverse: 배열의 값 역순으로 정렬
기타 : 오름차순, 내림차순이 아닌 특정 기준에 따라 정렬하고 싶다면 sort 명령어를 쓰되, sortfunction을 직접 정의해서 사용하면 됨
opentutorials.org/course/50/109
sort - 생활코딩
요약(Summary) 배열을 정렬한다. 문법(Syntax) array.sort(sortfunc) 인자(Parameters) 인자명 데이터형 필수/옵션 설명 sortfunc function 옵션 원소들 간에 무엇이 우선인지를 판단한다 반환값(Return) array, 정렬된
opentutorials.org
객체(Object)
(1) 배열과 유사한 기능을 하는 '객체' -> 연관 되어있는 데이터를 담는 그릇이라는 공통점이 있음
(2) 대표적으로 배열과의 차이점은 색인(index)이 있음
* 배열은 0, 1, 2라는 인덱스가 자동으로 부여되지만 객체는 인덱스를 개발자가 부여해줘야함
* 다른 언어에서는 연관배열, 맵, 딕셔너리라고 함
* 수업에서 말하는 객체는 '데이터를 담아내는 컨테이너(그릇)'에 대한 설명이므로 '객체 지향'에 대한 설명은 없음
(3) 객체는 중괄호({})를 이용함
* student1, student2, student3은 인덱스(index)이고 (보통 'key' 라고 함)
* 10, 6, 15는 인덱스에 해당되는 값임 (꼭 숫자가 아니여도 됨) (보통 'value' 라고 함)
* 변수에 객체를 담아내서 사용해야함 e.g. grade라는 변수에 아래 객체를 담음
var grade = {'student1':10, 'student2':6, 'student3':15};(4) 객체의 값에 접근하는 방법
// 객체 만드는 첫번째 방법
var grade1 = {'student1':10, 'student2':6, 'student3':15};
// 객체 만드는 두번째 방법
var grade2 = {};
grade2['student1'] = 30;
grade2['student2'] = 25;
grade2['student3'] = 35;
// 객체 만드는 세번째 방법
var grade3 = new Object();
grade3['student1'] = 50;
grade3['student2'] = 45;
grade3['student3'] = 55;
// 객체 안에 값 중 하나를 가져오는 첫번째 방법
document.write(grade1['student1'] + "<br/>");
document.write(grade2['student'+'2'] + "<br/>"); // 대괄호 안이 문자이기 때문에 '+'로 결합해서 사용할 수도 있음
document.write(grade3['student'+'3'] + "<br/>"); // 대괄호 안이 문자이기 때문에 '+'로 결합해서 사용할 수도 있음
// 객체 안에 값 중 하나를 가져오는 첫번째 방법
document.write(grade1.student1 + "<br/>")
document.write(grade2.student1 + "<br/>")
document.write(grade3.student1 + "<br/>")(5) 배열은 '순서'를 가지고 있음, 객체 안에 있는 저장된 값들은 '순서가 없음' (key와 value만 있음)
* for~in문을 이용해서 객체의 key와 value를 모두 출력할 수 있음
* for~in문 : 객체 뿐만 아니라 배열에서도 사용 가능
var grade1 = {'student1':10, 'student2':6, 'student3':15};
for(var key in grade1) {
document.write("key: "+key+" value: "+grade1[key]+"<br/>");
}
// 반복문이 한번 실행될 때마다 grade1 객체에 있는 값들을 하나씩 (e.g. student1과 10) 가져와서 key값만 변수 key에 저장함※ JavaScript와 HTML의 태그를 이용해서 다양한 표현 가능
* 프로그래밍적으로 웹페이지를 제어하는 모습
<!DOCTYPE html>
<html>
<head>
</head>
<body>
<!-- HTML List 태그와 JavaScript 이용해보기 -->
<ul>
<script type="text/javascript">
var grade1 = {'student1':10, 'student2':6, 'student3':15};
for(var name in grade1){
document.write("<li>"+"key: "+name+" value: "+grade1[name]+"</li>");
}
</script>
</ul>
</body>
</html>
※ 배열과 객체의 차이점은 1) 색인(인덱스)을 누가 부여해주느냐(자동 or 개발자가?) 2) 순서가 있는지 정도..?
(6) 객체지향 프로그래밍 : 객체 안에는 또 다른 객체, 함수 등이 들어갈 수 있음
var grades = {
// 객체 안에는 또 다른 객체가 들어갈 수 있음
'list' : {'student1':10, 'student2':20, 'student3':30},
// 함수가 들어갈 수도 있음
'show' : function(){
alert('Hello world');
}
}
alert(grades['list']['student1']); // 출력결과: 10
grades['show'](); //마지막에 소괄호 유의(7) 여기에서 'this'는 함수가 속해 있는(소유하고 있는) 객체를 가리키는 변수
* 위의 코드에서 "alert(this);"라고 하면 grades 객체를 가리키는 것 (함수가 소속되어 있는 객체)
※ console.log(name, this.list[name]) => 쉼표를 이용하면 연결해서 출력할 수 있음
※ grades['show'](); => grades.show(); 로 표현할 수도 있음
※ 위의 코드에서 grades 객체 안에 있는 list 객체와 show 함수는 서로 연관있는 데이터임
모듈(module)
(0) 매우 복잡하거나 긴 내용의 코드에서 모듈화해야 함
* 단순하고 간단한 코드를 모듈화 하는 것은 소 잡는 칼로 닭 잡는 격이라고 함..
(1) 프로그램은 작고 단순한 것에서 크고 복잡한 것으로 진화함
* 프로그램을 구성하는 수많은 로직 -> 로직을 재사용할 수 있는 단어로 조각조각 나눠서 -> 모듈이라는 형태로 별도로 떼어냄
* 연관되어 있는 변수들, 함수들을 모아서 파일로 쪼개고 -> 그 파일을 읽어서 필요한 곳에 씀 (모듈화)
* 파일로 모듈을 쪼개 놓으면, 필요한 파일을 빠르게 찾을 수 있음
(2) JavaScript에는 모듈이라는 개념이 분명하게 존재하지 않고, 모듈 기능을 제공하지 않음
* but, 자바스크립트가 구동되는 호스트 환경(웹브라우저, Node.js, google apps script 등)에 따라
자바스크립트 로직을 파일로 분할해서 마치 모듈처럼 사용토록 하는 기능을 제공하기도 함
(3) 아래와 같이 <head>에 <script> 태그를 추가하여 다른 파일(모듈)을 불러옴
<!DOCTYPE html>
<html>
<head>
<script type="text/javascript" src="greeting.js"></script>
<!-- type="text/javascript" 는 생략 가능 -->
</head>
...* greeting.js에는 코드만 쓰면 됨 (예시는 아래처럼)
// greeting.js 파일 내용
function welcome() {
return 'Hello World';
}※ node.js는 서버쪽에서 작동하는 자바스크립트
라이브러리(library)
(1) 어떻게 보면 라이브러리와 모듈이 좀 비슷함
* 모듈 : 프로그램을 구성하는 작은 부품 정도
* 라이브러리 : 자주 사용되는 로직을 재사용할 수 있도록 정리한 일련의 집합? 정도
(2) 오픈소스를 통해 만들어진 수많은 라이브러리를 사용하는 것도 좋은 방법
* 메인 로직(?)이 아니라면 누군가가 만들어놓은 라이브러리를 사용하는 것이 좋음
(좋은 라이브러리가 있는지 없는지 먼저 찾아보는 것을 권장)
* 라이브러리는 그 라이브러리 만을 위해 전문적인(?) 집단이 모여서 만든 것이기 때문에 직접 만드는 것보다 훨씬 효율적일 것
(3) 라이브러리도 유행이 있음 (자바스크립트 라이브러리: jQuery, Vue.js, React.js 등등)
(4) 라이브러리의 사용설명서 : API Documentation
* 어떤 명령어를 제공하는지 찾고 싶다면 사용설명서(?)를 찾아볼 것
(5) jQuery는 '$'로 시작함, jQuery이든 Vue.js이든 React.js이든 그 파일을 읽어보면 하나의 큰 자바스크립트라는 것을 알 수 있음
(6) 라이브러리 파일을 가져오는 것과, 라이브러리에 어떤 기능이 있는지 파악하는 것이 라이브러리 사용의 핵심임
※ 생활코딩 'UI와API' (API, Interface, UI에 대한 유익한 이야기)
- UI(User Interface) : 사용자를 대면하는 접점이 되는 지점 정도?
- API(Application Programming Interface) : 웹브라우저라는 기반이 되는 시스템이 우리에게 제공한 인터페이스(alert 등)를 우리가 응용프로그램 만들면서 사용함
- 둘의 공통점 : 인터페이스(어떠한 계층적 구조에서 윗층과 아래층의 접점)이라는 점
내가 알기로 인터페이스는 '윗집(?)과 아랫집(?)의 접점'이고, 그 윗집과 아랫집이 소통 할 수 있도록 + 둘이 연결될 수 있도록 하는 것이 인터페이스를 사용하는 목적으로 알고 있다.
일상에서 찾을 수 있는 예시는 리모콘이 있을 것 같다. 리모콘을 이용해서 사람과 TV를 연결할 수 있으니 리모콘은 인터페이스가 될 것이다.
응용프로그램과 응용프로그램 사이에 리모콘과 같은 인터페이스가 있다면 API,
사람과 프로그램(또는 기계 등) 사이에 리모콘과 같은 인터페이스가 있다면 UI 인 것으로 알고 있다.
※ 래퍼런스와 튜토리얼
- API를 이용해서 소프트웨어를 제어함
- 제어하고자 하는 호스트 환경이 제공하는 API가 무엇이 있고 어떤 특성이 있고 어떻게 사용하는지 지식이 있어야 함
하지만 항상 암기하고 있을 수 없기 때문에 래퍼런스와 튜토리얼 등 필요한 정보를 찾고 읽을 줄 알아야 함
- 래퍼런스는 일종의 사전.
굳이 비유하자면 튜토리얼은 '문법'에 해당하고 래퍼런스는 '사전'에 해당한다고 볼 수 있을 것 같음
- 자바스크립트의 API는 크게 두가지 정도 있음(JS 자체의 API, JS가 동작하는 호스트 환경의 API)
- math, 정규표현식 등은 JS 자체에서 지원하는 API 이고, 본 수업은 이 부분만 배움
* JS가 동작하는 호스트 환경(웹브라우저, Node.js, 구글 앱스 스크립트 등)이 지원하는 API는 이후에 추가로 배워야 함
(1) 자바스크립트를 표준화하는 기구는 ECMA 인터내셔널.
* 여기에서 제공하는 standard 문서를 공부하면 자바스크립트와 같은 스크립트 언어를 만들 때 정말 도움이 됨. 하지만 공부한다는 것은 정말 어려운 일..
www.ecma-international.org/publications-and-standards/standards/ecma-262/
ECMA-262 - Ecma International
ECMAScript® 2020 language specification, 11th edition - ECMAScript is a programming language based on several technologies like JavaScript and JScript.
www.ecma-international.org
* ECMAScript와 JavaScript의 관계는 아래 능력자님 블로그를 참고
wormwlrm.github.io/2018/10/03/What-is-the-difference-between-javascript-and-ecmascript.html
JavaScript와 ECMAScript는 무슨 차이점이 있을까? - 재그지그의 개발 블로그
웹 개발에서 JavaScript와 ECMAScript라는 용어가 혼용되어 사용되고 있는 이유와 그 차이점에 대해 알아봅니다.
wormwlrm.github.io
정규표현식(Regular Expression)
(1) 정규표현식도 일종의 언어이고, 자바스크립트 외에도 자바, 펄 등 기타 등등 수많은 언어에서 정규표현식을 사용함
(2) 정규표현식 자체를 공부하는 것도 좋음
(3) 정규표현식 리터럴을 이용해서 찾고자 하는 문자를 입력하면 컴퓨터가 문자를 인식함
* 아래 두개의 코드는 의미가 같음(var pattern = /a/; 과 var pattern = new RegExp('a'); 는 동일한 의미)
* exec 명령어: 인자값(abced)에서 pattern(a)의 값이 있는지 찾음
* test 명령어: 인자값(abced) 안에 pattern(a)의 값이 존재하는지 찾아서 boolean(T/F)으로 출력해줌
var pattern = /a/;
// 슬래쉬 사이에 문자를 입력
var pattern = new RegExp('a');
// 정규표현식 객체를 만들어서 괄호 안에 찾고자 하는 문자를 입력pattern.exec('abcde');
pattern.test('abced');(4) 정규표현식은 정보를 추출, 테스트(정보가 있는지 없는지 테스트), 치환하는 작업 등으로 사용함
* exec 메서드(추출이 목적), test 메서드(테스트 목적), replace 메서드 등
* 따라서 exec 메서드 => 맞는 문자가 없으면 null이 출력됨 (추출이 목적이므로)
* 하지만 test 메서드 => 맞는 문자가 없으면 false가 출력됨 (테스트가 목적이므로)
(5) 문자열에서 특정 값 찾기
* String.match 명령어: 없으면 null 출력
* String.replace 명령어: str에서 1번 인자(pattern)의 값을 찾아서 2번 인자('A')로 대체함
(6) 정규표현식 패턴에 옵션이 있음
* i 옵션 : 대문자, 소문자 구분하지 않음 (e.g. var x = /a/i; 와 같이 사용)
* g 옵션 : 한 문자가 2번 이상 문자열에 포함되어 있으면 해당 문자를 모두 찾아서 존재하는 만큼 배열로 만든 후 출력해줌
(e.g. var y = /a/g; 와 같이 사용)
* i 옵션과 g 옵션을 함께 사용할 수도 있음 (e.g. var z = /a/ig; 등)
* 변수 xi의 뜻 : 'i 옵션을 사용하지 않음' 이라는 뜻
(7) 소괄호는 정규표현식에서 그룹을 의미함
(\w+)\s(\w+)* \w : 문자를 의미함 (0-9, a-z, A-Z)
* + : 앞에 있는 문자가 하나 이상임을 의미 (하지만, 문자의 범위에 없으면 (e.g. # 등) 해당되지 않음)
* \s : 공백을 의미
// 캡처(그룹 가져와서 사용) 사용해보기
var pattern = /(\w+)\s(\w+)/;
var str = "coding everybody";
var result = str.replace(pattern, "$2, $1"); // pattern에 해당되는 값을 2번째 인자로 대체(replace) 함
console.log(result); // 결과는 everybody, coding이 됨* $2는 pattern에서 두번째 그룹(소괄호)을 의미함 (위의 코드에서는 (\w+)에 해당)
* $1은 pattern에서 첫번째 그룹(소괄호)를 의미함 (위의 코드에서는 (\w+)에 해당)
* 즉, "$2, $1"은 그 순서대로 두번째 그룹이 먼저 출력되고, 쉼표와 띄어쓰기가 출력된 후, 첫번째 그룹이 마지막으로 출력됨
=> 따라서 coding과 everybody의 순서가 변경됨
(8) 이렇게 HTML과 함께 이용할 수 있음
* urlPattern에 일치하는 부분을 찾아서 앞 뒤에 <a> 태그를 붙여줌
<!DOCTYPE html>
<html>
<head>
</head>
<body>
<script type="text/javascript">
var urlPattern = /\b(?:https?):\/\/[a-z0-9-+&@#\/%?=~_|!:,.;]*/gim;
var content = '생활코딩 : http://opentutorials.org/course/1 입니다. 네이버: http://naver.com 입니다.';
var result = content.replace(urlPattern, function(url){
return '<a href="'+url+'">'+url+'</a>';
});
// urlPattern에 해당하는 텍스트를 찾을 때마다 function의 파라미터(url)로 해당 데이터가 전달된다
document.write(result);
</script>
</body>
</html>
+ 3/31 추가>
자바스크립트 강의를 듣고 있는 중이다. 대부분 문법에 대한 강의였는데
듣다보니 내가 단순 문법을 익히기 위해서 듣는 듯한 느낌이 들었다.
목적 없이 그냥 걸어가고 있는 느낌..?
자바스크립트가 동적인 웹페이지 구현을 위해 필요하다고는 들었지만
사실 이 문법들로 어떻게 구현한다는건지 고민도 안하고 그냥 듣기만 하고 있다..
그래서 이쯤에서 한번 정리를 하기로 했다.
자바스크립트를 공부하는 방향과 자바스크립트로 할 수 있는 일들에 대해서.
참고한 자료는 생활코딩님 사이트이다.
opentutorials.org/course/743/4650
언어소개 - 생활코딩
JavaScript JavaScript는 웹페이지를 동적으로, 프로그래밍적으로 제어하기 위해서 고안된 언어다. 그렇기 때문에 오늘날 가장 중요한 플랫폼이라고 할 수 있는 웹브라우저에서 유일하게 사용할 수
opentutorials.org
자바스크립트 공부 방향:
1. 자바스크립트 '언어'에 대한 강의를 듣고
2. DOM을 학습한다.
3. 이후 배운 내용을 기반으로 작은 기능이라도 무엇이든 만들어보고
4. jQuery, React 와 같은 라이브러리를 학습하고
5. 라이브러리를 이용해서 또 무엇인가 만들어보는 방향으로 진행할 것 같다.
이고잉님께서 공부는 신속하게, 실습은 느리게 해보라고 말씀하셨다.
웹브라우저 자바스크립트 - 생활코딩
수업소개 본 모듈은 웹브라우저를 자바스크립트로 제어하는 방법에 대한 수업입니다. 텍스트 수업과 동영상 수업이 함께 제공 됩니다. 텍스트는 요점을 전달하는데 초점을 맞추고 있고, 동영상
opentutorials.org
전체적인 숲을 빠르게 공부하고 다시 처음으로 돌아가 실습을 하나씩 꼼꼼하게 해보는 것을 권장하셨기 때문에
그 조언에 따라 진행을 해보려고 한다.
일단 목표는 4월 한달 동안 위의 다섯 가지 단계를 진행하는 것인데.. 실습(작은 것이라도 만들어보기)이 더 오랜 시간 소요될 수도 있을 것 같다.
자바스크립트로 할 수 있는 일:
- 웹페이지 스크립팅 (DOM)
* 아마 동적 웹페이지를 만드는 것을 말하는 것 같다.
- 서버 측 스크립팅 (node.js)
* 서버는 많은 트래픽을 분산하는 등등의 기능을 하도록 프로그래밍 해야할텐데
그것을 구현 할 때 사용하는 많은 언어 중 하나로 node.js가 있는 것 같다. (아직 배우지 않은 부분이라 사실 잘 모르겠다)
- 채팅 시스템(ChatZilla, XChat), Unity 게임 엔진 등등
'2. 프로그래밍 언어 공부 > JavaScript' 카테고리의 다른 글
| [공부 필기] 생활코딩 JavaScript 입문 강의 필기 (3) (0) | 2021.04.18 |
|---|---|
| [공부 복습] 생활코딩 JavaScript 입문 강의 복습 (3) (0) | 2021.04.17 |
| [공부 복습] 생활코딩 JavaScript 입문 강의 복습 (2) (0) | 2021.04.12 |
| [공부 복습] 생활코딩 JavaScript 입문 강의 복습 (1) (0) | 2021.04.07 |
| [공부 필기] 생활코딩 JavaScript 입문 강의 필기 (2) (0) | 2021.03.22 |
