no-unused-vars - ESLint - Pluggable JavaScript Linter

 

no-unused-vars - ESLint - Pluggable JavaScript Linter

A pluggable and configurable linter tool for identifying and reporting on patterns in JavaScript. Maintain your code quality with ease.

eslint.org

eslint 을 사용하다보면 아래와 같이 사용안하는 변수에 대해서 경고 또는 오류를 발생시킨다.
제거 또는 경고로 변경하기

no-unused-vars

아래와 같이 사용안하는 변수에 대해서 경고 또는 오류를 발생시킨다

설정을 통해서 변경 할 수 있다

 

no-unused-vars 설정하기

warn 또는 off 설정

{
  "env": {
    "node": true,
    "browser": true,
    "es2021": true
  },
  "extends": ["eslint:recommended", "plugin:react/recommended"],
  "overrides": [],
  "parserOptions": {
    "ecmaVersion": "latest",
    "sourceType": "module"
  },
  "plugins": ["react", "react-hooks"],
  "rules": {
    "react/react-in-jsx-scope": "off",
    "react/display-name": "off",
    "react/prop-types": "off",
    "react-hooks/exhaustive-deps": "warn",
    "no-unused-vars": "warn" // 이 줄을 추가하여 no-unused-vars 규칙을 비활성화합니다.
  }
}

 

 

아래와 같이 하면 이미지파일로 떨어진다.

mycallback 에서 파일정보를 얻을수 있다.

function makeBlob() {

    var blob = myDiagram.makeImageData({
        background: "white"
        , returnType: "blob"
        , scale: 1
        , callback: myCallback
    });

    //
   

}

파일 서버로 보내기

// When the blob is complete, make an anchor tag for it and use the tag to initiate a download
// Works in:
// * Chrome
// * IE11, Edge
// * Firefox
function myCallback(blob) {
//서버로 전송
    $.ajax({
        type: "POST",
        url: "/api/diagramUpload/100",
        data: blob,
        processData: false,
        contentType: false,
        success: function (data) {

            alert('저장성공');
        },
        error: function (message) {
            alert(message);
        }
    });

    return;

//여기서 부터는 파일을 웹브라우저에서 바로 다운받는다.
    var url = window.URL.createObjectURL(blob);
    var filename = "pbot.png";

    var a = document.createElement("a");
    a.style = "display: none";
    a.href = url;
    a.download = filename;

    // IE 11
    if (window.navigator.msSaveBlob !== undefined) {
        window.navigator.msSaveBlob(blob, filename);
        return;
    }

    document.body.appendChild(a);
    requestAnimationFrame(function () {
        a.click();
        window.URL.revokeObjectURL(url);
        document.body.removeChild(a);
    });
}

ASP.NET API 에서 파일을 다운로드 하는방법

       /// <summary>  프로젝트 파일을 저장 합니다.</summary>
        /// <returns></returns>
        [System.Web.Http.Route("api/diagramUpload/{projectId}")]
        [System.Web.Http.HttpPost]
        public Task diagramUploadAsync(int projectId)
        {
            string root = System.Web.HttpContext.Current.Server.MapPath("~/ProjectImages");
            HttpRequestMessage request = this.Request;
            var content =  request.Content;

            FileStream fileStream = null;
            string pathname =  string.Format(@"{0}\{1}.png", root, projectId);
            try
            {
                fileStream = new FileStream(pathname, FileMode.Create, FileAccess.Write, FileShare.None);
                return content.CopyToAsync(fileStream).ContinueWith(
                    (copyTask) =>
                    {
                        fileStream.Close();
                    });
            }
            catch
            {
                if (fileStream != null)
                {
                    fileStream.Close();
                }

                throw;
            }


        }

 

Jquery dialog , Confirm callBack 받기

 

<html>
<head>
<script src="./Script/jquery-3.3.1.js"></script>
<script src="./Script/jquery-ui.min.js"></script>

<link rel="stylesheet" type="text/css" href="./Content/diagram.css">
<link rel="stylesheet" type="text/css" href="./Content/jquery-ui.min.css"> 
<link rel="stylesheet" type="text/css" href="./Content/jquery-ui.theme.min.css"> 
<script>
var bot ={};
var messageDialog;
$(document).ready(function(){

    bot.windows ={
        alert : function(msg){
            alert(msg);
        },
        confirm : function(msgCallBack){
            //confirm("test");

            $("#msgInfo").dialog({
                            autoOpen: false,
                            height: 200,
                            width: 350,
                            modal: true,

                            buttons: {
                                Ok: function () {
                                    msgCallBack('OK');
                                    $(this).dialog("close");
                                },
                                Cancel: function () {
                                    msgCallBack('CANCEL');
                                    $(this).dialog("close");
                                }
                            }
                        });

                        $("#msgInfo").dialog("open");
        }
   }

   //요렇게 써도됨
   messageDialog  = function(msgCallBack){  
                        $("#msgInfo").dialog({
                            autoOpen: false,
                            height: 200,
                            width: 350,
                            modal: true,

                            buttons: {
                                Ok: function () {
                                    msgCallBack('OK');
                                    $(this).dialog("close");
                                },
                                Cancel: function () {
                                    msgCallBack('CANCEL');
                                    $(this).dialog("close");
                                }
                            }
                        });

                        $("#msgInfo").dialog("open");

                    }


    test();
});

function test(){

   // 정상실행
   // var result =   bot.windows.confirm("alert test");
   // console.log(result);

    //정상실행
    // messageDialog(  
    //     function msgCallBack( msg){
    //        console.log(msg);
    //     });

    var result =   bot.windows.confirm( 
        function msgCallBack( msg){
            console.log(msg); //여기서 결과값 반환
         });

   }

</script>
</head>

<body>

<input type="button" value="test" onclick="test()">

<div id="msgInfo" title="Confirm">
        <div id="messageText" class="elementText"></div>
</div>
</body>
</html>

 

http://www.jensbits.com/2009/10/04/jquery-ajax-and-jquery-post-form-submit-examples-with-php/

폼안에 파라메터를 한번에 전송 할 수 있다.
$(function(){
    $("#JqAjaxForm").submit(function(e){
       e.preventDefault();

        dataString = $("#JqAjaxForm").serialize();

        $.ajax({
        type: "POST",
        url: "process_form.aspx",
        data: dataString,
        dataType: "json",
        success: function(data) {

            if(data.email_check == "invalid"){
                $("#message_ajax").html("<div class='errorMessage'>Sorry " + data.name + ", " + data.email + " is NOT a valid e-mail address. Try again.</div>");
            } else {
                $("#message_ajax").html("<div class='successMessage'>" + data.email + " is a valid e-mail address. Thank you, " + data.name + ".</div>");
            }

        }

        });          

    }); 
}); 
-----------------------------------
멀티파라메터롤 전송할수 있다. 

$.ajax({

type: "POST",

url: "process_Form.aspx",

data: "name=kojaedoo&location=busan",

success: function(msg){

alert( "Data : " + msg );

}

});


<Form name="JqAjaxForm">
<input type=hidden name=it_id value='<?=$it[it_id]?>'>
<input type=hidden name=it_name value='<?=$it[it_name]?>'>
<input type=hidden name=ca_id value='<?=$it[ca_id]?>'>
<input type=hidden name=sw_direct>
<input type=hidden name=url>
</form> 

제이쿼리로 만들어진 트리뷰 플러그 인

http://jquery.bassistance.de/treeview/demo/?3.0.2.2

 

image

id 값이 “__board “ 테이블안에 checkbox를 찾아서 체크/체크아웃을 하는 예제입니다.
<%@ page language="C#" autoeventwireup="true" codefile="RadioSelect.aspx.cs" inherits="RadioSelect" %>

<html xmlns="http://www.w3.org/1999/xhtml">
<head runat="server">
    <title></title>
    <script src="Scripts/jquery-1.4.1.js" type="text/javascript"></script>
    <script language="javascript">
        function CheckBoxSelect(result) {
             $("#__board").find("input[type=checkbox]").attr("checked", result);
        } 
    </script>
</head>
<body>
    <form runat="server">
    <input type="checkbox" id="selectall" onclick="CheckBoxSelect(this.checked);" name="selectall" />

        <table id="__board">
            <asp:repeater id="Repeater1" runat="server">         
            <ItemTemplate>             
            <tr> 
                <td>             
                   <input type="checkbox"  name="PostID" id="PostID"  value="<%# Eval("CategoryID") %>" / >  
                </td>  
                </tr> 
            </ItemTemplate> 
            </asp:repeater>
        </table>
    </form>
</body>
</html>
체크박스의 선택된 갯수 알아오기
var cnd = $("#__board").find("input:checkbox:checked").length;

<html xmlns="http://www.w3.org/1999/xhtml">
<head>
    <title></title>
    <script src="Js/jquery-1.4.4.min.js" type="text/javascript"></script>
</head>
<body>
<script>

    function Button1_onclick()
    {
        if ($('#Radio1').attr('checked') == true) {

            alert($('#Radio1').val());
        }
    }

</script>
    <input id="Radio1" type="radio"  value="111" name="T1"  />
    <input id="Radio2" type="radio" value="22222" name="T1" />
    <input id="Button1" type="button" value="button" onclick="return Button1_onclick()" />
</body>
</html>


셀렉트 박스

function UpdateLevel(idx)
{
 var id = "#"+idx+"_level";
 alert( $(id).val() );
}

알고 넘어가기

$('#foo').val('this is some example text');// <input type="textbox" name="foo" /> 텍스트박스에 값 바인딩

$("#idCheckResultView").html("<b>사용가능!</b>"); // <span id="idCheckResultView"/> 태그에 값 입력하기

시작하기

아래의 중복확인을 누르면 바로 아이디 검사가 가능하다

우선 Jquery 스크립트를 페이지에 삽입한다.

<script src="Js/jquery-1.4.4.min.js"></script>

다운로드 http://jquery.com/


<input name="member_id" type="text" class="search" id="member_id" style="width:116px;height:18px;border:solid 1px #908daa"  onKeyUp="ResutCheckID()"/> 
</span></td>
<td width="64">

<img src="images/member_btn_03.gif" width="64" height="20" border="0" style="cursor:hand" onClick="CheckID()">
&nbsp;&nbsp;<span class="style4" id="idCheckResultView"> <—결과를 보여주는 Tag

아래의 페이지(/members/login_wk/AjaxLoginCheck.asp)는 True False 를 문자열로 반환한다.(실질적으로 아이디 사용유무검사)

 중복확인 버튼을 누르면 CheckID 호출

var id = $("#member_id").val() ; //인풋박스의 값을 가지고 온다.
type 은 GET/ POST 보내는 형식을 지정한다.
url: "/members/login_wk/AjaxLoginCheck.asp", //검사할 페이지
msg는 AjaxLoginCheck.asp 의 페이지값을 받아온다.

success: function(msg){
     alert( "Data Saved: " + msg );
   }

-----------------------------------------------------
var IsUseID = false; //검사확인 되면 상태값 변경

Function CheckID()
{
var id = $("#member_id").val() ;
$.ajax({
   type: "POST",
   url: "/members/login_wk/AjaxLoginCheck.asp",
   data: "member_id="+id,
   success: function(msg){
     if( msg =="true") //사용가능
     {
        alert("사용가능");
        $("#idCheckResultView").html("<b>사용가능!</b>");
     }else
     {
         ResutCheckID();
     }
   }
});
}

//다시검사
function ResutCheckID()
{
IsUseID = false; //아이디가 확인되었는데 또 입력하면 확인실패로 변경

$("#idCheckResultView").html("");
}

AjaxLoginCheck.asp 보면 true /false만 페이지에 찍고 있다.

 

 

참고 URL  : http://api.jquery.com/jQuery.ajax/

아래는 $(document).ready를 이용해서  기본 설정을 세팅 할 수가 있다.

 

    <script language="javascript">

        //Onload
        $(document).ready(function () 
        {
            alert("Dom 을 사용할 준비완료 기초데이터 세팅")
            $("#customlink").click(function () { alert("customlink 를 클릭했습니다.") });          
        
         });

       
        function ChangeCss() 
        {
            //customlink 개체를 찾아  Test Css 적용한다.
            $("#customlink").addClass("test");
        }

    </script>

image

 

Jquery 설정하기

image

http://jquery.com/  가서 파일을 다운로드 합니다.

http://code.google.com/p/jqueryjs/downloads/detail?name=jquery-1.3.2.min.js&downloadBtn=

사용할페이지에

<script src="jquery-1.3.2.min.js" type="text/javascript"></script>

넣고 쓰기만 하면 끗~

부모체크박스 이벤트

<script language="javascript">
     function SubChecking(id , checkboxid) {
        id = "#" + id;
        checkboxid = "#"+checkboxid; 

        var checkValue = true;
        if ($(checkboxid).is(":checked") ==false) { //체크가 되있으면 취소로 변경
                checkValue = false;                  
            }

            for (var i = 0; i < $(id).find("input:checkbox").length; i++) { //체크하기
                if ($(id).find("input:checkbox")[i].checked != checkValue) {
                    $(id).find("input:checkbox")[i].checked = checkValue;
                }
            }
    }
</script>

<input id="Repeater1_ctl00_CheckBox1" type="checkbox" name="Repeater1$ctl00$CheckBox1" onclick="SubChecking('init_1' , 'Repeater1_ctl00_CheckBox1');" /><br />

 

<table id="init_1" border="1"> 특정영역을 지정하는 범위입니다. table 아이디 검색합니다.

<tr >

<td class="style2">

</td>

<td class="style3" id="sub">

<input id="Repeater1_ctl00_Repeater2_ctl00_CheckBox2" type="checkbox" name="Repeater1$ctl00$Repeater2$ctl00$CheckBox2" /> //자식체크박스

</td></tr><tr >

<td class="style2">

</td>

<td class="style3" id="sub">

<input id="Repeater1_ctl00_Repeater2_ctl01_CheckBox2" type="checkbox" name="Repeater1$ctl00$Repeater2$ctl01$CheckBox2" />//자식체크박스

</td></tr><tr >

<td class="style2">

</td>

<td class="style3" id="sub">

<input id="Repeater1_ctl00_Repeater2_ctl02_CheckBox2" type="checkbox" name="Repeater1$ctl00$Repeater2$ctl02$CheckBox2" />//자식체크박스

</td></tr>

</table>

+ Recent posts