본문 바로가기

JavaScript

[javascript] 웹UI를 만들어보며 공부하는 자바스크립트 문법 🌈 자바스크립트는 HTML 조작을 위해 사용 자바스크립트는 "html 조작과 변경" 을 담당하는 언어이다. 왜 조작을 하냐? - 탭, 모달 등 웹페이지 UI 만들 수 있음 - 유저가 입력한 데이터를 검사할 수 있음 - 유저가 버튼 누르면 서버로 데이터 요청 할 수 있음 📕 html 조작, 변경하려면 안녕하세요 자바스크립트 코드를 짜고 싶으면 알림창열기() 라고 쓸 때마다 function 안에 있는 긴 코드가 실행된다 ✅ 함수 이름 작성 시 - open_alert() 이런거 쓰면 안됨 - openAlert() 이렇게 붙여서 쓰는게 자바스크립트 관습 (일명 camelCase) 🌈 function의 파라미터 문법 function 알림창열기(파라미터){ document.getElementById('alert'.. 더보기
[javascript]03_데이터타입 let vs var, hoisting 1. Variable (변수) - 변경될 수 있는 값 - 자바스크립트에서 변수를 만들 때는 let 이라는 키워드 사용 (ES6 에 추가되어진 단어) - 자바스크립트에서 변수를 선언할 수 있는 키워드는 딱 하나 = let ( 그 전에는 var 씀 ) * var hoisting : hoisiting은 어디에 사용했냐에 상관없이 항상 제일 위로 선언을 끌어올려 주는 것을 말한다. - 또한 var은 block scope을 철저히 무시한다. 먼저 html에 variable.js 를 연결 콘솔창에 나옴 글로벌한 변수들은 어플리케이션이 실행되는 순간부터 끝날 때까지 항상 메모리에 탑재되어 있기 때문에 최소한으로 쓰는 것이 좋다. 가능하면 클래스나 함수 if 나 for로 필요한 부분에서만 정의해서 쓰는 것이 좋다. 2.. 더보기
[javascript]02_ script async 와 defer의 차이점 1. script 를 head 에 포함 브라우저는 한줄 한줄 씩 읽는다. 1. html을 쭈욱 parsing 하다가 script 태그가 보이면 main.js 를 다운받아야 하네? 라고 이해한다. 2. html을 parsing하는 것을 잠시 멈추고 필요한 자바스크립트 파일을 서버에서 다운 받아서 이것을 실행한 다음에 다시 html 을 parsing 하는 부분으로 넘어가게 된다 하지만 여기서 단점이 존재한다 ! => 만약 js 파일의 사이즈가 어마어마하게 크고 인터넷도 느리다면 사용자가 웹사이트를 보는 데까지 많은 시간이 소요된다 2. 해결? body 안의 젤 끝부분에 script 넣는다 1. html 을 다운받아서 쭈욱 parsing한 다음에 페이지가 준비가 된다면 2. 그 다음에 이 스크립트를 만나서 스.. 더보기
[javascript]01 자바스크립트 실행하기 ※ 자바스크립트를 실행할 때 (방법 2가지) 1. node.js 를 이용해서 자바스크립트 실행 2. 웹 APIs 이용 (html과 main.js를 연결해서 브라우저 상에서 실행) ◈ 1번 실습 - node.js 에는( 자바스크립트 엔진이 있어서 브라우저 없이도 자바스크립트를 실행 할 수 있다 ) 1. 실습 파일 만들어준다 경로 : C:\Users\Samsung\OneDrive\바탕 화면\javascript 2. 메모장에 명령어 작성 간단한 텍스트 에딕터 툴 열어서 console.log('helloword') 출력해보기 앞서 만든 경로에 저장해준다. 저장이름 : main.js 3. 콘솔창에 실행 만약 PC 에 node.js 가 설치되어 있다면 방금 작성한 경로에 들어서 node main.js 명령어 실행하.. 더보기

반응형