Main Menu

search

You are here

Home

JavaScript

[last updated: 2023-12-06]
CSS
HTML: style
-----

This is a LONG way away from anything presentable.
For now it's just a random, mostly unorganized list of things I've learned in my process...

  • On This Page:
    • General:
    • Executing Javascript from a script element
    • Misc number manipulations
    • Referring to an html element from within javascript
    • Functions
    • Getting html element properties into javascript
    • Misc commands

    -----------------------------------------------------------------------------------------------------------

  • Introduction:
    • Javascript is a scripting language that can be used to write functions and apps that can be included in your html webpage.
    • Javascript code is included in your html file between <script> tags, in either the <head> section, or in the <body>.

        <head>
                <script>
                    code here ...
                </script>
        </head>

        If the Javascript code writes page content, then you should put the code in the <body> section,
        preferably at the bottom, below all other code.

    • -or- it can be loaded from an external file:

        <head>
                <script type="text/javascript" src="script-file1.js"></script>
                <script type="text/javascript" src="script-file2.js"></script>
        </head>

    • What do you DO with Javascript code?:
      • Create or modify html elements in your webpage.
      • Write functions that do things according to some user action,
        such as typing input or moving or clicking the mouse.

    -------------------------------------------------------------------

  • Executing Javascript in a <script> element:
    • Code placed between <script> tags will get executed (once) when the html page is loaded.
    • If you have defined a function in an external .js script file, then you can execute it in your html file with:

      <script>
              functionName ();
      </script>

    -------------------------------------------------------------------

  • Misc number manipulations:

    • var pixelValue = "200.5px";
      var pixelNum = parseInt(pixelValue);

      this will return "200", ie. without the decimal portion, and without the px units.

    -------------------------------------------------------------------

  • Referring to an html element from within javascript code:
    • If you want to interact with an element, for example put some text into a div,
      the first thing you must do is get the object name of the element
      so that you can refer to the element from within the Javascript code.
        You do that with one of these two methods:
      • document.getElementById("idName")
        This method will return the object name of any element that has the id: "idName" attached to it.
        • For example, if you have a div that you've defined in your html code,
          and you've given it a parameter: id="myDiv",
          then you can use the .getElementById method to get its object name.

          document.getElementById("myDiv")

        • Now you can either use it directly,

          document.getElementById("myDiv").innerHTML = "some text";

          which will put "some text" into the element,

        • or you can put the object name into a variable, so you can use it in other places in your code:

          var myDiv = document.getElementById("myDiv");

      • document.querySelector("elementSelectorName")

    -------------------------------------------------------------------

  • Functions are blocks of javascript code that get executed upon some event.
    • Functions are defined as follows:

      function functionName () {
          [statements]
      }

    • functions are placed between script tags at the bottom of the <body> code section.
    • If the functions are attached to an event of some kind, then they will be executed whenever that event occurs.
    • Functions are executed with a statement like:

      function functionName ();

    -------------------------------------------------------------------

  • Get element properties into javascript
    I'm struggling with this one. There are a lot of methods reported on the web, but their scope and usage is mysterious...

    • var bluPad = parseFloat(getComputedStyle(blu).[parameterName]);

      this returns integer value, without "px" or "%" units,
      and works for me for padding, height ...
      And it works whether the parameter is defined inline or internal.

      • However:
        Execution breaks if you use the parameter: "line-height",
        but works if you use: "lineHeight".

    -------------------------------------------------------------------

  • Misc Commands:
    • let declares a variable with local scope. It is only valid in the block where it's defined.
      var defines a variable that is valid throughout the function where it's declared.
    • Comments in javascript:
      Prefix your comment line with: " // "
        Note: This applies to javascript in external .js files, as well as anything between <script> tags,
        even though the script tags are within an html document, in which comments are defined by "<!-- ... -->" delimeters...
      • However: It gets more complicated:
        you can indeed put <!-- ... --> comments between <script> tags,
        IF, (at least in my tests) there are only ...innerHTML commands below it.
        But, if there are eg. var defs below it, then it will break,
        unless you follow it with a ";"
        strange ...

    -------------------------------------------------------------------

Powered by Drupal