JS-Variables.html

<!DOCTYPE html>
<html lang="en">
  <head>
    <meta charset="UTF-8" />
    <meta name="viewport" content="width=device-width, initial-scale=1.0" />
    <title>JS Variables</title>
  </head>
  <style>
    * {
      font-family: Arial, Helvetica, sans-serif;
    }

    code[class*="language-"],
    pre[class*="language-"] {
      color: black;
      background: none;
      background-color: rgba(0, 0, 0, 0);
      font-family: Consolas, Monaco, "Andale Mono", "Ubuntu Mono", monospace;
      font-size: 1em;
      text-align: left;
      white-space: pre;
      word-spacing: normal;
      word-break: normal;
      word-wrap: normal;
      line-height: 1.5;
      -moz-tab-size: 4;
      -o-tab-size: 4;
      tab-size: 4;
      -webkit-hyphens: none;
      -moz-hyphens: none;
      -ms-hyphens: none;
      hyphens: none;
    }

    :not(pre) > code[class*="language-"]::after,
    pre[class*="language-"]::after {
      right: 0.75em;

      left: auto;

      -webkit-transform: rotate(2deg);

      -moz-transform: rotate(2deg);

      -ms-transform: rotate(2deg);

      -o-transform: rotate(2deg);

      transform: rotate(2deg);
    }
    pre[class*="language-"]::before,
    pre[class*="language-"]::after {
      content: "";

      z-index: -2;

      display: block;

      position: absolute;

      bottom: 0.75em;

      left: 0.18em;

      width: 40%;

      height: 20%;

      max-height: 13em;

      -webkit-transform: rotate(-2deg);

      -moz-transform: rotate(-2deg);

      -ms-transform: rotate(-2deg);

      -o-transform: rotate(-2deg);

      transform: rotate(-2deg);
    }

    :not(pre) > code[class*="language-"],
    pre[class*="language-"] {
      background-color: #fdfdfd;

      -webkit-box-sizing: border-box;

      -moz-box-sizing: border-box;

      box-sizing: border-box;

      margin-bottom: 1em;
    }
    pre[class*="language-"] {
      position: relative;

      margin: 0.5em 0;

      margin-bottom: 0.5em;

      overflow: visible;

      padding: 0;
    }
    code[class*="language-"],
    pre[class*="language-"] {
      color: black;

      background: none;

      background-color: rgba(0, 0, 0, 0);

      font-family: Consolas, Monaco, "Andale Mono", "Ubuntu Mono", monospace;

      font-size: 1em;

      text-align: left;

      white-space: pre;

      word-spacing: normal;

      word-break: normal;

      word-wrap: normal;

      line-height: 1.5;

      -moz-tab-size: 4;

      -o-tab-size: 4;

      tab-size: 4;

      -webkit-hyphens: none;

      -moz-hyphens: none;

      -ms-hyphens: none;

      hyphens: none;
    }
    pre {
      display: block;

      font-size: 87.5%;

      color: #212529;
    }
    pre {
      margin-top: 0;

      margin-bottom: 1rem;

      overflow: auto;

      -ms-overflow-style: scrollbar;
    }
    code,
    kbd,
    pre,
    samp {
      font-family: SFMono-Regular, Menlo, Monaco, Consolas, "Liberation Mono",
        "Courier New", monospace;

      font-size: 1em;
    }

    pre[class*="language-"] > code {
      position: relative;
      border-left: 10px solid #358ccb;
      box-shadow: -1px 0px 0px 0px #358ccb, 0px 0px 0px 1px #dfdfdf;
      background-color: #fdfdfd;
      background-image: linear-gradient(
        transparent 50%,
        rgba(69, 142, 209, 0.04) 50%
      );
      background-size: 3em 3em;
      background-origen: content-box;
      background-attachment: local;
    }

    code[class*="language"] {
      max-height: inherit;
      height: inherit;
      padding: 0 1em;
      display: block;
      overflow: auto;
    }

    code[class*="language-"],
    pre[class*="language-"] {
      color: black;
      background: none;
      background-color: rgba(0, 0, 0, 0);
      background-attachment: scroll;
      background-image: none;
      background-size: auto;
      background-origen: padding-box;
      font-family: Consolas, Monaco, "Andale Mono", "Ubuntu Mono", monospace;
      font-size: 1em;
      text-align: left;
      white-space: pre;
      word-spacing: normal;
      word-break: normal;
      word-wrap: normal;
      line-height: 1.5;
      -moz-tab-size: 4;
      -o-tab-size: 4;
      tab-size: 4;
      -webkit-hyphens: none;
      -moz-hyphens: none;
      -ms-hyphens: none;
      hyphens: none;
    }

    pre code {
      font-size: inherit;
      color: inherit;
      word-break: normal;
    }

    code {
      font-size: 87.5%;
      color: #e83e8c;
      word-wrap: break-word;
    }
    code,
    kbd,
    pre,
    samp {
      font-family: SFMono-Regular, Menlo, Monaco, Consolas, "Liberation Mono",
        "Courier New", monospace;
      font-size: 1em;
    }
    *,
    ::after,
    ::before {
      box-sizing: border-box;
    }
  </style>
  <body>
    <h1>Variables are Containers for Storing Data</h1>
    <p>JavaScript Variables can be declared in 4 ways:</p>
    <ul>
      <li>Automatically</li>
      <li>Using var</li>
      <li>Using let</li>
      <li>Using const</li>
    </ul>
    <hr />
    <h1>Var Keyword:</h1>
    <p>The var keyword was used in all JavaScript code from 1995 to 2015.</p>
    <p>The let and const keywords were added to JavaScript in 2015.</p>
    <p>
      The var keyword should only be used in code written for older browsers.
    </p>
    <hr />
    <h3>Example:</h3>
    <pre
      class="language-markup"
      tabindex="0"
    ><code class="language-markup"><span class="token doctype"><span class="token punctuation">&lt;!</span><span class="token doctype-tag">DOCTYPE</span> <span class="token name">html</span><span class="token punctuation">&gt;</span></span>
<span class="token tag"><span class="token tag"><span class="token punctuation">&lt;</span>html</span> <span class="token attr-name">lang</span><span class="token attr-value"><span class="token punctuation attr-equals">=</span><span class="token punctuation">"</span>en<span class="token punctuation">"</span></span><span class="token punctuation">&gt;</span></span>
<span class="token tag"><span class="token tag"><span class="token punctuation">&lt;</span>head</span><span class="token punctuation">&gt;</span></span>
    <span class="token tag"><span class="token tag"><span class="token punctuation">&lt;</span>meta</span> <span class="token attr-name">charset</span><span class="token attr-value"><span class="token punctuation attr-equals">=</span><span class="token punctuation">"</span>UTF-8<span class="token punctuation">"</span></span><span class="token punctuation">&gt;</span></span>
    <span class="token tag"><span class="token tag"><span class="token punctuation">&lt;</span>meta</span> <span class="token attr-name">name</span><span class="token attr-value"><span class="token punctuation attr-equals">=</span><span class="token punctuation">"</span>viewport<span class="token punctuation">"</span></span> <span class="token attr-name">content</span><span class="token attr-value"><span class="token punctuation attr-equals">=</span><span class="token punctuation">"</span>width=device-width, initial-scale=1.0<span class="token punctuation">"</span></span><span class="token punctuation">&gt;</span></span>
    <span class="token tag"><span class="token tag"><span class="token punctuation">&lt;</span>meta</span> <span class="token attr-name">http-equiv</span><span class="token attr-value"><span class="token punctuation attr-equals">=</span><span class="token punctuation">"</span>X-UA-Compatible<span class="token punctuation">"</span></span> <span class="token attr-name">content</span><span class="token attr-value"><span class="token punctuation attr-equals">=</span><span class="token punctuation">"</span>ie=edge<span class="token punctuation">"</span></span><span class="token punctuation">&gt;</span></span>
    <span class="token tag"><span class="token tag"><span class="token punctuation">&lt;</span>title</span><span class="token punctuation">&gt;</span></span>JavaScript<span class="token tag"><span class="token tag"><span class="token punctuation">&lt;/</span>title</span><span class="token punctuation">&gt;</span></span>
    <span class="token tag"><span class="token tag"><span class="token punctuation">&lt;</span>script</span><span class="token punctuation">&gt;</span></span><span class="token script"><span class="token language-javascript">
        <span class="token keyword">var</span> x <span class="token operator">=</span> <span class="token string">"Hello"</span><span class="token punctuation">;</span>
        <span class="token keyword">var</span> y <span class="token operator">=</span> <span class="token string">"World"</span><span class="token punctuation">;</span>
        document<span class="token punctuation">.</span><span class="token function">write</span><span class="token punctuation">(</span>x <span class="token operator">+</span> y<span class="token punctuation">)</span><span class="token punctuation">;</span>
    </span></span><span class="token tag"><span class="token tag"><span class="token punctuation">&lt;/</span>script</span><span class="token punctuation">&gt;</span></span>
<span class="token tag"><span class="token tag"><span class="token punctuation">&lt;/</span>head</span><span class="token punctuation">&gt;</span></span>
<span class="token tag"><span class="token tag"><span class="token punctuation">&lt;</span>body</span><span class="token punctuation">&gt;</span></span>
<span class="token tag"><span class="token tag"><span class="token punctuation">&lt;/</span>body</span><span class="token punctuation">&gt;</span></span>
<span class="token tag"><span class="token tag"><span class="token punctuation">&lt;/</span>html</span><span class="token punctuation">&gt;</span></span></code></pre>
  </body>
  <script>
    var a = "Hamza Khan Lodhi</br></br>";
    var b = 500;

    document.write("<mark>" + "My name is: " + a + "</mark>");
    document.write("<mark>" + "RS. " + b + "</mark>");
  </script>
</html>