반응형 자바스크립트13 [JavaScript] DOM(문서 객체 모델) Reference- [TCP School] 문서 객체 모델- [MDN] 문서 객체 모델- [ModernJS] 브라우저: 문제, 이벤트, 인터페이스(브라우저 환경과 다양한 명세서) - DOM(Document Object Model): XML이나 HTML 문서에 접근하기 위한 일종의 인터페이스. W3C의 표준 객체 모델로 계층 구조로 표현됨- DOM 종류: Core DOM / HTML DOM / XML DOM- Document 객체: 웹 페이지 자체를 의미- HTML DOM은 Node라고 불리는 계층적 단위에 정보 저장- HTML 문서의 모든 것은 Node (Document 메서드)더보기메서드설명document.getElementsByTagName(tag_name)해당 태그 이름의 요소를 모두 선택do.. 2025. 4. 6. [JavaScript] JavaScript 주요 메서드 1 변수 선언더보기더보기let name = "Alice"; // 변경 가능const age = 25; // 변경 불가능var city = "Seoul"; // (과거 방식, 사용 지양, 호이스팅 문제 발생 가능)자료형더보기더보기// 기본 자료형 (Primitive Types)let str = "Hello"; // 문자열let num = 42; // 숫자let bool = true; // 논리값let nothing = null; // 값 없음let unknown = undefined; // 정의되지 않음let symbol = Symbol(); // 유일한 값// 객체 자료형 (Object Types)let obj = { key: "value" }; // 객체.. 2025. 4. 4. [JavaScript] JavaScript 기본 문법 변수 선언더보기더보기let name = "Alice"; // 변경 가능const age = 25; // 변경 불가능var city = "Seoul"; // (과거 방식, 사용 지양, 호이스팅 문제 발생 가능)자료형더보기더보기// 기본 자료형 (Primitive Types)let str = "Hello"; // 문자열let num = 42; // 숫자let bool = true; // 논리값let nothing = null; // 값 없음let unknown = undefined; // 정의되지 않음let symbol = Symbol(); // 유일한 값// 객체 자료형 (Object Types)let obj = { key: "value" }; // 객체.. 2025. 4. 4. [웹개발] JavaScript 주요 메서드 2 Fetch API(비동기 요청)더보기메서드설명fetch(url)GET 요청(기본)fetch(url, { method: "POST", body })POST 요청fetch(url, { method: "PUT", body })PUT 요청fetch(url, { method: "DELETE" })DELETE 요청response.json()JSON 데이터를 파싱response.text()텍스트 데이터로 변환response.statusHTTP 상태 코드 반환response.ok응답 성공 여부(true/false)fetch("https://api.example.com/data") .then((response) => response.json()) .then((data) => console.log(data)) .c.. 2025. 4. 3. [웹개발] JavaScript 주요 메서드 1 문자열(String)더보기메서드설명length문자열 길이 반환toUpperCase()대문자로 변환toLowerCase()소문자로 변환trim()앞뒤 공백 제거slice(start, end)부분 문자열 추출substring(start, end)부분 문자열 추출replace("찾을값", "바꿀값")문자열 치환split("구분자")문자열을 배열로 변환includes("문자")특정 문자 포함 여부 확인indexOf("문자")특정 문자 위치 반환(없으면 -1)let text = " Hello JavaScript! ";console.log(text.length); // 19console.log(text.toUpperCase()); // " HELLO JAVASCRIPT! "console.log(text.trim().. 2025. 4. 3. [코딩테스트] JavaScript - 추천 문제 1회더보기문제문제 링크풀이미로 탈출 명령어(150365)문제 링크풀이택배 배달과 수거하기(150369)문제 링크풀이개인정보 수집 유효기간(150370)문제 링크풀이2회더보기문제문제 링크풀이110 옮기기(77886)문제 링크풀이쿼드압축 후 개수 세기(68936)문제 링크풀이없는 숫자 더하기(86051)문제 링크풀이3회더보기문제문제 링크풀이불량 사용자(64064)문제 링크풀이k진수에서 소수 개수 구하기(92335)문제 링크풀이거리두기 확인하기(81302)문제 링크풀이4회더보기문제문제 링크풀이코딩 테스트 공부(118668)문제 링크풀이두 큐 합 같게 만들기(118667)문제 링크풀이숫자 게임(12987)문제 링크풀이5회더보기문제문제 링크풀이보석 쇼핑(67258)문제 링크풀이파괴되지 않은 건물(92344)문제 .. 2025. 3. 16. [JavaScript] BOM(브라우저 객체 모델) Window 객체 Navigator 객체더보기/* 사용자 정보 확인 */const user = navigator.userAgent;/* 정규표현식: /(슬러쉬)내 문자가 ver내에 있는지 판단. 대소문자 구분 */const isIE = /trident/i.test(ver);/* Explore 접속시 경고 표시 */if(isIE) { alert("익스플로러 브라우저로 접속하셨네요. 이 웹페이지는 익스플로러를 지원하지 않습니다. 다른 브라우저로 접속해 주세요.");} 2025. 3. 6. [JavaScript] 태그 속성값 제어 태그 속성값 제어더보기/* 속성값 확인하기 */const tag = document.querySelector("선택자");const tagAttr = tag.getAttribute("속성명");/* 속성값 변경하기 */const tag = document.querySelector("선택자");tag.setAttribute("속성명", "값"); 2025. 3. 6. [코딩테스트] JavaScript - 알고리즘 추천 문제 백트래킹(Programmers)더보기문제문제 링크풀이피로도(87946)문제 링크풀이N-퀸(12952)문제 링크풀이양궁 대회(92342)문제 링크풀이외벽 점검(60062)문제 링크풀이사라지는 발판(92345)문제 링크풀이모음 사전(84512)문제 링크풀이정렬(Programmers)더보기문제문제 링크풀이문자열 내 마음대로 정렬하기(12915)문제 링크풀이정수 내림차순으로 배치하기(12933)문제 링크풀이K번째 수(42748)문제 링크풀이가장 큰 수(42746)문제 링크풀이튜플(64065)문제 링크풀이지형 이동(62050)문제 링크풀이파일명 정렬(17686)문제 링크풀이H-Index(42747)문제 링크풀이시뮬레이션(Programmers)더보기문제문제 링크풀이이진 변환(70129)문제 링크풀이롤케이크 자르기(.. 2025. 2. 9. [코딩테스트] JavaScript - 자료구조 추천 문제 배열(Programmers)더보기문제문제 링크풀이두 개 뽑아서 더하기(68644)문제 링크 모의고사(42840)문제 링크 행렬의 곱셈(12949)문제 링크 실패율(42889)문제 링크 방문 길이(49994)문제 링크 배열의 평균값(120817)문제 링크 배열 뒤집기(120821)문제 링크 N^2 배열 자르기(87390)문제 링크 나누어 떨어지는 숫자 배열(12910)문제 링크 스택(Programmers)더보기문제문제 링크풀이괄호 회전하기(76502)문제 링크풀이짝지어 제거하기(12973)문제 링크풀이주식 가격(42584)문제 링크풀이크레인 인형 뽑기 게임(64061)문제 링크풀이표 편집(81303)문제 링크풀이같은 숫자는 싫어(12906)문제 링크풀이올바른 괄호(12909)문제 링크풀이컨트롤 제트(120.. 2025. 2. 9. 이전 1 2 다음 반응형
