'분류 전체보기' 카테고리의 글 목록

//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

JavaScript 함수는 특정 작업을 수행하도록 설계된 코드 블럭으로 함수를 호출할때 실행됩니다.

function fn(param1, param2){
 return param1 + param2;
 }

JS 함수 구문
함수는 function 이라는 키워드, 이름, 괄호()로 정의됩니다.

함수 이름에는 문자, 숫자, 밑줄, $(달러) 기호가 포함될 수 있습니다.(변수와 동일한 규칙)

괄호 안에는 쉼표(,)로 구분된 매개변수를 포함할 수 있습니다.

함수에 의해 실행될 코드는 중괄호 {} 안에 배치됩니다.

함수 인수는 함수를 호출할때 받는 값 입니다.

함수 내부에서 인수(매개변수)는 지역 변수처럼 동작합니다.

함수 내부에서 선언된 변수는 LOCAL 변수가 됩니다.
지역 변수는 함수 내부에서만 접근할 수 있습니다.

'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

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

Echart에 series total 기능이 기본으로 제공되지 않아서 구현해주어야 한다.

legend에서 시리즈를 숨길때 total value가 반영

<!DOCTYPE html>
<html lang="en">
    <head>
    <script src="./index.js"></script>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>Document</title>
    <script src="https://code.jquery.com/jquery-1.9.1.min.js"></script>
    <script src="https://cdn.jsdelivr.net/npm/echarts@5.5.0/dist/echarts.min.js"></script>
 
</head>


<style>
    .flex-container{
        display:flex;
        /* background-color: cadetblue; */
        width: 100%;
        height: 200px;

    }
    .flex-container-item1 {
        width: 100%;
        /* background-color: teal; */
        flex: 1;
        border: 1px solid red;
    }
    .flex-container-item2 {
        width: 100%;
        /* background-color: teal; */
        flex: 2;
        border: 1px solid red;
    }
</style>
<body>
    <div>
        <h1>hellow world</h1>
    </div>
        <div class="flex-container">
            <div class="flex-container-item1" id="main1">1</div>
            <div class="flex-container-item1" id="main2">2</div>
            <div class="flex-container-item1" id="main3">3</div>
        </div>
        <div class="flex-container">
            <div class="flex-container-item1" id="main4">1</div>
            <div class="flex-container-item1" id="main5">2</div>
            <div class="flex-container-item1" id="main6">3</div>
        </div>
    <script>
    //for total value
    function creatChart(target){
        let result = 0;
        let array = [];
        // Create the echarts instance
        let chartDom = document.getElementById(target);
        let myChart = echarts.init(chartDom);

        let series = [
                {name: 'Email',type: 'bar',stack: 'AD',emphasis: {focus: 'series'},data: [120, 132, 101, 134, 90, 230, 210]},
                {name: 'Union Ads',type: 'bar',stack: 'AD',emphasis: {focus: 'series'},data: [220, 182, 191, 234, 290, 330, 310]},
                {name: 'Video Ads',type: 'bar',stack: 'AD',emphasis: {focus: 'series'},data: [150, 232, 201, 154, 190, 330, 410]},
                {name: 'Baidu',type: 'bar',stack: 'AD',emphasis: {focus: 'series'},data: [620, 732, 701, 734, 1090, 1130, 1120]},
                {name: 'Google',type: 'bar',stack: 'AD',emphasis: {focus: 'series'},data: [120, 132, 101, 134, 290, 230, 220]},
                {name: 'Bing',type: 'bar',stack: 'AD',emphasis: {focus: 'series'},data: [60, 72, 71, 74, 190, 130, 110]},
                {name: 'Others',type: 'bar',stack: 'AD',emphasis: {focus: 'series'},data: [62, 82, 91, 84, 109, 110, 120]}
            ];
            sum();
        let option;
        option = {
            tooltip: {
                        trigger: 'axis',
                        axisPointer: {
                        // Use axis to trigger tooltip
                        type: 'shadow', // 'shtotalow' as default; can also be 'line' or 'shtotalow'
                        label:{
                            //for total value
                            formatter: function (params){
                            for ( let i = 0; i < params.seriesData.length; i++){
                                result += params.seriesData[i].value
                            } 
                            let resultFinal = "total: " + result
                            result = 0;
                            return resultFinal;
                            }
                        }
                        }
                    },
            legend: {
                //for total value
                data: series.map(item => item.name),
            },
            grid: {
                left: '3%',
                right: '4%',
                bottom: '3%',
                containLabel: true
            },
            xAxis: [
                {
                type: 'category',
                data: ['Mon', 'Tue', 'Wed', 'Thu', 'Fri', 'Sat', 'Sun']
                }
            ],
            yAxis: [
                {
                type: 'value'
                }
            ],
            series: [
               ...series,
               {
                    name: ' A total of ',
                    type: 'bar',
                    stack: 'AD',
                    tooltip: {
                    show: false
                    },
                    stack: '',
                    color: '#FFFFFF',
                    label: {
                    normal: {
                        show: true,
                        position: 'top'
                    },
                    },
                    data: array,
                    z: -1,
                    barGap: '-100%',
                }
            ]
        };

        //for total value
        function sum(){
            for ( let z = 0; z < series[0].data.length; z++){
                for( let i = 0; i < series.length; i++){
                    result += series[i].data[z];
                }
                array.push(result)
                result = 0;
            }
        }

        myChart.on('legendselectchanged', function (params) {
        array.length = 0
        for ( let z = 0; z < series[0].data.length; z++){
            for( let i = 0; i < series.length; i++){
                if(params.selected[series[i].name])
                    result += series[i].data[z];
                }
            array.push(result)
            result = 0;
        }
            myChart.setOption(option);

        });

        //chart Resize code
        myChart.setOption(option);

        window.addEventListener('resize', function(){
            myChart.resize();
        });
    }
    creatChart("main1");
    // creatChart("main2");
    // creatChart("main3");
    // creatChart("main4");
    // creatChart("main5");
    // creatChart("main6");
    </script>
</body>
</html>

'jquery' 카테고리의 다른 글

Multiselet Change Event (0)	2024.12.13
<tr>에서 get value() 벨류값 가져오기 (0)	2019.05.22
jQuery 선택자 (0)	2018.10.14
제이쿼리 소개 (0)	2018.10.14
jquery Json date read (0)	2018.10.14

이차트 사용시에 css flex를 적용하여도 container size만 반응형으로 적용되고,

Echart 사이즈는 변하지 않아 아래 window.onload로 resize 되도록 적용


<!DOCTYPE html>
<html lang="en">
    <head>
    <script src="./index.js"></script>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>Document</title>
    <script src="https://code.jquery.com/jquery-1.9.1.min.js"></script>
    <script src="https://cdn.jsdelivr.net/npm/echarts@5.5.0/dist/echarts.min.js"></script>
 
</head>


<style>
    .flex-container{
        display:flex;
        /* background-color: cadetblue; */
        width: 100%;
        height: 200px;

    }
    .flex-container-item1 {
        width: 100%;
        /* background-color: teal; */
        flex: 1;
        border: 1px solid red;
    }
    .flex-container-item2 {
        width: 100%;
        /* background-color: teal; */
        flex: 2;
        border: 1px solid red;
    }
</style>
<body>
    <div>
        <h1>hellow world</h1>
    </div>
        <div class="flex-container">
            <div class="flex-container-item1" id="main1">1</div>
            <div class="flex-container-item1" id="main2">2</div>
            <div class="flex-container-item1" id="main3">3</div>
        </div>
        <div class="flex-container">
            <div class="flex-container-item1" id="main4">1</div>
            <div class="flex-container-item1" id="main5">2</div>
            <div class="flex-container-item1" id="main6">3</div>
        </div>
        <div class="flex-container">
            <div class="flex-container-item1" id="main7">1</div>
            <div class="flex-container-item2" id="main8">3</div>
        </div>
    <script>
    
    function creatChart(target){
        // Create the echarts instance
        let chartDom = document.getElementById(target);
        let myChart = echarts.init(chartDom);
        let option;
        option = {
            tooltip: {
                trigger: 'axis',
                axisPointer: {
                type: 'shadow'
                }
            },
            legend: {},
            grid: {
                left: '3%',
                right: '4%',
                bottom: '3%',
                containLabel: true
            },
            xAxis: [
                {
                type: 'category',
                data: ['Mon', 'Tue', 'Wed', 'Thu', 'Fri', 'Sat', 'Sun']
                }
            ],
            yAxis: [
                {
                type: 'value'
                }
            ],
            series: [
                {name: 'Email',type: 'bar',stack: 'AD',emphasis: {focus: 'series'},data: [120, 132, 101, 134, 90, 230, 210]},
                {name: 'Union Ads',type: 'bar',stack: 'AD',emphasis: {focus: 'series'},data: [220, 182, 191, 234, 290, 330, 310]},
                {name: 'Video Ads',type: 'bar',stack: 'AD',emphasis: {focus: 'series'},data: [150, 232, 201, 154, 190, 330, 410]},
                {name: 'Baidu',type: 'bar',stack: 'AD',emphasis: {focus: 'series'},data: [620, 732, 701, 734, 1090, 1130, 1120]},
                {name: 'Google',type: 'bar',stack: 'AD',emphasis: {focus: 'series'},data: [120, 132, 101, 134, 290, 230, 220]},
                {name: 'Bing',type: 'bar',stack: 'AD',emphasis: {focus: 'series'},data: [60, 72, 71, 74, 190, 130, 110]},
                {name: 'Others',type: 'bar',stack: 'AD',emphasis: {focus: 'series'},data: [62, 82, 91, 84, 109, 110, 120]}
            ]
        };

        //chart Resize code
        myChart.setOption(option);
        // function resize(){
        //     myChart.resize();
        // }
        // $(window).on('resize', resize);

        window.addEventListener('resize', function(){
            myChart.resize();
        });
    }
    creatChart("main1");
    creatChart("main2");
    creatChart("main3");
    creatChart("main4");
    creatChart("main5");
    creatChart("main6");
    creatChart("main7");
    creatChart("main8");
  
    </script>
</body>
</html>

코드 참고:https://aloner-blog.tistory.com/78

'HTML' 카테고리의 다른 글

table colgroup 사용방법 (0)	2018.10.14
javascript 페이지 이동 (0)	2018.10.05
HTML 색상표현 (0)	2017.12.19
HTML이란? (0)	2017.12.18
HTML 이미지 삽입 (0)	2017.12.18

oracle plan에서 통계정보 확인방법
실행구문에 /*+ GATHER_PLAN_STATISTICS */
추가

'DB' 카테고리의 다른 글

[pl/sql] procedure merge into (0)	2020.10.20
[pl/sql] procedure return (0)	2020.10.20
[pl/sql]procedure in out param (0)	2020.10.20
[pl/sql] procedure default value setting (0)	2020.10.20
[pl/sql] insert or update procedure (0)	2020.10.20

옆집동생