자바스크립트가 정확히 무엇인가요?

5692 단어 webdevbeginnersjavascript
JavaScript는 클라이언트와 서버 측 모두에서 대화형 웹 페이지를 구성할 수 있는 텍스트 기반 프로그래밍 언어입니다. HTML과 CSS가 웹 페이지 구조와 스타일을 제공하는 반면 JavaScript는 웹 페이지에 사용자 참여를 유지하는 대화형 요소를 제공합니다.

Brendan Eich는 1995년에 JavaScript를 만들었고 1997년에 ECMA 표준이 되었습니다. 표준의 공식 이름은 ECMA-262입니다. 언어의 공식 명칭은 ECMAScript입니다.

JavaScript는 클라이언트 측 스크립팅 언어로 주로 사용됩니다.
  • 페이지가 클라이언트에서 렌더링될 때 대부분의 코딩이 HTML 페이지에 직접 작성되고 브라우저에서 구문 분석됨을 의미합니다
    • .
  • 기본 기능은 정적 페이지에 상호 작용 수준을 추가하는 것입니다
    • .

    JavaScript는 무엇을 위해 사용됩니까?



    HTML 파일에 JavaScript 코드를 추가할 때 몇 가지 옵션이 있습니다.
  • <script>에 JavaScript<head> 태그 추가

    • <!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>Using JavaScript Tags</title>
    <script type="text/javascript">
    //Javascript code goes here
    </script>
</head>
<body>
</body>
</html>


  • 문서에 해당 JavaScript가 있는 경우 페이지 내용이 표시되기 전에 JavaScript가 로드되어야 합니다.
  • 두 번째 옵션은 <body> 섹션에 스크립트 태그를 포함하는 것입니다.

    • <body>
    <h1>JavaScript Tags Reference JavaScript that 
        is embedded in the HTML page</h1>
    <p>As an alternative you can link to external files</p>
    <script>
    //Some more JavaScript code goes here
    </script>
</body>


  • 스크립트 해석으로 인해 표시 속도가 느려지므로 요소 맨 아래에 스크립트를 배치하면 표시 속도가 향상됩니다.
  • 세 번째 옵션(가장 좋은 경우가 많음)은 외부 JavaScript 파일에 연결하는 것입니다.

    • <script src=“myscript.js”></script>


  • 원하는 대로 외부 스크립트 참조를 배치할 수 있습니다.
  • 외부 스크립트는 여러 웹 페이지에서 동일한 코드를 사용할 때 유용합니다.
  • JavaScript 파일의 파일 확장자는 .js입니다.
  • 외부 스크립트를 사용하려면 <script> 태그
    • 의 src(소스) 속성에 스크립트 파일의 이름을 입력합니다.
  • 연결된 외부 JS 스타일시트는 JavaScript와 HTML을 분리하여 유지하므로 수정하려는 코드를 쉽게 디버그하고 찾을 수 있습니다
    • .
  • 더 잘 정리된 상태로 유지
  • 파일에 여러 스크립트 링크를 사용할 수 있습니다. 5 또는 6 이상이 되면 해당 파일 중 일부를 통합하는 방법을 생각해 볼 수 있습니다
    • .
  • 스크립트 링크가 많을수록 페이지를 로드하는 데 더 오래 걸립니다
    • .

    자바스크립트의 예



    JavaScript는 HTML 콘텐츠를 변경할 수 있습니다.
    많은 JavaScript HTML 메소드 중 하나는 getElementById() 입니다. 메서드는 지정된 값을 가진 요소를 반환합니다. 요소 ID는 지정된 경우 고유해야 하므로 특정 요소에 빠르게 액세스할 수 있는 유용한 방법입니다.
    아래 예제는 HTML 요소( with id=“demo” )를 "찾고"요소 내용(innerHTML)을 "Hello JavaScript"로 변경합니다.

    <!DOCTYPE html>
<html lang=“en”>
<body>
    <h2>What Can JavaScript Do?</h2>
    <p id="demo">JavaScript can change HTML content.</p>
    <button type="button" onclick='document.getElementById("demo").innerHTML = "Hello       JavaScript!"'>Click Me!</button>
</body>
</html>


    내부 HTML 및 DOM


  • innerHTML 속성은 요소의 HTML 내용(내부 HTML)을 설정하거나 반환합니다.
  • 데이터를 "표시"하려는 대부분의 경우 페이지에 정보를 쓰기 위해 innerHTML 속성과 DOM(Document Object Model)을 사용합니다.

    • <script>
    document.getElementById(“demo”).innerHTML=“Hello JavaScript”;
</script>


  • DOM은 JavaScript가 HTML과 상호 작용하는 방식입니다.
  • HTML DOM은 HTML 요소를 가져오고, 변경하고, 추가하고, 삭제하는 방법에 대한 표준입니다.
  • .getElementById()는 웹페이지의 특정 요소를 가져오는 DOM의 메서드입니다.

    • JavaScript에 대해 자세히 알아보려면 내blog를 확인하십시오.
    증가++ 및 감소 -- 간단하게 설명하는 연산자
    Partition Equals Subset Sum Leetcode 문제 또는 Subset sum is equals to target

    좋은 웹페이지 즐겨찾기

    개발자 우수 사이트 수집

    개발자가 알아야 할 필수 사이트 100선 추천 우리는 당신을 위해 100개의 자주 사용하는 개발자 학습 사이트를 정리했습니다
    best100-homepage