ksw_devlog

[자바스크립트 함수] 함수 -> 코드가 복잡해지는 과정을 해결할 수 있다 함수 기본적인 문법 ex) function two() { document.write('2-1') document.write('2-2') } document.write('1') two() document.write('3') two() two()라는 함수를 지정해주고 document.write ~~ 쓰는 대신 two()를 써준다 입력 -> parameter -> 매개변수 argument -> 인자 return -> 출력 Parameter & Argument function onePlusOne() { document.write(1+1+' ') } onePlusOne() function sum(a, b) { document.write(a+..

[DOM 기초] DOM(Document Object Model) : 다큐멘트를 오브젝트로 만드는 모델 // touch sample.js // 접근, 제어 () -> 메소드 : 어떤 것에 접근~ -> 호출의 주체 document 부터 쓰는 이유 -> document부터 시작하기 때 getElementbyId getElementsByClassName 노드 -> 속성, 메소드 --------------------------------------------------------- [리팩토링(Refactoring)] 코드의 비효율적인 것을 제거하는 것. 중복코드를 개선하는 등 코드를 깔끔히 정리해주는 것 리팩토링을 통해 코드의 중복을 제거한다. ex) document.querySelector('body')를 ta..

변수 -> 변수를 지정하면 일일히 내용을 바꿀 필요 없음 variable -> var constant -> const '=' -> 대입 연산자 div, span -> 무색무취의 태그 div -> 화면전체를 씀 -> 줄바꿈이 됨 span -> 줄바꿈 X ...... -------------------------------- id -> 식별 , class -> 그룹핑 class 선택자가 더 포괄적 -> 광범위한 효과를 줌 id 선택자 -> 예외적으로 효과를 줌 -> id명 중복X 우선순위 : id > class > tag (javascript select tag by css selector) document.querySelector('body').style.backgroundColor = 'black' =>..

데이터타입의 종류 기본형 / 참조형 - 복제의 방식 1. 기본형 : 값이 담긴 주소값을 바로 복제 2. 참조형 : 값이 담긴 주소값들로 이루어진 묶음을 가리키는 주소값을 복제 데이터 타입을 이해하기 위해 필요한 배경지식 메모리, 데이터 -비트 -메모리 -바이트 -java, c와 다른 javascript의 메모리 관리 방식(feat. 정수형) 식별자,변수 변수 = 데이터 식별자 = 변수명 변수 선언과 데이터 할당 할당 예시 /** 풀어 쓴 변수 할당 방식 */ var testValue; testValue = 'test value!'; /** 붙여 쓴 변수 할당 방식 */ var testValue2 = 'second test value!'; 값을 바로 변수에 대입하지 않는 이유(=무조건 새로 만드는 이유) ..

DOM(문서객체모델) DOM은 html 단위 하나하나를 객체로 생각하는 모델입니다. 예를 들면, 'div'라는 객체는 텍스트 노드, 자식 노드 등등, 하위의 어떤 값을 가지고 있겠죠? 이런 구조를 트리 구조라고 합니다. 네, 맞습니다! DOM이 트리구조란 소리입니다. dom 트리 // 현재 dom 트리를 볼 수 있어요. document // dom 트리 중, body의 내용을 확인합니다. document.body // dom 트리 중, head의 내용을 확인합니다. document.head document와 body, head는 부모 - 자식 관계예요. body랑 head는 무슨 사이냐고요? 형제 관계입니다. (sibling이라고도 하죠!) 자식 요소에 접근하기 childNodes document.bod..

프로필 페이지에서 MBTI를 입력하는 칸을 만들었다. 제 MBTI는 OOOO입니다 변경 프로필에 대한 설명 변경 변경 버튼을 클릭하면 startMBTIChange 함수가 적용된다 --> window.startMBTIChange = async function() { $("#edit-user-mbti-button-container").empty() $("#edit-user-mbti-button-container").append( ` 완료 ` ) } id가 "#edit-user-mbti-button-container" 에 해당하는 내용을 empty로 비워주고 변경할 내용을 추가하고 onMBTIChanged() 함수가 적용된다. window.onMBTIChanged = async function() { cons..

댓글에 프로필 사진과 사용자 이름을 추가하는 기능을 구현하였다. const post_HTML = ` ${docSnap.data()["title"]} ${docSnap.data()["content"]} ` const post_Btn = ` 글 수정 글 삭제 ` Promise.all([ getUserDisplayName(postCreatedBy), getUserPhotoURL(postCreatedBy) ]).then(function(response) { const [userName, profileURL] = response document.getElementById("post-creator-profile").src = profileURL; document.getElementById("post-creator-..

[Java script] Document.getElementById() : Document.getElementById() 메서드는 주어진 문자열과 일치하는 id 속성을 가진 요소를 찾고, 이를 나타내는 Element 객체를 반환합니다. ID는 문서 내에서 유일해야 하기 때문에 특정 요소를 빠르게 찾을 때 유용합니다. Element - Web API | MDN **Element**는 Document 안의 모든 객체가 상속하는 제일 범용적인 기반 클래스로 공통 메서드와 속성만 가지고 있으며, 특정 요소를 더 상세하게 표현하는 클래스가 Element를 상속합니다. 예를 들어 HT developer.mozilla.org 구문 document.getElementById(id); document -> 웹문서 " ...