본문 바로가기
반응형

JavaScript14

[javascript] 함수 선언식, 함수 표현식 갑자기 열정 넘쳐서 미뤄왔던 javascript 관련 포스팅 목록을 작성하고 있다. 시간이 있을 때 작성해놔야한다는 것은 만고불변의 진리다. 오늘 작성하고자 하는 내용은 javascript에서 함수를 작성하는 방식에 관한 내용으로 기존의 방식으로 function을 선언하는 함수 선언식과 변수처럼 함수 내용을 써내려가는 함수 표현식 두 가지에 대해 알아보도록 하자. [javascript] 함수 선언식, 함수 표현식 함수를 정의하는 방식과 각 방식별 간단한 사례를 살펴보자. 1) 함수 선언식 일반적으로 다들 많이 쓰는 함수 정의 방식이다. doSomething(); // 함수 선언식 방식 function doSomething() { alert("test function!"); console.log("blah.. 2019. 5. 21.
[javascript] 호이스팅 (hoisting) 이란? 호스팅(hosting)은 많이 들어봤는데 호이스팅(hoisting) 은 생소한 단어였다. 호이스팅의 개념은 javascript 변수 범위를 설명하면서 자주 언급되었는데 오늘 해당 용어의 의미와 어떤 개념인지 확인해보도록 하자. [javascript] 호이스팅 (hoisting) 이란? 호이스트(hoist)는 건축/건설이나 화물 운반에 사용되는 장비로 화물 등을 들어올리는 업무를 수행한다. 즉, 아래에 위치한 것을 위로 끌어올리는 역할을 하는 장비인데 이 단어 자체로도 '들어올리다' 라는 의미를 가지고 있다. javascript에서의 호이스팅(hoisting)은 코드에 선언된 변수 및 함수를 코드 상단으로 끌어올리는 것을 말하며 이는 변수 범위가 전역 범위인지 함수 범위인지에 따라 다르게 수행될 수 있다... 2019. 5. 14.
[javascript] 변수 선언 방식의 차이 : var name / $name javascript에서 변수를 선언하고자 할 때 기본적으로 'var 변수명' 의 형태를 많이 사용한다. 뭐 그마저도 귀찮다면 var 도 생략하고 변수명에 값을 할당하는 방식을 쓰기도 하는데, 종종 보이는 '$변수명' 의 형태로 정의한 내용에 대해 차이점을 알아보고자 한다. [javascript] 변수 선언 방식의 차이 : var name / $name 다들 아시다시피 변수 선언 시 사용되는 예약어인 var는 variable의 약자로 선언하는 위치에 따라 global scope, function scope로 사용된다. 간단하게 변수 범위에 대해서 짚고 넘어가자. function 내부에서 선언한 변수는 지역 변수(function scope)로 해당 함수 내에서만 접근 및 호출가능하다. 정의한 함수 밖에서 호.. 2019. 5. 13.
JSON list 검색 : 특정 필드의 값이 일치하는 JSON Object 추출하기 오늘도 일하다가 유용한 함수를 정의해두고 미래의 나를 위해서 블로그에 옮겨봅니다. 검색결과를 javascript에서 처리하기 편리한 json 방식으로 전달받아두고 이 json list 목록에서 특정 내용을 검색하기 위한 function을 정의하였습니다. JSON list 검색 : 특정 필드의 값이 일치하는 JSON Object 추출하기 개발하는 사람마다 정의하는 내용이 일부 다르겠지만 제가 정의한 방식은 아래와 같았습니다. 조회 성공여부, 실패 시 실패사유, 검색결과 Object를 하나의 JSON Object로 선언하고 내부적으로 검색결과 Object는 List 형태로 구성되어 있습니다. KK { TYPE : "SUCCESS" MESSAGE : "성공" KK_LIST : [{SEQ : 1, NAME : .. 2018. 8. 24.
MVW (Model-View-Whatever) MVC는 Model-View-Controller 방식을 의미하는 것으로 가장 기본적인 디자인패턴이다. 이와 비슷한 느낌의 단어인 MVW도 디자인패턴을 말하는 걸까? MVW (Model-View-Whatever) MVW은 Model-View-Whatever를 의미하는 것으로 Whatever가 * (asterisk) 의 뜻을 가진다. Contoller, ViewModel, Apadter 등 다양한 방식의 디자인패턴을 지칭하는 의미로 사용된다. MVW가 등장하게 된 배경은 AngularJS가 이 개념을 선언하면서부터이다. 개발자들이 어떠한 디자인패턴을 선택해야 하는지를 두고 논쟁을 벌이며 시간을 버리는 것을 보고 AngularJS의 프레임워크를 MVW로 선언했다고 한다. 여기서 사용된 Whatever는 '무엇.. 2018. 8. 22.
[자바 웹 개발 워크북] 웹 애플리케이션 환경의 실행과 개발 [열혈강의 : 자바 웹 개발 워크북] 을 보고 요약 및 공부한 내용을 적는 글임을 알립니다. Chapter 01. 웹 애플리케이션의 이해 해당 챕터의 핵심 내용은 C/S 환경의 필요성과 기존 환경과 현재 개선된 환경의 차이점그리고 웹 애플리케이션이 C/S 환경에서 어떻게 실행되며 개발을 어떤식으로 진행하는 지에 대해 이야기 한다. 1) C/S (Client - Server) 환경의 필요성 - 기존 설치식 애플리케이션의 경우 배포가 번거롭고, DB에 연결하기 위한 접속정보 유출의 가능성 존재- 기능을 클라이언트와 서버로 분리하면 서버에서 DB에 접속하기에 접속 정보 유출 가능성이 낮아짐 : 보안 강화- 업무 변화에 따른 변경 사항 반영을 서버쪽에서만 수행하면 되므로 변화에 대한 유연한 대응이 가능- 스레드.. 2016. 2. 3.
javascript로 숫자 형변환하기 javascript를 통해 문자열 형태의 변수를 숫자로 변환해야 하는 경우가 많다. Data로 조회 조건으로 보내거나, 입력/수정 전 script를 통해서 validation 하는 경우,값에 대해 조건을 걸어서 비교가 필요한 경우,문자보다 숫자로 변환하였을 경우에 좀 더 편리하게 코딩이 가능한 경우 등 다양한 이유에서 형변환을 하게 되겠지만1월부터 12월까지의 월 선택값을 숫자로 형변환하면서 겪었던 내용을 바탕으로오늘 포스팅 할 숫자 형변환하기에 대해서 이야기하고자 한다. javascript는 별도로 타입을 명시하지 않고 변수를 선언하기 때문에 var testVal1 = "테스트 값입니다.";alert(typeof(testVal1)); -> 결과값 string // string 형태의 변수로 인식됨 va.. 2016. 1. 26.
폼 추가 및 삭제에 대한 Upgrade code 이전에 올렸던 버튼 클릭으로 폼 생성 및 삭제에 대한 코드의 문제점을 발견하였습니다. http://ojava.tistory.com/trackback/35 이전에 사용하던 코드로는 변수로 선언된 count가 폼 추가 시마다 1씩 증가합니다. 폼 삭제시에는 1씩 감소하겠지요. 만약 5개의 폼이 생성되어 있는 상태라고 가정해봅시다. count는 증가해서 6이 되어있겠죠. 4번째의 폼을 지우게 되면 count는 1이 감소하여 5가 됩니다. 따라서 다시 5번째로 폼을 추가하게 되면 count를 따라 5의 이름을 가진 폼이 또 다시 생성됩니다. 페이지를 이용하는 유저가 순차적으로 삭제하고 추가한다면 얼마나 좋겠습니까 ㅠ_ㅠ 하지만 그렇지 않다는 것. 그리고 그런 점을 고려해서 코드를 구성해야 한다는 것을 다시 상기.. 2011. 8. 9.
버튼 클릭으로 원하는 내용을 복사해보자. 버튼 클릭으로 ~~~ 해보자 시리즈가 되었네요! 딱히 의도하지는 않았는데.... 무튼 찾으면 여기저기 나오는 코드들인데 이를 조합해서 만들어봤습니다. Textarea에 적용되는 코드들이 많았는데 이 코드는 input box에 적용했으니 역시 되지 않을까요? /** * URL 복사를 위한 javascript * @author HyeYoungOh */ function URLcopy(which){ if (window.clipboardData) { var target_data=eval("document."+which); target_data.select(); zone=target_data.createTextRange(); zone.execCommand("copy"); alert("주소가 복사되었습니다. 붙여넣기.. 2011. 7. 6.
버튼 클릭으로 폼 생성과 삭제를 해보자! 버튼만 띡 누르면 폼 또는 원하는 내용이 생성되고 또 버튼을 띡 누르면 그 내용을 삭제하게 만들어 봅시당. 아래의 내용은 만드는데 필요한 javascript 코드입니다. 저의 경우는 input box를 추가하였습니다. 5개를 제한개수로 하였습니다. => 폼 추가 코드 /** * Keyword Form 추가를 위한 Javascript * @author HyeYoungOh */ function addKeywordForm() { /** * 이 부분에는 추가될 부분의 div 이름을 넣으시면 됩니당 */ var addedFormDiv = document.getElementById("addedKeyword"); /** * str로 선언한 부분에 원하는 내용에 대해서 넣어주시면 됩니다. */ var str = '' .. 2011. 7. 6.
반응형