뉴비코더
나는 코딩뉴비
뉴비코더
전체 방문자
오늘
어제
  • 분류 전체보기 (91)
    • 개발입문뉴비 - 국비지원 ( Front End ) (91)
      • html (26)
      • css (58)
      • javascript (6)
      • Library React.js (0)
    • FrontEnd ( Self-study ) (0)
      • html5, CSS3 (0)
      • Vanilla JS (0)
      • Clone Code (0)
    • BackEnd ( self-study ) (0)
      • Library Node.js (0)
      • Python (0)
      • Go (0)

블로그 메뉴

  • 홈
  • 방명록

공지사항

인기 글

태그

  • 하이퍼링크
  • HTML5
  • Javascript 배열
  • boxmodel
  • Margin
  • padding
  • Transition
  • 웹개발
  • ol
  • js event
  • HTML
  • 국비지원
  • 코딩진화
  • css3
  • 가상클래스
  • 마크업
  • 프론트엔드
  • 웹개발입문
  • parseInt
  • position
  • js event object
  • js 생성 함수
  • transform
  • boxmodeling
  • js 이벤트객체
  • webfont
  • JavaScript
  • 클론코딩
  • psuedo-class
  • UL

최근 댓글

최근 글

티스토리

hELLO · Designed By 정상우.
뉴비코더

나는 코딩뉴비

[2022/02/07]국비지원 javascript 1 - 연산자
개발입문뉴비 - 국비지원 ( Front End )/javascript

[2022/02/07]국비지원 javascript 1 - 연산자

2022. 2. 9. 00:43

 

 

javascript : 객체 기반 언어

  1. object.method(  ); : 객체. 출력방법˙기능( 출력내용 ); = document에 ( 출력내용 )라고 write
    document.write("재미있는 자바스크립트" + "<br>");​


  2. 변수 이름 작성 방법
    • 영문 대˙소문자 구분 ( 한글, 일문 등도 가능 )
    • 前 : 영문, _, $
    • 後 ( 이름 ) : 영문, 숫자, _, $
      var 변수명; 
      
          var num = 10;
          var num = num/2;
          document.write(num + "<br>");


      ≫ 해석 방법
      var firstNum = 100; 
      >> 변수명을 firstNum이라고 선언(var)하고 100을 대입(=)하겠다
      
      var nextNum = 2;
      >> 변수명을 nextNum이라고 선언(var)하고 2를 대입(=)하겠다
      
      var result = firstNum + nextNum;
      >> 변수명을 result라고 선언(var)하고 firstNum과 nextNum의 합을 대입(=)하겠다 
      
      document.write(result + "<br>");


  3.  변수로 저장 가능한 data type
    • string
      • 문자
        var txt1 = "자바스크립트";
        var txt2 = '10';
      • 숫자
        var num = 10;
    • boolean ( 논리형 ) : true, false
      var result = true;
    • null ( 공백 )
      var result = null;
  4. 연산자
    • 산술연산자 ( 이항 연산자 ) : +   -   /   *       %(나머지)
      var A=10;
      var B=3;
      var result;
      
          result=A+B;
          document.write(result + "<br>"); //13
          result=A-B;
          document.write(result + "<br>"); //7
          result=A*B;
          document.write(result + "<br>"); //30
          result=A/B;
          document.write(result + "<br>"); //3.3333333333333335
          result=A%B;
          document.write(result + "<br>"); //1




    • 대입연산자 : +=   -=   /=   *=     %=  ( = : 대입 / == : equal )
      var numA=10;
      var numB=20;
      
          numA += 5; //numA = numA + 5
          document.write(numA + "<br>");    //15
          numA -= 5; //numA = (4번째줄 numA) - 5
          document.write(numA + "<br>");    //10
          numA *= 5; //numA = (6번째줄 numA) * 5
          document.write(numA + "<br>");    //50   
          numA /= 5; //numA = (8번째줄 numA) / 5
          document.write(numA + "<br>");    //10
          
          numB %=3; //numB = numB % 3 = numB를 3으로 나눈 나머지
          document.write(numB + "<br>");    // 2




    • 증감연산자 ( 추가 2022/02/08 - 07일 진도 강사가 까먹고 안 해서 08일에 함 ) :
          ++ )) 1씩 증가
          -- )) 1씩 감소
      var numA = 10;
      var numB = 20;
      
      numA++;
          document.write(numA + "<br>"); //11
      numB--;
          document.write(numB + "<br>"); //19




    • 논리연산자 : || ( or )   && ( and )    !(논리적 부정)
      var A = 10;
      var B = 20;
      var C = 30;
      var D = 40;
          
        var num1 = A>B;
        var num2 = C>=D;
      
        var a = num1 || num2;
          document.write(a + "<br>"); //false
        var b = num1 && num2;
          document.write(b + "<br>"); //false
        var c = !num1;
          document.write(c + "<br>"); //true
      
        var num2 = C<=D;
        
        var d = num1 || num2;
          document.write(d + "<br>"); //true
        var e = num1 && num2;
          document.write(e + "<br>"); //false
        var f = !num1;
          document.write(f + "<br>"); //true
      
        var num1 = A<=B;
        var num2 = C<D;
      
        var g = num1 || num2;
          document.write(g + "<br>"); //true
        var h = num1 && num2;
          document.write(h + "<br>"); //true
        var i = !num1;
          document.write(i + "<br>"); //false


      ≫ 원하는 답 추출하기
      //대상 확인하기 : 20대 여성
      //방법 : 입력팝업을 띄우는 prompt();
      
      //prompt('질문', 'default답변');
      
      
      var gender = prompt("당신의 성별은?", "여성");
      var age = prompt("당신의 나이는?", "20");
      var result = gender=="여성" && age>=20 && age<30 ;
      
        document.write("결과:" + result + "<br>");

                   ▶  prompt( '질문', 'default답변' );  : 브라우저에 기본적인 팝업창이 뜸


      ≫ 원하는 답 추출하기2
      //시험 점수로 논리답 추출하기
      //국어, 영어, 수학 점수 각각 60점 이상이고, 평균이 70점 이상일 때 true 출력
      
      var kor = prompt("당신의 국어 점수는 몇 점입니까?", "60");
      var eng = prompt("당신의 영어 점수는 몇 점입니까?", "60");
      var math = prompt("당신의 수학 점수는 몇 점입니까?", "60");
      var avg = (Number(kor) + Number(eng) + Number(math))/3
      
      var result = kor>=60 && eng>=60 && math>=60 && avg>=70;
        document.write("결과: " + result + "<br>");

                    ▶  Number(prompt( "문자열", " " ));
                    ▶  Number()
                    ▶ ▶ "숫자" 또는 '숫자' 로 입력하는 경우 숫자가 아닌 문자로 인식 되기 때문에 이 것을 숫자(정수)로 치환




    • 문자 결합 연산자
      • "문자" + "문자"
        var txt1="아름다운";
        var txt2="우리강산";
          document.write(txt1 + "&nbsp;" + txt2 +"<br>")



      • "문자" + 숫자
        var txt3="은하철도";
        var txt4= 999;
          document.write(txt3 + txt4 +"<br>")



      • String( 숫자 ) + 숫자 : String( 숫자 ) = "숫자" = 문자화 된 숫자
        var num1=200;
        var num2=300;
        var txt5=String(num1); //'200'
          document.write(num1 + num2 + txt5 +"<br>") //500200 = num1+num2 (숫자 합)에 txt5 연속


        ≫ 문자 조합 하기 = 문자는 숫자가 아니라서 그냥 이어붙어 단어조합하는 방식.
        var addText="2002월드컵";
            addText += " 대한민국";
            addText += " 짝짝~짝짝짝~!!";
            document.write(addText + "<br>");    //2002월드컵 대한민국 짝짝~짝짝짝~!!


    • 조건 연산자 ( 삼항 연산자 ) : 조건식? 실행문1 : 실행문2;
      var num1=30;
      var num2=20;
      
          num1 >= num2 ? alert("참이다") : alert ("거짓이다");

                    ▶  alert : 알림, 경고
                    ▶  브라우저의 기본 경고 팝업창에 조건식이 true인지 false인지가 출력됨


      ≫ 조건 연산자로 내용 확인하기 : confirm( "의도" ) → 확인 : true / 취소 = false
      var result = confirm("Do you like Javascript?");
      var theText = result ? "like" : "hate" ;
          document.write(theText);

                     ▶  confirm : 브라우저에서 확인 또는 취소를 요구하는 기본 팝업창을 출력함
                     ▶  result ? "like" : "hate" = 확인 시 like 출력, 취소 시 hate 출력


                     ▶ 확인/취소 시 브라우저창에 출력되는 값은 임의로 정할 수 있으나
                         확인은 긍정, 취소는 부정인 편이 낫지 싶다.

 

 


 

 

python 잠깐 해봤을 때랑 비교하면...

python = 영어

javascript = 수학 + 수학화 영어

 

원래 다 초반이 개꿀잼인 법..

 

저작자표시 비영리 변경금지 (새창열림)
    '개발입문뉴비 - 국비지원 ( Front End )/javascript' 카테고리의 다른 글
    • [2022/02/10]국비지원 javascript 4-(1) 배열
    • [2022/02/09]국비지원 javascript 3 객체 전개
    • [2022/02/08]국비지원 javascript 2-(2) 조건반복실행
    • [2022/02/08]국비지원 javascript 2-(1) 조건실행
    뉴비코더
    뉴비코더
    FrontEnd 지망 - 코딩뉴비를 위한(?), 뉴비에 의한, 뉴비의 블로그 - 코딩뉴비의 코딩 학습 기록 - 첨가물 : 약간의 불평/사족

    티스토리툴바