JavaScriptとは?

10319 ワード

JavaScript

객체 기반의 스트립트 프로그래밍 언어

エンタープライズ言語vsスクリプト言語vsコンパイル言語

  • エンタープライズ言語
    :コンパイラを経ずにマシン言語に変換し、コードを記述するたびに、割り込みプログラムによって逐行解釈され、すぐにコマンドを実行する言語.
    構文エラーが発生しても実行されます
    ex) Python, R
  • スクリプト言語
    :エンタープライズ言語に含める
    既存のアプリケーションを制御する言語
    エンタープライズ・レベルのアプリケーションの実行方法を指定します.
    ex) JavaScript
  • コンパイル言語
    マシン言語にコンパイルしなければ実行できないプログラミング言語です.
    コンパイル中にエラーが発生した場合は実行しません
    ex) C, C++
  • Javascriptプロパティ

  • すべてのWebブラウザで同じ動作
  • 直ちに
  • Webブラウザで実行結果
  • を表示します.
  • 多目的プログラム開発
  • 複数種類のJavaScript公開API
  • 複数のライブラリおよびフレーム
  • APIとライブラリとフレームワーク

  • API
    アプリケーションの作成に必要な接続デバイス、メディア
    ココア・map(api)・web、中間メディア
  • ライブラリ(Library)
    アプリケーション開発に必要な機能セットソフトウェア
    この機能のツールまたは関数の集合.
    必要なら持ってきて使えばいいです.
  • フレームワーク(Framework)
    アプリケーションまたはソフトウェアの実装をシンプル化するためのソフトウェア環境
    フレームワークによる機能の追加と開発が必要
    機能は
  • 実習

    <!DOCTYPE html>
    <html lang="en">
    <head>
        <meta charset="UTF-8">
        <meta http-equiv="X-UA-Compatible" content="IE=edge">
        <meta name="viewport" content="width=device-width, initial-scale=1.0">
        <title>Document</title>
    </head>
    <body>
        <a href="#">자바스크립트 무작정 따라하기!!!!!!!!!!!!</a> 
    	//href안에 큰 따옴표애는 이동하고 싶은 주소나 경로를 넣어주면 됨
        <br><br>
        <button id="btn1">디자인바꾸기 짠!</button>&nbsp&nbsp<button id="btn2">되돌리기 짠!</button>
        <br>
    
        <ul>
            <li>HTML</li>
            <li>CSS</li>
            <li>JS</li>
        </ul>
    
        <h1>오늘은 1/26</h1>
    
        <p>즐거운 JavaScript 수업입니닷!</p>
    
        <script>
            //document : 현재 html문서(body안)
            //querySelector : 선택자 작성 
            //addEventListner : 선택한 영역에 이벤트 발생할 때까지 기다리다가 발생하면 실행
            //function(){} : 함수 / 메서드
            
            document.querySelector("#btn1").addEventListener("click", function(){
                document.querySelector("body").style.backgroundColor = "black"
                document.querySelector("body").style.color = "white"
            }) // btn1을 누르면 이벤트발생(배경색이 검정색, 글씨색이 하얀색으로 변경됨)
            document.querySelector("#btn2").addEventListener("click", function(){
                document.querySelector("body").style.backgroundColor = "white"
                document.querySelector("body").style.color = "black"
            }) // btn2을 누르면 이벤트발생(배경색이 흰색, 글씨색이 검정색으로 변경됨)
    
        </script>
    
    </body>
    </html>

    結果


  • 設計の変更(btn 1の場合)


  • リカバリ(btn 2時)