<JavaScript>Basic

Learn from Codecadamy:

• console.log('This is a message') can ask JavaScript to print words to the console.
• Math.random() can generate a random number between 0 and 1.
• Math.floor will take a decimal number, and round down to the nearest whole number.
• two types of code comments in JavaScript: // , /* to begin the comment, and */ to end the comment.
• array 的相关用法参考： https://developer.mozilla.org/en-US/docs/Web/JavaScript/Reference/Global_Objects/Array
• We can link a JavaScript file to HTML by including it as the src of a <script> tag inside of an HTML file:
  <script src='js/main.js'></script>
• alert is a JavaScript function that will create a pop-up window with text inside it: alert('Hello JavaScript!');
• Document Object Model: commonly referred to as the DOM’, is the term for elements in an HTML file. Elements are any HTML code denoted by HTML tags, like <div>, <a>, or <p> :

var header = document.getElementsByClassName('example-class-name');// This would find an element like this in the HTML:<div class='example-class-name'> ... </div>

• To better interact with DOM elements, we can use a library. A library is a set of code that contains useful pre-written functions that help with certain tasks. A great library for interacting with the DOM is jQuery.

---

jQuery

• Since jQuery is a library of code, we need to include a link to it in html file before we can use it. Before the closing </body> tag, include this code: <script src='https://code.jquery.com/jquery-3.1.0.min.js'></script>
• The link to jQuery needs to be above the link to the js/main.js file, which will give main.js access to the jQuery library.
• jQuery has a built in function to check if the page is ready before it will run our code. write this code:
  
  • main here is a callback, which means that our code will wait until the document (in other words, the DOM) is loaded, or ready.
  • When it is, then it will execute the main function. jQuery calls back to the main function, therefore it’s a callback.

$(document).ready(main);

• We can wrap any CSS selector, like class, id, or tag, with $('.example-class') to select it with jQuery. For instance, if there’s an element with a class of supporting-text, you could select it with $('.supporting-text'). Another example, if an element had an id of 'header', you could select it with $('#header').

• To make a page fade in, it must first be hidden. We can hide elements with jQuery with a function named hide：$('.my-selector').hide();

• fadeIn will fade an element in over a period of time in milliseconds:

$('.example-class').fadeIn(400);

• In order to make an element clickable, we need to write jQuery that listens to an element for a click event. jQuery can do this with an event listener function named on('click'):

$('.example-class').on('click', function() {  // execute the code here when .example-class is clicked.});

• To make our projects visible when button is clicked, jQuery provides a function named show, which is the opposite of hide :

$('.example-class').show();

• toggle will hide or show an element, each time it is triggered:

$('example-class').toggle();

• We can toggle a CSS class with a jQuery function named toggleClass:

$('.example-class').toggleClass('active')

• We can select the specific element we clicked on with the jQuery selector $(this):

('.example-class').on('click', function() {  $(this).toggleClass('active');  //this will only toggle the class of the one that is clicked on});

• We can change the text of an element with the jQuery function text :

$('.my-selector').text('Hello world!');

• jQuery provides a method named slideToggle that can animate an element’s entrance and exit

$('.example-class').slideToggle(400);