안녕하세요!
저는 파이썬과 HTML+CSS 공부를 하고 있었는데요.
최근 자바스크립트 공부를 시작했습니다 =)
그래서 오늘부턴 JavaScript에 대해서도 함께 포스팅을 하려고 합니다!
먼저 자바스크립트란 뭘까요?
자바스크립트는 프론트 엔드, 백 엔드에 모두 쓰이는 언어여서 알아두면 정말 좋다고 합니다.
주로 동적인 사이트를 제작할 때 많이 사용하는데요.
오늘은 JavaScript(=JS)를 사용할 때 가장 기본적으로 알아두고 있어야 하는 것들을 알려드리려고 합니다~
1. 변수
변수란 어떤 값을 지정할 수 있는 것이라고 볼 수 있는데요.
데이터를 담는 그릇이라고 이해하시면 더욱 좋습니다.
자바스크립트는 처음에 변수를 선언하며 시작하는데요.
var color;위 코드는 색상이라는 변수를 선언한다!라는 뜻의 코드입니다.
JS에서는 'var'를 통해 변수를 지정합니다.
변수는 데이터를 담는 그릇이라고 설명드렸죠? 그러면 데이터를 어떻게 담아야 할까요?
직관적으로도 알아볼 수 있도록 다음과 같이 담아주시면 됩니다. =)
var color;
color = "red";코드는 줄이면 줄일수록 간단해지는데요. 변수를 다음과 같이 간단히 선언할 수도 있어요.
var color = "red";이렇게 데이터를 변수에 담는 것을 '변수 초기화'라고 합니다.
흠.. 데이터를 담긴 담았는데.. 잘 들어갔는지 또는 들어가 있는 데이터를 확인하려면 어떻게 할까요?
JS에서는 console.log();를 이용해서 변수에 담겨있는 데이터를 확인한답니다.
var color = "red";
console.log(color);
>>> red참 간단하죠? =)
2. 출력
지금까지 변수의 정의와 데이터를 지정하는 방법에 대해 알아봤습니다.
그렇다면 이 데이터를 사이트에 출력하기 위해선 어떻게 해야 할까요?
바로 document.write();를 이용하면 됩니다.
var color = "red";
document.write(color);
>>> red만약 여러 개의 데이터가 들어있는 변수라면 어떻게 출력될까요?
var color = ["red", "white", "black"];
document.write(color);
>>>redwhiteblack이렇게 출력이 됩니다.
그런데.. 너무 가독성이 떨어져 보이지 않나요? 이럴 땐!
document.writeln(color);
>>>red white blackwrite 뒤에 ln을 붙여주기만 하면 데이터마다 공백이 삽입되어 더욱 보기가 편해집니다~
3. JavaScript 연결
보통 자바스크립트는 HTML과 CSS를 사용하며 함께 자주 사용됩니다.
HTML 문서에 CSS파일을 연결시키기 위해서는
<head>
<link rel="stylesheet" src="index.css"/>
</head>위처럼 링크 태그를 사용하여 연결해주는데요.
JS는 어떻게 연결해야 할까요?
<script src="index.js"></script>위처럼 스크립트 태그를 사용하여 연결해주시면 됩니다 =)
오늘은 첫 시간이기 때문에 아주 간단한 내용을 알려드렸는데요.
도움이 되셨나요~?
다음 시간에는 자바스크립트에서 사용되는 요소들에 대해 알려드리겠습니다!
감사합니다 ~,~
'ETC(예전 글) > 자바스크립트[JavaScript]' 카테고리의 다른 글
| [오류 코드] Declaration or statement expected (0) | 2022.03.30 |
|---|---|
| 자바스크립트[JavaScript] 002. 자바스크립트의 요소 7가지 (0) | 2022.03.10 |