You cannot select more than 25 topics
Topics must start with a letter or number, can include dashes ('-') and can be up to 35 characters long.
164 lines
6.3 KiB
JavaScript
164 lines
6.3 KiB
JavaScript
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();
|
|
|
|
|
|
|