Added page for JS functions

Author: nicholsons

README.md

@@ -1,12 +1,12 @@
 # comp0034_js
-COMP0034 Code for the Javascript lecture
+COMP0034 Code for the using Javascript in a Flask app lecture
 
 1. Clone the repository
 2. Add a venv
 3. Install the packages from requirements.txt
 4. Run the Flask app using `run.py`
 5. The JavaScript code from the lecture slides can be found using the JavaScript examples menu link.
 6. The final code for the Flask examples is in `static/js/hn.js`. If you want to see the code at the start of each example then use the earlier versions, e.g. `hn_1.js`, `hn_2.js` etc.
-7. To view the final code for the news page select the news link from the menu.
+7. To view the final code for the news page select the `news` link from the menu.
 
-There are no exercises with this repository.
+Apologies, there are no exercises with this repository.

cscourses/main/routes.py

@@ -63,6 +63,7 @@ def news_v1():
 def news():
     return render_template('news.html')
 
+
 @bp_main.route('/js')
 def js():
     return render_template('js_examples.html')
@@ -81,3 +82,8 @@ def events():
 @bp_main.route('/js/basics')
 def basics():
     return render_template('basics.html')
+
+
+@bp_main.route('/js/functions')
+def functions():
+    return render_template('functions.html')

cscourses/static/js/basics.js

@@ -195,4 +195,54 @@ function Person(firstname, lastname, height, dateOfBirth) {
 var person1 = new Person("Jo", "Bloggs", 2.1, "12/30/1969");
 console.log(person1.firstname); //dot notation
 console.log(person1["height"]);  //bracket notation
-console.log(person1.calculateAge());
+console.log(person1.calculateAge());
+
+
+/* Variable scope */
+//Global variable
+var count = 0;  //Global
+function incr(n) {
+    count += n;
+}
+
+function reset() {
+    count = 0;
+}
+
+incr(4);
+reset();
+incr(2);
+console.log(count);
+
+//Function scope
+function everything() {
+    var count = 0;
+
+    function incr(n) {
+        count += n;
+    }
+
+    function reset() {
+        count = 0;
+    }
+
+    incr(4);
+    reset();
+    incr(2);
+    console.log(count);
+}
+
+everything();
+
+//Block scope
+/*
+Variables declared with the let keyword can have Block Scope, variables declared inside a block {} using let cannot be
+accessed from outside the block, variables inside a block {} using var can be accessed from outside the block.
+ */
+if (true) {
+    var x = 2;
+    let y = 2;
+}
+console.log(x);
+console.log(y);  //should give an error that y is undefined
+

cscourses/static/js/functions.js

@@ -2,7 +2,7 @@
 
 //Named function
 function findBiggest(firstFraction, secondFraction) {
-    var result;
+    let result;
     if (firstFraction > secondFraction) {
         result = "The first fraction is bigger: " + firstFraction + " than the second fraction: " + secondFraction;
     } else {
@@ -11,11 +11,11 @@ function findBiggest(firstFraction, secondFraction) {
     return result;
 }
 
-console.log(findBiggest(2 / 3, 7 / 12));
+//console.log(findBiggest(2 / 3, 7 / 12));
 
 //Anonymous function
-var biggest = function (firstFraction, secondFraction) {
-    var result;
+let biggest = function (firstFraction, secondFraction) {
+    let result;
     if (firstFraction > secondFraction) {
         result = "The first fraction is bigger: " + firstFraction + " than the second fraction: " + secondFraction;
     } else {
@@ -24,12 +24,11 @@ var biggest = function (firstFraction, secondFraction) {
     return result;
 };
 
-console.log(biggest(2 / 3, 7 / 12));
+//console.log(biggest(2 / 3, 7 / 12));
 
 //Self-invoking function
-
-var biggest = (function (firstFraction, secondFraction) {
-    var result;
+let selfInvokingFunction = (function (firstFraction, secondFraction) {
+    let result;
     if (firstFraction > secondFraction) {
         result = "The first fraction is bigger: " + firstFraction + " than the second fraction: " + secondFraction;
     } else {
@@ -38,54 +37,4 @@ var biggest = (function (firstFraction, secondFraction) {
     return result;
 })(2 / 3, 7 / 12);
 
-console.log(biggest);
-
-
-/* Variable scope */
-//Global variable
-var count = 0;  //Global
-function incr(n) {
-    count += n;
-}
-
-function reset() {
-    count = 0;
-}
-
-incr(4);
-reset();
-incr(2);
-console.log(count);
-
-//Function scope
-function everything() {
-    var count = 0;
-
-    function incr(n) {
-        count += n;
-    }
-
-    function reset() {
-        count = 0;
-    }
-
-    incr(4);
-    reset();
-    incr(2);
-    console.log(count);
-}
-
-everything();
-
-//Block scope
-/*
-Variables declared with the let keyword can have Block Scope, variables declared inside a block {} using let cannot be
-accessed from outside the block, variables inside a block {} using var can be accessed from outside the block.
- */
-if (true) {
-    var x = 2;
-    let y = 2;
-}
-console.log(x);
-console.log(y);  //should give an error that y is undefined
-
+//console.log(selfInvokingFunction);

cscourses/templates/functions.html

@@ -0,0 +1,51 @@
+{% extends 'base.html' %}
+{% block title %}Functions examples{% endblock %}
+{% block javascript %}
+    <script src="{{ url_for('static', filename='js/functions.js') }}" defer></script>
+{% endblock %}
+{% block content %}
+    <br>
+    <h2>Instructions</h2>
+    <p>The JavaScript functions can be viewed in <a href="{{ url_for('static', filename='js/functions.js') }}">functions.js</a>
+    </p>
+    <h4>Named function</h4>
+    <pre><code>
+function findBiggest(firstFraction, secondFraction) {
+let result;
+if (firstFraction > secondFraction) {
+    result = "The first fraction is bigger: " + firstFraction + " than the second fraction: " + secondFraction;
+} else {
+    result = "The second fraction is bigger: " + secondFraction + " than the first fraction: " + firstFraction;
+}
+return result;
+}</code></pre>
+    <h4>Anonymous function</h4>
+    <pre><code>
+let biggest = function (firstFraction, secondFraction) {
+    let result;
+    if (firstFraction > secondFraction) {
+        result = "The first fraction is bigger: " + firstFraction + " than the second fraction: " + secondFraction;
+    } else {
+        result = "The second fraction is bigger: " + secondFraction + " than the first fraction: " + firstFraction;
+    }
+    return result;
+};</code></pre>
+    <h4>Self-invoking function</h4>
+    <pre><code>
+let selfInvokingFunction = (function (firstFraction, secondFraction) {
+    let result;
+    if (firstFraction > secondFraction) {
+        result = "The first fraction is bigger: " + firstFraction + " than the second fraction: " + secondFraction;
+    } else {
+        result = "The second fraction is bigger: " + secondFraction + " than the first fraction: " + firstFraction;
+    }
+    return result;
+})(2 / 3, 7 / 12);</code></pre>
+    <br>
+    <h3>Execute the types of function</h3>
+    <p>1. Named function. Enter in the JavaScript console: <code>console.log(findBiggest(2 / 3, 7 / 12));</code></p>
+    <p>2. Anonymous function. Enter in the JavaScript console: <code>console.log(biggest(2 / 3, 7 / 12));</code></p>
+    <p>3. An immediately executed function is executed as soon as the JavaScript is seen, so this function has already
+        been executed. You can see the value that was generated. Enter the following code in the JavaScript console:
+        <code>console.log(selfInvokingFunction);</code></p>
+{% endblock %}

cscourses/templates/js_examples.html

@@ -4,6 +4,7 @@
     <br>
     <h3>Javascript examples</h3>
     <p><a href="{{ url_for('main.basics') }}">Basic JavaScript examples</a></p>
+    <p><a href="{{ url_for('main.functions') }}">JavaScript function examples</a></p>
     <p><a href="{{ url_for('main.dom') }}">DOM examples</a></p>
     <p><a href="{{ url_for('main.events') }}">Event examples</a></p>
 {% endblock %}