JavaScript

1. javascript + dom quick start 학습가이드

다른 프로그래밍 언어를 이미 아는 사람을 기준으로 설명함.
백하다가 프론트를 알고 싶다. 자바 스크립트 부분이 빠르게 지나갈 것임.
html작성능력 잇어야함. 브라우저에서 html이 보여짐 그대로 보여주고 끝인가? 아니다.
이것을프로그래밍식으로 바꿀수 잇다. load하면 객체화하는 작업이 이루어지고 자바스크립트로 이 객체를 손댈수가 잇다.
값이 입력되면 값이 변화가된다.
자바스크립트가 건들 수 있는 객체들이 다큐먼트 객체이다. 변수를 어떻게 선언하고 어떻게 활용할수잇는지만 알려줄 것이다.
기존 다른언어와 비교해서 말할것임.표출할 수 있는 사용자 입출력 도구 문서객체로 사용할 것임. 윈도우를 움직이거나 크기를 줄이는 것을 자바스크립트-window객체이다.
url을 스크립트로 조작할 수 있다.

2. 자바스크립트의 탄생과 플랫폼

이녀석이 어떻게 탄생햇는지 플랫폼이 무엇인지?
Netscape라는 웹브라우저가 잇엇다. 마소가 브라우저를 무료로 제공하면서 소송을 함. 그래서 없어짐.
웹서버가 잇음. 입력하면 값들이 post되서 처리함. 아무것도 안넣거나 틀린거를 넣으면? 전송은 됨. 값이 유효하지 않더라도.
장난삼아 10번클릭 서버쪽에서 프로세스가 10개 -> 서버자원이 낭비됨. 페이지 만드는쪽에서 유효한 문자가 있는지 확인하고 유효범위 밖이면 전송 못하도록 해버림.
폼객체의 유효성검사를 하게 됨. 이것을 검사할 언어가 필요하게 되었는데 이것이 바로 javascript이다. 처음에는 다른 이름이엇는데 이름을 바꿧다.
그런데 엄밀히따지며 java와 전혀 관련이 없다.


서버에 가기전에 처리해서 서버를 아낄 수 있다. 첫번째 메모리상에 올라간 객체는 문서객체가 아닌 폼만 객체화가 되엇다. 얼마 안지나면서 body안에잇는 것들이 거의다 객체화 되면서 문서객체라고 하게 되엇다.
이때 유행한게 dhtml 다이나믹한 html이 유행한 적이 있다. 첫번째 탄생은 유효성 검사를 위해 사용햇다. 처음에는 인기가 없엇다. 하지만 요즘에는 어마어마한 기능이 많이 생겻다. node.js등으로 넓어졋다.

3. 실습도구

vscode사용한다.

4. 코드 작성과 Live Server 설치하기

스크립트는 어디에 작성하나?
코드가 실행할 수있는 영역이 있다. <script>스크립트코드</script> 이게 들어가면 이 코드가 실행된다. 이걸 어디에 넣어야하나? 어디에 넣든 상관없다.하나의 코드영역으로 인식하게된다.

<body>
    <script>
        alert("hello javascript!!");
    </script>
</body>

5.데이터 객체와 래퍼(Wrapper) 클래스

자바스크립트의 언어 범주를 대충 알아보고 플랫폼들을 알아보고자 한다.
데이터가 다른 언어와 조금 차이가 있다.
일반적인 언어의 값의 종류와 변수
정수 실수 문자 문자열
var x = 3; 자료형식이 없다. x라는 변수에 담겠다. 라고 한다. 한정사로 공간을 지정한다.
실수도 var x =3.7;이라고 한다. 겉으로 보기에는 매우 편해보인다.
어떻게 이게 가능하지? var x; 이건 크기를 얼마나 먹나?
보통 int x = 3; 이렇게 담는다.
자바스크립트는 참조변수이다. 공간을 마련하지 않는다. 담겨지는게아니라 공간을 스스로 가진다.
auto boxing이라고 한다. x는 포인터가 아니라 참조이다. 참조변수이다. 물리적으로는 담는걸 가지는데 개념적으로는 아님.
객체지향 자바스크립트에서는 객체가 아니라 객체의 이름을 부여하는 것임.
java에서 클래스를 만들때 참조변수로 주소를 제공하는 것과 비슷하다고 보면될듯
기본형식이 없고 Wrapper형 클래스이다.
부울 정수 실수 문자 문자열
Booelan Number String이다.
var x = 3; 은 var x = new Number(3);이 되는 것임. 자바스크립트가 자동으로 기능을 넣어줌.
var x; 면? 어떻게 포장하나
undefined라고 뜬다. 다른 언어에선 null pointer인데 자스에서는 이렇게 말한다.
아무것도 참조하지 않은 변수를 확인할때는?
var x;
alert(x == "undefined") 하면 문자열이 아니니 false다.
비교하려면 alert(x == undefined) 로 해줘야한다.
x가 어떤것을 참조할지 모르고 참조가 바뀔수도 잇다.
이 변수를 사용하는 메소드가 변수가 참조하는 것에 따라 사용법이 바뀌게 되는 것이다.

2023.01.31 후기

css의 flex를 배우고 자바스크립트의 초입까지 시작하였다. 둘다 연구하면 더 많은 내용이 있지만 백엔드의 기준에서 필요한 만큼만 배운다는것이 아쉽긴하다. 이후 취업을 하거나 시간이 나면 자바스크립트, node등을 배워보고 싶다.
자바스크립트의 변수부분이 오히려 자바를 하고 나서 배우니까 헷갈릴 수도 있을 것 같다. 조심하면서 공부해야할 듯 하다.

'기초단계 > JavaScript' 카테고리의 다른 글

2023.02.06 JavaScript  (0) 2023.02.06
2023.02.04 JavaScript  (0) 2023.02.04
2023.02.03 JavaScript  (1) 2023.02.03
2023.02.02 JavaScript  (0) 2023.02.02
2022.12.28 JavaScript 기본  (2) 2022.12.28

+ Recent posts

티스토리툴바