2016-06-14 4 views
1

내 프로젝트에서이 유형의 기능을 원합니다.자바 스크립트 파일이 aspx에로드되지 않습니까? ASP.NET C#

여기에 the JS Bin link입니다.

stylesheet.css, javascript.js 및 html 파일의 세 파일이 있습니다.

Visual Studio 2010 ASP.NET C#에서 작업하고 있지만 작동하지 않습니다. Javascript 파일이로드되지 않았습니다.

ASPX 코드 :

<html xmlns="http://www.w3.org/1999/xhtml"> 
    <head runat="server"> 
     <title></title> 
     <link rel="stylesheet" href="StyleSheet.css" type="text/css" /> 
     <script type="text/javascript" src="JScript.js"></script> 
    </head> 
    <body> 
     <form id="form1" runat="server"> 
      <div id="editor" contenteditable="true"></div> 
     </form> 
    </body> 
</html> 

StyleSheet.css :

body { 
} 

#editor { 
    width: 400px; 
    height: 100px; 
    padding: 10px; 
    background-color: #444; 
    color: white; 
    font-size: 14px; 
    font-family: monospace; 
    display:block; 
} 

.statement { 
    color: orange; 
} 

JScript.js :

$("#editor").on("keydown keyup", function (e) { 
if (e.keyCode == 32) { 
    var text = $(this).text().replace(/[\s]+/g, " ").trim(); 
    var word = text.split(" "); 
    var newHTML = ""; 

    $.each(word, function (index, value) { 
     switch (value.toUpperCase()) { 
      case "SELECT": 
      case "FROM": 
      case "WHERE": 
      case "LIKE": 
      case "BETWEEN": 
      case "NOT LIKE": 
      case "FALSE": 
      case "NULL": 
      case "FROM": 
      case "TRUE": 
      case "NOT IN": 
       newHTML += "<span class='statement'>" + value + "&nbsp;</span>"; 
       break; 
      default: 
       newHTML += "<span class='other'>" + value + "&nbsp;</span>"; 
     } 
    }); 
    $(this).html(newHTML); 

    //// Set cursor postion to end of text 
    var child = $(this).children(); 
    var range = document.createRange(); 
    var sel = window.getSelection(); 
    range.setStart(child[child.length - 1], 1); 
    range.collapse(true); 
    sel.removeAllRanges(); 
    sel.addRange(range); 
    $(this)[0].focus(); 
} 
}); 

JScript.js 파일이 작동하지 않습니다. Keyword 색깔은 변하지 않지만 링크는 잘 작동합니다.

이 문제를 어떻게 해결할 수 있습니까?

+0

당신이 콘솔을 확인 했습니까? 또한 스크립트 파일은'$'을 사용하고 있습니다.이 파일은'jQuery' 나 서브셋이 필요합니다. 로드하십시오 – Rajesh

+0

파일이로드되지 않았다는 의미는 무엇입니까? 잘못된 요청입니까? 잘못된 URL (404)? 콘솔의 오류? 그것을 사용하기 전에'jQuery'를로드하는 것을 볼 수 없습니다 ... – melancia

+0

@Rajesh 어떻게 콘솔에 체크인 할 수 있습니까? – Ashley

답변

1

의견에서 제안한 것처럼 jQuery뿐만 아니라 HTML, CSSJavascript도 사용하는 방법에 대한 자습서가 도움이됩니다. 스택에 대해 작업 할 수있는 기본적인 지식이 부족합니다. 나는 당신의 질문에 대답하고있어 당신에게 유리한 출발을 제공합니다 :

귀하의 Javascript 코드가 document ready 이벤트 핸들러 내에서 포장되어야한다
<head> 
    <link rel="stylesheet" href="StyleSheet.css" type="text/css" /> 
    <!-- Loading the jQuery library before everything else. 
     Getting it from Google CDN, but you can have it locally. --> 
    <script src="https://ajax.googleapis.com/ajax/libs/jquery/2.2.4/jquery.min.js"></script> 
    <!-- Loading your own Javascript file. --> 
    <script type="text/javascript" src="JScript.js"></script> 
</head> 

: 나는 당신의 코드에서 이해할 수있는 건

$(function() { 
    // Your code goes here. 
}); 

, 당신 ' 박스에 SQL 스크립트를 입력 할 때 을 강조 표시하려면을 입력하십시오. 그것은 잘 작동하고 : Demo

상세 정보 :

jQuery Learning Center

Google Hosted Libraries

+0

답장 @ MelancialUK에 대한 감사의 말로 대답합니다. 지시 사항을 따르지 만 여전히 작동하지 않습니다. '콘솔'에는 오류가 없지만 작동하지 않습니다. 색상이 변하지 않습니다. – Ashley

+0

죄송하지만이 지침을 이해할 수 없습니다. Javascript 코드는 문서 준비 이벤트 핸들러 내에 래핑되어야합니다 :' – Ashley

+0

'jQuery Learning Center'를 읽으십시오. 'jQuery'를 조금씩 설명하면서 대답을 쓸 수는 없습니다. 두려운이 포럼의 목적이 아닙니다. – melancia

관련 문제