자바스크립트란?

이미지 슬라이드 효과, 팝업 효과 등의 기능을 포함한 동적인 웹사이트 제작시 사용하는 프로그래밍 언어

HTML : 웹사이트의 구조 잡아줌
CSS : 웹사이트를 꾸며줌
JavaScript : 동적인 웹사이트. 화면이 변화된다거나 사용자와 interact할 수 있도록 함

활용 범위

자바 스크립트를 활용하여 만들 수 있는 것들은 다음과 같은 것들이 있다.

IoT
하이브리드 앱 : Web + Mobile
서버 개발

자바스크립트의 변수

변수 선언 및 초기화

var color           // 변수 선언
color = "green"     // 변수 초기화

var color = "blue";     // 변수 선언 및 초기화

여기서 color은 변수 명, green이나 blue는 데이터이다. 위의 방법은 두 단계로 진행하는 과정, 아래 방법은 한 단계만에 선언 및 초기화를 하는 과정이다.

변수 선언 : 데이터를 담을 공간을 생성 하는 것
변수 초기화 : 생성된 변수에 데이터를 전달하는 것

데이터 변경

var animal = "monkey";

animal = "elephant";

변수 animal의 데이터를 monkey에서 elephant로 변경. 변수는 이미 선언되었으므로 var을 다시 작성해줄 필요는 없다.

데이터를 콘솔에서 확인하기

console.log();

var animal = "monkey"

console.log(animal);    // monkey 출력

JavaScript 프로그래밍의 디버깅 방법은 다양하지만, 압도적으로 이용 빈도가 많은 것이 console.log이다. JavaScript console.log 인수로 설정한 값을 디버거 콘솔에 표시하는 함수이다. 사용법이 매우 간단해 JavaScript 프로그래밍에서는 기본 중의 기본인 디버깅 방법이라고 볼 수 있다.

📌 콘솔(console)이란?
실시간으로 자바스크립트를 실행하고, 에러 메시지등을 출력해주는 기능

변수 데이터 웹 화면에 출력

document.write();

var num
num = 1;

document.write(num);

✅ document.writeIn();을 사용하면 출력값 사이에 공백을 넣을 수 있다.

var fruit
fruit = "apple";

var box
box = "banana"

document.write(fruit);
document.write(box);        // 출력결과 : applebanana

document.writeIn(fruit); 
document.writeIn(box);      // 출력결과 : apple banana

📢 변수 생성 시 주의 사항

✅ 변수명은 숫자로 시작할 수 없음

var 1str;     // Error

✅ 변수명은 최대한 자세하게 작성

var randomNumber;

✅ 의미가 불명확한 단어들의 조합은 피해야 함

var tmax   // 보단 timemax 등

JavaScript 사용 방법

JavaScript를 웹사이트에서 여는 법

JavaScript와 html 파일을 연결하는 링크과정

<body>
	<script src='index.js'></script>
<body>

웹사이트에서 변수 데이터 확인 방법

웹페이지를 우클릭 후 크롬 개발자 검사 or F12

→ 아래쪽의 console tap을 클릭

→ 그림의 왼쪽과 같이 출력했던 데이터들이 화면에 표시가 됨

📒 참고 웹사이트

https://codingcoding.tistory.com/1265

저작자표시