Javascript
in Programming on JavaScript
- HTML + CSS 에 접근(로드가 끝나야만 접근할 수 있다.)해서 interactive한 처리를 할 수 있도록 설계된 문서.
- logic이 있고, 컴파일이 필요 없다.
- jQuery(.js) , React.js, Vue.js 가 js를 쉽게 해주는 언어. 클라이언트딴에서 돌아간다. Node.js는 서버딴에서 돌아가는 javascript
- 브라우저 내에 script를 해석할 수 있는 프로그램이 탑재되어있다.
javascript 기본문법
- 대소문자를 구분한다.
- 세미콜론과 줄바꿈(엔터)를 하면 문장의 마지막이라고 생각한다.
- html 문서내의 <head></head> 사이에 들어간다.
- 주석 : // , /**/
자료형
1. 문자열형
””, ‘’
var shape = "ROUND";
document.write(typeof shape +"<br>"); //string
var dog = "우리 강아지 이름은 '핀'이란다"; //이렇게 "" 안에 ''넣을 수 있다. 반대도 가능
2. 숫자형
실수, 정수 다 포함되어있다. java처럼 여러 타입으로 나누어져있지 않다. 그냥 다 number다.
var num = 45;
document.write(typeof num+"<br>"); //number
var num = 45.3;
document.write(typeof num+"<br>");//number
3. 불리언
true(1) , false(0) , 0을 제외한 모든 애들은 true이다.
var bool = true;
document.write(typeof bool+"<br>");//boolean
var bool2 = 45<20;
document.write(typeof bool2+"<br>");//boolean
4. 함수
함수도 데이터이다. 자바에서는 함수는 데이터가 아니었다.
function myfunc(){
var a= 20;
document.write("함수 내의 변수 : " + a +"<br>");
}
document.write(typeof myfunc()+"<br>")//function
5. 객체
Date(); 같은 객체들.
var today = new Date();
document.write(typeof today+"<br>");//object
6. undefined
정의되지 않은 것도 자료형이다.
var today;
document.write(typeof today+"<br>");//undefined
연산자
산술 연산자
: + - * / % ++ –
대입 연산자
: = += -= *= /= %=
비교 연산자
: ==(동등) ===(일치) != > < >= <=
var num1 =3;
var num2 = "3";
document.write(num1 == num2) + "<br>" // unboxing 한 값이 같으면 같은 데이터
document.write(num1 === num2) + "<br>" //타입도 같아야 같은 데이터
논리연산자
&&(논리곱) ||(논리합) !(논리 부정)
var num = 5;
document.write((1<=num<=10)); //true
/*true나온다. 근데 잘못된 식이다. true가 나오는 이유는, 좌측부터 계산을 하는데, 1<=num 이 true라서 true=1 로 되고, 1<=10으로 계산되기 때문에 true가 나오는 것이다.*/
document.write((1<=num<=3)); //true
삼항연산자
: (조건식) ? 참이면 실행할 문장 : 거짓이면 실행할 문장.
var a =10;
var b =20;
a>b ? alert("a가 커!") : alert("b가커")
기타
재선언
var a =25;
var age ='이십오';//var은 재선언해도 괜찮다.
let name = "홍길동"
let name = "임꺽정" //let은 재선언하면 오류가 뜬다.
변수의 선언 위치에 따른 종류
- 전역변수
- 지역변수 : function 내부에 사용된 변수.
var a =10;
function myfunc(){
var a= 20;
document.write("함수 내의 변수 : " + a +"<br>");
}
myfunc();
document.write("함수 밖의 변수 : " + a);
결과 :
함수 내의 변수 : 20 함수 밖의 변수 : 10
입출력
입력
prompt 창이나 html input과 연동해서 사용한다.
var result = prompt("값을 입력하세요");
출력
alert, confirm, console.log()
alert("경고!")
confirm("경고!")
console.log(result) //f12 개발자 모드에 찍힌다.
confirm 은 return 타입이 있어서 확인 버튼 눌리면 true 반환, 취소는 false반환.
var result =confirm("경고!")
document.write(result);
짧은 조건문
true && alert("실행A") //실행됨
true || alert("실행B")
false && alert("실행C")
false || alert("실행D") //실행됨
var input = Number(prompt('숫자를 입력해주세여','숫자'))
input%2==0 && alert("짝수입니다.") //짝수일 때 true, 실행됨
input%2==0 || alert("홀수입니다.") //홀수일 때 false, 실행됨
반복문
- java랑 거의 똑같다. int가 아니라 var을 쓰는게 차이점.
for(var i=0;i<10;i++){
document.write("javascript"+"<br>")
}
배열
java랑 거의 똑같다. 근데 {}가 아닌 []를 사용한다.
var myArray = new Array(); var tweets = ["Hello everybody","123"]push 를 사용해 array에 값을 추가할 수 있다.
tweets.push("2 weeks challenge!"); //["Hello everybody","123","2 weeks"," challenge!"]indexOf를 사용해 특정값의 index를 알 수 있다.
[1,2,3,4].indexOf(3) //2concat
- origin은 안 바뀐다.
var origin = [1,2,3,4]; var result = origin.concat(2,3);splice(index, 개수)를 사용해 어레이에서 값을 제거할 수 있다.
tweets.splic(1,2); //["Hello everybody"," challenge!"]splice(index,개수, 더할값…)을 사용해 어레이에서 값을 제거하고 제거된 값 부터 정보를 추가할 수 있다.
tweets.splic(0,1,"back","off"); //["back","off"," challenge!"]for문과 함께 사용하기
var aryy = [19,"string",30.5] //이렇게 타입 섞어서 넣을 수 있다. var ary = [10,20,30,40,50]; for(var i=0;i<5;i++){ document.write(ary[i]+"<br>") } for(var value in ary){ document.write(ary[value]+"<br>") }//확장된 for문,확장된 for문에 대해서,
java에서는
int[] ary = {10,20,30,40,50}; for(int a : ary) {System.out.println(a)} //결과로 10 20 30 40 50 이 출력된다.하면 값이 나온다.
근데 javascript의 확장된 for문은 방 번호를 뽑는다, 그니까 인덱스를 뽑는다. 그래서 ary[value]이렇게 해줘야한다.
var[] ary = [10,20,30,40,50]; for(var a in ary) {document.write(a)} //결과로 0,1,2,3,4 출력된다. for(var a in ary) {document.write(ary[a]+"<br>")} //결과로 10,20,30,40,50 출력된다.foreach 문
["apple","tomato"].forEach(function(value) { console.log(value) });map
var newArr = ["apple","tomato"].map(function(value, index) { return index + "번째 과일은 " + value + "입니다"; }); console.log(newArr)// 여러분들이 실행해보세요
