본문 바로가기

Javascript

8.자바스크립트 프로젝트 https://pensive-kowalevski-fdf325.netlify.app/ Final Project address Samseong-ro, Gangnam-gu, Seoul, Republic of Korea pensive-kowalevski-fdf325.netlify.app 헤더 메인 섹션 -about me -What i do ~~ 아이콘 폰트 사용 외부 스타일 시트 방법 1. 프로젝트 폴더 2.index.html 파일 3. 외부에 style.css 파일 4. 외부에 javascript 파일 5. images 폴더 생성 (다른 폴더 사진 ./) 1.HTML 코드 작성하기 header 태그 nav 태그 ul li태그 2. CSS 작성하기 /* header.css */ *{ margin:0; paddi.. 더보기
7. javascript 클래스 고급기능(private, getter setter, Static, 오버라이드, toString) 나: 인스턴스 사람: 클래스 (작성양식: 클래스. 작성내용:매개변수) 동물: 추상클래스 매개변수: 클래스는 변하지않음. 매개변수가 각 객체를 다르게 만듦. 생성자: C는 절차지향. 압도적으로 효율적인 코드가 필요할 때 (ex. 달탐사) -객체지향패러다임. 객체지향패러다임: 객체지향 프로그래밍 객체를 만들고 객체들의 상호작용을 중심으로 개발하는 방법론 -추상화(필요한 요소만을 사용해서 객체를 표현하는 것을 의미) 복잡한 자료 모듈 시스템 등으로부터 핵심적인 개념을 간추려내는것 -인스턴스:클래스를 기반으로 만든 객체 생성자(constructor): 안쓰면 기본임 클래스를 기반으로 인스턴스를 생성할 때 처음으로 호출되는 메소드 속성을 추가하는 등 객체의 초기화 처리 +메소드: 함수로 추가한다. 클래스 선언하기.. 더보기
6. javascript 6 (예외처리, Class) Chapter 8 예외처리 Chapter 9 Class DOCTYPE html> Document 할 일 목록 추가하기 //2. 어떤 객체를 만들건지 생성해야함 document.addEventListener('DOMContentLoaded',()=>{ const input=document.querySelector('#todo') const todoList=document.querySelector('#todo-list') const addButton=document.querySelector('#add-button') //변수를 선언합니다. let keyCount=0 //추가하기 누르면 만들기 const addTodo=()=>{ //빈칸일때 추가하기 누르면 경고창뜨게 만들기 if(input.value.trim.. 더보기
5. javascript 5 실행안될떄 괄호잘 닫혔는지확인 확인 오타확인 , . 구분 확인 chapter 07. 문서 객체 모델 section7-1 문서객체 조작하기 section7-2 이벤트 활용 DOMContentLoaded 이벤트를 사용한 문서 객체 조작과 다양한 이벤트의 사용 방법 이해 section07-1 문서객체 조작하기 문서객체모델(dom: document object model) 자바스크립트를 이용하여 웹 문서에 접근하고 제어할 수 있도록 객체를 사용해 문서를 체계적으로 정리하는 방법 DOM Tree DOM트리 : 부모와 자식 구조로 표시 트리에서 갈라져 나가 항목을 노드라고 하며, html 노드를 루트 노드라고 한다. DOM 구성 기본원칙 모든 HTML 태그는 요소(element) 노드입니다. HTML 태그에서 사용.. 더보기
4. javascript4 [배열]{객체}(메서드) 6-1 객체 (object) 객체는 여러 속성을 하나의 변수에 저장하는 데이터타입. 배열은 요소에 접근할 때 인덱스를 사용하지만, 객체는 키(key)를 사용 객체는 중괄호{...}로 생성하며, 다음과 같은 형태의 자료를 쉼표(,)로 연결해서 입력 키 : 값 접근방법 1. 대괄호 사용[] ex> product['제품명'] 2. 온점. 사용 ex> product.제품명 (띄어쓰기 있으면 대괄호 써야함) DOCTYPE html> Document //변수를 선언합니다. const pet={ name: '구름', //name은 key , 구름은 속성값 eat:function(food){ //eat 은 key, function은 속성값. 속성값이 함수로 들어가면 메소드임. alert(thi.. 더보기
3. javascript3 1. 콜백함수 자바스크립트는 함수도 하나의 자료형이므로 매개변수로 전달할 수 있는데, 이렇게 매개변수로 전달하는 함수를 콜백(callback)함수 https://inpa.tistory.com/entry/JS-%F0%9F%93%9A-%EC%9E%90%EB%B0%94%EC%8A%A4%ED%81%AC%EB%A6%BD%ED%8A%B8-%EC%BD%9C%EB%B0%B1-%ED%95%A8%EC%88%98 콜백(Callback) 함수는 간단히 말하면 매개변수로 함수 객체를 전달해서 호출 함수 내에서 매개변수 함수를 실행하는 것을 말한다 1-1. 콜백함수를 활용하는 함수 : for Each() forEach()메소드는 배열이 갖고있는 함수(메소드)로써 단순하게 배열 내부의 요소를 사용해서 콜백함수를 호출 functio.. 더보기
2. javascript2 혼자공부하는 자바스크립트 ※ NaN은 string으로 저장되어있으나 NaN과 NaN을 비교하게될때 false가 나옴. *split split으로 문자열을 잘라 사용하기 '문자열A'.split('문자열B')메소드는 문자열A를 문자열B로 잘라서 배열을 만들어내는 메소드. ※if와 switch 차이 if 참 거짓에 따라 구분됨 switch 조건의 값에 따라서 분기됨 (A? B:C) 반복문 #반복문 검사-> console에서 확인함 1. 배열 1) 숫자, 문자, 불, 함수, 배열속배열까지 가능 const array= [273, 'String', ture, function(){}, {},[273,103]] 2) array[1*3] empty 가 생김 const fruitsA=['사과', '배', '바나나',emp.. 더보기
1. javascript 0304 자바스크립트 referenceError 예외처리 SyntaxError 구문오류 표현식-> 문장->프로그램 문자열도 배열임 “”.length 0 1==“1” true false로 나오고싶으면 ===쓰면됨. ===는 타입까지 확인함. 자료형이 달라도 변환하고 나면 값이 같아지므로 true임 2> false==“0” true false가 0이므로 변환된뒤에 비교 3> “”==[] 빈문자열은 false, 비어있는 배열도 false임 true 4> >0==[] true *const 상수 : 변경안됨. 선언만하는것 불가능. 값을 꼭 지정해야함 *let 변수 : 변경가능 *증감연산자 변수++ : 기존의 변수값에 1을 더하기 (전위) let number=10 alert(number++) : 출력값 10 (10.. 더보기

티스토리툴바