개발 노트

댓글창 만들기. 1. 먼저 만드는 순서가 중요하다. 어떠한 변수가 필요하고 어떠한 인풋, 어떠한 아웃풋이 필요할지 어떤 이벤트가 필요한지 고민을 해야한다. 입력값이 무엇인지 ? 알아내는 것이 제일 중요하다 let, const = let은 수시로 변해야 하는 값, 원시데이터 값이 변한다 싶으면 let을 쓰는 것이 낫다. const는 바뀔일이 없는 값에 넣어야한다. 변수값으로 무엇을 쓸지도 생각하면서 해야한다. CRUD C creat 댓글 입력 폼에 입력 후 submit을 누르면 리스트에 추가 - 입력 폼 값을 추출해내기 e.target.content.value 값을 통해 입력 폼 입력만 추출 할 수 있다. 만약 입력 폼이 비어있다면 경고 창을 띄운다 (이때 리스트에 추가되면 안된다.) - if문을 이용해 ..

1. 로또 2. gnb 3. 슬라이드 1. 로또 프로그래밍 무엇을 만들 때 순서 정의 아주 많이 쓰는 데이터 타입 "array" , "object" 결국 로또도 배열 array나 object를 잘 하려면 기본적으로 반복문, 조건문을 잘 해야함 const btn = document.querySelector("#btn") const liList = document.querySelectorAll("#lottoul > li") const lottoul = document.querySelector("#lottoul") const getclass = function(num, min, max){ if (min < num && num [lottorandom[j],lottorandom[j+1]]=[lottorandom[..

setTimeout setInterval # DOM은 아님 window. 객체 안에 있기 때문에 브라우저가 기본으로 제공해주는 것. JS스펙과 무관 콘솔 1 ..... 1초 텀 콘솔 2 콘솔 3 출력하고 싶을 때 사용, ## 문법 window,setTimeout(callback, 1000) window.setInterval(callback, 1000) 1초 뒤에 콜백을 호출시키는 것 callback : function = 실행할 함수 1000 : number = 시간 // 1초 둘 다 동일하다. window.setTimeout(callback, 1000) 오타가 많이 날 수 있다. setTimeout(function(){} , 1000) 함수를 쓰고 , 콤마 표시 먼저 써놓기 #setTimeout = 2..

목차 1. DOMContentLoaded 2. Form 1. DOMContentLoaded 브라우저가 로드가 끝나면 자동적으로 실행시키게 하는 코드. "최초에 한 번"만 발동하고 메서드 호출 자체가 로드가 끝나면 >>> 실행되게 한다. HTML은 html을 다 읽었을 때 실행이 된다. html의 로드가 끝나면 사용자는 html을 볼 수 있게 된다. 하지만 html 안에 java가 있다면 html은 java + html 이 다 실행이 돼야 화면이 뜨게 된다. html이 로드되고 java가 실행된다면 html의 실행시간을 조금 더 줄일 수 있게 된다. 이러한 일을 가능하게 해주는 것이 DOMContentLoaded 이다. 2. Form value = 기본적으로 가지고 있는 값들이다. submit을 누르면 기..

목차 1. Event 1.1 Event 등록 1.2 Event 삭제 1.3 Event 객체 2. 로또 Event 란 Event 브라우저에서 랜더되는 영역에서 일어나는 것 버튼을 클릭하거나, 마우스오버, 마우스 아웃 등에 효과를 주는것을 말한다 ' Click ' ' Mouseover ' 'Mouseout ' 이러한 일들이 일어났을 때 **특정함수를 호출한다 브라우저가 이미 어느정도 구현을 해놓은 기능이기에 우리는 규칙에 맞게 사용하기만 하면 된다. Event 등록 ** 문법 1. html에서 직접넣기 예전에 많이 쓰던 방식이다. html

목차 1. 이론 2. 배열 복습 3. 로또 만들기 1. 이론 DOM document object model 브라우저는 HTML, CSS, JS를 해석하는 능력이 있다. DOM은 자바 스크립트를 통해 HTML 을 조작하는 모든 메서드를 말한다. DOM은 자바 스크립트라기 보다는 JS로 HTML을 조작하는 기능을 '브라우저' 가 구현한 것이다. 브라우저가 JS를 활용해서 HTML의 랜더 하는곳에 구현하는 능력을 실현시킨 것이 DOM 이다. DOM은 브라우저가 만들어 준 것이다. BOM = browser object model DOM과 BOM을 합쳐서 WEP APIS 라고 부른다. DOM을 잘 하려면 기본적으로 객체, 메서드, 함수를 잘 알아야한다. JS는 기본적으로 윈도우라는 객체를 준다. JS에서 아무 객..

목차 1. 상속 2. 날짜 3. 삼항연산 1. 상속 js에서의 상속의 개념은 다른 언어에서의 상속과 조금 다르다 JS는 prototype 언어로 객체지향의 상속과는 차이가 있기 때문이다. #객체지향 객체지향은 오래전부터 유지되어 왔던 프로그래밍 방식이다. 서양의 가치관을 품고있으며, 그렇기에 이분법적인 사고를 가지고 있다. 이러한 방식은 상속에도 나타난다. " 의자 " 라는 추상적인 단어가 있다. 이것을 구체화 시켜 "팔걸이 의자, 컴퓨터 의자, 철로만든 의자, 나무로 만든 의자." 등등 구체화를 시킬 수 있다. 이렇게 "의자" 라는 개념을 만드는것이 class. 구체적인 실체를 가지는것을 인스턴스 라고 부른다. 1. 객체지향 언어는 큰 분류인 class를 만든다. 2. 이 class 객체에 세세한 분류..

목차 1. 메서드 2. 생성자 함수 1. 메서드 메서드 = 함수 기본 함수 식 function showMessage(){} const showMessage = function (){} const showMessage = () => {} 메서드 const user = { name: '' sum: function(a,b){ return a + b } } user. sum() user. sum(1,2) // = 3 객체 안에도 함수를 넣을 수 있다. (함수도 값이다) 객체 안에 들어가있는 함수 = 메서드 **This 메서드에는 This라는 것이 있다. 점 표기법 앞에 있는 객체를 가르킨다. **this const user = { name:'이름', sayhi:function(){ console.log(this..

목차 1. 함수표현식 2. 콜백함수 3. 화살표함수 4. 객체 1. 함수 표현식 const로 함수를 지정하는것 . const showMessage = function() {} 장점. 1. 호이스팅이 일어나지 않는다. (대입연산자 함수도 무언가의 값이다.) 2. 함수명이 없다. 일회용으로 사용하는 함수의 경우 함수명을 지정하지 않는다. function showMessage(){ console.log("hello world!") } console.log(showMessage) 함수를 호출하지않고 함수 이름만 console.log 했을 때 나오는 값 const fn = showMessage fn() 새로운 변수를 만들고 거기에다가 함수 이름을 넣었을 때 가능 const showMessage2 = functio..

목차 1. 함수 사용 이유 2. 함수 선언 - 호이스팅 3. 함수 호출 4. 매개변수, 인자 5. 콜스택 6. 재귀함수 1. 함수란 ? 대부분 함수는 어떠한 최소단위의 동작을 만들 때 사용 또한 중복 코드를 피하기 위해서 사용. 기본 함수 형태. function message () { console.log("hello world") } message() 코드를 입력하고 저장하면 1. 브라우저가 코드를 읽고 실행 2. 브라우저는 html > css > js 순으로 로드, 코드를 실행 2. 함수 선언 function message (){} 예약어 함수 이름 - 호이스팅 { var text = "javascript } console.log(text) var 가 지역변수로 들어가 있으나 var는 ** js 로드..