lflov

안녕하세요 저희같은 상남자에겐 긴말이 필요없습니다 스크린샷 보여드립니다 HTML / JS / CS 코드 리뷰 한번 기대하 쇼쇼쇼

심화개념 2 . AJAX (Asynchronous Javascript And Xml) > js에 내장된 XMLHttpRequest 객체를 이용하여 페이지를 새로고침하지 않고도 필요한 데이터를 비동기적으로 불러오는 기법을 말한다! > 백엔드의 데이터를 프론트엔드로 불러오는 것 Xml : 데이터를 태그 방식으로 하는 방식 > xml 무겁다 - 데이터도 크고 시간도 오래 걸린다 > 그래서 현재는 json 형식을 사용합니다! 예시) 더보기 버튼을 클릭했을때 ajax가 없을경우엔 새로운 페이지를 나타냈어야 했는데 ajax 사용하면 더보기 버튼 클릭시에 데이터만 json으로 불러와서 DOM API를 이용하여 가능하다 Ajax 순서 1. 화면이 표시가 완료되고 2. 이벤트가 발생 3. 콜백되어 AJAX데이터 불러옴 ..

심화 개념 1. 클로저 > 내부함수가 실행시점을 포함해서 외부함수의 맥락에 접근할 수 있는것 > 어떤 함수를 정의할때 외부 스코프에 정의된 변수들까지 캡쳐해서 함수가 실행될 때 사용할 수 있도록 합니다. >> 정보 은닉과 캡슐화를 제공할수 있다! 어떤 함수를 만들면 해당 함수가 선언 했을때랑 실행했을때의 타이밍이 다르다 어떤 변수 b가 있는데 선언시에는 0이었는데, 실행될때 시점에는 b가 2가 된다 > 선언될때의 b의 값과 실행됬을때의 b의 값이 다르다 >> 실행될때의 변수 b의 값이 아닌 선언되는 시점의 변수 b를 사용하고 싶을때 사용한다 >>>어떤 함수를 정의할때 외부 에 선언된 변수 캡처하여 선언시점에 사용할수 있도록 한다! 예시 ) Function createTodayExchangeRate(won..

안녕하세요 오늘은 이벤트 처리하기 해볼거에요~ 여기서 이벤트란 : DOM기반의 요소들은 event를 감지해서 그 이벤트가 감지되었을 때 원하는 코드가 실행하도록 할수 있어요! 대표적인 이벤트의 종류로는 click : 해당 객체 클릭했을때 mousemove : 해당 객체 위에 마우스가 이동했을때 keypress : 해당 객체가 선택된 상태에서 키보드 입력이 발생했을때 submit : form의 전송 ( submit) 버튼이 눌렸을때 load : 해당 객체가 화면에로딩이 완료되어 화면에 표시될때 이때 이벤트가 실제로 발생할시 우리가 상황에서 어떤걸 할거야 미리 정해놓는게 이벤트 리스너이다! 이벤트 리스너의 생성방법은 element.addEventListener('이벤트명' , 함수명) ; 이벤트명의 이벤트가..

오늘은 DOM 에 대해서 알아볼까요우~ DOM(document object model) 이란? > 프로그래밍 언어에서 HTML문서의 정보들을 다룰 수 있게 해주는 프로그래밍 인터페이스다 > HTML과 javascript 사이에 중간 매개체 느낌이다! 우리가 작성한 코드. ------> html 마크업이 화면이그려질때 나오는 것들이 요소(element)를 연결해 준다 근데 이걸 웹 브라우저가 Document object로 변경하여서 나오는것이 DOM이다. 그리고 우리가 작성한 javascript 코드가 DOM객체를 조작하여 화면에 나타내게 해주는거다 위 내용을 이쁘게 말하면~? 두둥 탁! > html로 작성된 화면 요소들을 웹 브라우저가 해석하고 프로그래밍 가능한 인터페이스로 제공하는 객체 모델을 의미한다..

오늘은 html에 javascript 적용하는법을 알아볼게요!! - 인라인 스타일 : html 태그에 이벤트 속성으로 직접 작성 ( ) - 내부 스크립트 : 태그 내부에 작성하는법 - 외부 스크립트 : js파일에 작성후 import로 적용하는법 요런식으로 import하면 된다. 3가지 방법이 있다!

1. 블록 코드는 중괄호로 묶을수 있는데 그것을 코드 블록이라고 부른다네요! { 실행코드 } 여기서 함수 블록 과 조건문/반복문 등의 블록은 다른 성질의 블록이다!! >>>>> 함수 블록내에 선언된 변수는 함수 밖에서 사용할 수 없어요!! 2. 스코프 스코프는 변수를 선언할 때 그 변수를 어디서 접근 가능한지를 정의하는 영역을 의미하네요~ - 전역 스코프 : 블록 바깥에 그냥 선언된 변수 > 모든곳에서 사용할수 있어요 - 지역 스코프 : 블록 내부에 선언된 변수 블록은 함수 블록과 그냥 블록은 다른 의미이므로 2가지로 나눠진다! > 블록 스코프 : 일반적인 블록(조건문/반복문 등)에 선언된 변수 > 블록 스코프에 선언된 변수 - var로 선언된 변수 : 모든 스코프에서 사용 가능(public) - let..

안녕하세요 여러분~ 오늘은 JavaScript에 함수를 알아볼게요~ 함수는 독립적인 실행 코드를 하나로 묶어둔걸 의미한답니다. 함수 코드의 양식은 fuction 함수명(매개변수){ 실행코드; } 이런식으로 작성하면 된다구요! 이때 이렇게 함수를 묶어서 작성하는것을 함수의 정의 라고 합니다!! 이렇게 정의된 함수는 호출을 통해 실행할수 있답니다! 수학의 함수 특히 방정식?과 비슷한 느낌이라고 생각하는게 개인적으로 편하더라구요~~ 함수의 입력과 출력은 미리 정해진 방정식에 미지수를 정의하면 해당 미지수에 값을 대입하고 y값을 돌려받는 느낌입니다 수학에서도 함수는 y = f(x) 이렇게 표현하는데 여기서 x가 매개변수 이고 y는 리턴값이라고 합니다! function converDollarToWon(dollar..

오늘은 객체에 대해 알아봐요!!! https://ko.javascript.info/object-basics 객체: 기본 ko.javascript.info 해당 링크에 아주 자세한 설명이 나와있어요! 객체는 다른 자료형과 다르게 다양한 데이터를 저장할수 있따. 객체는 중괄호를 통해 만드는데, let user = {}; 요런식으로 만들면 user라는 객체가 생성된다! > 요렇게 중괄호를 이용해 객체를 생성하는것을 객체 리터럴이라고 한다! 객체를 생성하는 다른 방법은 let user = new object(); 이런식으로도 객체 생성이 가능하다 리터럴과 프로퍼티 객체의 중괄호 안에는 키:값 쌍으로 구성된 프로퍼티가 들어갑니다! let iflov = { name : "iflov" age : 28 }; css와 ..

오늘은 배열에 대해 알아보도록 하즈아 배열이란? 인덱스 기반으로 값을 순서대로 사입할 수 있는 특별한 객체 형태를 의미한다 > 배열은 여러개의 값을 가지고 있는 특별한 객체 형태! 여기서 인덱스는 위치, 0부터 시작하는 정수형 값 수학에서의 수열느낌이 난다 배열은 변수처럼 선언할수 있는데 var array = [10,20,30]; var array = []; // 이것처럼 빈 배열 선언도 가능하다! 이렇게 선언하면 된다 이때 10은 a의 0번째 값을 의마한다 0번째 시작한다!! 위 배열에서 0번째 배열값은 array[0] 의 값은 10이다! - 배열의 값의 삽입 제거 함수 1. push() : 배열의 새로운 값 추가 2. unshift() : 배열의 새로운 값을 0번째 인덱스로 추가 3. pop() : ..