'Developer/Javascript' 카테고리의 글 목록 (2 Page)

2022. 7. 4. 16:37 Developer/Javascript

여러분들이 실무에 투입하면서 발생하는 문제 중 한가지를 알려 드리겠습니다 다름 아니라 제가 겪은 이야기를 열거 하고 이야기 해볼텐대 한번쯤 이런 구조를 만나실거에요 메인 페이지를 A 메인 페이지에서 표출시킨 팝업B 팝업 B에서 표출시킨 팝업C 총 3개의 페이지가 존재 하는 과정중에 C에서 어떠한 일련 작업을 위해 A에 있는 함수를 사용하고 A로 포커스가 가야하고 A에서 요청한 작업이 완료되면 다시 C로 포커스가 이동 되어야 하는 이런 작업이였습니다 사실 정확히는 이런 형태여야 합니다 제일 밑에 A 그위에 B 그위에 C 이 상태로 작업이 끝나서 표출 되어야 하는 것입니다 그런데 지금 크롬에서는 자식창에서 부모창 focus()가 안됩니다 제가 이 문제때문에 한 2일정도를 focus() 함수에 관한 문서를 다..

[javascript]생성자(constructor)

2022. 6. 22. 11:23 Developer/Javascript

여러분 자바스크립트에도 생성자가 있습니다 객체를 함수처럼 호출 하는것이 바로 생성자 입니다 상세히 설명하자면 객체를 생성하는 함수 쯤으로 생각하면 될것같네요 자바로 치면 클래스 라고 할수 있겠네요 자바스크립트는 function 이지만 자바에선 아마 class 겠지요 ?? 코드로 확인해 봅시다 function Fruit (name){ this.name = name; this.fruitName = function() { console.log("이 과일 이름은 " + this.name); } } 자바의 class 처럼 함수명 첫 글자를 대문자로 작성합니다 그리고 이 함수를 new 키워드를 통해서 생성 할 수 있죠 ㅎㅎ 자바의 클래스와 같이 저런 프레임? 틀? 저는 자바 클래스를 프레임 이라고 인지 하고 있거든..

[javascript]Document

2022. 6. 21. 11:56 Developer/Javascript

오늘은 도큐먼트 객체에 대해 알아보도록 하겠습니다 Document객체는 아마 다들 익숙 하시리라 생각이 됩니다 워낙에 자주 쓰이니까요 근데 이 document객체는 window 의 속성중에 하나입니다 알고 계셨나요 ?ㅎㅎ 그런데 대부분 window.document. 으로 사용 하진 않죠 ? 그 이유는 window는 전역 객체라서 어디서든 사용이 가능하잖아요 ㅎㅎ 그래서 생략이 가능한겁니다 자 그럼 document 객체를 어떻게 사용하는지 알아 보도록 합시다 가장 기본적인 선택자 부터 살펴봅시다 id를 갖고 html 태그를 선택 하는 방법을 볼텐대 만약 이러한 태그가 있는데 여기에 style 속성을 추가하고 싶다 라고 한다면 일단 태그를 선택 해야겠죠? 어떤 태그인지 식별을 해야하니까요 var btnWra..

[javascript] 날짜를 표현하는 Date 객체

2022. 6. 16. 13:55 Developer/Javascript

데이터를 가져와서 날짜를 표출 하는 객체인 Date 객체의 사용법을 알아봅시다 백엔드에서 가져오는 날짜 데이터를 바로 쓴다면 상관은 없겠지만 프론트앤드 단에서 날짜를 사용해서 사용자에게 표출 및 조작 해야 하는 상황이라면 javascript에서 날짜를 다룰줄 알아야 합니다 Date객체는 날짜를 다루기에 유용하도록 만들어져있으니 한번 배워보도록 합시다 아 그리고 중요한 부분이 있는데 Date객체는 생성자 함수이므로 함수와 같이 호출합니다 예를들면 java의 class를 생각해보시면 될것같습니다 ㅎㅎ var day = new Date(); var now = new Date(2022, 5, 23); new Date(); 구문에서 day변수에는 오늘 날짜가 저장됩니다 그리고 now 변수에는 제 생일을 넣어줬습니..

[javascript]콜백

2022. 6. 15. 15:50 Developer/Javascript

콜백은 가장 중요합니다 햇갈리기도 하구요 다른 사람들이 작성해놓은 소스들을 보면 왜 이렇게 해놨을까 이게 뭐지 하며 의문을 가지는 소스들도 많이 있습니다 초심자들이 가장 햇갈려하는 콜백입니다 자바스크립트에서는 콜백을 매개변수로 지정합니다 많이 햇갈리시죠 자 그럼 각설 하고 소스로 확인합시다 var callback = function (data, callb){ var data2 = "hi"; if (data == "devJ") { data2 += data; } callb(data2); } callback("devJ", function(result){ console.log(result); }); //hidevJ callback("hi dev", function(result){ console.log(resul..

[javascript]리스너

2022. 6. 15. 15:34 Developer/Javascript

이부분은 꼭 알고 꼭 숙지해야하는 부분입니다 리스너 즉 이벤트 리스너 라고 불리는 녀석입니다 항상 리스닝 하고있는 상태이기때문에 리스너 라고 부릅니다 예를들어 우리가 버튼을 클릭하거나 윈도우객체가 로드 되는 시점에 어떠한 동작을 하게 한다던가 이러한 방식이 바로 윈도우 리스너 입니다 가장 간단한 리스너 하나를 예로 봅시다 window객체가 로드될때 실행되는 리스너는 다들 아시리라 생각합니다 window.onload = function () { console.log("윈도우 객체가 로드되었어요"); } 이와 같이 사용하기도 하고 다른 방법은 html에 직접 삽입하는것입니다 하지만 추천하는 방법은 아닙니다 기본적으로 html과 js와 css와 백앤드 언어는 분리되어야 유지보수가 편하고 복잡하지 않습니다 간단..

[javascript]배열

2022. 6. 10. 16:42 Developer/Javascript

정말 자바스크립트를 사용하는 데에 있어 배열은 필수입니다 선언은 간단합니다 대괄호를 이용해 선언합니다 var array = [1,2,3,4,5]; 이와 같이 선언하고 배열에서 자주 사용되는 여러 가지 메서드가 있습니다 먼저 가장 기본적인 길이를 알려주는 메서드는 length입니다 array.length; 이와 같이 입력하면 아마 5라는 값이 나올 겁니다 concat 메서드는 서로 값을 합쳐줍니다 위의 배열에 array.concat(6,7); 하면 array의 값은 [1,2,3,4,5,6,7] 이 됩니다 array.reverse()는 인자가 없고 말 그대로 배열 내용을 통째로 바꿉니다 위에서 1,2,3,4,5,6,7 이였으면 7,6,5,4,3,2,1로 변경됩니다 그리고 중요한 push입니다 배열의 마지막에..

[javascript]함수

2022. 6. 10. 11:23 Developer/Javascript

자바 스크립트 함수는 무엇일까 학교 수학 시간에 들었던 함수를 들었던 기억은 다들 있을것이다 그 원리는 같다 어떠한 값을 넣어 내부적인 식에 의해 원하는 값을 돌려주는 그게 바로 함수이다 예를 들어 숫자 두개를 넣어 두 숫자를 합하는 함수를 만들어 봐야겠다 라고 한다면 //값을 삽입하고 받아올 변수 var num = 0; var num2 = 1; var result = 0; function add ( firstNum , secondNum ){ return firstNum + secondNum; } result = add(num, num2); 아주 아주 간단한 함수를 하나 만들어보았다 이 방식은 일반적으로 쓰는 함수의 형태이다 다른 형태로도 가능한데 이것은 조금 다른 형태이다 var result = fun..

[javascript]자바 스크립트 기초

2022. 6. 9. 11:09 Developer/Javascript

일단 자바 스크립트의 장점부터 이야기 해보겠다 자바 스크립트가 좋은 이유는 절차, 객체, 함수 형으로 모든 것을 활용 가능하고 이러한 기법을 활용 할 수 있다는것이 가장 큰 장점이다 그리고 백앤드 언어인 자바처럼 내용이 변경되면 서버 재시작 필요없이 클라이언트 단에서 바로 변경이 확인 가능한다는 것이 그 장점이라고 볼 수 있다 자 그럼 자바 스크립트의 기초적인 내용을 서술한다 변수 변수를 지정할때 아래와 같이 초기화 한다 (이 초기화 한다라는 말은 변수를 지정하면서 값을 삽입 한다라는 의미정도로 이해하면 된다 ) var testText = 'test'; var testText2 = "test"; 자 변수를 초기화 하면서 의문이 var 는 무엇인가에 대한것인데 variable 의 어원이다 뜻은 변수 라는 ..

[javascript]ajax 공통 함수로 만들어 사용하기

2022. 6. 2. 14:53 Developer/Javascript

자주 사용하는 ajax를 공통 함수로 만들어서 사용하는 코드이다 이는 자주사용되는 만큼 코드 수를 줄이고자 함이다 function ajaxCmm(type, url, param, callback) { $.ajax({ type: type, url: url, data: param, success: function(data, status, xr) { return callback(data); }, error: function(xhr, status, error) { return callback(data) } }); } 호출은 아래의 구문처럼 한다 ajaxCmm(type, url, param, function(data) { console.log(data) }); 지정한 형태로 받아오고 싶다면 공통 함수에 파라미터 하..

티스토리툴바