jsp- 연산자 , 문장, 함수

03장 산술연산자

var a = 10;
	var b= 3;
	console.log(a+b);
	console.log(a-b);
	console.log(a*b);
	console.log(a/b);
	console.log(a%b);
	
	var aa ="10";
	console.log(aa+20);
	console.log(aa-5);
	console.log(aa*5);
	console.log(aa/5);
	
	var y =3;
	 var y2 =3;
	 
	 ++y; //4
	 y2++; //4
	 console.log(y+" "+y2);
	 //y=4, y2=4
	 var y3 = ++y; //y3 = 5, y=5
	 var y4 = y2++; // y4=4, y2=5
	 console.log(y+" "+y3); //5, 5
	 console.log(y2+" "+y4); //5, 4
	 
	 var a = 10;
	 var b =5;
	console.log(a+=b);
	console.log(a-=b);
	console.log(a*=b);
	console.log(a/=b);
	console.log(a%=b); //0
	
	//4. 비교 연산자
    var v1 = 10;
    var v2 = 9;
    console.log( v1 == v2 );  // equal
    console.log( v1 > v2 ); 
    console.log( v1 >= v2 ); 
    console.log( v1 < v2 ); 
    console.log( v1 <= v2 ); 
    console.log( v1 != v2 );   //true
	
	var w1 =10;
	var w2= "10";
	
	console.log("w1 == w2  ", w1 == w2 );
	console.log("w1 === w2  ", w1 === w2 );
	 
	    console.log(true && true);
      console.log(true && false);
      console.log(false && true);
      console.log(false && false);

      console.log(true || true);
      console.log(true ||  false);
      console.log(false ||  true);
      console.log(false ||  false);
      
      console.log("'123'|| 10", "123"||10);
      console.log(0||  10);
      console.log("'123'&& 10", "123"&&10);
      console.log(0 && 10);

자바스크립트에서는 다른 프로그램언어와 다르게 논리값만 논리연산자를 사용하지 않고

다른 데이터도 논리 연산자를 사용할 수 있다.

이유는 숫자나 문자열등이 논리값으로 자동 형 변환 될 수 있기 때문이다.

또한 최종적으로 반환되는 값은 true/false값이 아닌 좌측 또는 우측 피연산 자의 최종 평가값이다.

좌객체 || 우객체

==> 좌객체가 참이면 우객체를 평가하지 않고 좌객체 값을 리턴 한다. 좌객체가 거짓이면 우객체 값을 리턴한다.

예> console.log ( “123” || 0 ); →“123”

좌객체 && 우객체

==> 좌객체가 참이면 우객체 값을 리턴한다.

좌객체가 거짓이면 좌객체 값을 리턴한다.

예> console.log( “123” && 0 ) ; → 0

 

<script>
	alert("capibara"); //알림창
	console.log("+=========================");
	
	var aaa = (4>3)? 100:20
	console.log(aaa);
	var aaa2 = (4>3)? alert(100):alert(200);
	console.log(aaa2);
	var aaa3 = ("aaa");
	console.log(aaa3);
	var aaa4 =(4>3)? (alert(100),100):(alert(200),200);
	console.log(aaa4);
</script>

알림창

 

alert("capibara"); //알림창
	console.log("+=========================");
	
	var aaa = (4>3)? 100:20
	console.log(aaa);
	var aaa2 = (4>3)? alert(100):alert(200);
	console.log(aaa2);
	var aaa3 = ("aaa");
	console.log(aaa3);
	var aaa4 =(4>3)? (alert(100),100):(alert(200),200);
	console.log(aaa4);
	
	function x (a){
		var arr = a || []; ///비어있는 배열저장
		console.log(arr);
		
		x();
		x([1,2]); //1 2 저장
	}

04장 문장

if/ ifelse/ elseif

자바스크립트 변수는 블록단위로 관리되지 않고 함수단위 스코프로 동작된다.

 

console.log("1");
	
	if(false){
		console.log("2");
	}else{
		console.log("3");
	}console.log("4");
	//false 134
	//true 124

 

var p = parseInt(prompt("정수값을 입력하세요."));
    var result = "짝수";
    if(p%2==1){
        result = "홀수";
    }
    console.log(result);
    
    console.log("=======");
	
	if(p%2==1){
		console.log("홀수");
	}else{
		console.log("짝수");
	}

 

console.log("1");
    
  
	if(NaN){
		console.log("2");
	}
		console.log("3");

같으면 2 아니면 3

 

var name ='홍길동';
	if(name =='홍길동')console.log("같음");

홍길동인가 아닌가

 

var p = parseInt(prompt("점수를 입력하세요."));

	if(p>=90){
		console.log("A학점");
	}else if(p>=80){
		console.log("B학점");
	}else if(p>=70){
		console.log("C학점");
	}else{
		console.log("F학점");
	}
	//단일if
	if(p>=90 && p<=100){console.log("A학점")};
        if(p>=80 && p<=89){console.log("B학점")};
        if(p>=70 && p<=79){console.log("C학점");};
        if(p>=60 && p<=69){console.log("C학점");};

 

스위치문

var n = "홍2";
	
	switch(n){
		case "홍2": console.log("홍2");
		break;
		case "홍3": console.log("홍3");
		break;
		case "홍4": console.log("홍4");
		break;
		default: console.log("default")
	}

홍2가 맞으면 홍2를 출력

 

for 문

for(var n =1; n<=10; n++){
		console.log("hello",n)
	}
	for(var n =0; n<10; n++){
		console.log("world",n)
	}
	for(var n =10; n<=20; n++){
		console.log("happy",n)
	}
	
	for(var n =10; n>0; n--){
		console.log("kkkk",n)
	}
	for(var n =0; n<10; n+=2){
		console.log("xxx",n)
	}

 

for(var n=1, m=1; n<=10 && m<4; n++,m++){
		console.log("hello",n,m);
	}
	console.log("out for ====",n,m);

for(var n=2; n<10 ; n++){
		
		for(var m=1;  m<10; m++){

		console.log(n+"*"+m+"="+(n*m));

	}console.log("==============");
	} //구구단만들기

 

AAAA://라벨
	
	for(var n=1; n<=5 ; n++){
		for(var n2=1; n2<=5 ; n2++){
			console.log(n+"\t"+ n2); //n: 1~3 n2: 1~3
		if(n2==3) continue AAAA;//라벨로 이동

		}
		
		console.log("aaa");
		}

var mycars =["BMW","Benz","티코"];
//	for(var i =0; i< mycars.length; i++){
//		console.log(mycars[i]);
//	}
//	for(var num4 in mycars){
//		console.log("mycars "+mycars[num4]);
//	} //my cars bmw...
	for(var num of mycars){
		console.log("mycars "+num);
	} // mycars 티코...
	console.log("=========")
	
	var person ={"name":"홍길동","age":20, "address":"서울"};
	
	for(var p in person){
		console.log("person 정보: "+p+person[p]);//ok
		console.log("person 정보 2: "+p+person.p);//undifined
		
	}

 

var sum = 0;
    for(var i = 1; i < 101; i++){
        sum += i
    }
    console.log(sum); //5050
    console.log(i); //101

 

while / dowhile

 

for(var n1; n<=10; n++){
		console.log("hello",n)
	}console.log("==============")
	var n=1
    while(n<=10){
        console.log('world '+n)
        n++
    } //world 12345
    var n1=1;
var total=0;
while (n1<=10){
total+=n1;
n1++;
}console.log(total)

var n=100
    while(n<=10){
        console.log('world '+n)
        n++
    }
    //while 문 수행안함
    var n1=100;
do{
	console.log('world1 '+n1) //최소한번 수행, 출력
	n++
}
while (n1<=10)
//n=101

---

05장 함수

함수의 역할 3가지.
가. 일반적인 호출 가능한 형식으로서의 함수 :가장 일반적으로 인식하는 함수역할
나. 값으로서의 함수 ( 함수객체 ) : 변수에 할당 가능 :
다른 함수의 인자로 전달 가능 :
다른 함수의 반환 값으로 사용 가능

 

console.log("1")
	
	function aaa(){ ///1. 일반적 이름 있는 함수 - 호출 사용
		console.log("2")
	}//end function
	
	console.log("3")
	aaa();
	//13

 

console.log("1")
	
	function aaa(){ ///1. 일반적 이름 있는 함수 - 호출 사용
		console.log("5")
		return;
	}//end function
	
	console.log("3")
	aaa();
	aaa();
	console.log("4")
	aaa();

console.log("1")
	
	function aaa(n){ ///1. 일반적 이름 있는 함수 - 호출 사용
		console.log("전달받은 값 : ",n)
		return n+100;
		console.log("============")
	}//end function
	
	console.log("3")
	var result= aaa(100);
	console.log(result)
	console.log("4")

console.log("1")
	
	function aaa(n,n2){ //매개변수 여러개
		console.log("전달받은 값 : ",n,n2)
		
		
	}//end function
	
	console.log("3")
	aaa(100,"홍길동"); //홍길동 안쓰면 undifined 

	console.log("4")

console.log("1")
	
	function aaa(){
		console.log("2")
	}
	
	console.log("3")
	var x = aaa();
	console.log("4",x)
	/////////////////
	var y = aaa();
	console.log("y==========",y);
	y();
	aaa();

console.log("1")
	
	function aaa(n,n2){
		console.log("2",n,n2)
		return 100;
	}
	
	console.log("3")
	var x = aaa("홍길동",100);
	console.log("4",x)
	/////////////////
	var y = aaa;
	console.log(y(1,2));

function sum(n,n2){
		var sum = n1+n2
		return sum;
	}
	var x = sum(10,20);
	console.log(x)
	var sum2 =sum;
	console.log(sum2(40,50))

30,90

 

function max(n,n2){
	max = n
    max=(max >=n2) ? max:n2;
    
	return max;
	}
	 var x = max(10,20);
    console.log("가장 큰 값: "+max)

가장 큰 값: 20

 

aaa();
	
	function aaa(){
		 console.log("aaa 함수")
	}
	console.log(aaa)
	//var aaa=20;
	//aaa();
	//Uncaught TypeError: aaa is not a function

 

익명함수

 

//y() → 선언 전에 호출 불가 
//익명함수
	var y =function (){
		 console.log("익명 함수")
	}
	y()

→ 익명 함수

→ 선언 전에 호출 불가

 

function aaa(num){//일반적 함수 선언
		 console.log("aaa 함수"+num)
		 return 'hello';
	}
		var xxx=aaa; //함수르르 변수에 저장
		var y=aaa(10);//호출 후 리턴값을 y에 저장
		xxx(100);//변수로 함수 호출
		aaa(200);//일반적함수 호출
	var fun4=function (num){//일반적 함수 선언
		 console.log("fun4 "+num)
		 
	}	
	fun4(300); //변수에 저장된 함수 호출
	var test = fun4(10)//호출
	console.log(test)//undifined
	var test2 = fun4//저장
	console.log(test2)
	test2(200)

function aaa(){//일반적 함수 선언
		 console.log("aaa 함수")
		 return 100;
	}
		
function bbb(x){//매개변수로 함수를 ㅂㄷ음, x=aaa 함수를 받음
		 console.log("bbb함수 "+x)
		x() //x=aaa 함수, aaa함수 호출
	}	
	//2. 자바스크립트 첫번째 특징 = 전달값에 함수 사용
	bbb(aaa)///bbb 함수에 매개변수로 aaa함수를 전달
	bbb(aaa())//bbb함수에 매개변수로 aaa함수를 전달 error

function aaa(){
		 console.log("aaa 함수")
		 return 100;
	}
		
function bbb(){
		 console.log("bbb함수 ")
		return aaa;///aaa함수를 리턴시킴
		///return aaa();///aaa함수를 리턴시킴
		
	}	
	
	var teat =bbb()
	console.log(test);
	test();
	///////////////////////////////
	function ccc(){
		 
		return function(n1,n2){ //익명함수 리턴
			return n1+n2;
		};
		}
		//일급객체의 세번째 특징 = 리턴값에 함수 사용
		//var x= bbb()
		//console.log()
		var y= ccc()
		console.log(y)
		console.log(y(20,30))

 

//함수 표현식
	var aaa= function(){
		console.log("aaa 호출")
	}
	aaa()//익명함수 변수 저장 후 호출
	
	var bbb = function(n){
		console.log("bbb 호출",n)
	}
	bbb(100)//익명함수 저장후 호출
	
	/////////////////////
	var ccc = function(){
		console.log("ccc 호출")
		return 100
	}
	var x = ccc()
	console.log(x)
	
	var ddd = function(n){
		console.log("ddd 호출",n)
		return 100
	}
	var x2 = ddd("홍")
	console.log(x2)

 

//함수 표현식
	var aaa= function(){
		console.log("aaa 호출")
	}
	aaa()//익명함수 변수 저장 후 호출
	
	var bbb = function(n){
		console.log("bbb 호출",n)
	}
	bbb(100)//익명함수 저장후 호출
	
	/////////////////////
	var ccc = function(){
		console.log("ccc 호출")
		return 100
	}
	var x = ccc()
	console.log(x)
	
	var ddd = function(n){
		console.log("ddd 호출",n)
		return 100
	}
	var x2 = ddd("홍")
	console.log(x2)

//함수 표현식
	var aaa= function(){
		console.log("aaa 호출")
		return 100;
	}
	//일급 객체 = 변수 저장
	var xxx1 =aaa;//xxx1 에는 함수 aaa가 저장된다
	var xxx2 =aaa()///xxx2에는 함수 aaa가 실행되고 리턴값이 저장된다
	console.log(xxx1())
	
	console.log(xxx1)
	console.log(xxx2)
	/////////////////////
	//일급객체 - 전달값으로 사용
	function kkk (x){//매개변수로 익명함수를 받음
		console.log("kkk 호출", x)
		x()//trigger 역할 //익명함수를 실행
	}
	var ppp = function(){
		console.log("ppp 호출")
	}
	kkk(ppp) ///kkk함수에 매개변수로 익명함수 전달
	kkk(aaa)
	/////////
	function ttt(){
		console.log("ttt 호출", eee)
		return eee;
	}
	var eee = function(){
		console.log("eee 호출")
	}
	var k = ttt()
	k()

//함수 표현식

	function kkk (x){//매개변수로 익명함수를 받음
		console.log("kkk 호출", x)
		x()//trigger 역할 //익명함수를 실행
	}
	kkk( function(){
		console.log("kkk 호출")
	}
	)
	
	var aaa= function (){
		console.log("aaa 호출")
		
	}
	
	kkk(aaa)
	
	function ttt(){//매개변수로 익명함수를 받음
		console.log("ttt 호출")
		return function (){
			console.log("eee 호출")
		}
		
	}
function ttt2(){//매개변수로 익명함수를 받음
		console.log("ttt2 호출")
		return function (){
			return aaa
		}
		
	}
	var k2 = ttt2()
	k2()

매개변수와 인자

• 함수에서 정의된 매개변수(parameter)와 호출하는 인자(argument) 갯수가 달라도 가능하다.
• 자바스크립트는 메소드 호출시에 파라미터의 갯수를 체크하지 않는다.

function aaa(n,n2){
		 console.log("aaa 함수", n,n2)
	}
	aaa()
	aaa(10)
	aaa(10,20)
	aaa("홍길동","이순신","유관순")

( function(){
		console.log("즉시 호출함수")
	}
	)() //() 이용 바ꃠ 실행
	
	(function(n){
		console.log("즉시 호출함수2", n)
	})(10)

function a(n){
		console.log("a 호출")
		n()
	}
	function b(){
		console.log("b 호출")
	}
	function c(){
		console.log("c 호출")
	}
	a(b)
	a(c)

유틸리티 함수

가. alert 함수 경고창을 화면에 보여줄 때 사용한다. 예> alert(값);

Prompt 힘수 : 화면에서 문자 입력

나. setTimeout 함수 일정시간에 함수를 단 한번 실행한다.

예> setTimeout(function(){ console.log("3초후에 출력"); },3000);

다. setInterval 함수 일정시간마다 반복해서 함수를 실행한다.

예> var interval = setInterval(function(){

console.log("3초후에 출력"); },3000);

clearInterval(interval);

라. 문자열을 숫자로 , 실수로

예> var num = parseInt( “123” ); var f = parseFloat( “3.14” );

//alert("경고문.... 니코가 너무 귀여움")
//console.log("================")

//function aaa(){
//	alert("니코")
//	console.log("=============")
//}
///var test =aaa
//setTimeout(test, 3000) //3초 뒤에 
setTimeout(
	function(){
		alert("니코짱")
	}
	, 3000) //3초 뒤에