1일차 JavaScript(2023-03-10)

권단비·2023년 3월 10일

목록 보기

4/4

[JavaScript 연습]

html + css = 퍼블리셔
html + css + 자바스크립트(Vue,react) = 프론트 엔지니어

코드를 입력하세요

안에 를 입력하면 자바스크립트

[계산]
<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <meta http-equiv="X-UA-Compatible" content="IE=edge">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>Document</title>
    <script>
        alert("Hello world");
    </script>
</head>
<body></body>
</html>

[결과값]

[계산]
<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <meta http-equiv="X-UA-Compatible" content="IE=edge">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>Document</title>
    <script>
        //alert("Hello world");
        document.write("<h1>안녕하세요</h1>")
    </script>
</head>
<body>
    <h1>안녕하세요</h1>
</body>
</html>

[결과값]

[계산]
[hello.html]
<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <meta http-equiv="X-UA-Compatible" content="IE=edge">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>Document</title>
    <script src="hello.js"> //소스코드 위치
        //alert("Hello world");
    </script>
</head>
<body>
    <h1>안녕하세요</h1>
</body>
</html>

[hello.js]
//alert("Hello world");
document.write("<h1>안녕하세요1</h1>")
console.log("메롱");
console.log("메롱");
console.log("메롱");
console.log("메롱");
console.log("메롱");
console.log("메롱");

[결과값]

[계산]
[hello.html]
<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <meta http-equiv="X-UA-Compatible" content="IE=edge">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>Document</title>
<script>
    alert("Hello Javascript!!");

var inputPro = prompt("출력창입니다.","문장을 입력하세요.") // 입력
alert(inputPro)

var inputCon = confirm("진행하시겠습니까")
alert(inputCon)
</script>

안녕하세요

``` >>``` [결과값] ``` ![](https://velog.velcdn.com/images/hyphen/post/241c2c06-27b5-477f-a901-6b81e4bccc48/image.png)

[계산]
[hello.html]
<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <meta http-equiv="X-UA-Compatible" content="IE=edge">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>Document</title>
<script>
    alert("Hello Javascript!!");

    var inputPro = prompt("출력창입니다.","문장을 입력하세요.") // 입력
    //alert(inputPro)
    document.write(inputPro);

var inputCon = confirm("진행하시겠습니까")
//alert(inputCon)
document.write(inputCon);
</script>

안녕하세요

``` >>``` [결과값] ``` ![](https://velog.velcdn.com/images/hyphen/post/241c2c06-27b5-477f-a901-6b81e4bccc48/image.png)

[문자열, 숫자, 불리언]

html : 정적
JavaScript : 동적
var 변수명 = 값(자료형)

자바스크립트에서는 var만 있는 이유
: 변수에 1324의 값을 가진 주소가 들어간다.
무조건 객체

[계산]
<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <meta http-equiv="X-UA-Compatible" content="IE=edge">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>Document</title>
<script>
    var kor = prompt("국어 점수","국어 점수를 입력하세요.") // 입력
    document.write("<h1>국어점수:" + kor+"</h1>");

    var math = prompt("수학 점수","수학 점수를 입력하세요.") // 입력
    document.write("<h1>수학점수:" + math+"</h1>");

    document.write("<h1>총점:" + (Number(kor) + Number(math)) + "</h1>");

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

[결과값]

[계산]
<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <meta http-equiv="X-UA-Compatible" content="IE=edge">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>Document</title>
<script>
var variableName1; // 선언
variableName1 = 100; // 할당
//alert("variableName1 : " + variableName1);

var variableName2 = 200; // 선언 및 초기화
variableName2 = 300; // 할당
//alert("variableName2 : " + variableName2);

document.write("variableName1 :" + variableName1)
</script>
</head>
<body>
</body>
</html>

[결과값]

[계산]
<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <meta http-equiv="X-UA-Compatible" content="IE=edge">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>Document</title>
<script>
var variableName1; // 선언
variableName1 = 100; // 할당
//alert("variableName1 : " + variableName1);

var variableName2 = 200; // 선언 및 초기화
variableName2 = 300; // 할당
//alert("variableName2 : " + variableName2);

document.write("variableName1 :" + variableName1);

/*
            변수에는 모든 자료형을 담을 수 있습니다.
            자료형 : 문자, 숫자, 불리언, 함수, 객체, undefined
         */
        var varStr = "ABCDEF";
        console.log("varStr : " + varStr);

        var varNum = 123456;
        console.log("varNum : " + varNum);

        var varBoo = false;
        console.log("varBoo : " + varBoo);

        var varFun = function fun(){};
        console.log("varFun : " + varFun);

        var varObj = {};
        console.log("varObj : " + varObj);

        var varUnd = undefined; // 선언만 하고 초기화되지 않은 변수
        console.log("varUnd : " + varUnd);
</script>
</head>
<body>
</body>
</html>

[계산]
<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <meta http-equiv="X-UA-Compatible" content="IE=edge">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>Document</title>
    <script>
        /*javascript에서는 변수에 담긴 자료형을 변경할 수 있습니다.*/
        var varTemp;
        varTemp = "ABCDEF";
        console.log("varTemp : " + varTemp);
        console.log("varTemp : " + typeof(varTemp));

        varTemp = 123456;
        console.log("varTemp : " + varTemp);
        console.log("varTemp : " + typeof(varTemp));

        varTemp = true;
        console.log("varTemp : " + varTemp);
        console.log("varTemp : " + typeof(varTemp));

        varTemp = function() {};
        console.log("varTemp : " + varTemp);
        console.log("varTemp : " + typeof(varTemp));

        varTemp = {};
        console.log("varTemp : " + varTemp);
        console.log("varTemp : " + typeof(varTemp));

        varTemp = underfined;
        console.log("varTemp : " + varTemp);
        console.log("varTemp : " + typeof(varTemp));
    </script>
</head>
<body>
</body>
</html>

[결과값]

[계산]
<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <meta http-equiv="X-UA-Compatible" content="IE=edge">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>Document</title>
    <script>
/*Javascript는 다른 프로그램언어에 비해서 자료형에 대한 제약이 약하다.*/

var varTemp = "123";
console.log("varTemp type : " + typeof(varTemp));

verTemp = 123;
console.log("varTemp type : " + typeof(varTemp));

/*자료형 변환*/

var varType = "123";
console.log("varType type : " + typeof(varType));
console.log("varType : " + (varType + 1000)); // 문자형 + 숫자형 : 출력값 = 1231000

varType = Number(varType); // 자바에서는 Integer.valueOf()
console.log("varType type : " + typeof(varType));
console.log("varType : " + (varType + 1000)); // 숫자형 + 숫자형 : 출력값 = 1123
    </script>
</head>
<body>
</body>
</html>

[결과값]

[배열]

인덱스를 이용해서 n개의 데이터를 하나의 변수에 담고 있는 형태

[계산]
<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <meta http-equiv="X-UA-Compatible" content="IE=edge">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>Document</title>
<script>
    /*배열 객체 생성 방법*/
    //크기를 지정하지 않은 배열 객체 생성
    var varArr1 = new Array();
    //크기를 지정한 배열 객체 생성
    var varArr2 = new Array(5);   
    //배열 생성과 데이터저장을 동시에
    var varArr3 = new Array(123, "ABC", true, function fun(){}, {}, undefined);
    //배열 생성과 데이터저장을 동시에
    var varArr4 = [123, "ABC", true, function fun(){}, {}, undefined];

    console.log("varArr1 : " + varArr1);
    console.log("varArr2 : " + varArr2);
    console.log("varArr3 : " + varArr3);
    console.log("varArr4 : " + varArr4);
</script>
</head>
<body>
</body>
</html>

[결과값]

[for]

[계산]
<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <meta http-equiv="X-UA-Compatible" content="IE=edge">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>Document</title>
    <script>
    var arr = []
arr[0] = '한국'
arr[1] = '미국'
arr[2] = '일본'

for (var i = 0; i < arr.length; i++) {
console.log(arr[i])
}
for(var j in arr){
    document.write(arr[j] + '<br>')
}
    </script>
</head>
<body>
</body>
</html>

[결과값]

권단비

이전 포스트

1일차 JavaScript(2023-03-10)

JavaScript

[JavaScript 연습]

안녕하세요

안녕하세요

[문자열, 숫자, 불리언]

[배열]

[for]

4일차 JavaScript(2023-03-15)

0개의 댓글