처음부터 시작하는 Java

['BBB', 'AAA'].includes(column.dataIndex)

- 주변 상태에 대한 참조와 함께 묶인 함수의 조합, 내부 함수에서 외부 함수의 범위에 대한 접근 제공js에서 클로저는 함수가 생성될 때마다 생성됨 - 오직 하나의 메소드를 가지고 있는 객체를 일반적으로 사용하는 모든 곳에 클로저를 사용할 수 있음어휘적 범위 지정 (Lexical scopeing)function init() { var name = "Mozilla"; // name은 init에 의해 생성된 지역 변수 function displayName() { // displayName() 은 내부 함수이며, 클로저 console.log(name); // 부모 함수에서 선언된 변수를 사용 } displayName();}init();ex2function outerFunction() { l..

객체 생성자 함수를 통해서 새로운 객체를 만들고 그 안에 넣고 싶은 값 혹은 함수들을 구현 할 수 있음 객체 생성자를 사용 할 때에는 보통 함수의 이름을 대문자로 시작, 새로운 객체를 생성 할 때에는 new 를 붙여준다 function Animal(type, name, sound) { this.type = type; this.name = name; this.sound = sound; this.say = function () { console.log(this.sound); } } const dog = new Animal('개', '댕댕이', '멍멍'); const cat = new Animal('고양이', '냥냥이', '야옹'); dog.say(); cat.say(); // result : 멍멍 // re..

indexOf => 원하는 항목이 몇 번째 원소인지 찾아주는 함수 // indexOf const superheroes = ['아이언맨', '캡틴 아메리카', '토르', '닥터 스트레인지']; const index = superheroes.indexOf('토르'); console.log(index); // result : 2 findIndex 배열 안에 있는 값이 숫자, 문자열, 또는 불리언일때 찾고 싶은 항목이 몇번쨰 원소인지 ? indexOf 배열 안의 값이 객체, 배열이면 ? findIndex const memu = [ { id: 1, text: '모듬회', done: true }, { id: 2, text: '삼겹살', done: true }, { id: 3, text: '탕수육', done: tr..

객체를 위한 반복문 for ...in Object.entries : [[key, value][key, value]] 반환 Object.keys : [key,key,key] 반환 Object.values : [value,value,value] 반환 const dog = { name: '강아지', sound: '멍멍', age: 3 }; console.log(Object.entries(dog)); console.log(Object.keys(dog)); console.log(Object.values(dog)); for (const key in dog) { console.log(`${key}: ${dog[key]}`); } 위 log 의 순서대로의 결과임

reduce reduce 는 잘 사용하면 정말 유용한 내장 함수임 배열의 총합을 구한다고 해보자 변수 sumEx 는 그냥 대충지은거임 현재 열어놓은 크롬창에 sum이 선언되어있어서..ㅇㅇㅋ const numbers = [1, 2, 3, 4, 5]; let sumEx = 0; numbers.forEach(n => { sumEx += n; }); console.log(sumEx); 결과는 15 여기서 sumEx 를 계산하려고 선언을 하고, forEach 를 사용해서 계속해서 덧셈 해줬음 근데 reduce 를 사용하면 아래와 같다. const numbers = [1, 2, 3, 4, 5]; let sumEx = numbers.reduce((acc, current) => acc + current, 0); con..

spread spread 의 의미 : 펼치다, 퍼뜨리다. 예를 들어 이런 객체들이 있고 새 객체를 만들 때 마다 앞의 객체의 속성을 그대로 가지고 만들어 줬다. 그러면서 속성은 하나씩 추가가 되었는데 이런 식으로 기존의 것을 건들이지 않고 새로운 객체를 만드는 함수가 spread 놀랍다 매우... 그리고 spread 연산자는 배열에도 사용 할 수 있따. 또한 배열에서 spread 함수를 여러번 사용도 가능! ㅗㅜㅑ... rest 객체에서의 rest rest 안에 head 값을 제외한 값이 들어있다. rest 는 객체와 배열에서 사용 할 때는 이런식의 비구조화 할당 문법과 함께 사용된다. 주로 사용할 때에는 rest 라는 키워드를 사용, 그치만 추출 값한 값의 이름이 꼭 rest 일 필욘없다. 이어서 bo..

localStorage = 창을 닫아도 계속 유지 탭 여러개 공유 명시적으로 삭제 될 때 까지 유지 sessionStorage = 창을 닫으면 삭제 세션 기간 동안 사용가능 사용법은 동일하다. 가끔 js 에서 js 로값을 보내려고 할때 사용해보자 상황 ) 어떤 input 에서 이메일을 가져와서 다른 곳에 넣으려 할 때 전송 $("#getEmail").on('click', function () { var getEmail1 = $("#managementId").val(); console.log("getEmail1 : " + getEmail1); var getEmail2 = { "email" : getEmail1 } //스토리지에 저장 key, value localStorage.setItem("getEmail..

거두절미하고 object 값을 확인할 때는 이렇게 해보자 var Obj = 어떤 objVal; for (var test in Obj) { console.log("A : " + test + ", B : " + Obj[test]); } 그러면 막 이런식으로 변수와 해당 값이 뜬다!

원래는 change 를 써서 input에서 값을 다 입력한 후 변동사항을 체크했는데 이런방법이 있다. var emptyMg = $("#" + d.objectName + " input[name=" + d.field + "]"); // 아래는 input값을 다 입력 후 떠날 때 체크 emptyMg.change(function () { $("span").remove('#vout_'+ d.field + ''); }) // 값이 입력되자마자 체크 emptyMg.on("propertychange change keyup paste input",function () { $("span").remove('#vout_'+ d.field + ''); }) 좀 조잡해 보일수 있지만 내용은 .on("propertychange c..

단 한마디로 javascript:void(0) 는 링크이동을 무력화 시킨다. 예제 네이버로 가자! 이러면 네이버로 갈 거임 이러면 해당 ramen 값을 가지고 있는 div 요소로 스크롤이 향함 javascript:void(0) 는 태그는 그대로 쓰고 url, id 를 사용하지 않을 경우에 쓴다. ( ) 안에는 숫자 아무거나 영어 아무거나 넣어도 사용 가능하다. 그리고 void 는 undefined 를 리턴함 ㅇㅇ

https://crivius.tistory.com/1 datepicker 사용방법 인풋태그 날짜 입력할때 달력(캘린더)에서 선택하여 사용하는 소스 기본적으로 필요한 js파일과 css파일 1 2 필요한건 class="datePicker"이며 id를 생략하면 안된다. 안쓰더라도 name값과 같은 값으로 crivius.tistory.com

js 항상 시간을 다루는건 까다롭다고 생각하던중 moment.js 라는걸 알게 되었따 moment.js 는 js에서 시간을 다루기 위한 것이고, 깔끔하고 간결하게 표시할 수 있다. 아래는 특정 시간에 예약을 할 경우의 코드 현재 시간보다 이전의 시간을 예약할 수 없게 만들어보자 // 입력 받아올 날짜 var t1 = moment("입력받아올날짜").format( "YYYY-MM-DD HH:mm"); // 현재 날짜와 시간을 출력 let t2 = moment().format("YYYY-MM-DD HH:mm"); console.log(t1 + "----->t1"); console.log(t2 + "----->t2"); // 현재시간과 t1가 몇분이 차이가 나느냐를 출력 console.log("분차이", mo..

현재시간을 잘라서 사용해보자 ! let testDate = new Date(+new Date() + 3240 * 10000).toISOString().split("T")[0]; let testTime = new Date().toTimeString().split(" ")[0]; let testDateTime = testDate + " " + testTime; console.log(testDateTime + "

아 설명은 나중에 $("#tableId tr").click(function() { var str = ""; var tdArr = new Array(); var tr = $(this); var td = tr.children(); console.log(tr.text()); td.each(function(i){ tdArr.push(td.eq(i).text()); }); console.log(tdArr); var name = td.eq(5).text(); console.log(name); });

진짜 js 파일을 몇번을 수정해도 적용이 안되길래 나는 항상 강력새로고침을 하는 편이라 그거도 안먹히기에.. 마음속으로 모니터 진심펀치 30번 날리고 내가 지금 파일을 잘못찾아서 하고 있나? 이쯤 되면 내가 잘못한건가?하며 내 자신의 사고방식을 바꾸려 나와의 싸움을 할 때 알게 되었다. 그 방법을... ?v= 자바 내부함수를 이용해서 js 파일을 저장 후 출력하는 방식이 아닌 그냥 새로이 호출해서 보여주는거라 바로 반영이 된다. 시간함수를 넣은 이유는 시간은 계속 흐르기 때문에 굳이 내가 숫자를 넣지 않아줘도 시간은 자동으로 바뀌기 때문. 위의 저걸 이런식으로 넣어주고 실행해보자 하핳ㅎ핳ㅎ하하핳ㅎㅎ 당신은 성공을 했다. 그리고 난.. 틀리지 않았다...

closest() 는 특정한 문자열과 일치하는 노드에서 가장 가까운 자신 또는 조상엘리먼트를 반환한다. 값이 없다면 null 을 반환한다. 문법 var closestElement = targetElement.closest(selectors); selectors 에는 id, class, div 등을 넣으면 된다. 예시 여기는 div-01 여기는 div-02 여기는 div-03 var el = document.getElementById('div-03'); var r1 = el.closest("#div-02"); // id=div-02로 요소를 반환. var r2 = el.closest("div div"); // div에 있는 div인 가장 가까운 상위 항목을 반환. div-03 자체 var r3 = el.c..

javascript 를 이용해서 국가코드를 알아내보자! const lang = navigator.language; console.log(lang); /* lang = ko */ ㅇㅇ...

.empty() 는 선택한 요소의 내용을 지운다. 태그는 그대로 남아있다. .remove() 는 태그를 포함한 요소 전체를 지운다. .empty() Hello soju $(.soju).empty() 이런식으로 .empty()를 사용하면 이렇게 된다.

현재 페이지의 URL을 가져오기위해 window.location 을 사용하자! // 'https://210one2.tistory.com/374' window.location.href // 'https:' window.location.protocol // '210one2.tistory.com' window.location.host // '210one2.tistory.com' window.location.hostname // '' window.location.port // '/374' window.location.pathname // ?category=14157" window.location.search window.location.href 전체 url 문자열을 가져온다. window.location.pro..

요로코롬 메뉴바가 있다. 허졉하지만 메뉴바임ㅇㅇ/.. 앞에 했던 spring message로 변경을 한다고 치면 아마 url에 param이 붙어서 엉망이될 것이다.. 아마도 예를들어 현재 영어인상태에서 영어를 한번 더 누른다면 praram에 lang=en이 하나 더 붙어버리는 끔찍한 상황이 발생한다.. 그걸 고쳐보자 ㅇㅇ 여기서는 js로 처리를 할것이다. 해당 링크를 클릭하면, 해당 id 값을 가져오고 현재의 url을 가져와서 해당 param이 있는지 없는지 검사를 한 후 없다면? > append로 해당 param을 추가시키도록 설정했다. 있다면? > set으로 해당 param vlaue를 수정하도록 설정했다. 그후 해당 창을 열기 $(".nav-link").click(function (){ let la..

변수 선언 방식 var var 변수는 선언 방식에 이성서 큰 단점을 가지고 있다. var name = 'bathingape' console.log(name) // bathingape var name = 'javascript' console.log(name) // javascript 같은 변수를 선언 했음에도 불구, 다른 값이 출력된다. 유연한 방식의 변수 선언이지만, 코드량이 많아지면 파악하기가 힘들고 값이 변경될 우려가 있다. let let으로 선언된 변수는 재 선언이 불가능하지만, 변수에 다른 값을 넣는 재할당은 가능하다. let name = 'bathingape' console.log(name) // bathingape let name = 'javascript' console.log(name) //..

spring tomcat tiles 사용중 뭐 이렇게 메뉴를 누를때 그 화면에 해당하는 메뉴를 하이라이트 시켜보자. 이렇게 버튼을 대충 만들고 스크립트로 쿼리스트링을 보내서 컨트롤러에서 해당 param을 받아, 그걸로 Class에 active를 시키는 방식으로 구현 key = value 형식이고 key = > pageName value = > test11 , test22 여기 코드의 부가 설명을 조금 하자면, var pageName은 받아온 value고 아래의 removeClass는 현재 div에 있는 class를 지우고, addClass를 사용하여 새 클래스를 붙여주는것. 밑의 btn 클릭 함수는 해당 버튼을 클릭하면, 그 버튼의 id 값을 추출해서 pageSubmitFn 함수에 값을 넣는것이다.ㅇㅇ ..

익명함수 호출 방식 funtion() 안에 이름이 없는 함수를 익명함수 라고 한다. 익명함수가 변수에 대입이 되면, 그 변수는 더 이상 변수가 아닌 함수로 취급된다. 또한 함수의 이름은 변수의 이름을 따라간다. 즉, 해당 script에는 해당 함수가 있는 것이다. 함수 호출 방식 말 그대로 함수 자체를 선언하는 방식 어떤것이 더 좋은 방식이냐? 익명함수선언 참조방식이 더 좋은 방식이다. 이유는 2가지 1. 브라우저에는 최상위 객체인 windowr객체가 있습니다. 이 window 객체는 함수형 방식으로 funtion을 적으면 이 함수를 계속 저장하기 때문에, 메모리를 계속 사용한다는 단점이 있다. 2. JavaScript 해석기 측면 JavaScript 해석기가 funtion 구문을 호출함수 위로 이동시켜..

JSON 객체안에는 두개의 중요한 메소드가 있다 1. JSON.parse() - 에 있는인자를 자바스크립트의 객체로만듬 2. JSON.stringify() - 에 있는인자를 객체를 JSON 포멧에 맞는 텍스트로 바꿔준다. 이 두가지로 인해 ajax 통신을 할 때 아주 쾌적하게 할 수 있다.

https://bbaksae.tistory.com/23 현재시각 표시하는 시계 만들기 (date 객체) 안녕하세요, 오늘은 지금 시각을 표현할 수 있는 시계를 만들어 보려고 합니다. 자바스크립트로 만들 껀데 Date() 객체를 이용할 겁니다. 우선 아래 실행된 화면을 보시죠. 보시는 바와 같이 잘 동 bbaksae.tistory.com

l 객체 - 세상에 존재하는 모든 것 연관배열 말고 JSON 이다!! l 자바스크립트 객체 - 사용자 정의 객체: 사용자가 직접 객체의 속성과 메소드를 정의하여 사용하는 객체(예: Car( ), House( ), Hotel( )) - 내장 객체: 자바스크립트 프로그램 자체에서 정의하여 사용자에게 제공하는 객체(예: Object( ), Array( ), Date( )) l 내장 객체의 종류 - 브라우저 객체 모델(BOM, Browser Object Model): 웹 브라우저의 각종 요소를 객체로 표현 - 문서 객체 모델(DOM, Document Object Model): 웹 문서의 각종 요소를 객체로 표현 - - 전역 자바스크립트 객체(Global JavaScript Objects): 자바스크립트 프로그램..

l 스택 - 모든 데이터의 삽입과 삭제가 배열의 한쪽 끝에서만 수행되는 자료 구조 - 살짝 데이터의 구조에 제한을 둔 거라고 생각하면 편하다. • push 메소드: 배열의 마지막 위치에 데이터를 추가하고 배열의 길이를 반환 • pop 메소드: 배열의 마지막 위치에 있는 데이터를 삭제하고 삭제한 데이터를 반환 push(추가), pop(삭제? 들어내기) 데이터n - top ... 데이터2 데이터1 - bottom ```bottom 데이터를 가져올려면 위의 데이터를 다 꺼내야 한다. (끄집어 내야함;;;)``` pop & push 메소드 l shift & unshift - shift 메소드: 배열의 맨 처음 위치에 데이터를 삭제하고 배열의 길이 반환 - unshift 메소드: 배열의 맨 처음 위치에 데이터를 ..

재귀 l 함수 선언 – 일반적인 방법(기본 함수) onclick 속성값으로 함수 호출하기 학생 정보 l 함수 선언 – 함수 표현식으로 작성하는 방법(무명 함수) 기본 함수와 무명 함수 호출 우선순위 변수를 이용하여 반환값 출력 변수 없이 반환값 출력 서로 다른 변수로 같은 함수의 반환값 출력 인자와 매개 변수 서로 다른 변수로 같은 함수의 반환값 출력 자바에서는 오버로딩이 되는데, 자바 스크립트는 안된다. 자바에서는 객체등의 값에따라 자동 오버로딩이 된다. 현재 코드에서는 제일 밑의 코드를 인식한다고 생각하면 된다. 인자의 개수가 적을 때 처리 방법 인자를 arguments 객체로 처리 arguments.length 를 사용하면 입력되어 있는 인수 만큼 실행을 하겠다. arguments = 인수 배열 자..

l 제어문 - 프로그램의 실행 과정을 제어하기 위해 사용하는 구문 - l 자바스크립트 제어문 ㅣ 성별과 성년을 구분하는 프로그램 만들기 ㅣ 로그인 프로그램 만들기 if~else 사용 아이디, 비밀번호 입력 id=prompt('아이디 입력'); if(id=='admin') { password=prompt('비밀번호 입력'); if(password==='123456') { location.href="20_login.html" } else { location.href="20_error.html" } } else { location.href="20_error.html" } 회원 인증에 성공했습니다. 저자 홈페이지를 클릭하세요. 차세대 웹 프로그래밍 회원 인증에 실패했습니다. 웹 문서에 접근할 수 없습니다. 관리..