[JavaScript] 자바스크립트 기본 문법

일단 해보는 코딩/Java Script

[JavaScript] 자바스크립트 기본 문법

eun_zoey2 2022. 6. 28. 16:35

728x90

■ 자바스크립트 기본 문법

변수는 데이터를 저장하는 컴퓨터의 메모리 공간이다. 변수와 변수에 데이터 저장 방법, 그리고 변수나 데이터 값을 브라우저 화면에 출력하는 네 가지 방법이 있다.

** 오류 발생시 F12 키를 누르면 내용을 확인할 수 있다.

■ 자바스크립트 주석문

=> (한줄 // ~ 를 사용하고, 여러 줄 주석은 /* ~*/ 사용한다. )

** HTML 주석문 ( 한줄이나 여러 줄이나  사용한다.) / CSS 주석문 ( 한 줄이나 여러 줄이나 /* ~ */ 사용한다. )

■ 변수

컴퓨터 메모리에는 정수,실수,문자 등 다양한 데이터들이 저장된다. 데이터를 메모리 공간에 저장하기 위해서 자바 스크립트, 파이썬, C등의 프로그래밍 언어에서는 변수라는 개념을 사용한다.

변수는 데이터가 저장되는 메모리 공간이다. a=3 이면 3이라는 값을 a라는 변수에 대입한다는 뜻인데 정확히는 3이라는 데이터 값을 저장하고 있는 메모리 공간을 지칭(별도로 이를 써준다면 C에서는 포인터의 개념으로 접근)한다.

변수 이름은 영어 문자와 언더스코어(_), 숫자를 사용한다.
영어 대소 문자를 구별하며 예약어는 변수이름으로 사용할 수 없다.
여러 단어를 연결한 변수 이름은 중간에 대문자를 섞어 쓴다.

var birthYear;		// 태어난 연도 변수 선언
birthYear = 1995;	// 변수에 값 할당

var birthYear = 1995; 	//올해 연도 변수 선언하고 값 할당하기

■ 출력

자바스크립트를 이용해서 웹 브라우저에 내용을 출력하는 방법

document.write( ) - 함수를 사용해서 ( ) 안의 내용을 출력
window.alert ( ) - 함수를 사용해서 원래는 경고창을 띄우는 함수를 사용해서 ( ) 안의 내용을 출력
console.log( ) - 함수를 사용해서 콘솔에서 log(event에 대한 기록) 함수를 사용해서 ( ) 안의 내용을 출력
innerHtml 을 사용해도 된다.

<!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>
</head>
<body>
    <script>
    var name ="홍길동";
    window.alert(name);
</script>
</body>
</html>

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <title>Document</title>
</head>
<body>
<script>
    console.log(10+20);
    </script>    
</body>
</html>

<!DOCTYPE html>
<html lang="ko">
<head>
    <meta charset="UTF-8">
</head>
<body>
    <h3>innerHTML을 이용해서 HTML요소에 내용 추가하기</h3>
    <P id="a"></P>
<script>
    document.getElementById("a").innerHTML="안녕들 하세요....";
    /* p 요소에 안녕하세요를 추가하는 것 */
</script>
</body>
</html>

■ 입력

자바스크립트에서는 prompt( ) 함수를 이요해서 사용자가 키보드로 입력하는 데이터를 변수에 저장시킨다.

<!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>입력</title>
</head>
<body>
    <script>
        var name = prompt("이름을 입력하세요");
        document.write(name);
    </script>
</body>
</html>

■ 데이터 타입

자바스크립트 변수는 다음처럼 숫자, 문자열, 배열, 불리언(True/False), 객체(***클래스가 존재)등의 데이터 형이 있다.

var age= 20;						// 숫자
var email = "good_guy@naver.com";			// 문자열
var colors = ["red","green","blue"]			// 배열
var ok = true;						// 불리언
var member = {name:"Hong", age:30, address:"Incheon"}	// 객체

숫자(Number) : 자바스크립트 숫자에는 정수(Integer)형과 실수형(Float) 두가지가 있다.
문자열(String) : "_". '_' 로 묶는다. 예를들어 "가 ", ' 나 ' 로 묶는다.
불리언(Boolean) : 자바 스크립트에서 불리언은 데이터형이 true 또는 false 중 하나의 값만 가질 수 있다.
배열(Array) : 하나의 변수_명에 여러 개의 동일한 타입의 데이터형을 저장할 수 있는 데이터 형이다. 배열의 각 요소(Element)를 , 로 구별하고 전체를 [ ] 로 감싼다. 배열의 요소는 (index) 0부터 시작된다.
객체(Object) : 객체는 각 요소가 '키(Key):값(Value)' 로 구성되어 있다. 그리고 요소들은 { } 로 감싼다.

<body>
    <script>
        var x = 7;
        var y = 7;
        var z = 9;
        document.write(x==y);
        document.write("<br>");
        document.write(x==z);    
    </script>
</body>

<body>
<script>
    var colors = ["빨강","노랑","파랑"];
    document.write(colors);
    document.write("<br>");
    document.write(colors[0]);  // 1번째 요소 출력
    document.write("<br>");
    document.write(colors[2]);  // 3번재 요소 출력
</script>    
</body>

<body>
     <script> 
        var scores = {kor : 80, eng:90, math:100};
        total = scores.kor + scores.eng + scores.math;
        avg = total/3;
        document.write("국어, 영어, 수학의 합계는 : " + total);
        document.write("<br>");
        document.write("국어, 영어, 수학의 평균은 : " + avg);     
     </script>
</body>

저작자표시

'일단 해보는 코딩 > Java Script' 카테고리의 다른 글

[Java Script] 반복문 ( WHILE /FOR /이중FOR문/BREAK/CONTINUE ) (0)	2022.06.30
[Java Script] Switch 문 (0)	2022.06.29
[Java Script] 형변환 제어문(조건문 / 반복문) (0)	2022.06.29
[Java Script] 자바스크립트 다양한 연산자 종류 (0)	2022.06.28
[Java Script] 웹 프로그래밍 (0)	2022.06.27

현재글[JavaScript] 자바스크립트 기본 문법

잰니의 성장블로그✈