Javascript 실습

yurison·2022년 12월 23일
0
post-custom-banner

-index.html

<!DOCTYPE html>
<html lang="en">
  <head>
    <meta charset="UTF-8" />
    <link rel="stylesheet" href="http://localhost/project_js/style.css" />
    <title>Javascript Project - Index</title>
  </head>
  <body id="target">
    <header>
      <h1>
        <a href="http://localhost/project_js/index.html">JavaScript</a>
      </h1>
    </header>
    <nav>
      <ul>
        <li><a href="http://localhost/project_js/page1.html">History</a></li>
        <li><a href="http://localhost/project_js/page2.html">Features</a></li>
        <li><a href="http://localhost/project_js/page3.html">Security</a></li>
      </ul>
    </nav>
    <div>
      <input
        type="button"
        value="white"
        onclick="document.getElementById('target').className='white'"
      />
      <input
        type="button"
        value="black"
        onclick="document.getElementById('target').className='black'"
      />
    </div>
  </body>
</html>

-page1.html

<!DOCTYPE html>
<html lang="en">
  <head>
    <meta charset="UTF-8" />
    <link rel="stylesheet" href="http://localhost/project_js/style.css" />
    <title>Javascript Project - History</title>
  </head>
  <body id="target">
    <header>
      <h1>
        <a href="http://localhost/project_js/index.html">JavaScript</a>
      </h1>
    </header>
    <nav>
      <ul>
        <li><a href="http://localhost/project_js/page1.html">History</a></li>
        <li><a href="http://localhost/project_js/page2.html">Features</a></li>
        <li><a href="http://localhost/project_js/page3.html">Security</a></li>
      </ul>
    </nav>
    <div>
      <input
        type="button"
        value="white"
        onclick="document.getElementById('target').className='white'"
      />
      <input
        type="button"
        value="black"
        onclick="document.getElementById('target').className='black'"
      />
    </div>
    <article>
      <h2>Creation at Netscape</h2>
      <ul>
        <li>
          The first popular web browser with a graphical user interface, Mosaic,
          was released in 1993. Accessible to non-technical people, it played a
          prominent role in the rapid growth of the nascent World Wide Web.[11]
          The lead developers of Mosaic then founded the Netscape corporation,
          which released a more polished browser, Netscape Navigator, in 1994.
          This quickly became the most-used.
        </li>
        <li>
          During these formative years of the Web, web pages could only be
          static, lacking the capability for dynamic behavior after the page was
          loaded in the browser. There was a desire in the flourishing web
          development scene to remove this limitation, so in 1995, Netscape
          decided to add a scripting language to Navigator. They pursued two
          routes to achieve this: collaborating with Sun Microsystems to embed
          the Java programming language, while also hiring Brendan Eich to embed
          the Scheme language.
        </li>
        <li>
          Netscape management soon decided that the best option was for Eich to
          devise a new language, with syntax similar to Java and less like
          Scheme or other extant scripting languages.[5][6] Although the new
          language and its interpreter implementation were called LiveScript
          when first shipped as part of a Navigator beta in September 1995, the
          name was changed to JavaScript for the official release in December.
        </li>
        <li>
          The choice of the JavaScript name has caused confusion, implying that
          it is directly related to Java. At the time, the dot-com boom had
          begun and Java was the hot new language, so Eich considered the
          JavaScript name a marketing ploy by Netscape.
        </li>
      </ul>
    </article>
  </body>
</html>

-page2.html

<!DOCTYPE html>
<html lang="en">
  <head>
    <meta charset="UTF-8" />
    <link rel="stylesheet" href="http://localhost/project_js/style.css" />
    <title>Javascript Project - Features</title>
  </head>
  <body id="target">
    <header>
      <h1>
        <a href="http://localhost/project_js/index.html">JavaScript</a>
      </h1>
    </header>
    <nav>
      <ul>
        <li><a href="http://localhost/project_js/page1.html">History</a></li>
        <li><a href="http://localhost/project_js/page2.html">Features</a></li>
        <li><a href="http://localhost/project_js/page3.html">Security</a></li>
      </ul>
    </nav>
    <div>
      <input
        type="button"
        value="white"
        onclick="document.getElementById('target').className='white'"
      />
      <input
        type="button"
        value="black"
        onclick="document.getElementById('target').className='black'"
      />
    </div>
    <article>
      <h2>Features</h2>
      <p>
        JavaScript supports much of the structured programming syntax from C
        (e.g., if statements, while loops, switch statements, do while loops,
        etc.). One partial exception is scoping: originally JavaScript only had
        function scoping with var; block scoping was added in ECMAScript 2015
        with the keywords let and const. Like C, JavaScript makes a distinction
        between expressions and statements. One syntactic difference from C is
        automatic semicolon insertion, which allow semicolons (which terminate
        statements) to be omitted.
      </p>
    </article>
  </body>
</html>

-page3.html

<!DOCTYPE html>
<html lang="en">
  <head>
    <meta charset="UTF-8" />
    <link rel="stylesheet" href="http://localhost/project_js/style.css" />
    <title>Javascript Project - Security</title>
  </head>
  <body id="target">
    <header>
      <h1>
        <a href="http://localhost/project_js/index.html">JavaScript</a>
      </h1>
    </header>
    <nav>
      <ul>
        <li><a href="http://localhost/project_js/page1.html">History</a></li>
        <li><a href="http://localhost/project_js/page2.html">Features</a></li>
        <li><a href="http://localhost/project_js/page3.html">Security</a></li>
      </ul>
    </nav>
    <div>
      <input
        type="button"
        value="white"
        onclick="document.getElementById('target').className='white'"
      />
      <input
        type="button"
        value="black"
        onclick="document.getElementById('target').className='black'"
      />
    </div>
    <article>
      <h2>Security</h2>
      <p>
        JavaScript and the DOM provide the potential for malicious authors to
        deliver scripts to run on a client computer via the Web. Browser authors
        minimize this risk using two restrictions. First, scripts run in a
        sandbox in which they can only perform Web-related actions, not
        general-purpose programming tasks like creating files. Second, scripts
        are constrained by the same-origin policy: scripts from one Web site do
        not have access to information such as usernames, passwords, or cookies
        sent to another site. Most JavaScript-related security bugs are breaches
        of either the same origin policy or the sandbox. There are subsets of
        general JavaScript—ADsafe, Secure ECMAScript (SES)—that provide greater
        levels of security, especially on code created by third parties (such as
        advertisements).[78][79] Closure Toolkit is another project for safe
        embedding and isolation of third-party JavaScript and HTML.[80] Content
        Security Policy is the main intended method of ensuring that only
        trusted code is executed on a Web page.
      </p>
    </article>
  </body>
</html>
post-custom-banner

0개의 댓글