본문 바로가기

풀스택 개발 학습 과정138

[자바스크립트] Node , 고객관리 프로그램 예제 DOM Node 접근 처리 예제 DOM Node 접근 처리 insertAdjacentHTML의 첫 번째 속성 종류 beforeend : 닫는 태그 바로 앞 beforebegin : 시작 태그 바로 앞 afterend : 닫는 태그 바로 뒤 afterbegin: 시작 태그 바로 뒤 뼈해장국 우삼겹짬뽕 오므라이스 " data-ke-type="html">HTML 삽입미리보기할 수 없는 소스 들어갈 데이터let data ='순대국밥'; 1) beforebegin : 시작 태그 바로 앞.. 2024. 3. 9.
[자바스크립트] classList, 예제- 다크모드 버튼 구현 classList 자바스크립트 classList 객체 연습 " data-ke-type="html">HTML 삽입미리보기할 수 없는 소스 html 본문에서 사용한 id 위치 자바스크립트 classList 객체 연습 let target = document.getElementById('target');let content = document.getElementById('content'); - output() : 문서에 작성하는 함수function output(data){ target.innerHTML = data;} 1) 클래스명 가.. 2024. 3. 9.
[자바스크립트] 회원가입 검증 예제 회원가입 검증- 아이디 길이는 3~5 글자 사이로 입력받는다.- 비밀번호의 길이는 3~5글자 사이로 입력받고, 비밀번호 확인과 값이 같아야 한다.- 이름은 입력받기만 하면 된다.- 성별과 취미는 읽어오기만 할것- 전화번호 : 국번은 select상자이므로 읽어오기만 하고, 나머지 번호는 반드시 숫자 8자리(입력상자 하나로)- 정확히 모든 데이터를 입력하면 경고창에 결과를 출력하시오 ( 모든 정보와 결과는 경고창으로 ) html 본문 회원 가입 아이디 .. 2024. 3. 9.
[자바스크립트] 함수 - 4 (수학관련 함수) Math수학과 관련된 값이나 함수를 제공한다. - Math 에 선언된 상수console.log(`원주율 : ${Math.PI}`);console.log(`오일러 상수 : ${Math.E}`); - Falsy & TrulyFalsyTrulyFalsy 값으로 판정하는 데이터Truly 값으로 판정하는 데이터0, null, undefined, '  '  [], 비어있지 않은 문자열, 0을 제외한 모든 숫자 - abs절대값 반환console.log(Math.abs(-1)); // 1console.log(Math.abs('-2')); // 2console.log(Math.abs(null)); // 0console.log(Math.abs('')); // 0console.log(Math.abs(' ')).. 2024. 3. 9.
[자바스크립트] 함수 - 5 (BOM, DOM, DOM 예제) BOM 관련 처리- Window 하위 객체들 중 document 객체를 제외한 객체(DOM)- screen, window, history, lotation 등이 있다. open(), close(), print()  Window 객체가 제공해주는 메소드 : alter(), confirm(), prompt()태그 내 아이디를 통해 가져온다.let btn_01 = document.getElementById('btn_01');let btn_02 = document.getElementById('btn_02');let btn_03 = document.getElementById('.. 2024. 3. 4.
[자바스크립트] 함수 -3 (배열처리, 문자열처리) 배열 처리 함수slice, splice, push, pop, sift, unshift 등의 배열을 처리하는 여러가지 함수함수내용 join("문자열")전달인자의 문자열을 구분자로 하여, 배열을 문자열로 반환reverse()배열을 뒤집는다.slice(start , end)배열의 일부분을 반환, -1 은 마지막 데이터를 의미한다. 원본을 건드리지 않는다.splice(n[, m, ...x])부분 배열로 추출하거나 다른 값으로 대체한다. 원본에 영향을 미친다.sort()오름차순 정렬concat(...item) 여러 배열을 하나로 합친다. push(item), pop()배열의 끝에 데이터를 삽입하거나 추출, 원본이 수정된다. (Stack 자료구조처럼 동작)unshift(item), shift배열의 앞에 데이터를 삽.. 2024. 3. 2.
[자바스크립트] 함수 - 2 (화살표 함수) 화살표 함수일반적인 함수를 화살표로 작성하는 방법 - 함수 리터럴 방식 변경단계내용1단계funtion 키워드 삭제 2단계 ) { 사이에 화살표(=>) 삽입3단계 { } 안에 구문이 1 줄이라면 { } 생략 하고 리턴 삭제let three = (x,y) => x - y;console.log(three(16,3));// 아래의 four를 화살표 함수로 수정하시오let four = function() { console.log(`${x} + ${y} = ${x+y}`);}let four1 = (x,y) => console.log(`${x} + ${y} = ${x+y}`);four1(3,6);단계내용4단계매개변수 1개 밖에 없다면 생략 가능5단계매개변수가 하나도 없다면 생략 불가let five = x => .. 2024. 3. 2.
[자바스크립트] 함수 - 1 자바스크립트의 함수- 자바 스크립트의 함수는 function literal (값) 으로 처리 된다. - 함수가 표현함수, 선언함수가 존재- 모든 선언은 표현식(실행문)보다 앞에 있어야 한다. 함수의 정의 (선언적 함수)function 함수이름 (파라미터 선언부){ 실행문; [return data] }호출 (call) function add (a,b){ let result = a+b; return result;}// JS hoisting : 정의부를 실행문보다 위로 올리는 것// 실행문let c = add(10,20); console.log(c);콘솔 결과 = 30 func();- 변수처럼 사용 가능하다function substract(a,b){ ret.. 2024. 3. 2.
[자바스크립트] 연산자, 반복문과 제어문, defer 연산자 - 자바 스크립트 연산자종류 산술연산자+ - * / % **(거듭제곱)증감연신자++ --비교연산자== (===) != (!==) > = 논리연산자&& || !(단항)삼항연산자조건 연산자 (조건식) ? 참 : 거짓- 참, 거짓 위치에 실행문을 넣을 수 있다.typeof단항연산자. 오른쪽의 데이터(변수)의 타입을 알려줌비트연산자>> 은 0으로 0은 1로 변경 : 1의 보수 연산자)대입연산자LV = RV복합대입연산자+= 등등전개연산자(spread operator)새롭게 추가된 연산자로 배열, 객체에 포함된 요소들을 펼치는 연산자- 함수의 파라미터에서 사용되는 경우- 대입연산자에서 사용되는 경우 let a = 3;console.log('3의 3제곱의 결과' + a **3);let x = '3';conso.. 2024. 3. 2.

티스토리툴바