Kate’s Journal

Definition AJAX is a technique for accessing web servers from a web page. (It’s not a programming language.)

Read data from a web server - after the page has loaded
Update a web page without reloading the page
Send data to a web server - in the background

In asynchronous programming, 1. you can make requests to a server and continue to work something else until… 2. the server is done with the request. 3. After the request is completed, the data will be back to the browser, 4. and the application can do tasks with the data. Note Important class and methods of AJAX Get familiar with the following class and methods before we get into the example.

XMLHttpRequest constructor: Create the AJAX requests
open( ): Let us prepare the original request for the server
send( ): Sends the request to the server
onreadystatechange: Once the request has been sent, we can track an event called onreadystatechange.The server will send us data through this event by returning an object.

When we receive that object, we will have some codes that we can use to verify status of the request. When everything works out, we will parse the data into a JavaScript object. Example from the lecture [LINK] 1.script.js

var request = new XMLHttpRequest();
request.open('GET', 'js/data.json');
request.send();

a. Use the constructor b. call a new XMLHttpRequest — Once we have the object, — c. use the following methods i. open( ) call to prepare the request Specify two information in the open( ) call – How we want to send the information: GET method – The file that we need (js/data.json) ii. send( ) call to send the request 2. Write a function for what would happen next after we get the data back

var request = new XMLHttpRequest();
request.open('GET', 'js/data.json');
request.onreadystatechange = function() {
    if(
       request.status === 200 &&
       request.readyState === 4
    )
}
request.send();

a. The server is going to send back data about the request b. Track that by using onreadystatechange  c. Make a callback function – check a few things. i. Was the request successful? 1) Check the status message or a status code that we’ll get back from the server 2) When you make a request it’s not available: 404 sorts of status code 3) When the request is fine: 200 ii. readyState- check to see if that ready state is four 1) a series of status codes starting with one, two, three and four.  2) If it gets to status code four: the request is okay and we have some data back 3. Create a variable and log the data

var data;
var request = new XMLHttpRequest();
request.open('GET', 'js/data.json');
request.onreadystatechange = function() {
    if(
       request.status === 200 &&
       request.readyState === 4
    ) {
      data = JSON.parse(request.responseText);
      console.log(data);
      console.log(request);
    }
request.send();

a. Create a variable called data b. And use the JSON parse method  -> JSON parse will take some text and convert it into a JavaScript object c. Read the variable using responseText. 4. Log that data and check the readyState and the status in the browser dev tool a. Get two things i. the object from the JSON file ii.request object – When the readyState is four and the status is 200, everything is good. 5. Once we get all that data back a. Find the response text which is the data from the file in text format b. Then parse that into a JSON object using .parse()  c. Use the data all we want Next time, I would like to talk about jQuery, which is one of the most popular JavaScript libraries on the web. Also, I will use some AJAX call with a jQuery example. References AJAX Introduction w3school LINK What is the relationship between promises and callbacks? – Mastering Web developer Interview Code – Ray Villalobos, Lynda.com LINK ]]>

Arrow Function It is a shortcut to the JavaScript anonymous function keyword. It uses implicit return and allows you to shorten the syntax of the anonymous function. Let’s replace a following regular function to an arrow function.

node.addEventLister('click', function(event){
    return this.classList.toggle('myClass');
},false)

1. 1. Add =>(the fat arrow) right before the curly braces, and then remove the function keyword

node.addEventLister('click',(event)=>{
    return this.classList.toggle('myClass');
},false)

 

• If there is only one argument, it will be returned by function without the return keyword

 

node.addEventLister('click',(event)=>{
    this.classList.toggle('myClass');
},false)

 

• Also you can remove { } when you have only one statement

 

node.addEventLister('click',(event)=>
    this.classList.toggle('myClass'),false);

 

• And if there’s only one parameter, you can remove the ( )

 

node.addEventLister('click', event =>
    this.classList.toggle('myClass'),false);

 

• Finally, replace this keyword to node as it does not bine this keyword.

 

node.addEventLister('click', event =>
    node.classList.toggle('myClass'),false);

Reference How do you use arrow functions in ES6? From Mastering Web Developer Inter Code – Ray Villalobos, Lynda.com Link]]>

npm In this post, I would like to talk about npm – the Node Package Manager for the JavaScript. It allows you to create and use a variety of JavaScript packages quick and easy for your project. [ Goal ] We are going to have a simple bootstrap project at the end of this post. [ Websites ] We have to visit following two websites to proceed with this project.

	Node.js https://nodejs.org/en/ Install Node.JS to use npm
	npm bootstraphttps://www.npmjs.com/package/bootstrap  We need to have Bootstrap installed.

Now with your terminal, create a directory for this simple bootstrap project. Switch to the directory and initiate npm. npm init will ask you very important questions for your project and then create a package.json file for you.

a. It picks up the name of the folder automatically
b. a version number: (1.0.0)
c. a description: I'll just type a simple npm project.
d. the entry point: NodeJS applications, this is a simple web application, so I don't really need this.
e. Test command, again I'm not running any tests with this project
f. a git repository
g. keywords: if you're posting this project on the npmjs.com website, then you can type some keywords and make it easier for people to find your project
h. Author: your name
i. License: if you want to make this project an open source project, you can specify the type of license you're using

After you type all information needed in here, you will see the summary of your project. And when it’s okay, type ‘yes’ to proceed. You can see this information in package.json in your text editor. In your terminal, now install the bootstrap

npm install bootstrap

Also install jQuery as Bootstrap requires it

npm install jquery

When the installation is successfully done, you will see the in your text editor. Create your index.html file : be aware that create index.html file as same level as the node_modules not inside of the node_modules folder. I used some contents from the lecture. (https://goo.gl/srjEpE) Check your index.html if the bootstrap css, javascript and uquery are linked properly.

<head>
…
<link rel="stylesheet" href="node_modules/bootstrap/dist/css/bootstrap.min.css"></head>
…
<script src="node_modules/jquery/dist/jquery.min.js"></script>
<script src="node_modules/bootstrap/dist/js/bootstrap.min.js"></script>
</body>

Finally, you will see it is loading jQuery and bootstrap with a browser developer tool. The simple bootstrap project has easily done by loading node modules with npm! [Reference]

• Do you know how to use npm?From Mastering Web developer Interview Code – Ray Villalobos, Lynda.com Link

]]>

Constructor
The constructor pattern allows us to create instances and it looks like a function that has other functions in it. Also, as a part of an instance of an object, they can make actions (methods). We are going to use the constructor pattern in the index.html to make two responsive hamburger menus: one at the top and the other one at the bottom. index.html First, I imported Font-Awesome for the hamburger menu.

<head>
...
<script src="https://use.fontawesome.com/cac72076d3.js"></script>
</head>

 And add a button here, and give it a class name ‘hamburger’

<button class="btn hamburger"><i class="fa fa-bars" aria-hidden="true"></i></button>

 Give the id as “topMenu” to the nav class. 

<nav class="nav" id="topMenu" role="navigation">

Also, give the id “bottomMenu” at the bottom nav class.

<nav class="nav" id="bottomMenu" role="navigation">

style.css I used the provided code from the lecture for the button.

.btn {
  display: inline-block;
  padding: 6px 12px;
  font-size: 1rem;
  line-height: 1.42857143;
  outline: none;
  text-align: center;
  cursor: pointer;
  background-image: none;
  border: none;
  border-radius: 4px;
  color: #fff;
  background-color: hsl(175, 49%, 42%);
  position: relative;
}

And give the style for the .btn.hamburger

.nav .btn.hamburger {
  margin: 10px auto;
  display: none;
}

Also created CSS for @media queries separately, and added responsive style for .btn.hamburger, and .navbar.hidden.

@media all and (max-width: 600px) {
  .nav .btn.hamburger {
    display: block;
  }
  .nav .container {
    width: 100%;
  }
  .nav .navbar {
    flex-direction: row;
    background: hsl(45, 41%, 92%);
  }
  .nav .navbar.hidden {
    display: none;
  }
  .nav .navbar a:hover {
    background-color: hsl(45, 41%, 88%);
  }
  .nav .navbar {
    flex-direction: column;
  }
}

script.js Now we create a function and name it Hamburger.

function Hamberger()

And pass a nodeName and target it by using ‘document.querySelector’

function Hamburger(nodeName) {
   var myNode = document.querySelector(nodeName + ' .hamburger')

Building Constructor – It will return something when it is called. We are going to make two functions 1. activate initializes the hamburger menu and make them collapsible. 2. hide will set the display attribute of .nav .navbar to none.

function Hamburger(nodeName) {
    var myNode = document.querySelector(nodeName + ' .hamburger');
    return {
        activate: function() {
            myNode.addEventListener('click',function(e) {
                myNode.parentNode.querySelector('.navbar').classList.toggle('hidden');
            }, false);
        },// activate
        hide: function() {
                myNode.parentNode.querySelector('.navbar').classList.add('hidden');
        } // hide
    } //return
} //hamburger

And create a variable called topMenu and that will target the menu at the top.

var topMenu = new Hamburger('#topMenu'); [It is a new copy of hamburger.]

Call the activate method for the top menu.

topMenu.activate();

Also call the bottomMenu as well

var bottomMenu = new Hamburger('#bottomMenu');
bottomMenu.activate();

Now, these two methods will toggle on and off the element! References

• How do you use a constructor to create instances? From Mastering Web Developer Interview Code – Ray Villalobos, Lynda.com Link
]]>

Flexbox
Flexbox is one of the CSS display property that allows us to control horizontal alignment very easy. We can control individual children element within a parent container by setting the parent container as a Flexbox component. These are the syntaxes of basic Flexbox features.

display: flex;
flex-direction: DIR;
flex-wrap: WRP;
justify-content: JUS;

DIR: row[default], column, row-reverse, column-reverse WRP: nowrap[default], wrap, wrap-reverse JUS: flex-start[default], flex-end, center, space-between, space-around As this property allows us to control the horizontal alignment, I would like to use it in the navigation. First, then let’s see what we need to do with the style.css file.

.nav .navbar {
display: flex;
flex-direction: column;
}

As the default, children elements will stay side by side, and behave like rows. I want them to be arranged in vertical when the size of a window smaller than 600px, so I set this to a column.

.nav navbar {
display: flex;
flex-direction: column;
@media all and (min-width: 600px) {
flex-direction: row;
}

And then, I added @media queries to make this navigation work responsively with the screen size. So these children elements will stay side by side horizontally when the size of a browser is bigger than 600px.

.nav navbar {
display: flex;
flex-direction: column;
justify-content: flex-end;
@media all and (min-width: 600px) {
flex-direction: row;

Finally, I added a justify-content property to control the alignment of elements. I used flex-end as I want them to stay on the right side of the navigation bar. With the Flexbox display property, I could make a responsive navigation very easy. For more details, please check out the following references. Next time, I will add a hamburger menu button for the same navigation by using a constructor. The hamburger button will show up when the screen size gets smaller than 600px. References

• How would you use flexbox to control horizontal alignment? from Mastering Web developer Interview Code – Ray Villalobos, Lynda.com Link
]]>