study/JavaScript

자바스크립트에는 원시 자료형과 참조 자료형이 있다. 원시 자료형은 복사될때 값을 다른 메모리에 할당하기 때문에 원본과 복사본이 서로에게 영향을 주지 않는다. 하지만 참조 자료형의 경우 변수에 할당될때 메모리의 주소값을 할당하고, 복사될때도 주소값을 복사하기때문에 같은 값을 가리키게 된다. 그래서 복사본을 변경할 경우 의도치 않게 원본값까지 복사되는 상황이 발생할 수 있다. 따라서 얕은 복사와 깊은 복사를 잘 이해해야 한다. // 원시 자료형 let a = 1; let b = a; console.log(a); console.log(b); b = 2; console.log(b); console.log(a); // 복사값인 b를 변경해도 원본 a에는 영향을 주지 않는다 // 참조 자료형 const c = [1..

07장 연산자 산술 연산자 피연산자를 대상으로 수학적 계산 수행해 새로운 숫자 값을 만듬. 이항 산술 연산자 +(덧셈) -(뺄셈) *(곱셈) /(나눗셈) %(나머지) 단항 산술 연산자 ++(증가) --(감소) + ( 먼저 피연산자의 값을 증가/감소 시킨 후 나머지 연산 증가/감소 연산자가 피연산자의 뒤에 있을 경우 => 먼저 연산을 수행한 후 피연산자의 값을 증가/감소 var x = 5, result; // 선 할당 후 증가 result = x++; // result(5), x(5->6) console.log(result, x); // 5 6 // 선 증가 후 할당 result = ++x; // result(7), x(7) console.log(result, x); // 7 7 // 선 할당 후 감소 r..

06장 데이터 타입 숫자 타입 1. 자바스크립트는 모든 수를 실수로 처리함. 그래서 정수로 표시되는 수끼리 나누더라도 실수가 나올 수 있음. 📂 ex 1 var integer = 10; // 정수 var double = 10.123; // 실수 var negative = -10; // 음의 정수 2. 정수, 실수, 2진수, 8진수, 16진수 리터럴 모두 메모리에 배정밀도 64비트 부동소수점 형식의 2진수로 저장되나 2진수, 8진수, 16진수를 표현하기 위한 데이터 타입이 제공되지 않기 때문에 해당 값을 참조할 경우 모두 10진수로 해석함. 📂 ex 2 var integer = 65; // 10진수 var binary = 0b01000001; // 2진수 var octal = 0o101; // 8진수 va..

05장 표현식과 문 값 표현식이 평가되어 생성된 결과 . 리터럴 사람이 이해할 수 있는 문자, 또는 약속된 기호를 사용해 값을 생성하는 표기법. (값을 생성하기 위해 미리 약속한 표기법) 자바스크립트 엔진은 런타임에 리터럴을 평가해 값을 생성함. 📂 ex // 숫자 리터럴 3 // 문자열 리터럴 'Hi Hello' // 객체 리터럴 { name: 'Harry', age: 13 } // 배열 리터럴 [10, 20, 30] // 함수 리터럴 function() {} 표현식 값으로 평가될 수 있는 문. 다른 표현식의 일부가 되어 새로운 값을 만들어 낼 수 있음. 📂 ex // 리터럴 표현식 100 'abcde' // 식별자 표현식(선언이 이미 존재한다고 가정) sum person.age array[3] // ..

04장 변수 4.1 변수란 무엇인가? 왜 필요한가? 변수란? 변수(Variable) : 하나의 값을 저장하기 위해 확보한 메모리 공간 자체. 또는 그 메모리 공간을 식별하기 위해 붙인 이름. 프로그래밍 언어에서 값을 저장하고 참조하는 메커니즘이며 값의 위치를 가리키는 상징적인 이름이다. 변수 이름(변수명) : 메모리 공간에 저장된 값을 식별할 수 있는 고유한 이름 변수 값 : 변수에 저장된 값 할당(대입, 저장) : 변수에 값을 저장하는 것 참조 : 변수에 저장된 값을 읽어들이는 것 변수는 왜 필요한가? 사람이 이해할 수 있는 언어로 명명한 변수 이름을 통해 변수에 저장된 값의 의미를 명확히 할 수 있다. 따라서 가독성을 높일 수 있으며 개발자의 의도를 정확하게 나타내고 이해하기 쉬운 코드를 작성할 수 ..

Vanilla JS로 댓글 기능이 있는 게시판 만들기_3일차 🧱 3일차 구현 내용 3일차에 목표로 했던 부분이다! 그리고 드디어 성공했다😎 list li에 클릭이벤트 걸기 1-1. li를 클릭시 댓글 영역이 slideDown 효과와 함께 나타나고 다시 클릭하면 slideUp 효과와 함께 사라진다. 삽질 n시간만에 드디어 해결! 그래서 오늘은 어떤 문제가 있어서 어떻게 해결했는지를 간략하게 써보려고 한다. 문제1 listLis.forEach(function(listLi){ listLi.addEventListener('click', function(event){ // .contains() : class의 유무를 확인 if (event.target.replyBox.classList.contains('show'..

Vanilla JS로 댓글 기능이 있는 게시판 만들기_2일차 🧱 2일차 구현 내용 2일차에 목표로 했던 부분은 아래와 같다. list li에 클릭이벤트 걸기 1-1. li를 클릭시 댓글 영역이 slideDown 효과와 함께 나타나고 다시 클릭하면 slideUp 효과와 함께 사라진다. 댓글작성버튼 클릭시 유효성 검사(댓글 작성자, 댓글 내용) 2-1. 댓글 작성자 또는 댓글 내용이 비어있다면 alert과 함께 해당 부분에 포커스 주기 목표를 세우긴 했는데 뭔가 좀 막혀서 엄청 삽질만 했다. 그래서 오늘은 구현 내용이라고 하긴 했지만 그냥 삽질 기록이다 🙄 list li 클릭이벤트 const btnAddReply = document.getElementsByName('btnAddReply'); const li..

Vanilla JS로 댓글 기능이 있는 게시판 만들기_1일차 📚 프로젝트 주제와 목표 Vanilla JS만 사용하여 댓글 기능이 있는 게시판을 만드는 과제를 하게 되었다. 솔직히 걱정은 좀 됐지만 안될때 조금씩 참고해보라고 원본 소스파일을 주시기도 했고 구글링도 있으니까 일단 해보기나 하자는 생각이다. 목표는 최대한 원본 소스를 참고하지 않고 기능을 똑같이 구현해보는 것이다. 💻 필요한 기능 이 프로젝트(라기엔 많이 사소하지만 어쨌든)에 필요한 기능은 아래와 같다. 순수 자바스크립트(Vanilla JS)로 작업할것 글쓰기 버튼을 누르면 상단의 글 목록에 작성한 게시글이 등록된다. 2-1. 작성자, 제목, 내용 중 하나라도 빈 값이 있다면 게시글을 등록하지 않고 오류 메시지를 띄운다.(유효성 체크) 2-2..

HTML의 구조 HTML 웹페이지는 HTML, CSS, Javascript 각각 세개의 서로 다른 언어가 합쳐져 있는 구조이다. 세개의 언어는 브라우저에 내부에 있는 서브 프로그램인 렌더링 엔진과 자바스크립트 엔진이라는 해석기에 의해서 글자를 해석하게 된다. 렌더링 엔진은 HTML과 CSS를, 자바스크립트 엔진은 Javascirpt를 해석한다. 따라서 자바스크립트 엔진이 해석할 수 있는 문법으로 js파일을 작성해야 한다. 변수 기본형 number var a = 10; number 타입. 숫자를 저장한다. string var b = "Javascript"; var c = "10"; string 타입. 문자열을 저장한다. 내용이 숫자인 경우에도 " "로 감싸져 있다면 문자로 취급한다. Boolean var ..

html 0 count 1 0 count 2 0 count 3 css body { background: #FDFFCF; } .flex { display: flex; justify-content: space-between; margin: 100px auto; width: 50%; } .count-num { text-align: center; font-size: 35px; font-weight: 700; } JS $('.count-num').each(function() { // .count-num에 각각 적용 var $this = $(this), countTo = $this.attr('data-count'); // $this = 첫번째~세번째 .count-num // countTo = 첫번째~세번째 .cou..