일 | 월 | 화 | 수 | 목 | 금 | 토 |
---|---|---|---|---|---|---|
1 | 2 | 3 | 4 | 5 | 6 | |
7 | 8 | 9 | 10 | 11 | 12 | 13 |
14 | 15 | 16 | 17 | 18 | 19 | 20 |
21 | 22 | 23 | 24 | 25 | 26 | 27 |
28 | 29 | 30 | 31 |
- SQL
- 14658
- 데코레이터
- PWA
- pwa적용하기
- 머신러닝종류
- js
- react
- queryset
- SSAFY
- SSAFYcial
- 싸피셜
- 리액트
- git
- 백준
- TypeScript
- Django
- 셀프넘버
- Python
- 싸피
- Javascript
- QuerySetAPI
- VITE
- 싸피10기
- 플로이드워셜
- unionfind
- 알고리즘
- db
- vitepwa
- sqld
- Today
- Total
목록FrontEnd/JavaScript (22)
Meme's IT
# if 문 기본형식 const name = 'customer' if (name === 'admin') { console.log('관리자님 환영해요') } else if (name === 'customer') { console.log('고객님 환영해요') } else { console.log(`반갑습니다. ${name}님`) } 조건(삼항) 연산자: if 문을 간단하게 const func1 = function (person) { if (person > 17) { return 'Yes' } else { return 'No' } } // 위의 코드를 const func2 = function (person) { return person > 17? 'Yes' : 'No' } // 이렇게 줄일 수 있음 # 반복문..
# 할당 연산자 오른쪽에 있는 피연산자의 평과 결과를 왼쪽에 할당하는 연산자 let a = 0 a += 10 console.log(a)// 10 a -= 3 console.log(a)// 7 a *= 10 console.log(a)// 70 a /= 7 console.log(a)// 10 a %= 7 console.log(a)// 3 # 증가 / 감소 연산자 피연산자를 증가(1더함) / 감소(1빼기) 시키고 연산자의 위치에 따라 증감 전이나 후의 값을 반환 // 전위 연산자 let a = 3 const b = ++a console.log(a, b) // 4 4 // 후위 연산자 let x = 3 const y = x++ console.log(x, y) //4 3 ※ 참고 할당 연산자와 증가/감소 연산자는..
![](http://i1.daumcdn.net/thumb/C150x150/?fname=https://blog.kakaocdn.net/dn/carvDy/btsyYnhkZaQ/d3JKkZmfpR4b3uRIVyGZH1/img.png)
JavaScript의 데이터 타입은 크게 원시자료형과 참조 자료형으로 나뉜다 원시 자료형 변수에 값이 직접 저장되는 자료형 불변, 값이 복사 → 변수들끼리 서로 영향 없음 Number, String, Boolean, undefined, null 참조 자료형 객체의 주소가 저장됨 가변적, 주소가 복사 → 변수들끼리 서로 영향을 끼침 Objects(Object, Array, Function) const ob1 = { name: 'youngbok', age: 20} const ob2 = ob1 ob2.age = 25 console.log(ob1.age) // 25 console.log(ob2.age) // 25 # 원시 자료형 1. Number: 정수 또는 실수형 숫자 2. String: 텍스트 데이터를 표현..
![](http://i1.daumcdn.net/thumb/C150x150/?fname=https://blog.kakaocdn.net/dn/clrAtU/btsy3hURA7F/NFZBAm4zUJxcBUz71ficd1/img.png)
# 변수명 작성 규칙 반드시 문자, 달러($), 밑줄(_)로 시작 대소문자 구문 예약어(for, if, function) 사용 불가 카멜 케이스(camelCase): 변수, 객체, 함수 파스칼 케이스(PascalCase): 클래스, 생성자 대문자 스네이크 케이스(SNAKE_CASE): 상수 # 변수 선언 키워드 1. let 블록 스코프(block scope)를 갖는 지역 변수를 선언 재할당 가능 재선언 불가능 초기값 없이 선언 가능 let number = 10 number = 20// 재할당 가능 let num = 10 let num = 20// 재선언은 불가능 2. const 블록 스코프를 갖는 지역변수를 선언 재할당, 재선언 둘 다 불가능 초기값 반드시 필요 const number= 10 number..
![](http://i1.daumcdn.net/thumb/C150x150/?fname=https://blog.kakaocdn.net/dn/bMl3Pz/btsyTZ1T4hn/IwKAYtOP9lWd3m3p2jhBZK/img.png)
# JavaScript를 사용하는 방법 1.html파일 내 Body에 script 태그를 이용함 2. js파일을 만든 후, script: src 태그를 이용 3. 개발자도구 > console에서 직접 입력 → Node.js / Deno등을 통해 바로 할 수도 있음 # DOM = Document Object Model 웹 페이지를 하나의 객체로 보는 것, 프로그래밍 언어가 페이지 구조에 접근할 수 있는 방법을 제공한다 HTML 문서를 자바스크립트가 접근 및 조작할 수 있도록 도와주는 API를 제공하는 인터페이스 → 문서의 요소(element), 속성(attribute), 스타일(style) 등을 접근, 변경할 수 있도록 함 DOM에서 모든 요소, 속성, 텍스트는 하나하나 모두 객체임 최상위에는 docume..
# 자바스크립트란? 웹 페이지의 동적인 기능을 구현하기 위해 사용되는 프로그래밍 언어 초기에는 브라우저에서 실행되어 웹 페이지를 변환시키기 위해서만 사용 → 프로그래밍 언어로써의 취급 별로였음 실행 환경 == 브라우저 해석기: 자바스크립트 엔진 서버 측에서도 자바스크립트 실행 환경이 필요해짐 같은 언어를 사용해서 생산성 / 일관성을 향상시키기 위해 자바스크립트의 강점(in 비동기 프로그래밍)을 살려서 개발 가능 프론트엔드 개발자들이 백엔드 개발도 가능함(생태계 확장) # 컴파일 언어& 인터프리터 언어 JavaScript는 인터프리터 언어에 해당함(그 중에서도 스크립트 언어) 스크립트 언어란? 기존에 존재하는 소프트웨어를 제어하기 위한 용도로 쓰이는 단어 연극의 대본(Script)이 연기자를 제어하는 것에..