본문 바로가기

전체 글

 (24)
Java Script 'Algorithm' 목차 알고리즘 이란 Big-O 표기법 ◈ 알고리즘 이란 ? 알고리즘 이라고 하면 보통 유튜브의 알고리즘으로 사용자의 경험을 모아 비슷한 데이터를 찾아주는 것으로 알고 있다. 하지만 개발자의 입장에서 보았을 때 알고리즘은 최적화 된 로직이라고 말한다. 정형화된 알고리즘 정렬 과 피보나치 수열 등을 예로 들 수 있다. 문제를 해결하기 위한 일련의 단계적 절차 및 흐름 이라고 말할 수 있다. 알고리즘을 만들기 위해 서는 여러가지 중요하게 여겨야할 것들이 있다. 1. 정확도 - 코드의 오류가 생기지 않고 정확한 결과를 내야하며 2. 메모리 효율 - 용량을 최소화 할 수 있는 것을 생각해야하며 3. 시간 - 코드의 실행시간을 최적화 시켜야 한다. 등 여러가지를 고려해 알고리즘을 완성시켜야한다. 오늘 학습한 Big..
'Java Script '로 웹페이지 이벤트 만들기 오늘은 자바스크립트로 클론 코딩을 했었던 '경일게임아카데미' 홈페이지에 이벤트를 적용해보겠습니다. 먼저 이벤트를 줄 엘리먼트들에게 아래의 코드를 활용해 애니메이션을 추가했습니다. .anim { transition: transform 1s linear, opacity 1s linear; } .off { transform: translateY(3rem); opacity: 0 !important; } anim 클래스에 트래지션 통해 변형의 대한 값과 투명도에 대한 속성을 지정해주었으며 off 클래스에는 변형될 Y축 값과 투명도 값을 넣어 주었습니다. 자바스크립트로 스크롤을 했을때 off 클래스 를 넣어주고 빼면서 페이지에 이벤트를 주려고합니다! const animElems = [...document.getEl..
Java Script '클래스(Class)' 클래스란 ? 상위 생성자를 통해 하위 클래스에게 '메서드' 또는 '객체'의 키를 상속을 하게 된다. 이말은 상위 생성자의 안에 있는 키를 이용해 하위 클래스에서 새로운 값을 부여할 수도 있으며 , 메서드 또한 사용해 함수에 대한 기능을 사용할 수 도 있다. 그러면 프로토타입과 같은 것 아니냐라는 생각이 들 수 있다. 하지만 같지않다. ▶먼저 프로토타입에 대해서 잠깐 설명하면 프로토타입은 하위객체가 생성자함수의 프로퍼티와 메서드를 가져다가 쓰게 된다. 가져다가 쓴다라는 말은 생성자 함수 내부를 찾아가서 그 안에 있는 기능을 찾아오는 것이다. 반면에 클래스는 생성자가 하위 클래스에게 내부 기능을 사용할 수 있게 주는 것이다. 비유를 하자면 프로토타입을 도장이라고 했을때 생성자에서 도장을 만들어 내용을 각인하..
Java Script 함수 & setTimeout 목차 고차함수 익명함수 재귀함수 setTimeout setInterval ◈고차함수 고차함수란 매개변수로 함수를 사용하거나 리턴 되는 값이 함수인 함수를 고차함수라고 한다. function pleaseCallback(tempLog) { tempLog("안녕"); } pleaseCallback(console.log); 위의 코드를 보았을때 함수를 만들어 매개변수로 아래에 있는 콘솔로그 함수를 넣어주었다. 이럴 경우를 고차함수라고 표현할 수 있다! ◈익명함수 함수명이 정해져 있지 않은 함수를 익명함수라고 한다. .forEach( ()=>{ } ) .sort( ()=>{ } ) 메서드를 사용할때 몇몇 메서드는 함수를 사용하는데 매서드 안에는 함수명이 정해져있지 않는 함수식을 사용하며 이를 익명함수라고 할 수 ..
Java Script event 메서드 , 함수 정리 목차 event 메서드 ` ` (백티) 자바 스크립트를 통해 웹페이지에서 많은 이벤트를 출력할 수 있다. 오늘은 event 에 대해서 알아보았다. ◈event 메서드 ●가장 많이 사용하는 'onclick' 이벤트 입니다~ document.getElementById("btn").onclick = function () { console.log("클릭했습니다"); }; - 웹브라우저에서 클릭이 이루어지면서 함수에 대한 값을 반환 받습니다~ ● .onload 이벤트 입니다~ window.onload = function () { console.log("페이지 로딩완료"); }; - 페이지가 로딩이 된 후 값이 출력 됩니다~ 보통 이미지나 영상 노래 콘텐츠들을 사용할때 쓰게 됩니다. ● window 객체의 onre..
Java Scrip 'Scope' 와 '배열 메서드' 목차 Scope 란 배열 메서드 ◈Scope 란 변수에 접근할 수 있는 범위를 말한다. scope 는 '전역 스코프(변수)' 와 ' 지역 스코프(변수)' 로 2가지가 있다. 말보다 코드로 보는게 훨씬 이해가 쉽기때문에 예시로 아래 코드를 봐보자. let a = 0; console.log(a); // 0 출력 const example { let a = 2 console.log(a) // 2 출력 } 위에 변수는 전역 스코프 아래변수를 지역 스코프 인데 차이가 확실하게 보일 것 이다. '지역 스코프' 는 { } 중괄호 를 사용해 변수의 범위를 제한 하고 있다. 반면에 '전역 스코프'는 변수가 전체에 범위를 가지고 있다. 변수 선언에 대해서 같은 명령어와 변수명을 가진 선언은 할 수가 없지만 전역스코프에서 한..
Java Script - '함수' 목차 선언식 함수 표현식 함수 애로우 함수 같은 함수도 각 다른 코드로 작성할 수 있다. 이 것은 자바스크립트의 버전이 계속 업로드 되면서 단순화 되기도 하며 초기에는 같다고 볼 수 있지만 깊게 들어갔을때 다른 의미를 지닐 수 있다. ◈선언식 함수 function calc( num1 , num2) { // 함수명 과 매개변수 지정 return num1 + num2; // 반환 } const result = calc(1,2); --> 매개 변수에 값을 넣어 반환된 결과를 변수로 지정 console.log(result) // 반환 값 3을 확인할 수 있다. ◈표현식 함수 const calc = function (num1, num2) { return num1 + num2; }; const result = ca..
Java Script DOM & BOM , Prototype 목차 DOM 이란 BOM 이란 Prototype ◈DOM DOM 은(Document Object Model) 약자로 도큐먼트를 객체로 표현하는 문서객체이다. document 문서 구조를 javascript 가 읽을 수 있는 데이터 즉 객체로 변형을 시켜줌과 동시에 java script 로 html 의 수정을 가능하게 한다. console.dir(document) 위 와 같이 코드를 작성하게 됬을 때 연결된 document 가 javascript 로써 데이터화 된 모습을 볼 수 있다. ●도큐먼트와 연결을 하여 데이터를 수정할때 아래와 같은 코드 등을 이용해 접근할 수 있다. document.getElementsByClassName('Class 명') //클래스 document.getElementById('..

티스토리툴바