Language/Javascript11 [JS] 모듈을 불러오는 두가지 방식 - import, export / require import 방식ECMAScript 2015(ES6)에서 도입된 모듈 시스템주로 현대적인 JavaScript 애플리케이션에서 사용 // 모듈 전체를 불러올 때import * as moduleName from 'module-path';// 모듈에서 특정 기능만 불러올 때import { specificFunction } from 'module-path';// 모듈에서 기본 내보내기를 불러올 때import defaultExport from 'module-path';// 기본 내보내기와 특정 기능을 함께 불러올 때import defaultExport, { specificFunction } from 'module-path'; // math.js 파일에서export function add(a, b) { ret.. 2024. 8. 21. [JS] Promise와 async/await JavaScript에서 Promise :비동기 작업의 완료 또는 실패를 나타내는 객체비동기 작업이 성공하면 작업의 결과 값으로, 실패하면 오류 이유로 Promise 객체를 사용할 수 있음Promise는 콜백 대신 비동기 작업을 처리하는 더 나은 방법을 제공함 세가지 주요 상태 Pending (대기 중): 초기 상태, 비동기 작업이 아직 완료되지 않음.Fulfilled (이행됨): 비동기 작업이 성공적으로 완료됨.Rejected (거부됨): 비동기 작업이 실패함. let promise = new Promise((resolve, reject) => { // 비동기 작업 수행 let success = true; if (success) { resolve("작업 성공"); }.. 2024. 7. 30. [JS] 현재 시간 띄우기 현재 시간 moment.min.js더보기구글에 moment.js 다운로드 검색맨처음에 나오는 웹페이지 클릭왼쪽에 다운로드 클릭 2024. 7. 25. [JS] 객체와 배열 /** 여러 개의 값을 하나의 변수 상자에 넣기 */let names = ['홍길동1', '홍길동2', '홍길동3'] //세칸 세개 배열 만들어짐console.log(`names 배열 크기: ${names.length}`) //names 배열 크기: 3let first = names[0];console.log(`첫번째 칸: ${first}`); //첫번째 칸: 홍길동1console.log(`names의 타입: ${typeof (names)}`); //names의 타입: objectconsole.log(`첫번째 칸의 타입: ${typeof (names[0])}`); //첫번째 칸의 타입: stringlet fish1 = { name: '붕어빵1', age: 1 };console.log(`fish1의 타입:.. 2024. 7. 25. [JS] <input type="radio"> 선택한 값 활용하기 라디오버튼 + JS 고양이 강아지 OK 2024. 7. 25. [JS] 상속 //상속class Fish { constructor(name, age) { this.name = name; this.age = age; } swim() { console.log('어푸어푸 붕어빵'); }}class Shark extends Fish {}const fish1 = new Fish('붕어빵1', 1);const shark1 = new Shark('상어빵1', 1);console.log(`상어빵: ${shark1.name}, ${shark1.age}살`); // 부모 클래스class Person { constructor(name, age) { this.name = name; this.age = age; .. 2024. 7. 25. [JS] 자바스크립트 기초 (코딩애플 유튜브 무료강의) 유튜브 코딩애플 수업 듣는 중 1. 셀렉터 사용하기 hi 올때메로나 ▶ document.getElementById('어쩌구') ← 셀렉터 2. css 속성으로 Alert창 보이게 안보이게 하기 Alert 박스 닫깅 버튼! 3. Function 사용하기 (긴 코드 축약) Alert 박스 닫깅 버튼! ▶ HTML을 먼저 읽어야 JS로 조작이 가능하기 때문에 JS는 하단에 코딩해야 에러를 막을 수 있음 ▼ 스크립트를 위로 올리면 콘솔창에 에러가 뜨는데, 이 에러는 'innerHTML'의 왼쪽에 있는 것이 null 이라는 뜻 ▶ 자바스크립트의 요소를 잘 찾지 못했다는 뜻 4. Function 업그레이드해서 사용하기 (파라미터) Alert 박스 닫깅 버튼! ▶ 함수 하나로 다양한 기능을 만들 수 있게 됨 Aler.. 2024. 3. 28. [JS] jQuery 오픈소스 자바스크립트 라이브러리더보기달러함수는 제이쿼리 라이브러리에 있음 → 다운로드 받거나 cdn 링크 걸어야 함 jQuery를 사용하면 자바스크립트 프로그램에서 DOM 객체 참조작업을 쉽게 할 수 있음jQuery는 이벤트 처리, DOM 객체 변경, ajax연동을 쉽게 할 수 있음CSS선택자를 사용 → #ID .class CSS Pseudo class 하위, 동일레벨, 폼 선택자 : 콜론으로 되어있는 (유사하다) 예시) 이메일 목록을 보면 목록이 그리드형태로 나타나는데 홀수번째의 그리드는 row가 되는데 그런애들의 배경색을 다르게 주고싶을때 (가독성 좋게) 진짜예시 $('tr:even').css('backgroundColor', 'pink') 셀렉터 $() 제이쿼리 함수호출 .. 2023. 10. 23. [JS] DOM DOMDocument Object Model문서 객체 모델 웹 페이지를 스크립트 또는 프로그래밍 언어들이 사용할 수 있는 구조로 표현하는 방법HTML이나 XML 문서 내의 모든 요소를 정의하고 각각의 요소에 접근할 수 있는 계층 구조 DOM은 트리구조의 형태를 가짐HTML 문서의 각 요소는 DOM의 노드(node)에 해당 ▶ 노드 (node) 종류Document NodeElement NodeText NodeAttribute Node전체 페이지를 나타냄트리구조 최상위에 위치HTML 요소를 나타냄>> 태그 (body, div, p 등등)HTML 요소 내부의 문자열>> 태그 없이 작성하는 애들HTML 요소 내부의 속성>> src, alt // ID로 요소 선택하기let ex = document.. 2023. 9. 7. [JS] 함수 자바스크립트에서의 함수는 특정 작업을 수행하거나 값을 계산하기 위해 정의된 코드 블록 함수 정의// 함수 선언function sayHello() { console.log("Hello, World!");}// 함수 표현식const sayHello = function() { console.log("Hello, World!");};// 화살표 함수const sayHello = () => { console.log("Hello, World!");}; 기본 매개변수함수 매개변수에 기본값을 지정할 수 있음function greet(name = "Guest") { console.log(`Hello, ${name}!`);}greet(); // "Hello, Guest!" 출력greet("Alice.. 2023. 9. 6. [JS] JavaScript 정적인 HTML 콘텐츠에서 사용자와 상호작용하며 동적으로 변경하는 부분을 담당객체 기반의 스크립트 언어, 웹 브라우저에서 해석되는 인터프리터 언어Node.js 와 같은 프레임워크를 사용하면 서버 프로그래밍에서도 사용 가능 동적이며 타입을 명시할 필요가 없는 인터프리터 언어객체지향 프로그래밍과 함수형 프로그래밍을 모두 표현할 수 있음HTML의 내용, 속성, 스타일을 변경할 수 있음이벤트를 처리하고 사용자와의 상호작용을 가능하게 함서버와 실시간 통신 기능을 제공 문법 특징변수 타입을 따로 지정하지 않음선언은 var, let, const를 사용범위 지정 없이 변수를 선언하면 전역변수가 되고 위치에 상관없이 호이스팅(끌어올림) 되므로 주의문자열 표현에는 " ' 모두 사용 가능함수형 언어를 지원하며 함수는 변수.. 2023. 9. 6. 이전 1 다음