본문 바로가기

Development/Javascript

 (23)
모던 자바스크립트 입문 - Chapter 6: 웹 브라우저에서의 입출력 💻 안녕하세요! 오늘은 자바스크립트의 웹 브라우저에서의 입출력에 대해 알아보겠습니다.📌 목차대화상자콘솔 출력 - console 객체타이머 - setTimeour, setInterval📝 대화상자입력을 하거나 메세지를 확인하기 위해 별도로 여는 창을 말한다window 객체의 메서드 앞에 붙은 window. 부분을 생략하고 호출 할 수 있습니다 (alert, prompt, confirm)메서드설명window.alert경고 대화상자를 표시window.prompt사용자의 문자열 입력을 받는 대화상자를 표시window.confirm[확인] 버튼과 [취소] 버튼이 있는 대화상자를 표시1️⃣ alert (경고 대화상자)alert("안녕하세요!!");결과물 :2️⃣ prompt (입력 대화상자)let name = pr..
모던 자바스크립트 입문 - Chapter 5: 표현식과 연산자 💻 오늘은 자바스크립트 코드의 가장 기본적인 구성 요소인 표현식과 연산자에 대해 알아보겠습니다.📌 목차표현식(Expression)과 문(Statement)의 차이연산자란?산술 연산자할당 연산자관계 연산자논리 연산자typeof 연산자연산자 우선순위마무리 정리🤔 표현식(Expression)과 문(Statement)의 차이표현식: 하나의 값으로 평가될 수 있는 코드5 + 3 // 8"Hello" // "Hello"true // true 문: 하나 이상의 표현식으로 이루어진 코드의 완전한 실행 단위let x = 10; // 변수 선언문if (x > 5) { // 조건문 console.log("x는 5보다 큽니다");} 👉 모든 표현식은 문이 될 수 있지만, 모든 문이 ..
모던 자바스크립트 입문 - Chapter 4: 객체와 배열, 함수의 기초 💻 안녕하세요! 오늘은 자바스크립트의 핵심 개념 중 하나인 객체(Object), 배열(Array), 그리고 **함수(Function)**에 대해 알아보겠습니다. 이 세 가지는 자바스크립트를 다루는 데 있어 필수적인 요소들이니 차근차근 정리해보겠습니다! 🚀📌 목차객체(Object)란 무엇인가?객체 생성과 조작 방법배열(Array)의 기초배열 메서드 활용하기함수(Function)의 기본 개념함수 선언 방법들마무리 정리🏠 객체(Object)란 무엇인가?객체는 키(key)와 값(value)의 쌍으로 구성된 데이터 구조입니다실생활의 사물이나 개념을 코드로 표현할 때 매우 유용해요예를 들어 사람이라는 객체는 이름, 나이, 직업 등의 속성을 가질 수 있습니다// 객체 생성 예시let person = { nam..
모던 자바스크립트 입문 - Chapter 3: 변수와 값 💻 안녕하세요! 오늘은 자바스크립트의 핵심 개념 중 하나인 변수와 값에 대해 알아보겠습니다.📌 목차변수란 무엇인가?변수 선언 방법 (var, let, const)값의 종류와 데이터 타입변수 명명 규칙실습 예제마무리 정리🤔 변수란 무엇인가?변수(Variable)는 데이터를 저장하는 공간입니다.마치 상자에 물건을 담아두는 것처럼, 변수에는 숫자, 문자, 불린값 등 다양한 데이터를 담을 수 있어요.// 변수에 값을 저장하는 예시let userName = "김개발";let age = 25;let isStudent = true;📝 변수 선언 방법1️⃣ var (구식 방법) - 함수 스코프, 재선언 가능var name = "홍길동";var age = 30; 특징:함수 스코프를 가짐호이스팅됨재선언 가능현재는 사용을..
모던 자바스크립트 입문 - Chapter 2: 프로그램 작성법과 실행 💻 Chapter 1에서 JavaScript가 뭔지 알아봤으니, 이제 실제로 어떻게 코드를 작성하고 실행하는지 배워봤어요!📖 오늘 학습한 내용1. JavaScript 코드를 어디에 쓸까?3가지 방법:① HTML 파일 안에 직접 쓰기② 외부 파일로 분리하기③ 브라우저 개발자 도구 콘솔에서 바로 실행F12 누르고 Console 탭에서 바로 테스트 가능!2. 실습해본 것들간단한 HTML 파일 만들어서 테스트: 내 첫 JavaScript 페이지 3. 코드 작성할 때 주의사항세미콜론(;) 붙이는 습관 들이기대소문자 구분 중요함 (Console과 console은 다름!)따옴표 짝 맞춰주기 ("" 또는 '')💡 오늘 새롭게 알게 된 것기존에 공부를 해왔던게 있어서 새롭게 알게 된 부분은 아직까지는 없었어요..
모던 자바스크립트 입문 - Chapter 1: 자바스크립트 개요 📚 안녕하세요! 모던 자바스크립트 입문 책으로 JavaScript 공부를 시작합니다.JavaScript 기초부터 차근차근 정리해보려고 해요.📖 오늘 학습한 내용1. 자바스크립트란?웹 브라우저에서 동작하는 프로그래밍 언어HTML/CSS와 함께 웹 페이지를 동적으로 만들 수 있음서버 사이드(Node.js)에서도 사용 가능2. 자바스크립트의 특징인터프리터 언어 - 컴파일 과정 없이 바로 실행동적 타입 언어 - 변수의 타입을 실행 중에 결정객체 지향 + 함수형 프로그래밍 지원함수가 일급객체이며, 클로저를 정의3. 실습해본 코드// 첫 번째 자바스크립트 코드console.log("Hello, JavaScript!");// 변수 선언해보기let name = "모던JS공부";console.log("안녕하세요, " +..
[JS]JS는 왜 필요한가? HTML/CSS만으로 안 되는 것들 🌟 JS는 왜 필요한가?─ HTML/CSS만으로는 할 수 없는 것들웹 퍼블리셔로 시작하면 처음에는 HTML과 CSS만으로도 꽤 많은 걸 만들 수 있습니다레이아웃도 짜고, 버튼도 만들고, 반응형 디자인도 할 수 있죠하지만… 어느 순간, 한계가 찾아옵니다예를 들어 이런 질문이 생기기 시작하죠“버튼을 눌렀을 때 팝업을 띄우고 싶은데… CSS로만 되나?”“스크롤 내리면 요소가 부드럽게 등장하면 좋겠는데… 어떻게 하지?”“사용자가 입력한 값을 실시간으로 확인하려면?”이럴 때 등장하는 게 바로 JavaScript입니다📌 HTML/CSS와 JS의 역할 구분구분역할예시HTML구조제목, 이미지, 버튼, 입력창 등CSS스타일색상, 폰트, 여백, 애니메이션 등JS동작 & 상호작용버튼 클릭 시 동작, 팝업, 자동 슬라이드..

티스토리툴바