-
Web 프론트엔드 (6) / JavaScript 자바스크립트 기초 문법Programming/Web Programming 2023. 5. 5. 08:31
드디어 기능을 담당하는 자바스크립트를 배워보자!
html나 css와 달리 아예 처음 접해보는 언어라 기대반 설렘반이다 ^ㅡ^
아래 링크에서 강좌는 듣고 있으며, 강의를 듣고 배운 내용을 기반으로 작성하였다.
클래스 101 [유료강좌]
개발자 사관학교 - [웹 개발자 단과바 1교시] HTML, CSS, JS 프론트엔드 속성 실무!
https://class101.net/ko/products/5f53ae772e3e0d001cd99667
[웹 개발자 단과반 1교시] HTML, CSS, JS 프론트엔드 속성 실무! | 개발자 사관학교
📍웹 개발자 단과반이 필요한 이유는 뭘까요? 📍 이런 분들이 개발자 사관학교를 수강하면 크게 도움됩니다! 1) 대체 뭐부터 개발해야할 지 모르겠어요. 원래 처음 개발을 배우면, 뭐부터 시작
class101.net
CHAPTER4 : 만능 언어 자바스크립트, JS
[1. JS 제대로 이해하기 -JS로 할 수 있는 것들]
자바스크립트는 웹사이트에서 움직임을 표현하기 위해 만들어진 언어라고 한다.
하지만 이제는 본래의 역할을 넘어 대부분의 프론트엔드의 기능적 부분과 백엔드까지 만들 수 있다.
실제로 웹사이트에서 어떻게 작동하는지 간단히 살펴보았다.
전 시간에 만들어둔 투두리스트에서 간단하게 자바 스크립트 코드를 작성해보자.
개발자도구를 켜고 Console을 눌러준다.
간단하게 아래의 코드를 작성하고 엔터키를 눌러준다.
alert("띄우고 싶은 메시지");
* 세미콜론(;)은 쓰지 않아도 무관하다.
그러면 상단 팝업창에 작성한 메시지가 나타나는 것을 볼 수 있다.
개발자도구의 Console에서 js 코드를 작성하면 바로 화면에서 변화를 볼 수 있다.
이런 편리함에서 개발자 도구를 사용하기도 하지만 작성한 html코드 내에서도 작성할 수 있다.
(작성했던 코드는 페이지 새로고침을 하면 사라진다.)
저장한 뒤, 새로고침해준다. html 파일 속 <body>태그가 닫히기 바로 전 위에 <script>태그를 적어준다.
(<script>를 태그를 작성하기 좋은 위치가 바로 이곳이라고 한다.)
<script>태그 안에 아래 코드를 입력해주면 콘솔에 작성한 메시지가 뜨는 것을 볼 수 있다.
console.log ("작성하고 싶은 메시지..");
그렇다면 아까 사용했던 alert 함수를 이용해서 투두리스트의 "추가" 버튼을 누를 때, 팝업창을 띄워보자.
button안에 onclick이라는 속성을 추가하고 속성값으로는 clickedButton()을 담아주었다.
onclick = "함수명()"
onclick은 버튼이 클릭되었는지 확인해주는 속성이다. 버튼이 클릭되면 속성값을 실행해준다.
속성값으로는 직접 만든 함수를 실행하도록 하였다.
function clickedButton() {
alert ("버튼이 눌렸다!");
}
function이라는 명령어로 함수를 만들어주고 전과 마찬가지로 팝업창이 나타나도록 하였다.
작성한대로 추가 버튼을 누르면 팝업창이 정상적으로 띄워지는 것을 볼 수 있다.
[2. JS 기본 문법 시간 1 - 변수, 타입, 주석]
JS의 기본 문법을 알아보자.
다른 언어들과 겹치는 내용보다는 특징이 되는 내용만 정리해보았다.
1. 기본연산
let은 변수를 선언하는 명령어이다.
기억으로는 js에서 var을 썼던 것 같아서 차이가 무엇인지 찾아보았다.
var변수 선언 방식이 중복되는 변수 선언에 대해서도 에러가 나지 않아서 코드가 길어지면 쉽게 엉킨다고 한다.
따라서 이후에 let과 const 변수 선언 방식을 지원하게 되었다고 한다.
let 변수는 같은 이름으로 다시 변수를 선언할 경우 에러가 난다. (기존 var변수의 문제 보완)
const도 마찬가지이지만 나중에 변수값을 바꿀 수 있는 let 변수와 달리, const는 한번 변수값을 선언하면 바꿀 수 없다.
실제로 웹사이트의 콘솔창에서 정상적으로 출력되는 것을 볼 수 있다.
더하기 위에도 빼기, 곱하기, 나누기, 나머지 연산도 물론 가능하다.
2. 문자열을 표현하는 방법
문자열은 다음과 같은 세가지 방법으로 표현된다.
' ' 와 " " 그리고 ` ` (백틱) 이다.
각각의 차이점이 궁금해서 추가적으로 검색해보니 작은따옴표 '와 큰따옴표 "는 차이가 없다고 한다.
C언어 기반의 언어들 (C, C#, C++)과 JAVA에서는 스트링 문자열에서는 큰따옴표만을 사용한다.
하지만 작은따옴표 ' 로도 문자열을 담을 수 있다는 것은 특이해보인다.
다만 ` 백틱으로 문자열 표현에는 차이점이 존재한다고 한다.
모든 차이점들은 현재로서는 잘 모르겠지만 강의에 소개된 특별한 기능을 적어본다.
각각 다르게 문자열을 적어보았다.
그리고 백틱을 사용하면 ${ }를 통해 바로 원하는 값을 문자열 사이에 넣을 수 있다.
(`은 Tab키 위에 있다. 맥북에서는 보이지 않는데 영문 자판 상태로 ₩키를 누르면 된다!!)
3. 객체와 배열
다음은 객체와 배열에 대해 알아보자.
대부분의 데이터를 객체와 배열로 주고 받기 때문에 쓰임이 굉장히 중요해 보인다.
(1) 배열
배열은 다음과 같이 선언할 수 있다.
ler arr = [1, 2, 3, 4, '문자', true, false];
신기한 점은 타입이 다른 변수들을 하나의 배열에 선언할 수 있다는 것이다.
다른 언어와 비교했을때, 굉장히 차별화되는 점인 것 같다.
arr.push를 통해 마지막 인덱스로 값을 추가할 수 있다.
console.log(arr) 로 전체 배열을 출력할 수 있고 arr[4]로 4번째 인데스에 해당하는 (0부터 시작) '문자'를 출력할 수 있다.
배열에 사용할 수 있는 함수는 매우 종류가 많다.
아래 공식 문서에서 확인할 수 있으며, 그때 그때 필요한 함수를 가져다 쓰면 좋을 것 같다!
https://developer.mozilla.org/ko/docs/Web/JavaScript/Reference/Global_Objects/Array
Array - JavaScript | MDN
JavaScript Array 클래스는 리스트 형태의 고수준 객체인 배열을 생성할 때 사용하는 전역 객체입니다.
developer.mozilla.org
한국어 번역도 제공해주고 있다. (2) 객체
객체는 다음과 같이 선언할 수 있다.
let obj = { "key":"value" }
또한 전체값 출력은 배열와 마찬가지로 작성하면 되지만
특정값 출력은 console.log (obj.key); 와 같이 . 을 사용해야 한다.
마치 사전처럼 한 쌍으로 값을 할당할 수 있는 것이 특징이다.
(3) 객체와 배열, 함께 사용하기
흥미로운 점은 배열 안에 객체들을 넣거나 객체 안에 배열들을 담는 등
자유롭게 혼합해서 사용할 수 있다는 점이다.
배열 안에 객체들을 요소로 담아보는 실습을 진행했다.
사실 아직 감이 잘 잡히진 않는다.
실제로 다양한 구조를 직접 써보는 경험을 거쳐야 더욱 자세히 이해할 수 있을 것 같다.
js 기초 문법은 다음편에서 계속해서 공부해보려 한다.
기존에 배웠던 언어들과 비슷한 면들이 많으면서도 오히려 더 단순하고
자유도가 높다보니 그 점이 더 어렵기도 하다..
앞으로 자주 마주칠 언어이니 점점 익숙해질 것이라 믿는다!
출처: 클래스101 / [웹 개발자 단과반 1교시] HTML, CSS, JS 프론트엔드 속성 실무! - 개발자 사관학교
'Programming > Web Programming' 카테고리의 다른 글
Web 프론트엔드 (8) / JavaScript와 Jquery 활용 (0) 2023.05.06 Web 프론트엔드 (7) / JavaScript 자바스크립트 기초 문법2 (0) 2023.05.06 Web 프론트엔드 (5) / 부트스트랩 활용하기 (0) 2023.05.05 Web 프론트엔드 (4) / CSS 속성들과 Bootstrap 사용 (2) 2023.05.04 Web 프론트엔드 (3) / HTML과 태그, 실습해보기 (0) 2023.05.03