ADVANCED JAVASCRIPT #8

Size: px

Start display at page:

Download "ADVANCED JAVASCRIPT #8"

Kristin Paul
6 years ago
Views:

1 ADVANCED JAVASCRIPT #8

2 8.1 Review JS

3 3 A conditional statement can compare two values. Here we check if one variable we declared is greater than another. It is true so the code executes. var cups = 15; var saucers = 4; // check if cups is greater than (>) saucers if (cups > saucers) { alert("we need to order more saucers"); }

4 4 You can save code as a function and execute it repeatedly // specify a variable in the brackets. You can use it inside your function. function welcome(message) { alert("welcome to the website " + message); } // execute your function and place a value/variable in the round brackets. welcome("mary"); var name = "Peter"; welcome(name);

5 8.2 jquery

6 6 jquery is a JavaScript library. You can load it from Google's CDN service or download and include in your site folder. <script src=" js"></script> Before executing jquery code, you should tell the browser to wait until the page has finished loading. $(document).ready( function () { }); //code here

7 7 The basic syntax of jquery is $(selector).action(); Like CSS the selector is the HTML element you want to target. You can then perform an action to that element/those elements. The $ symbol is used at the start of all jquery lines of code. It is telling the browser to parse the following code using jquery. The selector is based on the CSS model. You can use general HTML names, classes and ids: $("h1") selects all h1s. $(".bigger") selects all HTML elements with class="bigger". $("#intro") selects the HTML element with id="intro".

8 8 The syntax for events is similar to actions: $(selector).click(); $('p').click(); Inside the round brackets after your event, you can write a function that will get executed as that event happens. $(".trigger").click( function () { $(".nav").slidetoggle(); });

9 9 hover() has one big difference to click, you should define 2 functions. One for hovering on, one for when the hover ends. $("p").hover( function () { alert("i hovered on a paragraph"); }, function () { alert("i hovered off a paragraph"); });

10 10 submit() is the same syntax as click(). You can declare one function to be called when a user submits a form. <form> <input type="text"> <input type="submit" value="order Now"> </form> $("form").submit( function () { confirm("do you definitely agree to the Terms and Conditions?"); });

11 11 blur() is the same syntax as click(). You declare a function for when a user moves focus away from a form field. <input type="password"> <p id="error"></p> $("input:password").blur( function () {//input:password is input with type="password" var password = $(this).val();//$(this).val() is the contents of the current item, the field. if(password.length < 8){//password.length is the number of characters in the string $("#error").html("you must use at least 8 characters"); } else { $("#error").html(""); } });

12 8.3 jquery Validation

13 13 A very useful plugin is for validating forms. It can be downloaded at Download and unzip the plugin folder. The only file required to use the plugin is dist/ jquery.validate.min.js, move this to your js/ folder. Include it in your HTML file using: <script src="js/jquery.validate.min.js"></script>

14 14 The validation plugin is setup and ready to be used. The validation plugin is built around HTML 5 form attributes and uses existing input types e.g. type=" ". <form id="signup"> <p><label for="username">username</label> <input type="text" id="username" minlength="6" required></p> <p><label for=" "> Address</label> <input type=" " id=" " required></p> <p><label for="password">password</label> <input type="password" id="password" required minlength="8"></p> <input type="submit" value="signup" > </form> Then in your JS code: $(document).ready( function () { $("form").validate(); });

15 8.4 Bootstrap JS

16 16 The Bootstrap is also packaged with a set of JS plugins. You can see the list at Bootstrap JS is designed to be used without writing any JavaScript code. Instead it relies on data HTML attributes. To use Bootstrap JS functions you will need to include the 2 bootstrap js files in your HTML file. You can download them to your machine and place in your js/ folder or use cdn: <script src=" min.js" ></script> <script src=" bootstrap.min.js" ></script>

17 Bootstrap comes with a slider function called carousel. It involves a lot more code than the bxslider plugin: <div id="carouselexampleindicators" class="carousel slide" dataride="carousel"> <ol class="carousel-indicators"> <li data-target="#carouselexampleindicators" data-slide-to="0" class="active"></li> <li data-target="#carouselexampleindicators" data-slide-to="1"></li> <li data-target="#carouselexampleindicators" data-slide-to="2"></li> </ol> <div class="carousel-inner"> <div class="carousel-item active"> <img class="d-block w-100" src="..." alt="first slide"> </div> <div class="carousel-item"> <img class="d-block w-100" src="..." alt="second slide"> </div> <div class="carousel-item"> <img class="d-block w-100" src="..." alt="third slide"> </div> </div> </div> 17

18 18 A more usable Bootstrap JS function is dropdown. Add class "dropdown" to the parent <ul>. Add datatoggle="dropdown" to the trigger button or link. Lastly include your submenu as a nested <ul> with class="dropdown-menu" <div class="dropdown"> <button class="btn btn-secondary dropdown-toggle" type="button" id="dropdownmenubutton" data-toggle="dropdown" aria-haspopup="true" ariaexpanded="false"> Dropdown button </button> <div class="dropdown-menu" aria-labelledby="dropdownmenubutton"> <a class="dropdown-item" href="#">action</a> <a class="dropdown-item" href="#">another action</a> <a class="dropdown-item" href="#">something else here</a> </div> </div>

19 19 Bootstrap has a JS function to toggle the visibility of an element. You need to set 2 attributes in your button or link: data-toggle="collapse" data-target="#nav" and 2 in your hidden element: class="collapse" id="nav" where the id is the same as data-target <button data-toggle="collapse" data-target="#nav">open nav</button> <div class="collapse" id="nav">nav goes here</div>

20 8.5 AngularJS

21 21 AngularJS is a JavaScript front-end framework. Many online applications like Netflix/GMail run on Javascript Frameworks. A framework is different to a library. Where a library has functions you can use how you like, a framework is setup to work a certain way. A framework like Angular can parse API endpoints and create HTML content.

22 22 Using AngularJS This is the quickest, simplest implementation of AngularJS. 1. Load their JS file in the <head> of your HTML page <script src=" js"></script> 2. Add ng-app to your opening <html> tag <html ng-app>

23 23 2 way Data Binding AngularJS can track if values change and update accordingly. <input type="text" ng-model="firstname" placeholder="enter your first name"> <h1>hi there {{firstname}}!</h1> With the ng-model attribute, you are linking the value of the input field to a model/variable Curly brackets {{ }} are a templating feature. They allow you to output content.

24 24 if statements AngularJS can display content conditionally. <input type="text" ng-model="firstname" placeholder="enter your first name"> <h1 ng-if="firstname">hi there {{firstname}}!</h1> Here we are checking if firstname is true, if so the <h1> displays

25 25 MVC Angular is built on the Model View Controller principle. The Model represents your data. The Controller can manipulate the data had handle interactions from View to the Model. The View is where your data is displayed. Your model, controller and view should be distinct. In this way your code should be more reusable. As an AngularJS App gets more complicated we use Controllers.

26 26 Using a Controller To use a Controller we must give our app a name <html ng-app="todoapp"> We're going to create an external js file as well and link to our HTML <script src="todo.js"></script> And last we set an attribute ng-controller on a div where the controller will show data <div ng-controller="todolistcontroller as todolist"> </div>

27 27 todo.js In our JS file we define a controller and add it to our app. We assign the controller to a variable to make it easier to use again. Last we create an array of todo objects. angular.module('todoapp', []).controller('todolistcontroller', function() { var todolist = this; todolist.todos = [ {text:'html Assignment', complete:true}, {text:'css Assignment', complete:true}, {text:'js Assignment', complete:false}, {text:'end Assignment', complete:false}]; });

28 28 ng-repeat Back in our HTML file we can loop through our array of todos using the attribute ng-repeat <ul> <li ng-repeat="todo in todolist.todos"> {{todo.text}} </li> </ul> We can also display a count You have {{todolist.todos.length}} todos

29 29 ng-model We can use the todo.complete value to display if a todo is completed. <input type="checkbox" ng-model="todo.complete"> We can improve how the todo is displayed <span class="complete-{{todo.complete}}"> {{todo.text}} </span> <style>.complete-true{ text-decoration:line-through; } </style>

30 30 Angular function You can define a function inside your controller and call it in your view. todolist.remaining = function() { var count = 0; angular.foreach(todolist.todos, function(todo) { if(todo.complete) count +=1; }); return count; }; To call in your HTML we write the controller.function name with round brackets. You have {{todolist.remaining()}} of {{todolist.todos.length}} todos outstanding

31 31 Call a angular function with an event You can use ng-click to run code on a click event. <a href="#" ng-click="todolist.archive()">archive</a> We can write a function to loop through our todos and only keep ones outstanding. todolist.archive = function() { var oldtodos = todolist.todos; todolist.todos = []; angular.foreach(oldtodos, function(todo) { if (!todo.complete) todolist.todos.push(todo); }); };

32 32 Call a angular function with a submit event You can also use ng-submit to run code on a click event. <form ng-submit="todolist.addtodo()"> <input type="text" ng-model="todolist.todotext"> <input type="submit" value="add todo"> </form> Then in your controller we write a function that pushes(adds) a new object into the todolist array. todolist.addtodo = function() { todolist.todos.push({text:todolist.todotext,done:false}); todolist.todotext = ''; };

33 8.6 JS Assignment

34 34 Javascript DHL Assignment 1. Create a HTML and CSS page based on It can be your own interpretation but must include a main menu and the calculator form 2. Using your CSS, set rules for your menu so it hides at lower screen sizes. Create a jquery trigger to show and hide the navigation using a button. 3. Setup the jquery validate plugin to validate the form. 4. Write a JS function to work out the volumetric weight (length*width*height/5000) 5. Find and include a new plugin that we haven't used in class.

A conditional statement can compare two values. Here we check if one variable we declared is greater than another. It is true so the code executes.

ANGULARJS #7 7.1 Review JS 3 A conditional statement can compare two values. Here we check if one variable we declared is greater than another. It is true so the code executes. var cups = 15; var saucers