VS code-html/css/javascript

최성현·2023년 7월 18일
StringalertconfirmevalnumberparseIntpromptscripttypeofvarwindow.prompt개행대입연산자명시적형변환순서대입숫자/문자구분암시적형변환와!줄내리기증감연산자
0

JavaScript

목록 보기
1/4

alert

경고창 띄우기

alert("Hello~JavaScript!!!!");

alert창 연산가능 - 연산 순서도 지켜서 계싼

lert(5+5*2);
alert(10%7);

script

javascript 사용

본문

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>Document</title>
    <!-- 가독성때문에 javascript도 이곳에 -->
    <script>
        // 자바처럼 주석 사용 가능
        // 가장 기본적인 alert()함수로 경고창 띄우기
        // 순차적으로 진행
        alert("Hello~JavaScript!!!!");
        alert('안녕 자바스크립트');
    </script>
</head>
<body>
    <script>
        // 연산도 가능하다
        // 연산순서도 지켜져서 계산
        alert(5+5*2);
        // 나머지
        alert(10%7);
    </script>
</body>
</html>

var

모든 자료형 var로 통일

javascript 출력

  1. document.write() : html요소 없이 출력
  2. innerHTML : HTML요소 안에 출력
  3. console.log() : 브라우저의 콘솔 탭에 출력(value 확인)

html요소 없이 출력 ()안의 것을 화면에 출력

document.write("안녕하세요?<br>"+name+"입니다<br>");

""과 '' 끊어서 구분 밖이든 안이든 구분

document.write("자바스크립트의 시작<br> '자바스크립트 1일차'<br>");
<script>
        var name1="최";
        var name2="성";
        var name3="현";

        var name=name1+name2+name3;

        // 자바스크립트의 출력
        // 개행<br>
        // html요소 없이 출력 ()안의 것을 화면에 출력하라
        document.write("안녕하세요?<br>"+name+"입니다<br>");
        // ""과 '' 끊어서 구분 밖이든 안이든 구분만 해주면됨
        document.write("자바스크립트의 시작<br> '자바스크립트 1일차'<br>");
    </script>

입력한 순서대로 대입

		var a;
        a="변수연습"; // 순서대로 넣어서 이전 것에 덮어씌어짐(초기화)
        a="100"; // 문자열

-> java때처럼 a는 100으로 설정됨

줄 내리기

출력문 안에 <br> 적어줘야함
document.write(b+"<br>");

문자열과 숫자 구분

java때처럼 ""안은 문자/벗어난건 숫자

대입연산자

		var b=10;
        document.write(b+"<br>"); // 줄 내려주려면 "<br>" 필수
        b+=5;
        document.write(b+"<br>"); // 15

증감연산자

		var b=20;
        b++;
        document.write(b+"<br>"); // 21
        b++;
        document.write(b+"<br>"); // 22

본문

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <!-- const 절대 변하지 않는 상수 let 범위를 가지는 지역변수 -->
    <title>자바스크립트 변수_var(let,const)</title>
    <script>
        var name1="최";
        var name2="성";
        var name3="현";

        var name=name1+name2+name3;

        // 자바스크립트의 출력
        // 개행<br>
        // html요소 없이 출력 ()안의 것을 화면에 출력하라
        document.write("안녕하세요?<br>"+name+"입니다<br>");
        // ""과 '' 끊어서 구분 밖이든 안이든 구분만 해주면됨
        document.write("자바스크립트의 시작<br> '자바스크립트 1일차'<br>");
    </script>
</head>
<body>
    <!-- 자바스크립트의 출력_3가지 
    1. document.write()  : html요소 없이 출력
    2. innerHTML  : HTML요소 안에 출력
    3. console.log()  : 브라우저의 콘솔 탭에 출력(value 확인)-->
    <script>
        var a;
        a="변수연습"; // 순서대로 넣어서 이전 것에 덮어씌어짐(초기화)
        a="100"; // 문자열

        document.write(a+1+"<br>"); // 문자열+1로 1001출력

        // 대입연산자
        var b=10;
        document.write(b+"<br>"); // 줄 내려주려면 "<br>" 필수
        b+=5;
        document.write(b+"<br>"); // 15

        // 증감연산자
        var b=20;
        b++;
        document.write(b+"<br>"); // 21
        b++;
        document.write(b+"<br>"); // 22
    </script>
</body>
</html>

형변환

암시적 형변환

자바스크립트 컴파일러에 의해 자동 형변환 일어남

 		var result=1+"2";

        document.write("result="+result+"<br>"); //12 숫자 1 문자 2 붙여짐

        var result2="5"+true; 
        document.write("result2="+result2+"<br>"); //5true 문자

명시적 형변환

1.String() 이용해서 숫자로

		 var relt1=1+"2";
        document.write("relt1="+relt1+"<br>"); //12

        var test1="300";
        document.write((test1)+10+"<br>"); //30010

        var test2="300.1";
        document.write((test2)+10+"<br>"); //300.110

2.Number,parseInt_숫자로 형변환

var test3=Number(test1); // 숫자로 변환
        document.write((test3)+10+"<br>"); //310

        var test4=parseInt(test2); // 정수로 변환해서 소수점 x
        document.write((test4)+100+"<br>"); //400

본문

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>Document</title>
</head>
<body>
    <script>
        // 암시적 형변환 : 자바스크립트 컴파일러에 의해 자동 형변환 일어남
        // 테스트
        var result=1+"2";

        document.write("result="+result+"<br>"); //12 숫자 1 문자 2 붙여짐

        var result2="5"+true; 
        document.write("result2="+result2+"<br>"); //5true 문자
        
        
        // 명시적 형변환
        // 1.String() 이용해서 숫자로

        var relt1=1+"2";
        document.write("relt1="+relt1+"<br>"); //12

        var test1="300";
        document.write((test1)+10+"<br>"); //30010

        var test2="300.1";
        document.write((test2)+10+"<br>"); //300.110


        //Number,parseInt_숫자로 형변환
        var test3=Number(test1); // 숫자로 변환
        document.write((test3)+10+"<br>"); //310

        var test4=parseInt(test2); // 정수로 변환해서 소수점 x
        document.write((test4)+100+"<br>"); //400

        </script>
</body>
</html>

prompt

input창

window.prompt=prompt

typeof(변수) -> 변수의 타입반환

본문

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>Document</title>
</head>
<body>
    <script>
        // prompt는 input 창
        var userId=window.prompt("아이디는?");
        document.write(userId+"님 환영합니다<br>");

        // window.prompt=prompt
        var num=prompt("숫자입력", "0");
        // typeof(변수) -> 변수의 타입반환
        document.write(typeof(num));

        var num1=prompt("숫자1");
        var num2=prompt("숫자2");
        var num3=prompt("숫자3");

        document.write("총 합계는 "+(parseInt(num1)+Number(num2)+Number(num3)));

        
    </script>
</body>
</html>

prompt Quiz

confirm

확인:1 취소:0 boolean으로 생각

ar ans=confirm("정말 삭제하시겠습니까?");

ans==1 ==1이 없어도 default는 true

		if(ans) // true 1
            document.write("삭제되었습니다<br>");
        else
            document.write("취소되었습니다<br>");

eval()

문자열 내에서 연산 가능 소수점 가능

		var a=eval("10.5+10");
        document.write(a+"<br>"); //20.5
        document.write(parseFloat(a)+parseInt(a)+"<br>"); //40.5 float=double / float(소수)+int(정수)= 소수값

본문

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>Document</title>
</head>
<body>
    <!--당신의 키는?
        180
        표준몸무게: (키-100)*0.9
        당신의 표준몸무게는 **kg 입니다-->
    <script>
        var q=Number(prompt("당신의 키는?"));
        document.write("나의 키는 "+q+"cm<br>");

        var avgwg=(q-100)*0.9;

        document.write("나의 표준몸무게는 "+avgwg+"kg 입니다<br>");

        // confirm
        var ans=confirm("정말 삭제하시겠습니까?"); //확인:1 취소:0 boolean으로 생각

        // ans==1 ==1이 없어도 default는 true
        if(ans) // true 1
            document.write("삭제되었습니다<br>");
        else
            document.write("취소되었습니다<br>");


        // eval()  : 문자열 내에서 연산 가능 소수점 가능
        var a=eval("10.5+10");
        document.write(a+"<br>"); //20.5
        document.write(parseFloat(a)+parseInt(a)+"<br>"); //40.5 float=double / float(소수)+int(정수)= 소수값

        //prompt 창에 구구단 (원하는 단) 입력해서 출력해보자
        var dan=prompt("원하시는 단은?");

        for(var i=1;i<=9;i++)
        {
            document.write(dan+"x"+i+"="+dan*i+"<br>");
        }
    </script>
</body>
</html>
profile
최성현
백엔드 개발자로서 성장해 나가는 성현이의 블로그~

0개의 댓글