1. 배열 Array

배열에는 String , Number, undefined ,null, boolean 다 들어갈 수 있다.

    var empty = [];
    var language = ["JAVA", "C#", "PYTHON"];
    var number = [1,2,3,4,5,6];
    var etc = [7,"string", undefined, null, false];

    console.log(empty);
    console.log(language);
    console.log(number);
    console.log(etc);

    console.log(language[0]);
    console.log(language[2]);

2. Object 

배열과 비슷하다. Object의 특징은 Key - Value

    // object
    var objempty = {};
    var myObj = {
        key1: "value1",
        key2: "value2",
        key3: "value3"
    };

    console.log(objempty);
    console.log(myObj);
    console.log(myObj.key1);

 

전체코드

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <meta http-equiv="X-UA-Compatible" content="ie=edge">
    <title>Document</title>
</head>
<body>
    <h1>Arrays and Objects</h1>
</body>
</html>
<script>
    var empty = [];
    var language = ["JAVA", "C#", "PYTHON"];
    var number = [1,2,3,4,5,6];
    var etc = [7,"string", undefined, null, false];

    console.log(empty);
    console.log(language);
    console.log(number);
    console.log(etc);

    console.log(language[0]);
    console.log(language[2]);

    // object
    var objempty = {};
    var myObj = {
        key1: "value1",
        key2: "value2",
        key3: "value3"
    };

    console.log(objempty);
    console.log(myObj);
    console.log(myObj.key1);
   
</script>

결과

저작자표시 비영리

'웹 프론트엔드 > JavaScript' 카테고리의 다른 글

4. JavaScript Variables 변수 타입  (1) 2019.05.27
3. Javascript alert() , prompt(), comfirm() 사용하기  (0) 2019.05.27
2. JavaSciprt DOM API를 사용해보기  (0) 2019.05.27
1. Javascript console.log  (0) 2019.05.25

 

1. 문자 타입 

문자 타입은 " " 따옴표로 묶어줍니다.

 var stringType = "문자타입 입니다.";
 console.log(stringType);
 var myString = "문자 더하기"+ "문자";
 console.log(myString);

 

2. 숫자타입

 

Integer >   32-bit number ( -2,147,483,648 ~ 2,147,483,647)

Long >  64-bit number (-9,223,372,036,854,775,808  ~ 9,223,372,036,854,775,807)

Float >   3.4E+/-38(7개의 자릿수)

Double >  1.7E+/-308(15개의 자릿수)

var numberType = 5;
console.log(numberType * numberType);

var integerType = 10;
var longType1 = 9223372036854775808;
var longType2 = 9223372036854775807;
var floatType = 3.5;
var doubleType = 9310141419482.22;

 

3. 기타 

var booleanType = true;
var notAnumberType = NaN;
var undefinedType;
var nullType = null;

 

전체 코드

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <meta http-equiv="X-UA-Compatible" content="ie=edge">
    <title>Document</title>
</head>
<body>
    <h1>
        JavaScript Variables
    </h1>
</body>
</html>
<script>
//문자타입
    var stringType = "문자타입 입니다.";
    console.log(stringType);
    var myString = "문자 더하기"+ "문자";
    console.log(myString);
//숫자타입
    var numberType = 5;
    console.log(numberType * numberType);

    var integerType = 10;
    var longType1 = 9223372036854775808;
    var longType2 = 9223372036854775807;
    var floatType = 3.5;
    var doubleType = 9310141419482.22;
    var booleanType = true;
    var notAnumberType = NaN;
    var undefinedType;
    var nullType = null;


    console.log(integerType);
    console.log(longType1);
    console.log(longType2);
    console.log(floatType);
    console.log(doubleType);
    console.log(booleanType);
    console.log(notAnumberType);
    console.log(definedType);
    console.log(nullType);

    


</script>

 

결과

 

저작자표시 비영리

'웹 프론트엔드 > JavaScript' 카테고리의 다른 글

5. JavaScript Arrays , Objects  (0) 2019.05.28
3. Javascript alert() , prompt(), comfirm() 사용하기  (0) 2019.05.27
2. JavaSciprt DOM API를 사용해보기  (0) 2019.05.27
1. Javascript console.log  (0) 2019.05.25

1. alert() 사용하기

 

window.alert("alert 메시지~!!!");
alert("window. 을 빼고 함수를 호출해도 동일합니다.");

2. prompt() 사용하기

 

prompt("text", [default])

여기서 text는 메시지

[default]는 inputtype 이 text 이다.

var age = prompt("당신의 나이는 ??");
console.log("나의 나이는 :"+ age + "입니다.");

 

3.  confirm() 사용하기

보통 data를 삭제 또는 수정할 때 사용한다. 

 

var message = "정말로 삭제하시겠습니까??";
    result = window.confirm(message);
    console.log(result);
    if(result){
        console.log("삭제 되였습니다.");
    }else{
        console.log("취소 되었습니다.");
    }

경고 창에 예를 눌렀을 경우 true를 리턴한다.

 

아니오를 눌렀을 경우 false 를 리턴한다.

 

전체 소스

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <meta http-equiv="X-UA-Compatible" content="ie=edge">
    <title>alert 사용하기</title>
</head>
<body>
    <pre>
        1. alert() 사용하기
        2. prompt() 사용하기
        3. .confirm() 사용하기
    </pre>
</body>
</html>
<script>
    //1. alert() 사용하기
    window.alert("alert 메시지~!!!");
    alert("window. 을 빼고 함수를 호출해도 동일합니다.");

    //2. prompt() 사용하기
    var age = prompt("당신의 나이는 ??");
    console.log("나의 나이는 :"+ age + "입니다.");

    var message = "정말로 삭제하시겠습니까??";
    result = window.confirm(message);
    console.log(result);
    if(result){
        console.log("삭제 되였습니다.");
    }else{
        console.log("취소 되었습니다.");
    }
</script>
저작자표시 비영리

'웹 프론트엔드 > JavaScript' 카테고리의 다른 글

5. JavaScript Arrays , Objects  (0) 2019.05.28
4. JavaScript Variables 변수 타입  (1) 2019.05.27
2. JavaSciprt DOM API를 사용해보기  (0) 2019.05.27
1. Javascript console.log  (0) 2019.05.25

 

1. html tag에 text 변경하기

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <meta http-equiv="X-UA-Compatible" content="ie=edge">
    <title>JavaSciprt DOM API를 사용해보기</title>
</head>
<body>
<p id="dom"></p>    
</body>
</html>
<Script>
    document.getElementById('dom').textContent = " DOM는 Document Object Model 의 약자입니다.";
</Script>

 

2. Body 속성 안에 h1 tag를 추가하여 보자

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <meta http-equiv="X-UA-Compatible" content="ie=edge">
    <title>JavaSciprt DOM API를 사용해보기</title>
</head>
<body>
<p id="dom"></p>    
</body>
</html>
<Script>
    document.getElementById('dom').textContent = " DOM는 Document Object Model 의 약자입니다.";
    
    var element = document.createElement('h1');
    element.textContent = 'h1 element를 추가합니다. 어디에? body 안에';
    document.body.appendChild(element);
    
</Script>

저작자표시 비영리

'웹 프론트엔드 > JavaScript' 카테고리의 다른 글

5. JavaScript Arrays , Objects  (0) 2019.05.28
4. JavaScript Variables 변수 타입  (1) 2019.05.27
3. Javascript alert() , prompt(), comfirm() 사용하기  (0) 2019.05.27
1. Javascript console.log  (0) 2019.05.25

 

크롬의 개발자 도구를 활용하여 JavaScript console.log() 사용법을 배워보겠습니다.

 

1. 기본

console.log("Hello World");

 

2. 변수를 활용하여 로그를 확인하기

//Logging variables

var hello = "안녕하세요";
console.log(hello);
var name = '왕초보';
var age = '15';
console.log("이름:", name, "나이:", age);

3. Placeholders 사용하기

//Placeholders

var greet = "안녕하세요~", who = "여러분~~" ;
console.log("%s, %s", greet, who);

4. Object 로깅

//Logging Objects

console.log({
    'Email':'aaaa@email.com',
    'Groups':{},
    'IsBoolean' :false,
    'IsNum':1
});

 

5. HTML elements 로깅

console.log(document.body);

저작자표시 비영리

'웹 프론트엔드 > JavaScript' 카테고리의 다른 글

5. JavaScript Arrays , Objects  (0) 2019.05.28
4. JavaScript Variables 변수 타입  (1) 2019.05.27
3. Javascript alert() , prompt(), comfirm() 사용하기  (0) 2019.05.27
2. JavaSciprt DOM API를 사용해보기  (0) 2019.05.27

+ Recent posts

티스토리툴바