JS 입문을 해보도록 하자

Kwangmo Yang·2022년 6월 27일
0

Front-end

목록 보기
1/7
post-thumbnail

자바스크립트

JS라고도 불리며 1995년 탄생.
모든 브라우저의 표준 프로그래밍 언어.
넷스케이프 -> ECMA인터내셔널 -> JS 표준화 요청
표준화된 자바스크립트를 ECMAScript 라고 부름
ES5는 거의 완성된 표준안
ES6 이후의 버전업은 작은 기능의 추가들이 대부분

자바스크립트 특징

웹을 구성하는 요소중 하나(HTML, CSS) -> 브라우저에 등장하는
유일한 프로그래밍 언어.

  • 기존 프로그래밍 언어의 영향을 많이 받은편
  • 언어 번역 기반은 인터프리터를 채용
  • 최근 브라우저들은 인터프리터 엔진을 개량하여 처리속도가 컴파일러에 근접하게 빨라짐(일반적으로 컴파일러가 인터프리터 보다 번역이 빠름)

자바스크립트 요약

html 파일 내부에 숨어서 html의 조작과 변경을 담당하는 언어.
-> js를 통해서 html/css를 원하는 대로 조작할수 있음


다음으로는 자바스크립트 결과물 출력에 대해 알아보자

첫번째

window.alert(); = alter();

위 메소드? 출력문? 뭐라고 하는게 맞지? 매번 헷갈린다.
아무튼 두개는 같다. window라는건 자바스크립트 최상위 객체 window객체를 불러오는건데, js 대부분 요소들이 window 객체에 포함되어 있다면, 굳이 window를 안써도 호출이 가능한 부분적인 부분👍

두번째

<h1 id="test">나는 테스트용</h1>
document.getElementById('jsHi').innerHTML = '하위하위'

실제 JS코드에서 출력을 위해 가장 많이 사용되는 방법.
.innerHTML에 대해 검색을 해보니, 보안에 취악하여
추천을 하지 않는다는 글도 보았음.

document.getElemnetById(id)

에 대해 깨달은 내용은 html 작업시 id값을 중복으로 주지 않아야겠다고 깨달음. 지금까지는 학원에서html,CSS 만 활용하여 수업을했다.
그래서 2개의 input타입에 똑같은 id를 주고 CSS에 스타일을 주는
짓을 많이 했는데, 이제는 조심하도록하자😶

중복된 id를 사용하면 차후 JS에서 겟엘리만트바이아이뒤 사용시 오류를 범할 수 있음.

<p id="jsHi">나는 213테스트용</p> //HTML

var name = document.getElementById('jsHi');
document.write(name);

근데 이렇게 출력을 하게 되면 내가 생각한 출력물은

"나는 213테스트용"

이 나와야된다고 생각하는데.

왜 이렇게 나오는것일까? 아시는분 있으면 가르침 주시면 좋겠습니다🙃

세번째

<p id="test">나는 213테스트용</p>
var a = 10;

console.log(document.getElementById('test'));
console.log(a+10);

console.log는 웹 브라우저의 콘솔을 통해 데이터 출력한다.
그래서 웹페이지에 보이는게 아닌 크롬 개발자도구에서 확인이 가능함

아래와 같이.

다음은 JS의 기본 문법을 알아보자

변수는 무엇인가?

: 값을 저장할 컨테이너 같은 공간이라고 생각하자.

변수의 선언은 값의 의미를 명확히 파악할수 있어야 코드 가독성이 좋아지니 항상 네이밍에 신경을 쓰도록 하자.

JS에서 변수를 선언할때는

var, let, const

라는 키워드를 사용한다.

JS에서 명시적 형변환을 하는법은?

 // 1. Number()
        console.log(Number("10")+20);
    // 2. String()
        console.log(typeof String(10));
    // 3. Boolean()
        console.log(Boolean("10"));

위의 코드와 같이 내가 원하는 명시적 형변환이 가능하다.

명시적 형변환 : 개발자가 직접 맘대로 타입을 바꾸는 형식

묵시적 형변환 : JS는 특정한 타입을 기대하는데 그곳에 다른 타입의 리터럴 값이 오면 자동으로 타입을 변환한다.


오늘은 이정도 까지만 알아보자.

profile
국비교육중 22.04.26~

0개의 댓글