Front-End/javascript 2019. 6. 1. 12:08
배열
배열 (array)이란 연관된 데이터를 모아서 통으로 관리하기 위해 사용하는 데이터 타입이다.
변수가 연관된 데이터 하나를 저장한다면 , 배열은 연관덴 데이터 여러개를 저장하는 것이다.
toUpperCase( ) - 자바 스크립트가 기본적으로 제공해주는 함수
매개값으로 소문자를 주면 대문자로 리턴해주는 함수
배열의 원소 추가
다음은 배열의 끝에 원소를 추가하는 방법이다.
push는 인자로 전달된 값을 배열(li)에 추가하는 명령이다.
배열 li의 값은 a, b, c, d, e, f 가 됐다.
var li = ['a', 'b', 'c', 'd', 'e'];
li.push('f'); //배열 뒤쪽에 f를 추가한다.
alert(li); //["a","b","c","d","e" ] 를 출력한다.
cs
복수의 원소를 배열에 추가하는 방법이다.
concat는 인자로 전달된 값을 추가하는 명령이다.
var li = ['a', 'b', 'c', 'd', 'e'];
li = li.concat(['f','g']); //배열 뒤쪽에 f,g를 추가한다.
alert(li); // [" a","b","c","d","e","f","g"] 를 출력한다.
cs
배열의 시작점에 원소를 추가하는 방법
unshift는 인자로 전달한 값을 배열의 첫번째 원소로 추가하고 배열의 기존 값들의 색인을 1씩 증가시킨다.
var li = ['a', 'b', 'c', 'd', 'e'];
li.unshift('z'); //배열 앞쪽에 'z' 를 추가한다.
alert(li); // ["z","a","b","c","d","e","f","g" ] 를 출력한다.
cs
아래 책은 제가 공부할때 활용했던 책으로 추천드리는 책이니 한번씩 읽어보시는것을 추천드립니다!! ㅎㅎ
이 포스팅은 쿠팡 파트너스 활동의 일환으로, 이에 따른 일정액의 수수료를 제공받습니다.
Front-End/javascript 2019. 6. 1. 11:08
함수
하나의 로직을 재실행 할 수 있도록 하는 것으로 코드의 재사용성을 높여준다.
함수의 장점은 재사용성, 유지보수의 편리성, 가독성이 있다.
함수의 형식
function 함수명 ( [인자....[,인자] ] ) { 코드 return 반환값 }
함수 예제
1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
24
<!DOCTYPE html >
<html >
<head >
<title ></title >
</head >
<body >
<script type "text/javascript"
function numbering() { //1~19까지 출력 하는 함수를 4번 호출 , <br/>은 줄바꿈
var i = 0 ;
while (i< 20 ){
document .write(i+ "<br/>" );
i + = 1 ;
}
}
numbering();
numbering();
numbering();
numbering();
</script >
</body >
</html >
cs
함수의 다른 정의 방법
출력값은 동일함.
1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
24
<!DOCTYPE html >
<html >
<head >
<title ></title >
</head >
<body >
<script type "text/javascript"
numbering = function () { // function nu mbering()과 동일한 방법
var i = 0 ;
while (i< 20 ){
document .write(i+ "<br/>" );
i + = 1 ;
}
}
numbering();
numbering();
numbering();
numbering();
</script >
</body >
</html >
cs
함수의 다른 정의 방법
출력값은 동일함.
익명함수 (함수의 이름이 없고, 생성하자마자 호출함)
1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
24
<!DOCTYPE html >
<html >
<head >
<title ></title >
</head >
<body >
<script type "text/javascript"
(function () {
var i = 0 ;
while (i< 20 ){
document .write(i+ "<br/>" );
i + = 1 ;
}
})(); //함수의 이름이 없고 생성하자마자 ();로 호출함.. 이름이 없어서 익명함수라 한다. 일회성으로 호출할때 사용
numbering();
numbering();
numbering();
numbering();
</script >
</body >
</html >
cs
아래 책은 제가 공부할때 활용했던 책으로 추천드리는 책이니 한번씩 읽어보시는것을 추천드립니다!! ㅎㅎ
이 포스팅은 쿠팡 파트너스 활동의 일환으로, 이에 따른 일정액의 수수료를 제공받습니다.
Front-End/javascript 2019. 5. 25. 20:35
반복문
어떤 문장을 반복해서 실행시키는 구문
- while문 문법- while (조건) { 반복해서 실행할 문장 }
document.write('Conding everybody <br />'); //화면에 출력되게 하는 구문 ( = 아무것도 쓰지않고 그냥 문자만 사용한 형식과 동일) = Condig everybody; <br /> 과 동일하게 출력됨
-for문 문법- for (변수 초기값 지정, 조건문, 증가연산자){ 반복해서 실행할 문장 }
아래 책은 제가 공부할때 활용했던 책으로 추천드리는 책이니 한번씩 읽어보시는것을 추천드립니다!! ㅎㅎ
이 포스팅은 쿠팡 파트너스 활동의 일환으로, 이에 따른 일정액의 수수료를 제공받습니다.
Front-End/javascript 2019. 5. 24. 22:09
-조건문-
주어진 조건에 따라서 애플리케이션을 다르게 동작하도록 하는 것이다.
-조건문의 문법-
조건문은 if로 시작한다.
if 뒤의 괄호에 조건이 오고, 조건이 될 수 있는 값은 Boolean 이다.
Boolean의 값이 true라면 조건이 담겨진 괄호 다음의 중괄호 구문이 실행된다.
-예제-
if(true) {
alert('result:true'); //true 이므로 실행
}
cs
if(false) {
alert('result:true'); //false 이므로 실행이 되지 않음
}
cs
-else-
if 만으로는 좀 더 복잡한 상황을 처리하는데 부족하기 때문에 if가 거짓일 때 실행되는 구문
-예제-
if(false) {
alert('result:true');
}else{
alert(2); //false 이므로 이 구문이 실행됨
}
cs
-else if-
else 만으로는 좀 더 복잡한 상황을 처리하는데 부족하기 때문에 if가 거짓일 때, else로 다시 참,거짓을 판별하는 구문
-예제-
if(false) {
alert('result:true');
}else if(true) {
alert(2); //if가 false이고, else if가 true이기 때문에 2가 출력됨
}
cs
-prompt-
경고창 대신 프롬프트 창이 출력되고 어떠한 값을 넣을 수 있게 하는 구문
-예제-
-예제 및 출력결과-
var id = prompt('아이디를 입력해 주세요.');
if(id=='egoing'){
var password = prompt('비밀번호를 입력해주세요');
if(password == '111111'){
alert('로그인 하셨습니다.');
}else {
alert('비밀번호가 다릅니다.');
}
}else{
alert('아이디가 일치하지 않습니다.');
}
cs
-논리연산자-
AND (&&) 좌항과 우항이 모두 참(true) 일때 참이된다.
OR ( || ) 좌우항 중에 하나라도 참(true) 라면 참이 되는 논리 연산자다.
-NOT 연산자-
! 부정의 의미로, Boolean의 값을 역전 시킨다. true를 false로 false를 true로 만든다.
조건문에 사용될 수 있는 데이터 형이 꼭 Boolean만 되는 것은 아니다.
관습적인 이유로 0은 false, 0이 아닌 값은 true로 간주된다.
아래의 예제는 2를 출력한다.
-예제-
if(0) {
alert(1)
}
if(1) {
alert(2)
}
cs
아래 책은 제가 공부할때 활용했던 책으로 추천드리는 책이니 한번씩 읽어보시는것을 추천드립니다!! ㅎㅎ
이 포스팅은 쿠팡 파트너스 활동의 일환으로, 이에 따른 일정액의 수수료를 제공받습니다.
Front-End/javascript 2019. 5. 23. 23:18
==
동등 연산자로 좌항과 우항을 비교해서 서로 값이 같다면 true 다르다면 false가 된다. '=' 가 하나인 것은 대입 연산자로 좌항의 값을 우항의 변수에 대입할 때 사용하는 것으로 의미가 완전히 다르다.
alert(1==2) //false
alert(1==1) //true
alert("one"=="two") //false
cs
===
일치 연산자로 ===좌항과 우항이 '정확'하게 같을 때 true 다르면 false가 된다. '==='은 숫자 1과 문자 1을 다르게 인식한다. 반면에 '=='은 양쪽의 값을 같다고 판단한다. 바로 이것이 '정확'의 의미이다. 즉 ===은 서로 같은 수를 표현하고 있더라도 데이터 형이 같은 경우 에만 같다고 판단하기 때문이다. ==연산자 대신 ===연산자를 쓰는것을 강력하게 권한다.
alert(1=='1') //true
alert(1===1) //false
cs
!=
'!' 는 부정을 의미한다. '같다'의 부정은 '같지 않다' 이다. 이것을 기호로는 '!='로 표시한다. 아래의 결과는 '!=' 의 결과인데 ==와 정반대의 결과를 보여준다.
alert(1!=2); //true
alert(1!=1); //false
alert("one"!="two"); //true
alert("one"!="one"); //false
cs
!==
'!==' 는 '!=' 와 '=='의 관계와 같다. 정확하게 같지 않다는 의미이다.
>
좌항이 우항보다 크다면 참, 그렇지 않다면 거짓임을 알려주는 연산자.
>=
좌항이 우항보다 크거나 같다. '<='는 반대의 의미이다.
아래 책은 제가 공부할때 활용했던 책으로 추천드리는 책이니 한번씩 읽어보시는것을 추천드립니다!! ㅎㅎ
이 포스팅은 쿠팡 파트너스 활동의 일환으로, 이에 따른 일정액의 수수료를 제공받습니다.
Front-End/javascript 2019. 5. 23. 22:01
-자바스크립트 주석-
c언어나 자바와 동일
-자바스크립트 줄바꿈과 여백-
자바스크립트는 자바나 c언어와는 다르게 줄을 바꾸면 자동적으로 명령이 끝났다고 보기 때문에
" ; " 를써주지 않아도 되나, 명시적으로 " ; " 을 사용하고, 반드시 " ; " 를 사용해야만 하는 경우가 있다.
(ex 한줄에 두가지 명령이 있는 경우)
여백은 Tap키 를 사용한다. (코드의 가독성을 좋게 하기 위해서 사용)
1
2
3
4
5
6
7
8
9
10
11
12
<!DOCTYPE html >
<html >
<head >
<title ></title >
</head >
<body >
<script type ="text/javascript"
var a = 1 ;
alert (a);
</script >
</body >
</html >
cs
아래 책은 제가 공부할때 활용했던 책으로 추천드리는 책이니 한번씩 읽어보시는것을 추천드립니다!! ㅎㅎ
이 포스팅은 쿠팡 파트너스 활동의 일환으로, 이에 따른 일정액의 수수료를 제공받습니다.
Front-End/javascript 2019. 5. 23. 21:31
-변수-
JavaScript에서 변수는 var로 시작한다. var은 변수를 선언하겠다는 것을 의미한다. var을 생략 할 수도 있지만 이것은 유효범위라는 것에 영향을 미친다. 그렇기 때문에 var의 의미를 명확하게 이해하기 전까지는 var를 사용하는 것이 권장된다. 또한 변수안에는 숫자뿐만 아니라 문자도 들어갈 수 있다. 처음 변수를 선언할때는 var을 붙여주고, 그 다음부터 사용할때는 var은 생략 가능하다.
-각종 연산 예제-
var a = 100;
100 //출력
a=a+10;
110 //출력
a=a-50;
60 //출력
a=a*10;
600 //출력
a=a+'c';
"600c" //출력
alert(a+"aa");
//밑에 경고창 출력
cs
아래 책은 제가 공부할때 활용했던 책으로 추천드리는 책이니 한번씩 읽어보시는것을 추천드립니다!! ㅎㅎ
이 포스팅은 쿠팡 파트너스 활동의 일환으로, 이에 따른 일정액의 수수료를 제공받습니다.
Front-End/javascript 2019. 5. 22. 22:13
문자열 사용 출력상태 확인(" ") , (' ')
alert('coding everybody'); //정상 출력
undefined
alert("coding everybody"); //정상 출력
undefined
alert("coding everybody');
VM186:1 Uncaught SyntaxError: Invalid or unexpected token
//문법 에러가 발생함
//큰 따움표가 닫혀있지 않기 때문
cs
값의 타입을 확인하는 법
typeof를 사용
typeof 1 "number" //1은 숫자 타입 typeof "1" "string" //"1"은 문자타입
indexOf 타입
""안에 있는 문자에서 ("")안에 있는 문자의 순서 (숫자) 를 출력함
"code".indexOf("o")
1
"code".indexOf("d")
2
"code".indexOf("c")
0
cs
아래 책은 제가 공부할때 활용했던 책으로 추천드리는 책이니 한번씩 읽어보시는것을 추천드립니다!! ㅎㅎ
이 포스팅은 쿠팡 파트너스 활동의 일환으로, 이에 따른 일정액의 수수료를 제공받습니다.
