쫑가 과정

JavaScript? 본문

JavaScript/공부

JavaScript?

쫑가 2021. 7. 3. 13:19

JavaScript란?

https://developer.mozilla.org/ko/docs/Learn/JavaScript/First_steps/What_is_JavaScript

 

JavaScript가 뭔가요? - Web 개발 학습하기 | MDN

MDN의 JavaScript 초급자 과정에 오신 걸 환영합니다! 이 글은 JavaScript를 넓게 보면서 "뭔가요?", "뭘 하나요?"와 같은 질문을 답변하고, 여러분이 JavaScript에 친숙해지도록 도와드립니다.

developer.mozilla.org

 

자바스크립트는 복잡한 무언가(주기적으로 내용이 갱신되는 기능이나 능동적인 지도, 변화하는 2D/3D 그래픽, 동영상 등)를 웹페이지에 적용할 수 있게 하는 스크립트 혹은 프로그래밍 언어입니다.

자바스크립트는 표준 웹 기술이라는 레이어 케이크에서 세 번째 층이라고 볼 수 있습니다

  • HTML은 제공할 웹 컨텐츠의 구조와 의미를 문단, 제목, 표, 삽입 이미지, 동영상 등으로 정의하고 부여하는 마크업 언어. (뼈대)
  • CSS는 배경색, 폰트 등의 레이아웃 등을 지정하여 HTML 컨텐츠를 꾸며주는 스타일 규칙 언어입니다. (근육)
  • JavaScript는 동적으로 컨텐츠를 바꾸고, 멀티미디어를 다루고, 움직이는 이미지 그리고 꽤나 많은 일들을 할 수 있는 스크립트 언어. (뇌)

웹에서 웹사이트를 만들고 싶을 때, 그 웹사이트를 interactive(상호작용)하게 만들고 싶을 때 쓸 수 있는 것.

 

@ JavaScript 와 Java는 다르다. 자세히 보기

왜 JavaScript를 사용하는가?

1.  JavaScript는 Frontend에서 쓸 수 있는 유일한 언어.

하나뿐이라 분열이 없고 빠르게 발전하고 있다.

웹이 성장하면서 할 수 있는 것들이 더 많이 만들어짐 그래서 영향력 강해짐

 

모두가 쓰기 때문에 다 통한다.

좋지 않은 부분들이 있어서 싫어하는 사람들도 있다.

 

2. 제대로 배워 전문가가 되면 짱짱한 미래

매우 멋진 사이트 , 웹앱 , Native 모바일 어플, 비디오 게임, 데스크톱 앱 등에 쓰인다.

실시간으로 하는 것 실시간 채팅 등, 3D로 하는 것, 사물 인식, 동작인식 등도 가능. 인공지능 앱 

할게 너무 많다.

이제는 자바스크립트로 백엔드까지 만들 수 있다. 프론트엔드와 백엔드 가능

 

3.  모든 브라우저에 내장되어있다. HTML, CSS, JAVAScript

따로 설치할 필요가 없다.

그 외 더 많겠지만 이해한 정도는 이 정도이다.

JavaScript의 탄생

넷스케이프 때문에 만듦. 이 사이트를 좀 더 동적으로 만들고 싶어서 직접 프로그램 언어를 만듦.

이 사이트는 HTML과 CSS로만 되어 있었다.

프레임워크

만약 JavaScript기술을 좀 더 가다듬어서 더 깊게 배우고 싶다면 프레임워크 넘어가라

쉽게 말해 하려는 일을 도와주는 도우미 역할

1. React Native - JavaScript만으로 안드로이드랑 IOS app을 만들 수 있게 해 준다.

2. Electron  - JavaScript, HTML, CSS로 Desktop app을 만들 수 있게 해 준다.

공부하기 위한 환경

1. 데스크탑 앱을 설치할 수 있다면 Visual Studio Code를 설치해서 사용해라

 1.2. 아이패드나 설치권한이 없는 컴퓨터라면! Replit

브라우저에서 무엇이든 코딩 가능하게 해 줌.

현존하는 거의 대부분의 언어들로 프로그래밍할 수 있다.

로그인 - 오른쪽 위 + 누르기 - 원하는 언어 선택 

 

2. Chromium기반 브라우저 사용

크롬을 기반으로 한 브라우저.

구글 크롬에서는 확장 프로그램을 설치해서 사용해야 하는데 Chromium기반 브라우저는 일부 확장 프로그램을 기본으로 내장해서 나왔다. 만약 사용자에게 필요한 크롬 확장 기능이 꽤 많은데 어떤 Chromium 기반 브라우저가 그중 몇 가지는 브라우저 내장 기능으로 기본으로 갖추고 있다면 그 브라우저를 쓰고 더 필요한 몇 가지만 크롬 웹스토어에서 추가해서 쓰는 것이 구글 크롬에 필요한 확장 기능을 모조리 설치하는 것보다 속도, 보안, 안정성 면에서 훨씬 낫다.

Brave, 네이버 웨일, 삼성 인터넷 등 이걸 사용한다는 건 최신 기능을 사용하고 있다는 거다. 

JavaScript 실행

검사(f12) -> console에서 간단한 실행 또는 확인(오류)한다.

console은 한 줄만 작성 가능해서 긴 코드를 실행할 용도로 만들어진 것이 아니다.

 

2줄 이상 코드를 사용하기 위해서는 JavaScript파일(.js file)을 만들어야 한다.

js file은 혼자서 작동하지 못한다.

HTML을 열고, HTML에서 CSS와 JavaScript를 가져와야 한다.

Html파일과 CSS파일도 만들자.

HTML과 CSS는 head 태그 안에서 link 태그로 연결

JS는 body 태그 끝에서 Script 태그로 실행

<!--외부의 CSS 파일과 연결 -->
<head>
	<link rel="stylesheet" href="style.css">
</head>


<!-- src에 연결된 JavaScript 타입 파일을 실행 -->
<body>
	<script src="app.js"></script>
</body>

@왜 CSS는 link, JS는 Script를 사용하는가?  <1> / <2>

브라우저에서 JavaScript 확인

확인할 겸 간단하게 코드를 써보자.

html

<!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">
    <link rel="stylesheet" href="style.css">
    <title>tuto</title>
</head>

<body>
    <script src="app.js"></script>
</body>

</html>

css

body {
    background-color: antiquewhite;
}

js

dasffsd

HTML은 Elements / CSS는 Elements > Styles / JavaScript는 Console

모든 프로그램 언어의 기본

모든 프로그램 언어에서 사용되는 기본 정의되어 있는 데이터 타입 

1(integer), 1.5(float), string "", '', + , [] , (), {}, True 등

 

기본으로 정의되어 있지 않으면 컴퓨터가 이해하지 못해 사용하지 못한다.

정의되어 있지 않으면 임의로 정의해서 사용 가능하다.

저작자표시 비영리 변경금지

'JavaScript > 공부' 카테고리의 다른 글

input 입력값 받기.(input.value)  (0) 2021.07.24
className, DOMTokenList(classList)  (0) 2021.07.21
Event(.addEventListener(), event Handler property)  (0) 2021.07.17
html과 JavaScript 연결하기, 선택자  (0) 2021.07.16
conditional(if,elseif,else)/ 연산자(논리,비교)  (0) 2021.07.14
볼 때마다 헷갈리는 return  (0) 2021.07.12
데이터 정리(array, object, function)  (0) 2021.07.09
Variable  (0) 2021.07.03
'JavaScript/공부' Related Articles more
Comments