클라이언트/JavaScript(7)
-
[자바스크립트(JavaScript)] Sort(sorting) 배열요소 정렬
같은 배열을 복사해서 정렬을 한다고 가정해보자 원래 배열은 건드리지 말고 똑같은 배열을 복사해서 수정하고 싶다고 했을때 sortedArray = [1,3,5,6] (기존 배열) 을 newArray = sortedArray.sort() 하면 sortedArray도 바뀐 다는 것이다. 그 이유는 메모리의 저장된 데이터 주소값이 같기 때문이고 새로운 배열에 복사 하고싶다면 [...sortedArray](배열을 풀고 다시 묶는 방법) 또는 sortedArray.slice() 를 사용해야 한다. 그래야만 데이터 주소가 따로 저장이 되기 때문에 원래 배열은 냅두고 복사한 배열만 마음대로 사용 할 수 있게된다. ((a,b) => a-b)) 오름차순 배열에서 1번2번을 먼저 비교한다. a에 2번인덱스가 오고 a에 1번..
2024.02.23 -
[자바스크립트(JavaScript)] 배열 메소드 (array method)
배열의 요소 접근 1. pop pop은 배열의 맨 마지막 index를 없앤다. 2.shift shift는 배열의 맨 앞 index를 없앤다. 3.unshift unshift는 맨 앞의 index 값을 추가한다. 4.splice fruits.splice(1,1,"포도") 1,1은 1번째 index부터 1번째 index까지 지우고 "포도"를 넣어라 라는 의미. 5. slice let slicedFruits = fruits.slice(1,2); 1번째 부터 2번째 '전'까지 배열로 만든다. 그렇기 때문에 2번째 index값만 남는다.
2024.02.23 -
[자바스크립트(JavaScript)] to-do list 만들기
1. form , input , value function handleTodoSubmit(event) { event.preventDefault(); //submit기본 이벤트 새로고침 막기 const newTodo = toDoInput.value; toDoInput.value = ''; //input에 빈값 넣기. paintTodo(newTodo); //painTodo실행하고 newTodo넣어서 보내기 } toDoForm.addEventListener('submit', handleTodoSubmit); // toDoForm에 submit이벤트 추가하고 실행되면 handleTodoSubmit. 2. to - do list 나타내기 function paintTodo(newTodo) { //todo를 그리는 ..
2024.02.23 -
[자바스크립트(JavaScript)] 랜덤명언, 랜덤 배경 만들기
바닐라JS로 작업 랜덤 명언 const quotes = [ { quots: 'Just Do it !!', author: 'nike ', }, { quots: 'Keep going man !!', author: 'just EunBeom ', }, { quots: "When you have a dream, you've got grab it and never let go 꿈이 있다면, 그 꿈을 잡고 절대 놓아주지마라.", author: 'Carol Burneet ', }, { quots: 'The future depends on what we do in the present 미래는 현재 우리가 무엇을 하는가에 달려 있다.', author: 'Gandi ', }, { quots: 'Resolve to perfo..
2024.02.23 -
[자바스크립트(JavaScript)] 크롬 앱 만들기(Vanilla JS)
노마드 코더의 바닐라 JS 강의를 보며 바닐라 자바스크립트로 크롬 앱을 만들어 보았다. 로그인 기능 만들기 maxlength="15" type="text" placeholder = "What is your name?"/ Log In 추가로 input type이 text가 아닌 submit이면 버튼을 누르거나 엔터를 누르면 유저가 작성한 form이 submit된다. 하지만 submit이 되면 될때마다 페이지가 새로고침이 된다. 이러한 문제를 해결하려면. const loginForm = document.querySelector('#login-form'); const loginInput = document.querySelector('#login-form input'); const link = document...
2024.02.23 -
[자바스크립트(JavaScript)] 데이터 타입 (Data Type)
배열(Array) 배열의 목적은 하나의 variable(변수) 안에 데이터 타입의 list를 넣는 것 그리고 데이터 타입 들을 그룹 화 시키는 것. 배열을 만드는 법 은 아주 간단하다 . const whatThe = ["a" , "b" , "c" , "d"]; //이처럼 [ ] 안에 아무거나 넣으면 된다. //array의 값을 불러오기 const whatThe = ["a" , "b" , "c" , "d"]; console.log(whatThe[2]); //arry의 값을 불러오려면 []안에 숫자를 적는다. //array의 값에 추가하기 variable 값의 .push를 쓴다. whatThe.push("e"); 이 외에 배열에 대한 메소드 들은 상당히 많다. 자바스크립트에서 가장 중요한 개념이자 꼭 숙련해..
2024.02.22