이진욱의코딩

[js] 자바스크립트의 기본을 알아봅시다. 본문

JS

[js] 자바스크립트의 기본을 알아봅시다.

Crucifi 2019. 11. 13. 02:12

이번 시간부터 한 달 동안은 자바스크립트에 대해 공부한 내용을 포스팅하도록 하겠습니다.

 

웹페이지를 구축함에 있어 각각의 역할이 있다. HTML은 문서의 구조와 내용을 구축하고, CSS는 문서를 스타일시트를 조작해 꾸미게 된다. 현재는 웹페이지가 단순히 문서를 읽는 것을 벗어나 액션이나 동적인 느낌을 표현하는 경우가 대부분이다. 이때 동적인 부분을 담당하는 역할을 자바스크립트(JS)가 맡고 있다.

 

우선 자바스크립트의 핵심 개념과 특징에 대해서 말씀드리겠습니다.

 

javascript

 

§. 자바스크립트의 핵심 개념

 

1. 객체

기본 데이터 타입 boolean, number, string, null, undefined를 제외한 나머지는 객체이다.

 

2. 함수

일반적인 객체보다 더 많은 기능이 있는 객체.

 

3. 프로토타입

모든 객체는 숨겨진 링크인 프로토타입을 가진다. 이 링크는 해당 객체를 생성한 생성자의 프로토타입 객체를 가리킨다.

 

 

§. 자바스크립트의 특징

 

1. 스크립트 언어이다.

2. 프로그래밍 언어이다.

3. 동적 바인딩, 동적 언어이다.

4. 표준이 있지만 브라우저 마다 지원하는 범위가 다른 언어이다.

 

 

 

§. 자바스크립트의 활용범위

 

현재 브라우저 기반의 자바스크립트 뿐만아니라 node.js와 같은 서버 기반의 자바스크립트 환경에서도 구현 가능한 많은

라이브러리가 나오고 있다. 이븐 자바스크립트만으로 웹 서버와 함께 클라이언트 웹페이지를 동시에 구현할수 있는 수준까지 올랐다고 볼 수 있다.

 

1. 웹 개발

2. 서버 개발

3. 애플리케이션 개발

 

 

이제 사용법과 간단한 예시를 들어드리겠습니다.

 

<!DOCTYPE html>
<html lang="ko">
<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>자바스크립트 적용방법</title>
</head>
<body>
    <script>
    alert("hello, javascript!");
    </script>
</body>
</html>

 

이렇게 body부분에 script를 입력하고 그 사이에 js문법을 적으시면 됩니다.

 

<!DOCTYPE html>
<html lang="ko">
<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>콘솔창 활용하기</title>
    <script>
            document.write("문서에 작성하기")
            document.write("<h1>제목추가</h1>")
            console.log("값 확인하기")
    </script>
</head>
<body>
     <!-- <script>
        document.write("문서에 작성하기")
        document.write("<h1>제목추가</h1>")
        console.log("값 확인하기")
     </script> -->
</body>
</html>

 

document.write("문서에 작성하기")

이렇게 적으시면 ""사이에 입력한 텍스트가 나타납니다.

 

 

console.log("값 확인하기")

이렇게 적으시면 ""사이에 있는 텍스트가 콘솔에 출력이 됩니다.

 

 

document.write와 console.log의 차이점입니다.

 

js는 대소문자를 구분합니다.

var day = 20; 이거와 var Day = 20;은 서로 다른 변수 선언이기 때문에 다른 결과를 불러옵니다.

 

여러 가지 예시도 적어드리겠습니다.

 

<!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>문자열 변수</title>
    <script>
        var str1 = "이종호";
        var str2 = "황세연";
        console.log(str1, str2);
        console.log(str1 + str2);
        var str3 = str1 + str2;
        console.log(str3);

        var num = 1000;
        var str = "1000";
        console.log(num, str);
        var total = num + str;
        console.log(total);

        var a=b=c=10;
        console.log(a, b, c);
    </script>
</head>
<body>
    
</body>
</html>

 

이런식으로 출력됩니다.

 

console.log(typeof());라고 적을 시 () 안의 텍스트를 int형인지 string형인지를 구분할 수 있습니다.

 

 

var height_int = parseInt(height);
var height_float = parseFloat(height);
console.log(typeof(height_int) ,typeof( height_float));

 

height_int는 소수점을 무시하고 정수만 출력이 되고, height_float은 소수점까지 모두 출력이 됩니다.

 

여기까지가 오늘 제가 공부한 내용입니다. 감사합니다!!

'JS' 카테고리의 다른 글

[JS] 함수(function)와 배열(array)에 대해 알아봅시다.  (0) 2019.11.18
[JS] 자바스크립트의 여러가지 연산자, 함수의 정의에 대해 알아봅시다.  (2) 2019.11.15
(Node.js) 동기와 비동기 그리고 콜백_callback에 대해서 알아봅시다.  (0) 2019.10.30
node.js설치방법과 node.js를 이용해서 웹서버만들기  (1) 2019.09.27
ajax를 이용한 초기페이지 구현  (0) 2019.09.26
'JS' Related Articles more