이안의 평일코딩

국비 JavaScript - 변수, 연산자, 제어문 본문

Front-end/JavaScript

국비 JavaScript - 변수, 연산자, 제어문

이안92 2020. 10. 15. 14:40
반응형

2020.10.15(목)

사용자 요청 ==> 서버를 거쳐서 처리 (Controller) ==> 자바

                ==> 사용자 컴퓨터에서 처리  ==> 자바스크립트 

                

         ***1) 자바  : 데이터베이스 연결 ==> 데이터를 전송 (프로그래언어 => C/C++,C#,Java)

         ***2) HTML : 정적 = 브라우저 출력하는 언어 

         수정)==3) CSS : 시각화 

                   = 보는거다 

                   = 외국(인터넷 => 정보를 공유)

         4) 자바스크립트 : 이벤트 처리 (이벤트 구동 방식) 

            ==========

              ***ajax

              nodejs

              vuejs

              ***reactjs

              =======

              ***jquery  ==> 

              

        자바스크립트 (ES5) ==> ES8

         1) 변수 

            var : 자동 지정변수 

            var i=10 ==> 정수 인식 (int)

            var i="aaa" ==> String

            var i=10.5 ==> double

            var i=[] => array

            var i={} => 객체 

            ===> 단점 : scope

                           예) 

                   if(조건문)

                   {

                       int a=10; // 지역변수

                   }// a는 사라진다 

                   

                   if(조건문)

                   {

                      var i=10;

                   }

                   console.log(i)

                   

                   ES6 => const(상수) , let (지역변수)

                   ES6 => 람다식 

                   function aaa(){}

                   const aaa=()=>{}

         2) 연산자

         3) 제어문 

         4) 함수 

         5) DOM 

         6) 객체지향 

         7) ES6 => react,vue,node 

 

<%@ page language="java" contentType="text/html; charset=UTF-8"
    pageEncoding="UTF-8"%>
<!DOCTYPE html>
<html>
<head>
<meta charset="UTF-8">
<title>Insert title here</title>
<!-- 내부 script -->
<!-- 외부 script => 확장은 .js
   <script src="파일명">
               ======= 원격 (url), 내부(파일명) 
 -->
<script type="text/javascript">
 /*
         변수 :
      ====================
       var : ES5사용하는 변수 => 사용범위 정해져 있지 않다 
       let : ES6사용 변수  => 지역변수 ({} 끝나면 사용을 할 수 없다)
       const : ES6사용 ==> 데이터 변경이 불가능 (상수형 변수)
      ==================== 자동지정 변수 
      int a=10;
      var a=10;
      String a="Hello";
      var a="Hello";
      
      =====> let a=10 ==> int
             let a="aaa" ==> String
             let a=10.5  ==> double
             let a=[] ==> Array  ==> 데이터 첨부   ==> [10,"Hello",10.5,{}]
             let a={} ==> 객체  (JSON) => 자바스크립트 데이터 표현법
 */
 /* window.onload=function(){
       var a="<center><h1>Hello JavaScript</h1></center>";
       // 화면에 출력 
       document.write(a);
       a=10;// 자동으로 형변환 
       document.write(a);
 } */
 // 화살표 함수 
 /*
     화살표 함수 => function , return제거 
     
     
 */
 /* window.onload=()=>{
	 let a="Hello JavaScript";
	 a="Hello2";
	 console.log(a);
	 const b="JavaScript";// 상수  ==> final => 값을 변경할 수 없다 
	 //b="Jquery";
	 console.log(b);
 } */
 // main
 /* window.onload=()=>{
	 aaa();
 } */
</script>
</head>
<body>

</body>
</html>

 

<%@ page language="java" contentType="text/html; charset=UTF-8"
    pageEncoding="UTF-8"%>
<!DOCTYPE html>
<html>
<head>
<meta charset="UTF-8">
<title>Insert title here</title>
<script type="text/javascript">
/*
 *   var : 사용범위가 지정(X)
     let : 사용범위가 지정(O)
     const : 상수형 변수
 */
 /* var a=10;// 전역변수
 window.onload=function(){
    if(a==10)
    {
    	let b=100;	
    }
    console.log("b="+b);
 } */
 /*
      처리 
       = 연산자
                 산술연산자 (+ , - , * , / , %)
                 ===         == 정수/정수=실수
                	 1) 산술처리
                	 2) 문자열 결합 
                 논리연산자
                 비교연산자 ( == , != , <  , >  , <= , >= )
                   ===(같다) , !==(같지 않다)
                                   문자열 비교 : ===
                                   문자열 => "" , 'Hello' 
                 삼항연산자
                 대입연산자 
                 스코프연산자 (...)
       = 제어문 
                 조건문
           => 단일조건문
           => 다중조건문 
           => 선택조건문
                반복문 
           => for
           => do~while
           => while
           => for-each
           => for - in
           => map
                반복제어문 
           => continue
           => break
 */
 window.onload=function(){
      let a=10;
      let b=3;
      console.log("10+3="+(a+b));
      console.log("10-3="+(a-b));
      console.log("10*3="+(a*b));
      console.log("10/3="+(a/b)); // 정수/정수 = 실수
      console.log("10%3="+(a%b));
      
      let aa='Hello ';
      let bb='JavaScript!!';
      console.log(aa+bb);
      
      let aaa="10";
      let bbb=20;
      console.log(aaa+bbb); //1020  ${"20"+10}=30
      
      let aaaa='A'
      let bbbb=10
      console.log(aaaa+bbbb)//75  '' => 문자열  ==> "A"
 }
</script>
</head>
<body>

</body>
</html>

 

<%@ page language="java" contentType="text/html; charset=UTF-8"
    pageEncoding="UTF-8"%>
<!DOCTYPE html>
<html>
<head>
<meta charset="UTF-8">
<title>Insert title here</title>
<script type="text/javascript">
window.onload=function(){
	// 비교연산자  (숫자,문자열)  "" , ''
	var result='Java'==='Java';// == , === : 문자열비교도 가능
	console.log(result);
	var res1='Java'>'Hello';
	console.log(res1);
	var res2='Java'!=='Java'; // != , !==
	console.log(res2);
	
	// 논리 연산자 ( && || ! (부정연산자))
	/*
	     ========================================
	    	                &&            ||
	     ========================================
	    	true true      true          true
	     ========================================
	    	true false     false         true
	     ========================================
	    	false true     false         true
	     ========================================
	    	false false    false        false
	     ========================================
	    	 
	    	 
	     // 단항 연산자  (++ , --)
	*/
	let a=10;
	a++;
	console.log("a="+a)
	
	let aa=10
	let bb=++aa;
	console.log("aa="+aa);
	console.log("bb="+bb);
	
	aa=10;
	bb=aa++;
	console.log("aa="+aa);
	console.log("bb="+bb);
	
	let aaa=10===10;
	let bbb=!aaa;
	console.log("aaa="+aaa);
	console.log("bbb="+bbb);
	/*
	    let,var ==> 데이터형 
	                1) 정수
	                2) 실수
	                3) 블린
	                4) 문자열
	                5) 배열
	                6) 객체 
	*/
}
</script>
</head>
<body>

</body>
</html>

 

<%@ page language="java" contentType="text/html; charset=UTF-8"
    pageEncoding="UTF-8"%>
<!DOCTYPE html>
<html>
<head>
<meta charset="UTF-8">
<title>Insert title here</title>
<script type="text/javascript">
/*
 *   삼항연산자 , 대입연산자 
      (조건)?값1:값2
          = 조건 (true) : 값1
    	  = 조건 (false) : 값2
          대입연산자
         = 
        +=
        -=
 */
 window.onload=function(){
    var a=(10%2==0)?"짝수":"홀수";
    document.write(a);
 }
</script>
</head>
<body>

</body>
</html>

 

<%@ page language="java" contentType="text/html; charset=UTF-8"
    pageEncoding="UTF-8"%>
<!DOCTYPE html>
<html>
<head>
<meta charset="UTF-8">
<title>Insert title here</title>
<script type="text/javascript" src="http://code.jquery.com/jquery.js"></script>
<script type="text/javascript">
/* function send(){
	// 태그 ==> 객체
	let f=document.frm;
	if(f.name.value==="")
	{
		f.name.focus();
		return;
	}
	alert(f.name.value);
} */
$(function(){
	$('#btn').click(function(){
		if($('#name').val()==="")
			{
			   $('#name').focus();
			   return;
			}
		alert($('#name').val())
	})
})
// id , class => jquery,css
// name => 자바에서 전송 받을 목적 
</script>
</head>
<body>
   <form name=frm>
    이름:<input type=text name=name size=15 id=name>
    <input type=button value="전송" id="btn">
   </form>
</body>
</html>

 

<%@ page language="java" contentType="text/html; charset=UTF-8"
    pageEncoding="UTF-8"%>
<!DOCTYPE html>
<html>
<head>
<meta charset="UTF-8">
<title>Insert title here</title>
<script type="text/javascript">
/*
 *   제어문 
            조건문
            if(조건문)
            {
                              조건이 true 일때 실행문장	
            }
            =============================
            if(조건문)
            {
                           조건이 true 일때 실행	
            }
            else
            {
            	조건이 false 일때 실행	  
            }
            ==================================
            if(조건문)
            {
                           조건이 true 일때 실행	
            }
            else if(조건문)
            {
                           조건이 true 일때 실행	
            }
            else if(조건문)
            {
                           조건이 true 일때 실행	
            }
            
            switch(정수)
            {
            case 1:
            	처리
            	break;
            case 2:
            	처리
            	break;	
            }
            
                     초기값
           while(조건문)
           {
        	   처리문장 
        	   증가식
           }
                     
                    초기값
           do{
        	   
        	   처리문장 
        	   증가식
           }while(조건식);
                   1  2    4
           for(초기값;조건식;증가식)
        	{
        	      3
        	}
                   
           for(let vo in array) => forEach 
 */
 /* window.onload=function(){
      let a=10;
      if(a%2==0)
    	  console.log("a=짝수입니다");
      else
    	  console.log("a=홀수입니다")
 } */
 let i=0;
 function click()
 {
	 //if(i)
 }
</script>
</head>
<body>
   <div>
     <input type=button value="클릭" onclick=click()>
   </div>
   <div id="div" style="display:none">
     <img src="https://t1.daumcdn.net/movie/dcf71f416b8751527ae62754fe76f13deadd58e2">
   </div>
</body>
</html>
반응형

'Front-end > JavaScript' 카테고리의 다른 글

이벤트 관리 방법 (버블링, 캡쳐링, 이벤트 위임)  (0) 2021.02.26
브라우저 저장소 (쿠키, 로컬 스토리지, 세션 스토리지)  (0) 2021.02.26
[자바스크립트] 가격 숫자 천 단위 , 콤마 찍기  (2) 2021.02.03
[JavaScript 입문] 자바스크립트 기초 문법 총정리  (0) 2020.12.11
국비 JavaScript - JQuery  (0) 2020.10.31
'Front-end/JavaScript' Related Articles more
Comments