본문 바로가기

분류 전체보기

 (80)
DOM ( Document Object Model) DOM ( Document Object Model)- HTML(웹문서, 웹페이지) 문서를 객체 기반으로 표현한 것  → HTML 문서에 작성된 내용을 트리구조(계층형으로 표현)로 나타냈을 때,       각각의 태그, TEXT, COMMENT 등을 Node라고 함document : {    DOCTYPE : html,    HTML : {       HEAD : {          TITLE : { TEXT : "문서 제목" },          STYLE : {...},          META : {...}       } ,       BODY : {              H1 : { TEXT : "제목", ATTRIBUTE : "속성" },              COMMENT : {TEXT : ..
객체 ( Array ) 자바스크립트 객체- 자바스크립트의 객체는 { }(중괄호) 내에 Key : Value(Map 형식)가 모여있는 형태로 작성됨- {K : V, K : V, K : V, ...} : 자바스크립트 객체- (참고) 자바스크립트 객체 모양의 문자열   == JSON(JavaScript Object Notation, 자바스크립트 객체 표기법)   "{K : V, K : V, K : V}"- 자바스크립트에 객체를 생성하는 방법   1) { } : 객체 리터럴 표기법을 이용한 생성 방법   2) 생성자 + new 생성자( ) 를 이용한 생성객체 생성 1// 객체 생성 1document.getElementById('btn1').addEventListener('click', function(){ const div1 =..
JS 연습문제 8 - 회원 가입 양식 ▶ JS 연습문제 8 - 회원 가입 양식회원 가입 양식 포함 사항- 아이디 / 비밀번호 및 비밀번호 확인 / 이름 / 성별 / 전화번호 / 이메일CSSfieldset{width: 500px;}#resetBtn{margin-left: 150px;}.confirmId{background-color: green;}.errorId{ background-color: red; color: white;}.confirm{color: green;}.error{color: red;}HTML 회원 가입 양식 아이디 중복확인 ..
정규 표현식 (Regular Expression) 정규 표현식(Regular Expression)- 특정한 규칙을 가진 문자열 집합을 표현하는데 사용하는 형식의 언어- 정규 표현식을 이용하면 입력된 문자열에 대한   특정조건 검색, 일치여부 판단, 치환에 대한 조건문을 간단히 처리할 수 있음- 정규 표현식 참고 사이트1) https://regexper.com/ : 작성한 정규표현식을 그림으로 나타내주는 사이트2) https://regexr.com/ : 정규표현식 테스트 사이트3) https://developer.mozilla.org/ko/docs/Web/JavaScript/Guide/%EC%A0%95%EA%B7%9C%EC%8B%9D : MDN - 정규표현식 설명정규 표현식 객체 생성 및 확인하기1. 정규 표현식 객체 생성 방법   1) const reg..
JS 연습문제 7 - 로또 번호 생성 ▶ 로또 번호 생성CSSbody{ display: flex; flex-direction: column; justify-content: center; align-items: center;}#container{ margin-top: 200px; display: flex;}#container>div{ border: 1px solid black; border-radius: 50px; margin-left: 30px; width: 70px; height: 70px; font-size: 45px; font-weight: bold; text-align: center;}#createLotto{ margin-top: 40px; width: 300px; heig..
배열(Array) 배열: 변수를 묶음으로 다루는 것(변수가 연속적으로 나열됨)- JavaScript 변수 : 값이 저장되기 전까지 자료형이 지정되지 않음- JavaScritpt 배열의 특징   1) 자료형 제한 X   2) 길이 제한 X// 배열 확인 1document.getElementById('btn1').addEventListener('click',function(){ // 배열 선언 방법 1 const arr1 = new Array(3); // 3칸짜리 배열 생성 const arr2 = new Array(); // 0칸짜리 배열(비어있는 배열) 생성 // 다른 자료형 대입 가능 arr1[0] = "라자냐"; arr1[1] = 19800; arr1[2] = true; co..
문자열, 숫자, 형변환, 연산자 문자열(String 내장 객체)- 자바스크립트에서는 문자열을 나타내는 객체(String)이 존재하며  문자열과 관련된 기본적인 함수를 제공함- 1) 문자열.indexOf("str")   : 문자열에서 "str"과 일치하는 부분이 시작되는 인덱스를 반환 / 없으면 -1 반환- 2) 문자열.substring(시작인덱스, 종료인덱스(미포함))   : 문자열 일부 잘라내기 / 시작 이상 종료 미만- 3) 문자열.split("구분자")   : 문자열을 "구분자"로 잘라내서 배열로 반환// 문자열 관련 함수document.getElementById('btn1').addEventListener('click',function(){ // 1) 문자열.indexOf("str") // : 문자열에서 "str"과 ..
JS 연습문제 6 - 색깔 변경_표준 이벤트 모델 적용 ver. ▶ JS 연습문제 6 - 색깔 변경_표준 이벤트 모델 적용 verHTML 현재 transition-duration : 0초 transition-duration 변경 : 변경 초기화JavaScript// 색 출력 영역// 요소를 얻어와서 변수에 저장const container = document.getElementsByClassName('container')[0];const area = document.getElementsByClassName('area');const box = document.getElementsByClassN..

티스토리툴바