S22
parent
f2e0331207
commit
9b328148e3
@ -0,0 +1,11 @@
|
||||
<!DOCTYPE html>
|
||||
<html lang="en">
|
||||
<head>
|
||||
<meta charset="UTF-8">
|
||||
<meta name="viewport" content="width=device-width, initial-scale=1.0">
|
||||
<title>JS Function Javascript</title>
|
||||
</head>
|
||||
<body>
|
||||
<script src="index.js"></script>
|
||||
</body>
|
||||
</html>
|
@ -0,0 +1,276 @@
|
||||
console.log("Hello World");
|
||||
|
||||
/* Syntax :
|
||||
function functionName() {
|
||||
code block (statement)
|
||||
}
|
||||
*/
|
||||
// function keyword - used to define a javascript function
|
||||
// functionName = the funtion name itself, functions are named to be able to use later in the code.
|
||||
// function block ({}) - the statements which comprise the body of the function, this is where the code is to be executed.
|
||||
|
||||
|
||||
function printName(){
|
||||
console.log("My Name is John");
|
||||
};
|
||||
|
||||
printName();
|
||||
|
||||
|
||||
// Semicolons are used to separate executable Javascript statements:
|
||||
|
||||
// Function Invocation
|
||||
// The code block and statements inside a function is not immediately executed when the function is defined.. It executes when it is invoke or called.
|
||||
|
||||
// Ex.
|
||||
|
||||
printName();
|
||||
|
||||
// declaredFunction; - this results in an error, much like variables, we cannot invoke a function we have yet to define.
|
||||
|
||||
// Function declarations vs expressions
|
||||
// Function Declaration
|
||||
|
||||
// A function can be created through function declaration by using the function keyword and adding a function name.
|
||||
|
||||
// Declared functions are not executed immediately. They are "saved for later use", and will be executed later, when they are invoked (called upon).
|
||||
|
||||
declaredFunction(); // declared functions can be hoisted, As long as the function has been defined.
|
||||
|
||||
function declaredFunction() {
|
||||
console.log("Hello world from declaredFunction()")
|
||||
}
|
||||
|
||||
declaredFunction();
|
||||
|
||||
// A function can also be stored in a variable. This is called a function expression.
|
||||
|
||||
// A function expression is an anonymous function assigned to the variableFunction
|
||||
|
||||
// Anonymus function - is a function without a name
|
||||
|
||||
// variableFunction();
|
||||
|
||||
let variableFunction = function() {
|
||||
console.log("Hello Again!");
|
||||
};
|
||||
|
||||
variableFunction();
|
||||
|
||||
// We can also create function exp[ression] named function.
|
||||
// However, to invoke the function expression, we invoke it by its variable name and not by its functionname.
|
||||
// Function expressions are always invoked (called) using the variable name.
|
||||
|
||||
let funcExpression = function funcName() {
|
||||
|
||||
console.log("Hello From The Other Side");
|
||||
|
||||
};
|
||||
|
||||
funcExpression();
|
||||
|
||||
|
||||
|
||||
// You can reassign declared function and function expression to new anonymous functions.
|
||||
|
||||
declaredFunction = function() {
|
||||
console.log("updated declaredFunction");
|
||||
}
|
||||
|
||||
declaredFunction();
|
||||
|
||||
funcExpression = function () {
|
||||
console.log("Updated funcExpression");
|
||||
}
|
||||
|
||||
funcExpression();
|
||||
|
||||
// However, we cannot re-assign a function expression initialized with const
|
||||
|
||||
// const constantFunc = function(){
|
||||
// console.log("Initialized with const!")
|
||||
// }
|
||||
|
||||
// constantFunc();
|
||||
|
||||
// constantFunc = function(){
|
||||
// console.log("Cannot be re-assigned!")
|
||||
// }
|
||||
|
||||
// constantFunc();
|
||||
|
||||
// Function Scoping
|
||||
|
||||
/* Scope is the accessibility (visibility) of variables within our program.
|
||||
Javascript Variables has 3 types of scope:
|
||||
1. local scope
|
||||
2. global scope
|
||||
3. function scope
|
||||
|
||||
*/
|
||||
|
||||
{
|
||||
let localVar = "Armando Perez";
|
||||
}
|
||||
|
||||
let globalVar = "Mr. Worldwide"
|
||||
|
||||
console.log(globalVar);
|
||||
|
||||
// This would result to an error because a local-scoped variable cannot be accessed outside of its code block.
|
||||
// console.log(localVar);
|
||||
|
||||
// Function Scope
|
||||
|
||||
/*
|
||||
Javascript has function scope: Each function creates a new scope.
|
||||
Variables defined inside a function, are not accessible (visible)
|
||||
from the outside of the function.
|
||||
|
||||
Variables declared with va, let and const are quote similar when declared inside a function.
|
||||
*/
|
||||
|
||||
function showNames() {
|
||||
// Function scoped variables:
|
||||
var functionVar = "Joe";
|
||||
const functionConst = "John";
|
||||
let functionLet = "Jane";
|
||||
|
||||
console.log(functionVar);
|
||||
console.log(functionConst);
|
||||
console.log(functionLet);
|
||||
}
|
||||
|
||||
showNames();
|
||||
|
||||
// console.log(functionVar);
|
||||
// console.log(functionConst);
|
||||
// console.log(functionLet)
|
||||
|
||||
/*
|
||||
|
||||
The Variables, functionVar, functionConst, and functionLet, are function scoped and cannot be accessed outside of the function they were declared in.
|
||||
|
||||
*/
|
||||
|
||||
// Nested Functions
|
||||
|
||||
// You can create another fuynction inside a function. This is called nested function. This nested function, being inside the myNewFRunction will have access to the variable, name as they are within the scope /code block.
|
||||
|
||||
|
||||
function myNewFunction() {
|
||||
let name ="Jane";
|
||||
|
||||
function nestedFunction(){
|
||||
let nestedName = "John"
|
||||
console.log(nestedName);
|
||||
}
|
||||
// NestedName variable, being declared in the nestedFunction cannot be accessed outside of the function it was declared in.
|
||||
nestedFunction();
|
||||
}
|
||||
myNewFunction();
|
||||
// Moreover, since this function is declared inside myNewFunction, it too cannot be invoked outside of the function it was declared in.
|
||||
|
||||
|
||||
// Function and global scoped variables
|
||||
|
||||
// Global Scoped Variable
|
||||
let globalName = "Alexandro";
|
||||
|
||||
function myNewFunction2(){
|
||||
let nameInside = "Renz"
|
||||
|
||||
// Variable declared globally (outside any function) have global scope.
|
||||
|
||||
// Global variables can be accessed from anywhere in a Javascript.
|
||||
// Program including from inside a function.
|
||||
console.log(globalName);
|
||||
}
|
||||
|
||||
myNewFunction2();
|
||||
// Console.log(nameInside); it would result to an error.
|
||||
// nameInside is function scoped, it cannot be accessed globally.
|
||||
|
||||
/*
|
||||
The "return" statement allows us to output a value from a function to be passed to the line/block of code that invoke/called the function.
|
||||
returnUserName() is a function that is a able to return a value which can then be saved in a variable.
|
||||
*/
|
||||
function returnFullName() {
|
||||
return "Jeffrey" + ' ' + "Smith" + ' ' + "Bezoz";
|
||||
console.log("This message will not be printed");
|
||||
}
|
||||
|
||||
let fullName = returnFullName();
|
||||
console.log(fullName);
|
||||
|
||||
console.log(returnFullName());
|
||||
|
||||
/*
|
||||
This way, a function is able to return a value we can further use/manipulate in our program instead of only printing/displaying it in the console.
|
||||
Notice that the console.log() after the return is no longer printer in the console that is because ideally any line/block of code that comes after the return statement is ignored because it ends the function execution.
|
||||
returnFullName() function.
|
||||
|
||||
*/
|
||||
|
||||
console.log(returnFullName());
|
||||
|
||||
/*
|
||||
You can also create a variable inside the function to contain the result and return that variable instead. You can do this for ease of use or fore code readability.
|
||||
*/
|
||||
|
||||
function returnFullAddress (){
|
||||
let fullAddress = {
|
||||
street: "#44 Maharlika St.",
|
||||
city: "Cainta",
|
||||
province: "Rizal",
|
||||
};
|
||||
return fullAddress;
|
||||
}
|
||||
|
||||
let myAddress = returnFullAddress();
|
||||
console.log(myAddress);
|
||||
|
||||
// On the other hand, when a function that only has console.log() to display its result, it will return an underfined:
|
||||
|
||||
function printPlayerInfo() {
|
||||
console.log("Username: " + "white_knight");
|
||||
console.log("Level " + 95);
|
||||
console.log("Job: " + "Paladin");
|
||||
}
|
||||
let user1 = printPlayerInfo();
|
||||
console.log(user1);
|
||||
|
||||
// Returns undefined because printPlayerIno returns nothing. It only displayes the details in the console.
|
||||
|
||||
// You cannot save any value from printPlayerInfo() because it does not return anything.
|
||||
|
||||
// You can return almost any data types from a function.
|
||||
|
||||
function returnSumOf5and10() {
|
||||
return 5 + 10
|
||||
}
|
||||
|
||||
let sumOf5and10 = returnSumOf5and10();
|
||||
console.log(sumOf5and10)
|
||||
|
||||
let total = 100 + returnSumOf5and10();
|
||||
console.log(total);
|
||||
|
||||
// Simulates getting an array of user names from a database
|
||||
function getGuildMembers() {
|
||||
return ["white_knight", "healer2000", "masterThief100", "andrewthehero", "ladylady99"]
|
||||
}
|
||||
|
||||
console.log(getGuildMembers());
|
||||
|
||||
// Function Naming Conventions
|
||||
// Function names should be definitive of the task it will perform. It usually contains a verb
|
||||
|
||||
function getCourses() {
|
||||
let courses = ["Science 101", "Math 101", "English 101"];
|
||||
return courses;
|
||||
}
|
||||
let courses = getCourses();
|
||||
console.log(courses);
|
||||
|
||||
// Avoid generic names to avoid confusion within your code.
|
@ -0,0 +1,12 @@
|
||||
<!DOCTYPE html>
|
||||
<html lang="en">
|
||||
<head>
|
||||
<meta charset="UTF-8">
|
||||
<meta name="viewport" content="width=device-width, initial-scale=1.0">
|
||||
<title>Javascript - Function Parameters and return statements</title>
|
||||
</head>
|
||||
<body>
|
||||
|
||||
<script src="index.js"></script>
|
||||
</body>
|
||||
</html>
|
@ -0,0 +1,144 @@
|
||||
console.log("Hello World");
|
||||
|
||||
|
||||
// muliplyNum / divideNum
|
||||
// getCircleArea / circleArea
|
||||
// getAverage / averageVar
|
||||
// checkIfPassed
|
||||
|
||||
|
||||
/*
|
||||
|
||||
1. Create a function called addNum which will be able to add two numbers.
|
||||
- Numbers must be provided as arguments.
|
||||
- Return the result of the addition.
|
||||
*/
|
||||
|
||||
function addNum(a, b) {
|
||||
console.log("Displayed sum of " + a + " and " + b);
|
||||
return a + b;
|
||||
}
|
||||
|
||||
console.log(addNum(5, 15));
|
||||
|
||||
/*
|
||||
Create a function called subNum which will be able to subtract two numbers.
|
||||
- Numbers must be provided as arguments.
|
||||
- Return the result of subtraction.
|
||||
|
||||
Create a new variable called sum.
|
||||
- This sum variable should be able to receive and store the result of addNum function.
|
||||
|
||||
Create a new variable called difference.
|
||||
- This difference variable should be able to receive and store the result of subNum function.
|
||||
|
||||
Log the value of sum variable in the console.
|
||||
Log the value of difference variable in the console.
|
||||
*/
|
||||
|
||||
function subNum(a, b) {
|
||||
console.log("Displayed difference of " + a + " and " + b);
|
||||
return a - b;
|
||||
}
|
||||
|
||||
console.log(subNum(20, 5));
|
||||
/*
|
||||
2. Create a function called multiplyNum which will be able to multiply two numbers.
|
||||
- Numbers must be provided as arguments.
|
||||
- Return the result of the multiplication.
|
||||
|
||||
Create a function divideNum which will be able to divide two numbers.
|
||||
- Numbers must be provided as arguments.
|
||||
- Return the result of the division.
|
||||
|
||||
Create a new variable called product.
|
||||
- This product variable should be able to receive and store the result of multiplyNum function.
|
||||
|
||||
Create a new variable called quotient.
|
||||
- This quotient variable should be able to receive and store the result of divideNum function.
|
||||
|
||||
Log the value of product variable in the console.
|
||||
Log the value of quotient variable in the console.
|
||||
*/
|
||||
function multiplyNum(a, b) {
|
||||
console.log("The product of " + a + " and " + b);
|
||||
return a * b;
|
||||
}
|
||||
|
||||
console.log(multiplyNum(50, 10));
|
||||
|
||||
function divideNum(a, b) {
|
||||
console.log("The quotient of " + a + " and " + b);
|
||||
return a / b;
|
||||
}
|
||||
|
||||
console.log(divideNum(50, 10));
|
||||
/*
|
||||
3. Create a function called getCircleArea which will be able to get total area of a circle from a provided radius.
|
||||
- a number should be provided as an argument.
|
||||
- look up the formula for calculating the area of a circle with a provided/given radius.
|
||||
- look up the use of the exponent operator.
|
||||
- return the result of the area calculation.
|
||||
|
||||
Create a new variable called circleArea.
|
||||
- This variable should be able to receive and store the result of the circle area calculation.
|
||||
- Log the value of the circleArea variable in the console.
|
||||
*/
|
||||
function getCircleArea(radius) {
|
||||
console.log("The result of getting the area of a circle with " + radius + " radius:")
|
||||
return 3.14 * (radius ** 2);
|
||||
}
|
||||
|
||||
console.log(getCircleArea(15));
|
||||
|
||||
/*
|
||||
4. Create a function called getAverage which will be able to get total average of four numbers.
|
||||
- 4 numbers should be provided as an argument.
|
||||
- look up the formula for calculating the average of numbers.
|
||||
- return the result of the average calculation.
|
||||
|
||||
Create a new variable called averageVar.
|
||||
- This variable should be able to receive and store the result of the average calculation
|
||||
- Log the value of the averageVar variable in the console.
|
||||
*/
|
||||
function getAverage(a, b, c, d) {
|
||||
return console.log("The average of " + a + "," + b + "," + c + "," + " and " + d + ":"), (a + b + c + d) / 4;
|
||||
}
|
||||
|
||||
console.log(getAverage(20,40,60,80));
|
||||
/*
|
||||
5. Create a function called checkIfPassed which will be able to check if you passed by checking the percentage of your score against the passing percentage.
|
||||
- this function should take 2 numbers as an argument, your score and the total score.
|
||||
- First, get the percentage of your score against the total. You can look up the formula to get percentage.
|
||||
- Using a relational operator, check if your score percentage is greater than 75, the passing percentage. Save the value of the comparison in a variable called isPassed.
|
||||
- return the value of the variable isPassed.
|
||||
- This function should return a boolean.
|
||||
|
||||
Create a global variable called outside of the function called isPassingScore.
|
||||
-This variable should be able to receive and store the boolean result of the checker function.
|
||||
-Log the value of the isPassingScore variable in the console.
|
||||
*/
|
||||
function checkIfPassed(x,y) {
|
||||
console.log("Is " + x +"/"+ y +" a passing score?");
|
||||
return checkIfPassed = ((x, y) => x + y, true);
|
||||
}
|
||||
console.log(checkIfPassed(38,50));
|
||||
|
||||
//Do not modify
|
||||
//For exporting to test.js
|
||||
//Note: Do not change any variable and function names. All variables and functions to be checked are listed in the exports.
|
||||
try{
|
||||
module.exports = {
|
||||
|
||||
addNum: typeof addNum !== 'undefined' ? addNum : null,
|
||||
subNum: typeof subNum !== 'undefined' ? subNum : null,
|
||||
multiplyNum: typeof multiplyNum !== 'undefined' ? multiplyNum : null,
|
||||
divideNum: typeof divideNum !== 'undefined' ? divideNum : null,
|
||||
getCircleArea: typeof getCircleArea !== 'undefined' ? getCircleArea : null,
|
||||
getAverage: typeof getAverage !== 'undefined' ? getAverage : null,
|
||||
checkIfPassed: typeof checkIfPassed !== 'undefined' ? checkIfPassed : null,
|
||||
|
||||
}
|
||||
} catch(err){
|
||||
|
||||
}
|
@ -0,0 +1,12 @@
|
||||
<!DOCTYPE html>
|
||||
<html lang="en">
|
||||
<head>
|
||||
<meta charset="UTF-8">
|
||||
<meta name="viewport" content="width=device-width, initial-scale=1.0">
|
||||
<title>Javascript - Function Parameters and return statements</title>
|
||||
</head>
|
||||
<body>
|
||||
|
||||
<script src="index.js"></script>
|
||||
</body>
|
||||
</html>
|
@ -0,0 +1,163 @@
|
||||
console.log("Hello World");
|
||||
|
||||
// Functions
|
||||
// Parameters and Arguments
|
||||
// Functions in javascript are lines/blocks of codes that tell our device/application to perform a certain task when called/invoked.
|
||||
|
||||
// Functions are mostly created to create complicated task to run several lines of code in succession
|
||||
|
||||
// They are also used to prevent repeating lines/blocks of codes that perform the same task/function
|
||||
|
||||
// [Prompt]
|
||||
|
||||
function printInput() {
|
||||
let nickname = prompt("Enter your nickname: ");
|
||||
console.log("Hi, " + nickname);
|
||||
}
|
||||
|
||||
printInput()
|
||||
|
||||
|
||||
// However, for some use cases, this may not be ideal.
|
||||
// For other cases, functions can also process data directly passed into it instead of relying only on Global Variables and prompt()
|
||||
|
||||
// [SECTION FOR FUNCTION PARAMETERS]aa
|
||||
|
||||
function printName(name) {
|
||||
console.log("My name is " + name);
|
||||
};
|
||||
|
||||
printName("Andrei");
|
||||
printName("John");
|
||||
printName("Jane");
|
||||
printName("John");
|
||||
|
||||
|
||||
// You can directly pass data into the function. The function can then call/use that data which is referred as "name" within the function.
|
||||
|
||||
// "name" is called a parameter
|
||||
|
||||
// A "parameter acts" as a named variable/container that exist only inside of a function.
|
||||
|
||||
// It is used to store information that is provided to a function when it is called/invoked.
|
||||
|
||||
// "Juana", the information provided directly into the function is called an argument.
|
||||
|
||||
// Values passed in invoking a function are call arguments.
|
||||
|
||||
let sampleVariable = "Yui";
|
||||
|
||||
printName(sampleVariable);
|
||||
|
||||
// Function arguments cannot be used by a function if there are no parameters provided within the function.
|
||||
|
||||
// Now, you can create a function which can be re-used to check for a number's divisibility instead of having to manually do it every time like our previous activity!
|
||||
|
||||
function checkDivisibilityBy8 (num){
|
||||
let remainder = num % 8;
|
||||
console.log("The remainder of " + num + " divided by 8 is: " + remainder);
|
||||
let isDivisibleBy8 = remainder === 0;
|
||||
console.log("Is " + num + " divisible by 8?");
|
||||
console.log(isDivisibleBy8);
|
||||
}
|
||||
|
||||
checkDivisibilityBy8(64);
|
||||
checkDivisibilityBy8(128);
|
||||
checkDivisibilityBy8(127);
|
||||
|
||||
// You can also do the same using prompt(), however, take note that prompt() outputs a string. And strings are not ideal for mathematical computations.
|
||||
|
||||
|
||||
// Functions as Arguments
|
||||
// Function Parameters can also accept other functions as agruments
|
||||
// Some ocmplex functions use other functions as arguments to perform more complicated results.
|
||||
// This will be further seen when we discuss array.
|
||||
|
||||
function argumentFunction() {
|
||||
console.log("This function was passed as an argument before the message was printed.")
|
||||
}
|
||||
|
||||
function invokeFunction() {
|
||||
argumentFunction();
|
||||
}
|
||||
// Adding and removing the parenthesis () impacts the output of JavaScript heavily
|
||||
// When a function is used with parentheses (), it denotes invoking/ calling a function.
|
||||
// A function used without a parentheses is normally associate with using the function as an argument to another function.
|
||||
|
||||
invokeFunction(argumentFunction);
|
||||
console.log(argumentFunction);
|
||||
|
||||
// or finding more information about a function in the console using console.log()
|
||||
console.log(argumentFunction);
|
||||
|
||||
// Using multiple parameters
|
||||
|
||||
// Multiple "Arguments" will correspond to the number of "parameters" declared in a function in succeeding order.
|
||||
|
||||
function createFullName(firstName, middleName, lastName) {
|
||||
console.log(firstName + ' ' + middleName + ' ' + lastName);
|
||||
}
|
||||
|
||||
createFullName('Juan', 'Dela', 'Cruz');
|
||||
createFullName('Jane', 'Mary', 'Cruz');
|
||||
|
||||
// Using alert ()
|
||||
// Alert() allows us to show a small window at the top of our browser page to show information to our users. As opposed to a console.log() which only shows the message on the console. It allow us to show a short dialog or instruction to our user. The page will wait until the user dismissed the dialog.
|
||||
|
||||
alert("Hello Batch 322");
|
||||
// This will run immediately when the page loads.
|
||||
// Alert() syntax:
|
||||
// Aler("<messageInString");
|
||||
|
||||
// You can use an alert() to show a message to the user from a later function invocation.
|
||||
|
||||
function showSampleAlert() {
|
||||
alert("Hello, User!");
|
||||
}
|
||||
|
||||
showSampleAlert();
|
||||
console.log("I will only log on the console when the alert is dismissed.")
|
||||
|
||||
// Notes on the use of alert()
|
||||
// Show only an alert () for short/dialogs/messages to the user.
|
||||
// Do not overuse alert!
|
||||
|
||||
// Using Prompt
|
||||
// prompt() allows us to show a small window at the top of the browser to gather user input. It, much like alert(), will have the pages wait until the user completes or enters their input.
|
||||
// The input from the prompt() will be return as a String once the user dismisses the window.
|
||||
|
||||
let samplePrompt = prompt("Enter your Name.");
|
||||
|
||||
// console.log(typeof samplePrompt); the value of the user input from a prompt is returned as a string.
|
||||
|
||||
console.log("Hello, " + samplePrompt);
|
||||
|
||||
/*
|
||||
prompt() Syntax:
|
||||
prompt("<dialogInString>");
|
||||
*/
|
||||
|
||||
let sampleNullPrompt = prompt("Don't enter anything.")
|
||||
|
||||
console.log(sampleNullPrompt);
|
||||
// prompt() returns an empty string when there is no input. Or null if the user cancels the prompt().a
|
||||
|
||||
|
||||
// prompt() can be used to gather user input and be used in our code. However, since prompt() windows will have the page wait until the user dismisses the window it must not be overused.
|
||||
|
||||
// prompt() used globally will be run immediately, so, for better user experience, it is much better to use them accordingly or add them in a function.
|
||||
|
||||
// Let's create function scope variables to store the returned data from our prompt(). This way, way can dictate when to use a prompt() window or have a reusable function to use or prompts.
|
||||
|
||||
function printWelcomeMessage() {
|
||||
let firstName = prompt("Enter Your First Name");
|
||||
|
||||
let lastName = prompt("Enter Your Last Name");
|
||||
console.log("Hello " + firstName + " " + lastName + "!");
|
||||
console.log("Welcome to my page!");
|
||||
}
|
||||
|
||||
printWelcomeMessage();
|
||||
|
||||
|
||||
|
Loading…
Reference in New Issue