자바스크립트25 [JavaScript] 자바스크립트 요소 추가하기 - .createElement(), .createTextNode(), .appendChild() JavaScript 요소 추가자바스크립트를 이용하여 문서에 HTML 요소를 추가할 수 있습니다. .createElement().createTextNode().appendChild()노드 객체 생성하는 주요 메서드메서드생성하는 노드 객체document.createElement(요소 이름) 요소 노드 객체document.createAttribute(속성 이름) 속성 노드 객체document.createTextNode(텍스트)텍스트 노드 객체document.createComment(텍스트) 주석 노드 객체document.createDocumentFragment()도큐먼트 프래그먼트document.importNode(다른 문서의 노드, deep)다른 문서에 있는 노드를 복사한다. deep을 true로 설정하면.. 2024. 6. 13. [JavaScript] 자바스크립트 다양한 데이터 출력 JavaScript 데이터 출력JavaScript를 사용하면 웹 페이지에 동적으로 내용을 추가하거나 변경할 수 있습니다.다양한 방법으로 사용자에게 정보를 제공하는 방법을 소개합니다. document.write()innerHTMLDOM 조작console.log()alert(), prompt(), confirm()addEventListener()AJAX와 서버와의 통신 ( XMLHttpRequest / fetch )JSON 데이터 처리 ( JSON.parse() / JSON.stringify() )템플릿 리터럴 `${variable}`모듈화 ( import / export )예외처리 ( try / catch )1. document.write() 사용document.write() 메서드는 HTML 페이지가 로.. 2024. 6. 7. [JavaScript] 화면출력 함수 document.write(), with(document){}, alert(), confirm(), prompt(), console.log() JavaScript 데이터 출력JavaScript를 사용하면 웹 페이지에 동적으로 내용을 추가하거나 변경할 수 있습니다. 다양한 방법으로 사용자에게 정보를 제공하는 방법을 소개합니다. document.write()with(document){}alert()confirm()prompt()console.log()👉 document.write()document.write() 메서드는 HTML 페이지가 로드될 때 직접 문서에 문자열을 쓰는 데 사용됩니다.document객체로써 document는 웹 문서를 의미한다. 웹페이지에 존재하는 HTML요소에 접근하고자 할때는 반드시 Document 객체를 사용해야한다. 📝 document.write() 형태document.write("Hello, World!"); 사.. 2024. 6. 7. [JavaScript] 자바스크립트 템플릿 리터럴(Template Literal) - 백틱(`), ${ }을 이용한 문자열 표기법 템플릿 리터럴 (Template literal)템플릿 리터럴은 내장된 표현식을 허용하는 문자열 리터럴이다. 이전 버전의 ES2015 명세서에는 "template strings" (템플릿 문자열)라고 불렸다. 익숙해지면 굉장히 편리한 문법이다.📝 템플릿 리터럴 형태이중 따옴표"", 작은 따옴표'' 대신 백틱(backtick)``을 이용한다. 물결(~)과 같은 키 버튼이다.변수나 표현식은 $와 중괄호를 통해 표기한다.${var} ${a + b}여러 줄 표현 (multi-line string)- 기존 따옴표를 사용하여 문자열에서 개행을 표현하려면, \n 과 같은 개행문자를 사용했었다. - 템플릿 리터럴을 사용할 경우, 개행을 코드상에서 수행하면 별도의 개행문자 없이 개행을 표현할 수 있다.// 기존c.. 2024. 6. 4. [JavaScript] 자바스크립트 데이터 타입(Data Type) - 자료형/Array/Object ✍️ Summary자료형설명기본형number (숫자)따옴표 없이 표기한 숫자를 나타냅니다.string (문자열)작은따옴표(')나 큰따옴표(")로 묶어 나타낸 문자의 집합입니다.boolean (논리형)참(true)과 거짓(false)으로 표현할 수 있는 유형입니다.undefined자료형을 지정하지 않았을 때의 유형입니다.변수를 선언하고 값을 정의하지 않으면 undifined가 됩니다.null값이 유효하지 않을 때의 유형입니다.복합형array (배열)하나의 변수에 여러 값을 저장하는 유형입니다.object (객체)함수와 속성이 함께 포함된 유형입니다.기본형Number - 숫자 자료형입니다. - 자바스크립트에서는 정수, 실수를 구분하지 않습니다. (정확히는 정수만을 위한 자료형이 없습니다.) 📝 Numb.. 2024. 6. 4. [VS Code] VScode에서 console.log 단축키 추가하기 자동완성 단축키 추가 및 사용법1) 사용자 코드 조각 구성 선택👉 File > Preference > Configure User Snippets 👉 파일 > 기본 설정 > 사용자 코드 조각 구성 2) 자동완성 적용👉 javascript.json 언어 선택👉 "console.log print" : { ... }prefix는 자동단축키 약어를 설정body는 위 자동단축키 약어를 사용했을 경우 나타나는 문구description은 해당 자동단축키의 설명아주 직관적으로 console.log라서 cl으로 자동 완성 문구를 설정했다😏 "console.log Print" : { "prefix": "cl", "body": [ "console.log();" ], "description": "Log ou.. 2024. 6. 2. [JavaScript] 로딩(Loading)바 만들기 (submit시 로딩 표현하기) CSS 로딩UI 만들기 #2. 시간차를 두고 스케일 조절 반복하는 원(Circle)앞전에 CSS를 사용하여 회전하는 원 로딩 UI을 만든적이 있다. CSS 로딩UI 만들기 #1. 회전하는 원(Circle)CSS 로딩UI 만들기 #1. 회전하는 원(Circle) 웹사이트에 자주 사용되는 로딩 UI 중, 무한으로 회전하는 원(Circle)을 사용하는 경우가 있다. 이때 돌아가는 원을 GIF이미지로 만들어 사용하는 경우도 있는데 그 경..code-study.tistory.com이번에는 세개의 원을 나열해두고 각각 시간차를 두고 일정은 크기로 커졌다 작아졌다 하는 로딩 UI를 만들어보려고 한다. 이미지를 보지 않으면 설명이 어려우니 우선 결과물부터 보자. 시간차를 두고 스케일 조절을 반복하는 원들 (로딩UI)먼.. 2023. 4. 23. [JavaScript] ==와 ===의 차이 ● == 연산자두 피연산자의 값의 타입이 다를 경우 자동으로 일부 피연산자의 타입을 변환한 후 값을 비교합니다.ex)10 10 // true10 '10' // truetrue 1 // truetrue '1' // truetrue 'true' // falsenull undefined // true 10 '10'→ 두 피연산에서 하나가 숫자형이고 다른 하나가 문자열이면, 문자열을 숫자로 변환 후 값을 비교합니다. true 1→ 두 피연산자에서 불리언 값이 존재하면, 불리언 값을 1로 변환 후 값을 비교합니다. true '1'→ 불리언 값을 1로 변환하면, 1=='1' 이 되는데, 문자열 '1'을 숫자로 변환 후 값을 비교합니다.즉, 1==1 로 비교되며, true를 반환합니다. true 'true'→ 불리언.. 2023. 3. 13. [JavaScript] 자바스크립트 비동기 처리 원문 : ⭐️🎀 JavaScript Visualized: Promises & Async/AwaitJS 코드를 다루면서 예상대로 동작하지 않은 적이 있나요? 아마 함수가 무작위로 예상되지 않는 시간에 실행되거나 실행이 지연되었을 겁니다.ES6에서 도입된 Promise는 이런 일을 다룰 새롭고 멋진 기능입니다!수 년전의 고민이 해결되고 잠 못 이루는 밤은 다시 한 번 애니메이션을 만들 시간을 주었습니다. 왜 Promise를 사용해야 하고, 어떻게 동작하며, 어떻게 가장 현대적인 방식으로 사용할 수 있을까요?만약 자바스크립트 이벤트 루프에 관한 이전 게시물을 읽지 않았다면, 먼저 읽어보는게 도움이 될겁니다.콜스택, 웹 API, 큐에 대한 기본적인 지식을 바탕으로 이벤트 루프에 대해 다시 한 번 다룰 예정입니.. 2023. 3. 13. 이전 1 2 3 다음 728x90 반응형
