본문 바로가기

JavaScript

 (94)
자바스크립트 문법 뽀개기2 자바스크립트 문법 뽀개기2 Chrome Visual Studio Code Node.js 반복문 📌 while while(조건) { 조건이 만족할 때 실행할 코드 } 변수의 값을 계속 변화를 줘서 언젠가는 반복문이 끝날 수 있도록 해줘야 합니다. false를 리턴하고 바디의 코드가 실행되지 않아야 종료할 수 있습니다. 무한루프레 빠져 프로그램이 끝나지 않는 불상사가 발생할 수 있으니 주의해주세요! 만약, 무한 루프에 빠지면 터미널에서 ctrl+c를 눌러 프로그램 중단시켜줘야 합니다. let temperature = 20 while (temperature < 25) { console.log(`${temperature}도 정도면 적당한 온도입니다.`) temperature++ } 📌 for 좀 더 명시적으로 ..
자바스크립트 문법 뽀개기1 자바스크립트 문법 뽀개기1 Chrome Visual Studio Code Node.js 📌 프로그래밍이란? 프로그램 : 입력 → 처리 → 출력 프로그램이 정해진 방식에 따라 일할 수 있도록 작성해놓은게 프로그래밍! 📌 Node.js란? 자바스크립트 언어의 문법에 맞게 코딩했을 때 이를 해석하는 일종의 전용 번역기 웹브라우저가 아닌 곳에서도 자바스크립트 코드를 실행하고 그 결과물을 확인할 수 있다. Visual Studio Code 폰트 사이즈 조정 [설정] 검색 창에 'zoom' 검색 [Editor: Mouse Wheel Zoom] 설정 체크 박스 체크! [Ctrl] + [마우스 wheel]로 폰트 조절 할 수 있음. Hello World 웹브라우저 없이 node.js로 실행 // 주석처리 console..
자바스크립트 리액트 라이브러리 맛보기 자바스크립트 라이브러리 맛보기 📌 일반적인 공부루틴 자바스크립트 기본 프론트엔드 라이브러리 이것저것 Node.js기본 백앤드 라이브러리 이것저것 npm을 활용한 전역 모듈 📌 리액트 라이브러리(react library) 규모가 큰 자바스크립트 라이브러리로, 사용자 인터페이스(UI)를 쉽게 구성할 수 있도록 도와줍니다. 리액트 네이티브를 활용해서 스마트폰에서도 빠른 속도로 작동하는 애플리케이션을 만들 수 있습니다. 📌 JSX JavaScript Extension 자바스크립트 확장 문법 바벨 프로그램 → 자바스크립트 → 웹 브라우저에서 사용 가능!! 📌 표현식 출력하기 {표현식} 기호를 사용합니다. 📌 컴포넌트의 기본적인 속성과 메소드 React.Component 클래스는 여러 속성과 메소드를 제공해줍니다...
자바스크립트 클래스의 고급 기능 자바스크립트 클래스의 고급 기능 private 속성과 메소드 📌 private 속성 클래스 내부에서만 접근 가능한 속성 사용자가 의도하지 않은 방향으로 사용하는 것을 막아 클래스의 안정성을 확보하기 위해 나온 문법 length속성을 음수로 변경하는 것을 막기 위해 만들어졌습니다. 📌 private 속성 사용하기 이렇게 만든 private 속성은 클래스 외부에서는 접근할 수 없으므로 사용자가 클래스를 잘못 사용라는 문제를 줄일 수 있습니다. 📌 게터(getter)와 세터(setter) 메소드 하지만, 현재 square 객체의 length속성이 몇인지 확인할 수 없고, length 속성을 변경하고 싶어도 변경할 수 없습니다. 그래서 개발자들은 상황에 따라서 속성을 읽고 쓸 수 있는 메소드를 만들어서 제공합니..
자바스크립트 클래스의 기본 기능 자바스크립트 클래스의 기본 기능 📌 객체 지향 C언어를 제외한 모든 프로그래밍 언어는 객체 지향(Object Oriented) 라는 패러다임을 기반으로 만들어진 언어입니다. 객체를 우선적으로 생각해 프로그램을 만든다는 방법론입니다. 객체를 만들고 객체들의 상호작용을 중심으로 개발하는 방법론 📌 클래스 객체틀, 객체를 효율적이고 안전하게 만드는 틀입니다. 📌 객체 속성과 메소드를 갖는 것 📌 코드 패러다임 과거의 패러다임 : 짧고 빠른 코드를 작성하자! 현재의 패러다임 : 쉽게 읽을 수 있는 코드를 작성하자 객체.매개변수 입력하는것을 줄이기 위해 아래와 같은 코드로 구현. 📌 객체 매개변수 예외 처리 📌 추상화(Abstraction) 어떤 대상에서 나에게 필요한 것만 추출해 내는 것 현실 객체는 수많은 속..
자바스크립트 예외 처리 자바스크립트 예외 처리 구문 오류와 예외 📌 오류의 종류 1. 프로그램이 실행조차 되지 않는 오류 구문오류(syntaxError) 2. 프로그램 실행 중간에 발생하는 오류 런타임 오류(runtimeError) 예외(Exception) 📌 구문오류 SyntaxError > console.log('안녕하세요' Uncaught SyntaxError: missing ) after argument list 📌 예외 TypeError ReferenceError RangeError > console.rog('안녕하세요') Uncaught TypeError: console.rog is not a function at :1:9 📌 기본 예외 처리 querySelector() 메소드에서 body에 h1태그가 없으니 예외가..
자바스크립트 localStorage 객체 자바스크립트 localStorage 객체 📌 localStorage 객체 웹 브라우저가 기본적으로 제공하는 객체 document.addEventListener('DOMContentLoaded', ()=> { localStorage.getItem(키) //저장된 값을 추출 localStorage.setItem(키, 값) //값을 저장 localStorage.removeItem(키) //특정 키의 값을 제거 localStorage.clear() //저장된 모든 값을 제거 })
자바스크립트 to do list 만들기 자바스크립트 to do list 만들기 1. 입력란 만들기 📌 html로 구현 할 일 목록 추가 하기 📌 javascript로 구현 2. 해야 할 일 리스트 출력 📌 html로 구현 id 이름 태그를 붙이고 temp_html을 append 해서 구현할 수 있을 것이다. 📌 javascript로 구현 추가하기 버튼을 클릭하면, div 요소가 생기고 div요소 안에 appendChild를 이용해 체크박스, 해야할일, 버튼을 넣어준다. 만약 input 값이 없다면, 해야할 일 리스트에 추가하지 못하도록 다음과 같이 코드를 수정해준다. addButton.addEventListener('click', () => { if(input.value !== ''){ const div = document.createElem..
자바스크립트 이벤트 활용2 자바스크립트 이벤트 활용2 📌 글자 입력 양식 버튼 글자 입력 선택 체크박스 라디오버튼 버튼 버튼1 📌 입력 양식을 기반으로 inch 받아 cm로 변환 inch 계산 글자 입력 📌 이메일 형식 확인하기 선택 📌 드롭다운 목록 활용하기 드롭다운 목록은 기본적으로 select 태그로 구현합니다. 떡볶이 순대 오뎅 튀김 선택: 떡볶이 📌 multiple select태그 multiple 속성을 부여하면 ctrl키 또는 shift키를 누르고 여러 항목을 선택할 수 있다. 떡볶이 순대 오뎅 튀김 📌 cm 단위를 여러 단위로 변환하는 프로그램 cm = 0 mm m inch cm = mm m inch 📌 코드 리뷰 value 속성 : 값을 추출! keydown → keypress → 입력양식에 값이 들어감! → key..
자바스크립트 이벤트 활용1 자바스크립트 이벤트 활용1 입력양식(form)에 관련해 내용을 알기 위해서는 HTML 기본에 대한 공부가 필요합니다. 📌 이벤트 모델(event model) 이벤트를 연결하는 방법 📌 키보드 이벤트 keydown : 키가 눌릴 때 실행. 키보드를 꾹 누르고 있을 때도, 입력될 때도 실행 keypress : 키가 입력되었을 때 실행. keyup : 키보드에서 키가 떨어질 때 실행 keypress는 웹브라우저에 따라 한국어, 중국어, 일본어를 제대로 처리하지 못하는 문제가 있어서 일반적으로 keyup 이벤트를 사용합니다. 📌 글자수 출력하기 textarea.addEventListener('keyup', () => { h1.textContent = `글자 수: ${textarea.value.length}` }..

티스토리툴바