//multiselect option
$("#target").multiselect({
onDropdownShow:function(){
 setMultiselectChange(this)
},
onDropdownHide:function(){
 if(getMultiselectChange(this)){
 //호출할 함수
 }
},
});



_multiselectorChange = [];
function setMultiSelectChange(multiSelector){
 //global
 _multiselectorChange = [];
 try{
  if(!!multiSelector.$select.val()){
   _multiselectChange = [...multiSelector.$select.val()];
   if(_multiselectChange.length == multiSelector.$select[0].lenght){
    _multiselectChange = [];
   }
  }
 } catch(err){
  console.error(err);
 }
}

//multiselect change value check
function getMultiselectChange(multiSelector){
 let tf = false;
 try{
  //multi select check
  if(!!multiSelector.$select.val()){
   let originArr = _multiselectChange;
   let newArr = [..._multiSelector.$select.val()]
   if(newArr.length == multiSelector.$select[0].length){
    newArr = []
   }
   if(originArr.join('')!==newArr('')){
    tf = true;
   }
  }else{
   //filter check
   if(!!multiSelector.query){
    if(_multiselectChange.length > 0 ){
     tf = true;
    }
   }else{
    if(_multiselectChange,length > 0){
     tf = true;
    }
   }
  }
 } catch(err){
  console.error(err);
 }
 return tf;
}

멀티 셀렉트에서 체크박스를 누를때마다 하위 함수가 호출되는걸 방지하고 선택후 셀렉트 창이 사라지면 하위 함수 호출하도록 변경

'jquery' 카테고리의 다른 글

echart stacked bar Chart value total  (0) 2024.06.15
<tr>에서 get value() 벨류값 가져오기  (0) 2019.05.22
jQuery 선택자  (0) 2018.10.14
제이쿼리 소개  (0) 2018.10.14
jquery Json date read  (0) 2018.10.14

  • indexOf()

배열에서 값을 검색하여 해당 위치 반환

const arr = ["apple","orange","apple","mango"];
let position = arr.indexOf("apple")+1;

  • lastIndexOf()

Array.lastIndexOf()는 indexOf와 비슷하지만 요소의 마지막 위치 반환

const arr = ["apple","banana","apple","mango"];
let position = arr.lastIndexOf("apple") + 1;

  • includes()

배열에 요소가 있는지 확인 할 수 있다
ES6에서 도입
배열에 요소가 있는지 확인 할 수있다
indexOf와 달리 NaN 포함

const arr = ["banana","apple","orange","mango"];
arr.includes("mange"); // is true
  • find()

테스트 함수를 통과한 첫번째 요소 값 반환

const arr = [4,9,16,25,29];
let temp = arr.find(myFunc);

function myFunc(value, index, array){
 return value >18;
}


  • findIndex()

테스트 함수를 통과한 첫번째 요소의 인덱스 반환

const arr = [4,8,16,28,29];
let test = arr.findIndex(myFunc);

function myFunc(value, index, arr){
return value > 18;
}


  • findLast()

배열의 끝에서 시작하여 조건을 만족하는 첫번째 값 반환

const arr = [27,28,30,40,42,35,30];
let position = arr.findLast(x=> x>40);

  • findLastIndex()

조건을 만족하는 마지막 요소의 인덱스를 반환

const arr = [27,28,30,40,42,35,30];
let position = arr.findLastIndex(x => x>40);

'JavaScript' 카테고리의 다른 글

javascript - function 자바스크립트 함수  (2) 2024.11.13
JavaScript Array.prototype.at()  (0) 2024.10.16
Javascript Variables  (0) 2024.10.07
JavaScript document.getElementById  (0) 2024.10.01
javascript 성능 개선  (0) 2024.09.04

Array객체의 at() 메서드는
정수값을 받아 해당 인덱스에 있는 항목을 반환
음수와 양수 모두 받을수 있으며
음수는 배열의 역순으로 계산

const arr = [5,12,8,130,44];
let index = 2;
console.log(arr.at(index));
=8

index = -2;
console.log(arr.at(index))
=130

'JavaScript' 카테고리의 다른 글

javascript - function 자바스크립트 함수  (2) 2024.11.13
javascript - 배열 검색 search array  (2) 2024.10.17
Javascript Variables  (0) 2024.10.07
JavaScript document.getElementById  (0) 2024.10.01
javascript 성능 개선  (0) 2024.09.04

Variables 

JavaScript Variables can be Declared in 4 ways

-automatically

-using var

-using let

-using const

 

var keyowrd was used in all JavaScript code from 1995 to 2015

var는 1995년부터 2015년까지 사용

let and const keywords were added to JavaSccript in 2015

2015년에 let과 const가 추가

var keyword should only be used in code written for older browsers

var는 이전 브라우저용으로 작성된 코드에서만 사용

let x = 5;
let y = 6;
let z = x + y;

 

When to Use var, let, const

1. Always declare variables

변수를 선언 할때

2. use const if the value should not changed

값이 변경 되어서는 안될 경우

3. use const if the type should not be changed

유형을 변경하지 않을 경우

4. use let if you can't use const

const를 사용 할 수 없는 경우

5. use var if you must support old browsers.

이전 브라우저를 지원해야 하는경우

'JavaScript' 카테고리의 다른 글

javascript - 배열 검색 search array  (2) 2024.10.17
JavaScript Array.prototype.at()  (0) 2024.10.16
JavaScript document.getElementById  (0) 2024.10.01
javascript 성능 개선  (0) 2024.09.04
[Javascript]마우스 좌표 가져오기  (0) 2019.06.30

JavaScript 명령문은 다음과 같이 구성된다

값, 연산자, 표현식, 키워드 또는 주석

 

아래 예제는 브라우저에게 id = "demo" HTML 요소 내부에 "Hellow World"라고 쓰도록 지시한다.

 

<!DOCTYPE html>
<html>
<body>
    <p>JavaScript statements are separated by semicolons.</p>
    <p id="demo1"></p>
<script>
    let a, b, c;
    a = 5;
    b = 6;
    c = a + b;
    document.getElementById("demo1").innerHTML = c;
</script>

</body>
</html>

대부분의 JavaScript 프로그램에는 많은 JavaScript 문장이 포합되어 있다.

 

; 세미콜론

세미콜론은 JavaScript 문장을 구분한다.

각 실행문의 끝에 세미콜론을 추가한다.

 

아래와 같이 세미콜론으로 구분하면 한줄에 여러 문장을 입력 할 수 있다.

let a, b, c;
a=5;b=6;c=a+b;

 

'JavaScript' 카테고리의 다른 글

javascript - 배열 검색 search array  (2) 2024.10.17
JavaScript Array.prototype.at()  (0) 2024.10.16
Javascript Variables  (0) 2024.10.07
javascript 성능 개선  (0) 2024.09.04
[Javascript]마우스 좌표 가져오기  (0) 2019.06.30

1. 루프
bad case :
for( let i = 0; i < arr.length;, i++){
better :
let l = arr.length;
for(let i =0; i<l;i++){
루프가 반복될 때마다 배열의 length 속성에 접근하여 실행 속도가 느려진다고 한다.

2.Dom 접근
HTML DOM에 접근 하는것은 script 문법에 비해 매우 느리다고 한다.
Dom에 접근해야 할 경우 최소한으로 접근하여 로컬변수로 저장하여 사용
ex) const obj = document.getElementById("target");
obj.innerHTML = "hellow world!";

3. DOM 크기 줄이기
HTML DOM의 요소 수가 적을 수록 성능에 유리
DOM을 검색하는 모든시도(getElementsByTagName)는 더작은 DOM에서 유리

4. 불필요한 변수 제거
값을 저장 해야 하는게 아니라면 변수를 사용하지 않는다
badcase :
let fullName = firstName + " " + lastName; document.getElementById("target").innerHTML = fullName
better :
document.getElementById("target").innerHTML = firstName + " " + lastName;

출처:w3schools.com/js/js_performance.asp

2,4 번의 경우는
평소 디버깅 편의성 때문에
코딩에서 자주 나오는 습관인데
주의해야 겠습니다.

'JavaScript' 카테고리의 다른 글

javascript - 배열 검색 search array  (2) 2024.10.17
JavaScript Array.prototype.at()  (0) 2024.10.16
Javascript Variables  (0) 2024.10.07
JavaScript document.getElementById  (0) 2024.10.01
[Javascript]마우스 좌표 가져오기  (0) 2019.06.30 
    function fn_location(e){
        var x = event.pageX;
        var y = event.pageY; 
        console.log(x,y);
        }

마우스 버튼의 x,y 값을 가져오는 함수입니다.

'JavaScript' 카테고리의 다른 글

javascript - 배열 검색 search array  (2) 2024.10.17
JavaScript Array.prototype.at()  (0) 2024.10.16
Javascript Variables  (0) 2024.10.07
JavaScript document.getElementById  (0) 2024.10.01
javascript 성능 개선  (0) 2024.09.04

tr에 value를 주고 클릭시 this.val()했는데 값이 안넘어옴...

그래서 찾아보니

델리게이트   on메서드를 써야 했다... 

$(function(){
    $(".table .side-link").on('click',function(e){
        e.preventDefault();
        var id = $(this).attr('value');
        alert(id);
    });
});

'jquery' 카테고리의 다른 글

Multiselet Change Event  (0) 2024.12.13
echart stacked bar Chart value total  (0) 2024.06.15
jQuery 선택자  (0) 2018.10.14
제이쿼리 소개  (0) 2018.10.14
jquery Json date read  (0) 2018.10.14

<script type="text/javascript"> 

location.href="maincontroller/List.do"; 

</script>

'HTML' 카테고리의 다른 글

Echart resize  (0) 2024.06.06
table colgroup 사용방법  (0) 2018.10.14
HTML 색상표현  (0) 2017.12.19
HTML이란?  (0) 2017.12.18
HTML 이미지 삽입  (0) 2017.12.18

+ Recent posts

티스토리툴바