Ecosyste.ms: Awesome
An open API service indexing awesome lists of open source software.
https://github.com/rhildred/javascriptscripting
Introduction to control structures with javascript
https://github.com/rhildred/javascriptscripting
Last synced: 14 days ago
JSON representation
Introduction to control structures with javascript
- Host: GitHub
- URL: https://github.com/rhildred/javascriptscripting
- Owner: rhildred
- License: mit
- Created: 2015-11-17T15:12:26.000Z (about 9 years ago)
- Default Branch: gh-pages
- Last Pushed: 2016-02-21T18:00:39.000Z (almost 9 years ago)
- Last Synced: 2024-04-14T14:03:09.315Z (9 months ago)
- Language: HTML
- Size: 7.81 KB
- Stars: 0
- Watchers: 3
- Forks: 1
- Open Issues: 0
-
Metadata Files:
- Readme: README.md
- License: LICENSE
Awesome Lists containing this project
README
# javascript scripting
... Introduction to control structures with javascript.
Two lectures ago we spoke about programming in general terms. The foundational programming control structures were mentioned, these being selection, iteration and sequence:
This looks at these control structures as they are implemented in javascript.
##Sequence
```
Javascript Rocks!
document.write("Hello World!");
document.write("<br />");
document.write(" so there!");
```
You can see this in action at [https://rhildred.github.io/javascriptscripting/index.html](https://rhildred.github.io/javascriptscripting/). The general idea is that when the computer performs a sequence it does one thing after another.
##Iteration
Someone in class nailed it when they said that iteration will happen forever until an ending condition is met. In honour of my love of marshmallow filled cookies, I present the following example message to my wife, who buys groceries.
```
var x = 0;
while(x < 100){
document.write("I love Vivas! Please buy some.");
document.write("<br />");
x = x + 1;
}
```
You can see this in action at [https://rhildred.github.io/javascriptscripting/ilovevivas.html](https://rhildred.github.io/javascriptscripting/ilovevivas.html). Of course this is much faster than me typing this over and over.
##Selection
```
var score = 75;
if(score > 55){
document.write("You Passed");
}else{
document.write("You failed");
}
document.write("<br />");
```
You can see this in action at [https://rhildred.github.io/javascriptscripting/youpassed.html](https://rhildred.github.io/javascriptscripting/youpassed.html). This is mildly interesting, but to change the message that appears, you need to edit the code. What we really need to do is code it once, then anyone can figure out their passing or failing status.
##Selection with a user interface
The Angular team from Google theorizes that user interfaces and triggering events [are best done declaratively](https://en.wikipedia.org/wiki/AngularJS#Philosophy). I agree. For our user interface we will need an html form:
```
Input test score
Get Status
You passed or failed would go here
```
Angular lets us link the event of clicking the button, declared in our form, to an imperative selection between passing and failing.
```
angular.module("myApp", []).controller("myCtrl", function ($scope) {
$scope.calculate = function(){
if($scope.score > 55){
$scope.message = "you passed!"
}else{
$scope.message = "you failed";
}
}
});
Input test score
Get Status
{{message}}
```
You can see this in action at [https://rhildred.github.io/javascriptscripting/passorfailcalculator.html](https://rhildred.github.io/javascriptscripting/passorfailcalculator.html). The whole repository is viewable at [https://github.com/rhildred/javascriptscripting](https://github.com/rhildred/javascriptscripting) Everything that begins with ng- or {{ links javascript code to the html elements. This is a powerful technique for adding a user interface to our programs. Happy Coding!!!