HTML preprocessors can make writing HTML more powerful or convenient. For instance, Markdown is designed to be easier to write and read for text documents and you could write a loop in Pug.
In CodePen, whatever you write in the HTML editor is what goes within the <body>
tags in a basic HTML5 template. So you don't have access to higher-up elements like the <html>
tag. If you want to add classes there that can affect the whole document, this is the place to do it.
In CodePen, whatever you write in the HTML editor is what goes within the <body>
tags in a basic HTML5 template. If you need things in the <head>
of the document, put that code here.
The resource you are linking to is using the 'http' protocol, which may not work when the browser is using https.
CSS preprocessors help make authoring CSS easier. All of them offer things like variables and mixins to provide convenient abstractions.
It's a common practice to apply CSS to a page that styles elements such that they are consistent across all browsers. We offer two of the most popular choices: normalize.css and a reset. Or, choose Neither and nothing will be applied.
To get the best cross-browser support, it is a common practice to apply vendor prefixes to CSS properties and values that require them to work. For instance -webkit-
or -moz-
.
We offer two popular choices: Autoprefixer (which processes your CSS server-side) and -prefix-free (which applies prefixes via a script, client-side).
Any URLs added here will be added as <link>
s in order, and before the CSS in the editor. You can use the CSS from another Pen by using its URL and the proper URL extension.
You can apply CSS to your Pen from any stylesheet on the web. Just put a URL to it here and we'll apply it, in the order you have them, before the CSS in the Pen itself.
You can also link to another Pen here (use the .css
URL Extension) and we'll pull the CSS from that Pen and include it. If it's using a matching preprocessor, use the appropriate URL Extension and we'll combine the code before preprocessing, so you can use the linked Pen as a true dependency.
JavaScript preprocessors can help make authoring JavaScript easier and more convenient.
Babel includes JSX processing.
Any URL's added here will be added as <script>
s in order, and run before the JavaScript in the editor. You can use the URL of any other Pen and it will include the JavaScript from that Pen.
You can apply a script from anywhere on the web to your Pen. Just put a URL to it here and we'll add it, in the order you have them, before the JavaScript in the Pen itself.
If the script you link to has the file extension of a preprocessor, we'll attempt to process it before applying.
You can also link to another Pen here, and we'll pull the JavaScript from that Pen and include it. If it's using a matching preprocessor, we'll combine the code before preprocessing, so you can use the linked Pen as a true dependency.
Search for and use JavaScript packages from npm here. By selecting a package, an import
statement will be added to the top of the JavaScript editor for this package.
Using packages here is powered by esm.sh, which makes packages from npm not only available on a CDN, but prepares them for native JavaScript ESM usage.
All packages are different, so refer to their docs for how they work.
If you're using React / ReactDOM, make sure to turn on Babel for the JSX processing.
If active, Pens will autosave every 30 seconds after being saved once.
If enabled, the preview panel updates automatically as you code. If disabled, use the "Run" button to update.
If enabled, your code will be formatted when you actively save your Pen. Note: your code becomes un-folded during formatting.
Visit your global Editor Settings.
<head>
<meta name="viewport" content="width=device-width, initial-scale=1">
</head>
<body>
<div class="topnav">
<a class="active" href="#home">Home</a>
<a href="#about">About</a>
<a href="#contact">Contact</a>
<div class="search-container">
<form action="/action_page.php">
<input type="text" placeholder="Search.." name="search">
<button type="submit">Submit</button>
</form>
</div>f
</div>
<div style="padding-left:16px">
<header> Where does JS go? </header>
<script>
</script>
Easy way to remeber
javaSCRIPT
<h2>Comment Your JavaScript Code</h2>
<p>//double line
/*multi-line*/ </p>
<h2> Declare JavaScript Variables</h2>
<p>var stands for VARiable
to make something into a variable just use the word var. Like
var thisCat;
alway's close with the ;Iterate Through All an Array's Items Using For Loops
but, we can also use let which is better then var since it takes more then just one line
undefined also known as NaN
null
boolean returns either true our false
string declared by '' our ""
symbol
number like: 1, 100
object</p>
primitives: boolean null undefined number BigInt string symbole
<h2>Storing Values with the Assignment Operator </h2>
Assigment opperators always goes right --> to left< --
b = 5;
This assigns the Number value 5 to b </>
<h2> Understanding Uninitialized Variables </h2>
<p> Like we told before
undefined will result onto NaN Not A Number. All JS elements have this value if there is nothing in it.</p>
<h6>Understanding Case Sensitivity in Variables</h6>
<p> JS can be is a real Grammar Nazi and even has it own style we call this camelCase just like a camel it goes straigh thenUp in everScentense </p>
<h7>Add Two Numbers with JavaScript </h7>
<p> The code var sum = "10" + "0"; will add the two numbers together like so: 100 while var sum = 10 + 0; will have an outcome of: 10 just like we did in school it's a simple multiplication where 10 adds to the 0 making the total value a 10. Same goes with extract</p>
<h8>Multiply Two Numbers with JavaScript</h8>
<p>Instead of the x like we are use to in math we use the mini version of it the * symbole </p>
<h9>Divide One Number by Another with JavaScript </h9>
<p>To do a division we use the / symbole.
The quotent so if we like var quotient = 99 / 66; the outcome will be 3</p>
<h2>Increment a Number with JavaScript</h2>
<p>You can increment with the ++ operator
i++; is equiliant to i = i + 1;
myVar++;
</p>
<h2>Decrement a Number with JavaScript </h2>
<p> i--;
is the equivalent of
i = i - 1;
myVar--;</p>
<h2>Create Decimal Numbers with JavaScript </h2>
<p> anything with decimals in it like 0.9 is called a decimal point number our a float
The Declaring a varIABLE now the myDecimal is a variable = assigment to the number 2.point 8float close down with;</p>
<h2>Multiply Two Decimals with JavaScript</h2>
<p>The sum var kittens = 5.0*10.0; will have the outcome of 10.0 </p>
<h2>Divide One Decimal by Another with JavaScript </h2>
<p>Basicly the same as before but now we divine with 2.2 </p>
<h2>Finding a Remainder in JavaScrip </h2>
<p>
5 % 2 = 1 because
Math.floor(5 / 2) = 2 (Quotient) the 2 is left over
2 * 2 = 4
5 - 4 = 1 (Remainder) the 1 is left over
In mathematics, a number can be checked to be even or odd by checking the remainder of the division of the number by 2.
17 % 2 = 1 (17 is Odd)
48 % 2 = 0 (48 is Even
</p>
<h2>Compound Assignment With Augmented Addition</h2>
<p> myVar = myVar + 5;
operator example is equiliant to
= x= y x = y
+= x+= y x = x + y
-= x-= y x = x - y
*= x*= y x = x * y
/= x/= y x = x / y
%= x%= y x = x % y
</p>
<h2>Declare String Variables</h2>
<p>'my name' is called a string literal. To declare one we can use: var camelCase = "string"; both the ''and "" works here </p>
<h2>Escaping Literal Quotes in Strings</h2>
<p>
var sampleStr = "Alan said, "Peter is learning JavaScript".";
js thinks the 1st part is the end because it ends at the second " so we would need a \ backslash to continue it by adding the \ like bellow.
var sampleStr = "Alan said, \"Peter is learning JavaScript\".";
results in:
Alan said, "Peter is learning JavaScript".
remeber backslash before quote charather \" and after the \"
</p>
<h2>Quoting Strings with Single Quotes</h2>
<p> remove the \ and: 'single"double"single' </p>
<h2>Escape Sequences in Strings</h2>
<p>
<ol>
<li>To allow you to use characters you may not otherwise</li>
<li> be able to type out, such as a carriage returns.</li>
<li> To allow you to represent multiple quotes in a string without JavaScript misinterpreting what you mean.</li>
</ol>
code output
\' single quote
\double quote
\\backlash
\f formfeed
\n new line
\r carriage return
\t tab
\b backspace
*Note that the backslash itself must be escaped in order to display as a backslash.
it can be used like: var myStr = "hello\t\\world\r\here\f\i am\b";
<p>
</p>
<h2>Concatenating Strings with Plus Operator</h2>
<p>In JavaScript + operator in combination with a String value, is a concatenation operator so: "string"+"string" is concatenating. !!!Danger spaces will not auto add</p>
<h2>Concatenating Strings with the Plus Equals Operator</h2>
<p>Concating simple means adding together var myName = "1" +"2"; has an outcome of 12 since it is a string and not a number
</p>
<h2>Concatenating Strings with the Plus Equals Operator </h2>
<p>1st we need to set up a variable then equals to same stucture as before
next line get more intressting
since we only need to use the variable and not the word var this will connect us to the 1st line and using the += it will concat
var varIable = "string ";
varIable += "2ndstring." </p>
<h2>Constructing Strings with Variables</h2>
<p> (+) var myVariable = "this is storage";
var mySecondsVariable = "first " + myVariable + " second";
the trick here is in the second line we can call up onto the variable without using the word var by placing the variable between to ++ signs </p>
<h2>Appending Variables to Strings</h2>
<p>we can also call the string in a new line of with the use of : +=
var myVariable = "at least 2";
var myStr = "Learning to code is ";
myStr += myVariable; </p>
<h2>Find the Length of a String</h2>
<p>1st u set up a varible (this is already done in the lesson)
// Setup
var lastNameLength = 0;
var lastName = "Lovelace";
now lastNameLenght is equal to 0
and lastName is now the string of Lovelace
The setup is completed and we already are given
lastNameLength
= lastName
and add .length;
.length;
it now equal 8 because 0 this one we filled in 1l 2o 3v 4e 5l 6a 7c 7e
</p>
<h2>Use Bracket Notation to Find the First Character in a String</h2>
<p>Bracket notation is a manner to get a index within a "string" zero-indexing means that in js there is a virtual 0 in everyword "0t1h2i3s" so if we are asked what number the t is it will say 0 to get the 0 we will need to place it between firstVariable = anotherVariable [0];
</p>
<h2>Use Bracket Notation to Find the Nth Character in a String</h2>
<p> String values are immutable just like u can't unbake a cake once it is done strings can't be changed after created. just like a cake we can decorate it
if u have var aString = “my kit’;
we can add the decoration with
aString = “our kit”;
the outcome will miauw be our kit
</p>
<h2>Use Bracket Notation to Find the Nth Character in a String</h2>
<p> zeroth character the 0
e[2] ok
e [2] not ok
</p>
<h2>Use Bracket Notation to Find the Last Character in a String</h2>
<p> with a negative number the 0indexing doesn't count
if u have a -1 you just count backward like so "cat" t-3a-2c-1
var lastLetterOfLastName = lastName[lastName.length - 1]; </p>
<h2>Use Bracket Notation to Find the Nth-to-Last Character in a String</h2>
<p>Just like we did before we can use the aVariable = something [something.lengt-1]; </p>
<h2>Word Blanks</h2>
<p>https://www.youtube.com/watch?v=VD2gak4u71E
(this one i need to recape)
function wordBlanks(myNoun, myAdjective, myVerb, myAdverb)
{
// Your code below this line
var result = ""; this is an empty string
// Your code above this line
RETURN result; The result is going to be returned from this function
Adjective(are words that desciribe nouns)
myVerb tells what the abjective is doing
my big dog ran where did he run to?
my kitty purrs
</p>
<h2>Store Multiple Values in one Variable using JavaScript Arrays</h2>
<p>Modify the new array myArray so that it contains both a string and a number (in that order).
"string" (a number) 10 dont forget to add a ,comma
var aArray = ["string", "string"];
stored array's are awesome btw since they are stored you can almost reccal them anywhere :3 i love the stored array's
</p>
<h2>Nest one Array within Another Array</h2>
<p>var myArray = [[],[]]; we can do this as many times as we like var aArray = [[],[],[]]; </p>
<h2>Access Array Data with Indexes</h2>
<p>entry here mean the data in an array. Just see it as an element of an array. Think of a set and membership of a set in maths.
Array consist of a key and a value.
u set a varible to equal another variable
which u then use the zero indexing to call the number in the first array
since it is stored in the 1st array (var ourArray = [50,60,70];) and u set the new array to equal the old one
the 0 will callt the 1st number in the array
</p>
<h2>Modify Array Data With Indexes</h2>
<p> the entries of arrays are mutable = they can be changed freely.
var myArray = [15,4,9];
first we need to call up myArray
then we need to call the first number which is 15
then we assign it to the new number whic is 5
myArray[0] = 5;
</p>
<h2> Access Multi-Dimensional Arrays With Indexes </h2>
<p>One way to think of a multi-dimensional array, is as an array of arrays. When you use brackets to access your array, the first set of brackets refers to the entries in the outer-most (the first level) array, and each additional pair of brackets refers to the next level of entries inside.
1 way of thinking about the multi(verse) dimensional array is of an array of array. just like the batman under the batman's when using brackets to acces the array (the 1st batman)just like u would acces the very first earth.
then the other earths will need additional brackets(planets) to get to the other batmans
*try avoiding using [][] use [[10,11,12], 13, 14] our [10,11] instead
0 1 2 0 1 2 0 [1] 2 0 1 2 0 1
[[1,2,3], [4,5,6], [7,8,9], [[10,11,12], 13, 14]];
0 1 [2] 4
5
var myData = myArray[0][0];
[1,2,3]
index is 0 1 2
0 get 1 1 gets 2 2 gets 3
[[1,2,3], [4,5,6], [7,8,9]]
would be
0 = 1,2,3
1 = 4,5,6
3 = 7,8,9
to call them excaple the 9
we first need to get the right numbers
so [3]
then we call the 9
so it becomes [3] [9]
</p>
<h2>Manipulate Arrays With push()</h2>
<p> .push() takes one or more parameters and "pushes" them onto the end of the array.
first we need to call up the array above and then add .push() we can just concat them together also don't forget that ([])exsist.</p>
<h2>Manipulate Arrays With pop()</h2>
<p> .pop() removes the last element from an array and returns that element. And is pretty much used the excat same way as we did before with .push() only now we need to equal myArray to the 1st array.</p>
array.slice()
splice
<h2>Manipulate Arrays With shift()</h2>
<p>.shift()always removes the 1st element of an array.</p>
<h2>Manipulate Arrays With unshift()</h2>
<p>adds/unshift elements to the beginning of an array.</p>
<h2> splice and slice </h2>
<h2>Shopping List</h2>
<p>Remeber a multi-dimensional array containing several sub-arrays. looks like: var aArray = [[],[],[]];</p>
<h2>Write Reusable JavaScript with Functions</h2>
<p>You can make a function() just like you would set a variable instead of using var myVariable; it is now: function myFunction()
just like the ones we had before we can use the () after it and use the {
("");
} to store something the console.log is used to print something out/recall because it is stored we can call the function anywhere :3 i love you brackets and it will show us what is inside the brackets </p>
<h2>Passing Values to Functions with Arguments</h2>
<p>Parameters are variables that act as placeholders for the values that are to be input to a function when it is called. can be written as param1 the 1st param will be equal to the first string. two arguments = a word without strings
function functionWhateverName(a, b) {
console.log(a + b);
}
functionWithArgs(10, 5)
dev console = the outcome of the code screen
</p>
<h2>Global Scope and Functions</h2>
<p> Scope is a reference to the visibility of variables. Variables are defined outside of a function block have Global scope. This means, they can be seen everywhere in your JavaScript code. As you could read there are two types of scope:
Local scope = Variables declared within a JavaScript function, become LOCAL to the function. They can only be accessed from within the function. This is called Function scope.
Global scope = A variable declared outside a function, becomes GLOBAL. A global variable has global scope this means that all scripts and functions on a web page can access it.
Basicly the diffrence is that the local scope which is a reference to the visibility of variables. can only be accesed to the function
while a global one can also be called from a script
1st we need to assign var to aGlobal so
var aGlobal it then needs to initialize with a value of 10
Using var, declare a global variable myGlobal outside of any function. We then need to set it to the value of 10
var aGlobal = 10;
This is a global scope it is in the function but can before it
Inside function fun1, assign 5 to oopsGlobal without using the var keyword.
oopsGlobal = 5;
this is local inside it
</p>
<h2>Local Scope and Functions</h2>
<p> Variables declared within a function are also local. Just like you might be the residence of city x(function) you are living locally in it. Same goes for your neightbour function parameters you can only see them in city x (function)
Declare a local variable aVar inside myLocalScope.
so this
variable aVar;
must be going inside the city of x
</p>
<h2> Global vs. Local Scope in Functions</h2>
<p>It is possible to have both local and global variables with the same name. When you do this, the local variable takes precedence over the global variable.
When you have a MCdonalds it is a global brand right? but when it moves into the town of MCdonalds it becomes MCdonalds of city MCdonalds right? Although they both have the same name the city name is the precedence the global one.
var someVar = "dog";
function myFun() {
var someVar = "cat";
return someVar;
}
The function myFun will return "cat" because the local version of the variable is present.
</p>
<h2>Return a Value from a Function with Return</h2>
<p>We can pass values into a function with arguments. You can use a return statement to send a value back out of a function.
a value = .value = a number our "String"
function aFunction (){}
argument = just like adding an argument to a convesation we now add an valued argument to our function. It can be anything from numbers to string
console.log(arguments[0]);
return = returns to x
in this case it returns a value back
out of a function?
function aFunction(num) {
return num * 5;
}
outcome can be printed out by
//var answer = aFunction(5); //25
//console.log(aFunction(10));
</p>
<h2>Understanding Undefined Value returned from a Function</h2>
<p>to return our not to return a function can have both. in the cause of not and you call you call your beloved return. the function will process the inner of it's code but the returned value is undefined.
Create a function addFive without any arguments
function addFive() {
}
Inside the addFive function, add 5 to the sum variable.
so we need to add with += and as above add sum ending with the ;
sum += 5;
</p>
<h2>Assignment with a Returned Value</h2>
<p>Recape:
Storing Values with the Assignment Operator
Assigment opperators always goes right --> to left< -- b = 5; This assigns the Number value 5 to b /
so first we need to call up
processed and then assign it to processArg now add a 7
= ();
processed = processArg(7);
even if they did ask to return the function and said a function the 1st line already has the function so we dont need to write it again/
DO NOT:
function sum (1, 1);
console.log (function);
var answer = function();
return = 17;
sum = ourSum;
function processArg(7) {
return = provessed;
}
function processArg (num) {
return (num +7);
} </p>
<h2>Stand in Line</h2>
<p>Have you ever standed in a line before? Just like in real live a queue has the first customer going out of the line after they being helped. And new customers come in at the back of the line.
the first task ask us to write a function with the name nextInLine so lets' do that
function nextInLine
then it ask us to add (arr) and a number (item) as arguments.
concat them together and add them to our function
function nextInLine (arr, item)
remeber the structure? of a function?
function myFunction (arr, item) {
}
next we are asked to add the number of an array
array= arr
Now remeber these?
.pop() removes the last element from an array and returns that element.
.push () Add a new item to the end of an array.
.shift() always removes the 1st element of an array.
unshift() adds/unshift elements to the beginning of an array.
So which of these do we need?
unshift and push right?
now to assign a variable to them
var.unshift()
var.push()
so then we end up here
function nextInLine(arr, item) { //calls up the function which now includes arr and item
arr.push(item); //pushes the item to the end of the line
return arr.shift(); ///returns the shift which removes the 1st customer of the line so now it becomes. you can see that the 1st item is removed and the last item in the line is now a 6
Before: [1,2,3,4,5]
1
After: [2,3,4,5,6]
}
</p>
<h2>Understanding Boolean Values</h2>
<p>Booleans are basically little on-off switches, where true is "on" and false is "off. Just like onto ure on-off switch it has no strings</p>
<h2>Use Conditional Logic with If Statements</h2>
<p> the if Keyword checks if a certain condition is meet in the {parentese} these are most likey to be Booleans true/false
if (condition is true) {
statement is executed
}
</p>
<h2>Comparison with the Equality Operator</h2>
<p>comparison operators are booleans
== only compares values false and true
1 == 1 // true
1 == 2 // false
1 == '1' // true
"3" == 3 // true
Logical Operators AND OR NOT
&& returns true if both operators are true
|| returns true if one of the operands is true
! returns false if the operands is false, and false, if the operand is true
AND gate &&
NOT gate ||
OR gate !
Comparision Operators
= assigment
== only compares values(booleans)
=== compares values and type (use this one if you can. the data type will be valuated as well)
!= not equal
!== not identical
> greater then
>= greater then/equal to
< less then
<= less then our equal to
var a_number = 5;
var a_string = "5";
a_number == a_string; -> true
a_number === a_string; -> false
</p>
<h2>Comparison with the Strict Equality Operator</h2>
<p>
3 === 3 // true
3 === '3' // false
In the second example, 3 is a Number type and '3' is a String type.
3 == '3' // returns true because JavaScript performs type conversion from string to number
3 === '3' // returns false because the types are different and type conversion is not performed
typeof 3 // returns 'number'
typeof '3' // returns 'string'
</p>
<h2>Practice comparing different values</h2>
<p>
typeof 3 // returns 'number'
typeof '3' // returns 'string'
== only compares values
=== compares values and type (use this one if you can. the data type will be valuated as well) It is better to use this one.
</p>
<h2>Comparison with the Inequality Operator</h2>
<p>
!= not equal(and returns false) where equality would return true and vice versa.
1 != 2 // true
1 != "1" // false
1 != '1' // false
1 != true // false
0 != false // false
</p>
<h2>Comparison with the Strict Inequality Operator</h2>
<p>
!== not identical means "Strictly Not Equal" " and returns false where strict equality would return true and vice versa. Strict inequality will not convert data types.
3 !== 3 // false
3 !== '3' // true
4 !== 3 // true
The strict inequality operator (!==) is the not logical of the strict equality operator.
so not logical referse to if the value's are not
the same
and therefore not logical
</p>
<h2>Comparison with the Greater Than Operator</h2>
<p>
> greater then values of two numbers
just like u might have seeing with buying alchol
5 > 3 // true
7 > '3' // true
2 > 3 // false
'1' > 9 // false </p>
<h2>Comparison with the Greater Than Or Equal To Operator</h2>
<p> >= greater then/equal and is an operator
Like the equality operator, greater than or equal to operator will convert data types while comparing.
6 >= 6 // true
7 >= '3' // true
2 >= 3 // false
'7' >= 9 // false </p>
<h2>Comparison with the Less Than Operator</h2>
<p> less than operator converts data types while comparing.
< less then
2 < 5 // true
'3' < 7 // true
5 < 5 // false
3 < 2 // false
'8' < 4 // false </p>
<h2>Comparison with the Less Than Or Equal To Operator</h2>
<p> <= less then our equal to the numbers it compares
4 <= 5 // true
'7' <= 7 // true
5 <= 5 // true
3 <= 2 // false
'8' <= 4 // false </p>
<h2>Comparisons with the Logical And Operator</h2>
<p> Logical Operators AND OR NOT
&& returns true if both operators are true
AND gate &&
also can be replaced with two if statments
if (num > 5) {
if (num < 10) {
return "Yes";
}
}
return "No";
if (num > 5 && num < 10)
return "Yes";
}
return "No";
if (val <= 50 && val >= 25)
The function first evaluates if the condition val <= 50 evaluates to true converting val to a number if necessary, then does the same with val >=25 because of the logical AND (&&) operator; if both return true, the return "Yes" statement is executed.
</p>
<h2>Comparisons with the Logical Or Operator</h2>
<p>Logical Operators AND OR NOT
|| returns true if one of the operands is true
NOT gate ||
</p>
<h2>The OR gate </h2>
<p>
! returns false if the operands is false, and false, if the operand is true
OR gate ! </p>
<h2>Introducing if Statements</h2>
<p> <i>if<i/> a statment is true it runs it it's false nothing happens </p>
<h2>Introducing Else Statements</h2>
<p>if an if statment fails to run we can use an <b>else</b> statment totake over another function instead of using an if if statment
if (num > 10) {
return "Bigger than 10";
} else {
return "10 or Less";
}
</p>
<h2>Introducing Else If Statements</h2>
<p>
function whatEver (a) {
if (a > b) {
return "Bigger than 15";
} else if (a < b) {
return "";
} else {
return "";
}
} make sure to always close up the paretnhese
<body>
<p> stuff goes here </>
</body>
function testElseIf(val) {
stuf goes here
}
The value should go inside the parenthesis
yess
console.log((5));
For instance
Passes the parameter into the argument
Then the conditional statement runs the command
</p>
<h2>Logical Order in If Else Statements</h2>
<p>The order matters JS reads from the first line just like u would read a book. starts at the top
then goes down. In order to pass the test we need to start with the smallest number</p>
<h2>Chaining If Else Statements</h2>
<p>if (condition1) {
statement1
} else if (condition2) {
statement2
} else if (condition3) {
statement3
. . .
} else {
statementN
}
even if u read num >= 20 - return "Huge"
the last line doesn't need the (num >= 20)
the else doesn't need a condition because it is a statement that is executed if condition is falsy and the else clause exists. Can be any statement, including block statements and further nested if statements.
</p>
<h2>Golf Code</h2>
<p>
par has a value of 3
we can use the else if here
2 : count = 1 [ 2, 3, 4, 5, 6 ] + 1
4 : count = 2 [ 2, 3, 4, 5, 6 ] + 1
8 : count = 2 [ 7, 8, 9 ] + 0
J : count = 1 [ 10, J, Q, K, A ] - 1
3 : count = 2
Check JS selection for the answer
(strokes <= par -2)
Comparision Operators
= assigment
== only compares values(booleans)
=== compares values and type (use this one if you can. the data type will be valuated as well)
!= not equal
!== not identical
> greater then
>= greater then/equal to
< less then
<= less then our equal to
strokes == number par
/*if () {
return ("");
} else if () {
return ("");
} else if () {
return ("");
}else if () {
return ("");
}else if () {
return ("");
} else if () {
return ("");
} else {
return "";
}return "";
}
</p>
<h2>Selecting from Many Options with Switch Statements</h2>
<p>switch(num) have many cases use a switch it will run untile it hits break
the switch expression is evaluated once.
The value of the expression is compared with the values of each case.
If there is a match, the associated block of code is executed.
switch (val) {
case 1:
return "";
break;
case 2:
return "";
break;
case 3:
return "";
break;
case 4:
return "";
break;
}
return can also be replaced with answer
</p>
<h2>Adding a Default Option in Switch Statements</h2>
<p>if no matching case statment is found you can use default it's like else in if else</p>
<h2>Multiple Identical Options in Switch Statements</h2>
<p>
The case statments work together with the switch statment. First will come the switch with the value's then they basicly works like if else. In case that xxx the result will be until it hits break. you will need to have a case for each number in this instant.
switch(val) {
case 1:
case 2:
case 3:
result = "123";
break;
case 4:
result = "4";
}
var text;
var val = document.getElementById("").value;
switch(val) {
case "":
text = "";
break;
case "":
text = "";
break;
case "":
text = "";
break;
default:
text = "";
}
</p>
<h2>Replacing If Else Chains with Switch</h2>
<p> Many options to chose from? why not go for a switch statment
if (val === 1) {
answer = "a";
} else if (val === 2) {
answer = "b";
} else {
answer = "c";
}
can be replaced with:
switch(val) {
case 1:
answer = "a";
break;
case 2:
answer = "b";
break;
default:
answer = "c";
}
don't use the default it is easier to use another case. but if u have to do it like.Make sure you make “case bob” a string. The return statement stops the execution of a function and returns a value from that function.
case “John”:
answer = “”;
break;
case 156:
answer = “”;
break;
default:
answer = “Ate Nine”;
}
// Only change code above this line
return answer;
}
</p>
<h2>Returning Boolean Values from FunctionsPassed</h2>
<p>
function isEqual(a,b) {
if (a === b) {
return true;
} else {
return false;
}
}
But there's a better way to do this. Since === returns true or false, we can return the result of the comparison:
function isEqual(a,b) {
return a === b;
}
function isLess(a, b) {
if (a < b) {
return true;
} else {
return false;
}
}
function isLess(a, b) {
return a < b;
}
</p>
<h2>Return Early Pattern for Functions</h2> Review this one Kane!!!
<p>Just when it hit's any other function like break, else the return function will also go back to the calling location
function myFun() {
console.log("Hello");
return "World";
console.log("byebye")
}
myFun();
The above outputs "Hello" to the console, returns "World", but "byebye" is never output, because the function exits at the return statement.
You don't need this one to complete the lesson rather use what u have learned so far :3 rather try to write psuedo code
if A is less then 0 or B is less then 0
the function will exit
and return with value undefined. remeber it is not a string so don't use the ""
so first we know this can either be an if else our switch statment
if () {
answer = "a";
} else if () {
answer = "b";
} else {
answer = "c";
}
or use
switch(val) {
case 1:
answer = "a";
break;
case 2:
answer = "b";
break;
default:
answer = "c";
}
then we know the or
AND gate &&
NOT gate ||
OR gate ! (they did not explain this one so let's not use it)
Comparision Operators
= assigment
== only compares values(booleans)
=== compares values and type (use this one if you can. the data type will be valuated as well)
!= not equal
!== not identical
> greater then
>= greater then/equal to
< less then
</p>
<h2>Counting Cards</h2>
<p>Just like above.
The psuedo code will looks something like this:
if cards includes 2, 3, 4, 5, 6
count plus 1
return count plus the beth
else if the cards includes 7, 8, 9
count 0
return count plus hold
else 10, 'J', 'Q', 'K', 'A'
count -1
return count and hold
we can also replace it with case 1 to 6 and count either postive our negative
if (a < 0 || b < 0)
</p>
<h2>Build JavaScript Objects</h2>
<p>you can get acces to properties with array's
var cat = {
"name": "Whiskers",
"legs": 4,
"tails": 1,
"enemies": ["Water", "Dogs"]
};
the strings aren't entire necearly However, if your object has any non-string properties, JavaScript will automatically typecast them as strings.
when they say array they mean use the []
"friends": [0]
</p>
<h2>Accessing Object Properties with Dot Notation</h2>
<p>use the dot . to make a path. Think simple you only need to type one word since the 1st path is already seth</p>
<h2>Accessing Object Properties with Bracket Notation</h2>
<p>
Setup
var test1 = {
"2": "2",
"2": "2",
"2": "2"
};
var 2 = test1["2"];
var 2 = test1["2"];
Note that property names with spaces in them must be in 'quotes' (single or "double").
</p>
<h2>Accessing Object Properties with Variables</h2>
<p>Use the playerNumber variable to look up player 16 in testObj using bracket notation. Then assign that name to the player variable.
so basicly
variable playerNumber is 16
variable player is testObj playernumebr
var playerNumber = 16;
var player = testObj[playerNumber];
</p>
<h2>Updating Object Properties</h2>
<p>
// Setup
var aVariable = {
"firstLine": "secondLine",
"secondline": 3,
"fourthline": ["fifth line"]
};
How to set the path with dots
//to change it we first call up the variable aVariable
//then we set the path with the dot
///then we insert the new name
aVariable.firstLine= "A Replacement";
How to set the path with []
//to change it we first call up the variable aVariable
//then we set the path with [] rember to use ""
///then we insert the new name
aVariable["firstLine"] = "A Replacement";</p>
<h2>Add New Properties to a JavaScript Object</h2>
<p>
// Setup
var aVariable = {
"firstLine": "secondLine",
"secondline": 3,
"fourthline": ["fifth line"]
};
How to add with dots
//Call up the variable aVariable
//set the new name using the dot: .new
//Assign the value ="new-value"
//the code will now add to your list aVariable
aVariable.new = "new-value";
Note if we do use dot we can make new with a capital letter N however we do need the [-] to use more then two words. Like .new value won't work .new-value does neither. but ["new-value"] does work
How to add with []
//Call up the variable aVariable
//set the new name using the dot: ["new"]
//Assign the value ="new-value"
//the code will now add to your list aVariable
aVariable["new"]= "new-value";
<----------->
if I am understanding you correctly. You are trying to set 2 properties.
aVariable.first = "kitty";
aVariable.second = "kora";
If you are trying to do something like this...
aVariable.kitty kora
This won't work, because dot notation requires a full unbroken key. Meaning, you can use kittykora, but not kitty kora.
However!!!
You can use kitty kora, in bracket notatin, like this...
aVariable["kitty kora"] = "name"
Now, if you want to set 2 names.
as in two properties. Then you will need two keys.
aVariable.key1 = "Kitty"
aVariable.key2 = "Kora"
to access them.
aVariable.cats.cat1 //kitty
aVariable.cats.cat2 //kora
</p>
<h2>Delete Properties from a JavaScript Object</h2>
<p>
Deleting something is easy
//Start by typing delete and add a space
//Call up the variable aVariable and use a .
//then the name close down with the ;
delete aVariable.firstline;
</p>
<h2>Using Objects for Lookups</h2>
<p>
so you need to know how to use object first
basic object notation looks like this...
var names = { }
the curly bracket means "object"
Data store within an object comes in "Key" and "Value". Also known as key/value pair.
var names = { key : "value" } like this.
Data store within an object comes in "Key" and "Value". Also known as key/value pair.
var names = { key : "value" } like this.
to access object. You can either use "bracket notation", or "dot notation".
Bracket Notation, looks like this.
var names = { key : "value" };
names["key"]; //return value
Dot notation, looks like this.
names.key //returns value
Since you know what the data is presenting, you can sometimes hard code them in to experiment. Or in an application, this information will come from a server.
It makes looking up data easier without having to use if else statement.
What is you have more than 1 key:value pair.
You can add additional information by separating them by a commas.
var names = { "name" : "Frankie", "age" : 100 };
To access then, you only need to know the keys.
names["name"] // gives you "Frankie"
names["age] //gives you 100
<-------------------------------------->
check this link https://www.w3schools.com/js/js_objects.asp
and we need to assign the values to it
like the
var car = {type:"Fiat", model:"500", color:"white"};
but this time it is
var lookup = {"name": "name",}; only the value's matter not the break case our even result we are given
then use the same structure as in the example above
result = lookup[val];
var value = 2;
alpha[value]; // "Y"
another example:
var cat = {
firstDog: "Pluto",
lastDog: "Planet"
};
alert(cat.firstDog);
</p>
<h2>Testing Objects for Properties</h2>
<p>to check if an property exist use the keyword .hasOwnProperty(propnamegoeshere) it works like a Boolean
Make sure that:
1: Your syntax for the if statement is not correct. You need to put () around your conditional statement.
2: Else statements should not have conditional statements.
3: You shouldn’t be checking for "gift" or "pet". You should be checking for checkProp.
4: You should return the value of the property if it is found.
5: This exercise is about hasOwnProperty, so that should come into play at some point. Right now you are just calling myObj.hasOwnProperty("checkProp") but you aren’t saving or using the output value from that line. Also, checkProp is a variable, that holds the string you are comparing against.
6: you can use dot notation so if hasOwnProperty ? return obj.key hope this makes sense
A pseudo code onto this would look like
if ( "the property is found" ) {
"return that property’s value"
} else { // i.e. "If not"
"return "Not Found""
the sollution
if (myObj.hasOwnProperty(checkProp) == true) {
return myObj[checkProp];
} else {
return "Not Found";
}
}
</p>
<h2>Manipulating Complex Objects</h2>
<p>
var aVariable = [
{
key: "Value",
key: "Value",
key: [ "val1", "val2", "val3"],
"boolean": true
},
// Add record here
{
key: "Value",
key: 1,
key: ["val4",]
}
];</p>
<h2>Accessing Nested Objects</h2>
<p>Think of sub-properties as the child-children of an object or array
This lesson is missing a steph don't be mislead: Basically each { denotes a folder. So you have to type out each folder path as if you were telling a search on the computer to find a certain file. So “car” is a folder containing “inside” folder which contains “glove box” file.
myStorage
|-- car
|--- inside
|----- glove box: maps
|----- passenger seat: crumbs
|--- outside
|----- trunk: jack
var gloveBoxContents = myStorage.car.inside[“glove box”];
it the above code doesn't work
copy paste this:
var gloveBoxContents = myStorage.car.inside[complete here]
and add "glove box" by typing it it works then
</p>
<h2>Accessing Nested Arrays</h2>
<p>var ourPets = [
{
animalType: "cat",
names: [
"Meowzer",
"Fluffy",
"Kit-Cat"
]
},
{
animalType: "god",
names: [
"cat",
"feline",
"kitty"
]
}
];
ourPets[0].names[1]; // "Fluffy" 0 is the first array the 1 is the second nested object
ourPets[1].names[0]; // "cat"
var secondTree = myPlants[1].list[1];
</p>
<h2>Record Collection</h2>
<p>JSON object
var aVariable {
key: "value",
}
</p>
<h2>Iterate with JavaScript While Loops</h2>
<p>a loop is used to do something over and over again
the first loop u learn is the while loop it runs while a condition is true
much like you are playing the game of mario you keep living until the lives are up
suppose u have the following code:
var marioLives = [];
var lives = 0;
while(lives < 5) {
ourArray.push(lives);
lives++;
}
the outcome will be 0 1 2 3 4 since JS mostly start at 0 the 5 is the last number but isnt counted because it is smaller then 5
the lives are added starting from 0 the ++ add 1 number each time
</p>
<h2>Iterate with JavaScript For Loops</h2>
<p>The most common type of JavaScript loop is called a for loop because it runs "for" a specific number of times.
for ([initialization]; [condition]; [final-expression])
example:
var ourLugi = [];
for (var l = 0; l < 5; l++) {
ourLugi.push(l);
}
the outcome will be: 0 1 2 3 4 </>
</p>
<h2>Iterate Odd Numbers With a For Loop</h2>
<p>For loops don't have to iterate one at a time. By changing our final-expression, we can count by even numbers.
initialization
var waLugi = [];
for (var w = 0; w < 9; w += 3) {
waLugi.push(w);
}
this loop will run 4 times just like the other ones before 0 2 4 6 8 </>
</p>
<h2>Count Backwards With a For Loop</h2>
<p>A loop can also go backwards. In order to count backwards by two's, we'll need to change our initialization, condition, and final-expression.
var ourArray = []; // the variable
for (var i=10; i > 0; i-=2) { //the condition that will get 2 of 10
ourArray.push(i);
}
the ammouts counted 0 1 2 3 4
the outcome 10 8 6 4 2
</p>
<h2>Iterate Through an Array with a For Loop Not Passed</h2> Recheck this one Kane!
<p>
[] means it's an array
and the array is filled with numbers
arr[i] is how you access the numbers in the array
ex. arr[0] would be 10 in this case
since arr = [10,9,8,7,6]
var arr = [10,9,8,7,6];
for (var i = 0; i < arr.length; i++) {
console.log(arr[i]);
}
SOLLUTION
var total = 0;
for (var i = 0; i < myArr.length; i++) {
total += myArr[i];
}
</p>
<h2>Nesting For Loops</h2>
<p>var arr = [
[1,2], [3,4], [5,6]
];
for (var i=0; i < arr.length; i++) {
for (var j=0; j < arr[i].length; j++) {
console.log(arr[i][j]);
}
}
</p>
<h2>Iterate with JavaScript Do...While Loops</h2>
<p>ahref https://www.youtube.com/watch?v=s9wW2PpJsmQ</p>
<h2>Replace Loops using Recursion</h2>
<p>
That means you can rewrite multiply in terms of itself and never need to use a loop
In the base case, where n <= 0, it returns the result, arr[0]. For larger values of n, it calls itself, but with n - 1. That function call is evaluated in the same way, calling multiply again until n = 0. At this point, all the functions can return and the original multiply returns the answe
1
1 1+
1 1+ 1+
1 1+ 1+ 1+
1 1+ 1+ 1+ 1+
1 1+ 1+ 1+ 1+ 1+
function sum(arr, n) {
// Only change code below this line
if (n <= 0) {
return arr[0];
} else {
return sum(arr, n - 1) + arr[n];
}
// Only change code above this line
}
</p>
<h2>Profile Lookup</h2>
<p>
check if the name is an contact in first name
and the given prop is of that contact
if both are true return value of that contact
if name is not there
return "No such contact"
return "No such property"
.hasOwnProperty
The question is asking you to find the name first
and then check to see if there is a property.
You should aim to get the first name first
The difficult part of this challenge is that the object is inside an array.
You have to filter the array. Then it'll be easier to work with
for example:
[ "a", "b", "c", "d", "a" ]
if I filter out everything but "a"
It can count easier.
We setup a var msg and give in the last value we want to check
We loop the property inside contacts
We check if the firstName is one of the one inside the arr and if yes we need to have the prop
Here we have the one who the firstName is true but they didn't pass cause they don't have the prop so here we return the 'No such property'
if (firstName) {
answer = "a";
} else if () {
answer = "b";
} else {
answer = "c";
} else return
"No such property"; {
return "No such contact";
}
var msg
["firstName"]
then we know the or
AND gate &&
NOT gate ||
OR gate ! (they did not explain this one so let's not use it)
Comparision Operators
= assigment
== only compares values(booleans)
=== compares values and type (use this one if you can. the data type will be valuated as well)
!= not equal
!== not identical
> greater then
>= greater then/equal to
< less then
check name firstName and the property
(example: Name = "firstName" prop/value= "Sherlock")
return value of the property
return "No such contact"
return "No such property"
if (myObj.hasOwnProperty(checkProp) == true) {
return myObj[checkProp];
} else {
return "Not Found";
}
}
Source
https://developer.mozilla.org/en-US/docs/Web/JavaScript/Reference/Global_Objects/Object/hasOwnProperty
MDN Web DocsMDN Web Docs
Object.prototype.hasOwnProperty()
The hasOwnProperty() method returns a boolean indicating whether the object has the specified property as its own property (as opposed to inheriting it).
If you look in the syntax section of the documentation.
It says:
obj.hasOwnProperty(prop)
This is called a "prototype" (in computer science term) a blueprint of how this function or method is used.
yes we had a lesson simular to this one: https://www.freecodecamp.org/learn/javascript-algorithms-and-data-structures/basic-javascript/testing-objects-for-properties
obj => The object you are referring to.
hasOwnProperty( ) => The function that obj inherits from Object class.
prop => parameter that goes into the function.
prop occupies 1 parameter slot, meaning it takes 1 parameter.
therefore, if you use:
contacts.hasOwnProperty(name, prop);
It will register the first parameter and say it is true, even if the second one is false.
For example:
var contacts = { 1 : "Hello", 2 : "There" };
console.log( contacts.hasOwnProperty(1) ); //return true
console.log( contacts.hasOwnProperty(3) ); //return false
console.log( contacts.hasOwnProperty(1, 3) ); //return true
console.log( contacts.hasOwnProperty(3, 1) ); //return false
</p>
<h2>Generate Random Fractions with JavaScript</h2>
<p>https://www.youtube.com/watch?v=5VYFY9mwFs8
return Math.random ();
</p>
<h2>Generate Random Whole Numbers with JavaScript</h2>
<p> return Math.floor(Math.random() * 10);
because we need to recall the code that is set up above and the 10 becaus: You should have multiplied the result of Math.random by 10 to make it a number that is between zero and nine.
Code Explanation
Math.random() generates our random number between 0 and ≈ 0.9.
Before multiplying it, it resolves the part between parenthesis (myMax - myMin + 1) because of the grouping operator ( ) .
The result of that multiplication is followed by adding myMin and then “rounded” to the largest integer less than or equal to it (eg: 9.9 would result in 9)
If the values were myMin = 1, myMax= 10 , one result could be the following:
Math.random() = 0.8244326990411024
(myMax - myMin + 1) = 10 - 1 + 1 -> 10
a * b = 8.244326990411024
c + myMin = 9.244326990411024
Math.floor(9.244326990411024) = 9
</p>
<h2>Generate Random Whole Numbers within a Range</h2>
<p>Math.floor(Math.random() * (max - min + 1)) + min
Math is the object here it allows you to perform mathematical tasks on numbers.
Floor function will give you the integer part of the number
a floor function is like a % it gives u the integer after the whole number?
Yeah floor function returns integer
so like:
Floor 1.9 will give you 1
Floor - 1.9 will give you -2
Math.random() returns a random number between 0 (inclusive), and 1 (exclusive):
Math.random() used with Math.floor() can be used to return random integers.
COPY PASTE MATERIAL
function getRandomInt(max) {
return Math.floor(Math.random() * Math.floor(max));
}
https://www.w3schools.com/js/js_random.asp
https://www.w3schools.com/js/tryit.asp?filename=tryjs_random_function2
</p>
<h2>Use the parseInt Function</h2>
<p>The parseInt() function parses a string and returns an integer.
Use parseInt() in the convertToInteger function so it converts the input string str into an integer, and returns it.
it asked for returning it
return what? parseInt();
now we just need to add the value into it to make it work
return parseInt(str);
</p>
<h2>Use the parseInt Function with a Radix</h2>
<p>The parseInt() function parses a string and returns an integer. It takes a second argument for the radix, which specifies the base of the number in the string. The radix can be an integer between 2 and 36.
https://www.w3schools.com/jsref/jsref_parseint.asp
is it accepts a string and checks it front to back for a number
has to start w a digit otherwise it returns NaN
it returns an integer type
so when u do
var a = parseInt("10") + "<br>";
youre rlly setting a to the parsed integer value of "10" but then casting it back into a string by concateniating it to a string
javascript is loosely typed but the data we work with still has a type
i see so the string is required to make the parsed integer work
yes, its used to read a number from a string and return that number
parseInt("100test") => 100
parseInt("chicken") => NaN
parseInt("99.93") => 99
parseInt("test100") => NaN
it reads starting from the leftmost char.
stores every integer it finds, then when it hits a non integer, it will stop, if it has not stored any ints yet its NaN
im surprised it dosent stop after the test and pick up th e100
well think of it this way
why would it continue looking for a number it doesnt know is there
yeahh, the waay i see it, its not meant to find a number in a string so much as to parse what should already be a number
its more conversion of string to int
cause the literal difference is 4chars than int100, as opposed to int 100 and 4chars
the way the function sees it is as a list of chars
its looping left to right to test these chars to see if they are integer values
as well as the int is just a regular int
to implement what u mean, it would have to throw away non integer vcalues til it reaches the first, then start tracking ints
hence the 99.93=>99
well if its looking for int values
thats what i should do
it does 99 cause . is not a digit
it doesnt even see the 93
been a hot minute but dosent double int accept 99.93
double and int are two separate types
think of int as whole number, then floating point as decimal
double is double precision floating point number
then there is also decimal type in some languages
which just changes the way the decimal is handles in memory and allows more precision idk
doubleint isnt a thing
its contradictory
int = whole number double is not
but double int =99.93 is acceptable?
youre creating a double variable NAMED int
</p>
<p> Use parseInt() in the convertToInteger function so it converts a binary number to an integer and returns it.
so first we write return because it must return it
then we use: parseInt()
and add the str because we need to use the str
and then the 2 so it returns that value of the 2
return parseInt(str, 2) </p>
<h2>Use the Conditional (Ternary) Operator</h2>
<p> This can be re-written using the conditional operator:
function findGreater(a, b) {
if(a > b) {
return "a is greater";
}
else {
return "b is greater";
}
}
can be simplified as:
function findGreater(a, b) {
return a > b ? "a is greater" : "b is greater";
}
so
return a === b ? true : false;
because we need to check if there equal we use the ===
then the ? from the example above and then the boolean value's true and false
but this can even be shorter:
return a === b;
</p>
<h2>Use Multiple Conditional (Ternary) Operators</h2>
<p>function findGreaterOrEqual(a, b) {
if (a === b) {
return "a and b are equal";
}
else if (a > b) {
return "a is greater";
}
else {
return "b is greater";
}
}
The above function can be re-written using multiple conditional operators:
function findGreaterOrEqual(a, b) {
return (a === b) ? "a and b are equal"
: (a > b) ? "a is greater"
: "b is greater";
}
However, this should be used with care as using multiple conditional operators without proper indentation may make your code hard to read. For example:
function findGreaterOrEqual(a, b) {
return (a === b) ? "a and b are equal" : (a > b) ? "a is greater" : "b is greater";
}</p>
<h2>Use Recursion to Create a Range of Numbers</h2>
<p>function count(n) {
if (n === 1) {
return [1];
} else {
var numbers = count(n - 1);
numbers.push(n);
return numbers;
}
}</p>
<h2>Use Recursion to Create a Countdown</h2>
<p>We have defined a function called countdown with two parameters. The function should take an array in the myArray parameter and append the numbers n through 1 based on the n parameter.
For example, calling this function with n = 5 will pad the array with the numbers [5, 4, 3, 2, 1] inside of it. Your function must use recursion by calling itself and must not use loops of any kind.</p>
x,y,z coordinates
everything in our 4d dimension can be described by those
js
primatives
and they are inmutable
if its not primative
then it's an object
the !! is a will make it a boolean
logical not opperator
try, catch, throw and finally are statments
what is the diffrence between
var, let and const
refrence error, syntax error
a closure is a function within a function where the inner function reverces the scope of the outer function
will this remain in memory (yes)
<a href="https://www.youtube.com/watch?v=OEjcjIp7QfU"></a>
object
key: value
what does the keyword this do?
it referce to a current object that the code is opperating in
consol.log
document.write(5 + 6);
What is the word after the plus opperator called
"string"+ string
What is the output of this code?
var arr = new Array(3,6,8);
document.write(arr[1]);
Write a program to find the first recurring string in a given string
ABCA retruns A
BCABA returns B
ABC returns nul our none
How many items are in the list down bellow?
[2,]
a 1
b 2
c 3
Naming variables
Special symbols like: my#num num% are forbidden
Not to use a reserve word like: else our boolean
don't uvar myMusic = [
{
"artist": "Billy Joel",
"title": "Piano Man",
"release_year": 1973,
"formats": [
"CD",
"8T",
"LP"
],
"gold": true
}
// Add record here
,
{"artist": "Pass",
"title": "franky",
"release_year": 2010,
"formats": [
"rabbit",
"cat"
], // this is closing the "formate" array
}
]; // this is closing the object
// what is closing the myMusic array?
//Add a new album to the myMusic array. Add artist and title strings, release_year number, and a formats array of strings.
we are not changing the value of par, we are checking the value of strokes
how does return work and how to add 758
function lookUpProfile(name, prop){
// Only change code below this line
if (contacts.hasOwnProperty(name, prop)
-------------
if (contacts.hasOwnProperty(name, prop) == true) {
return contacts[prop];
} else {
return "No such contact";
} else return
"No such property"; {
}
}
https://developer.mozilla.org/en-US/docs/Web/JavaScript/Reference/Global_Objects/Object/hasOwnProperty
MDN Web DocsMDN Web Docs
Object.prototype.hasOwnProperty()
The hasOwnProperty() method returns a boolean indicating whether the object has the specified property as its own property (as opposed to inheriting it).
Frankie Law 8 minutes ago
If you look in the syntax section of the documentation.
It says:
obj.hasOwnProperty(prop)
This is called a "prototype" (in computer science term) a blueprint of how this function or method is used.
Kitty 8 minutes ago
yes we had a lesson simular to this one: https://www.freecodecamp.org/learn/javascript-algorithms-and-data-structures/basic-javascript/testing-objects-for-properties
Frankie Law 6 minutes ago
obj => The object you are referring to.
hasOwnProperty( ) => The function that obj inherits from Object class.
prop => parameter that goes into the function.
prop occupies 1 parameter slot, meaning it takes 1 parameter.
Frankie Law 6 minutes ago
therefore, if you use:
contacts.hasOwnProperty(name, prop);
It will register the first parameter and say it is true, even if the second one is false.
Frankie Law 4 minutes ago
For example:
var contacts = { 1 : "Hello", 2 : "There" };
console.log( contacts.hasOwnProperty(1) ); //return true
console.log( contacts.hasOwnProperty(3) ); //return false
console.log( contacts.hasOwnProperty(1, 3) ); //return true
console.log( contacts.hasOwnProperty(3, 1) ); //return false
Frankie Law 2 minutes ago
If you want to use test both cases, you need a second statement that test the property.
for example:
if(contacts.hasOwnProperty(name) == true) {
if( contacts.hasOwnProperty(prop) == true ) {
//do something..
}
}
or you can use logical && operator to chain if statements together.
For example:
if(contacts.hasOwnProperty(name) == true && contacts.hasOwnProperty(prop) == true ) {
//do something..
}
https://developer.mozilla.org/en-US/docs/Web/JavaScript/Reference/Global_Objects/Object/hasOwnProperty
https://www.freecodecamp.org/learn/javascript-algorithms-and-data-structures/basic-javascript/testing-objects-for-properties
We use conditional statements inside our functions
So we use If statement for our myObj.hasOwnProperty
So checkprop serves as a placeholder for our myObj properties so no need to mention in, inside our code. We just need to use the argument checkprop instead
So return myObj[checkprop] returns the myObj properties
else No result found
Remember we are calling a function
var myObj = {
gift: "pony",
pet: "kitten",
bed: "sleigh"
};
function checkObj(checkProp) {
if (myObj.hasOwnProperty(checkProp)) {
return myObj[checkProp];
} else {
return "Not Found"}
}
// Test your code by modifying these values
console.log(checkObj("gift"));
rember this one kane
for (var i=0; i < arr.length; i++) {
for (var j=0; j < arr[i].length; j++) {
}
}
///Basic JavaScript: Use Recursion to Create a Countdown
function countup(n) {
if (n < 1) {
return [];
} else {
const countArray = countup(n - 1);
countArray.push(n);
return countArray;
}
}
console.log(countup(5)); // [ 1, 2, 3, 4, 5 ]
.p
* {box-sizing: border-box;}
.body {
margin: 0;
font-family: Arial, Helvetica, sans-serif;
}
.topnav {
overflow: hidden;
background-color: #e9e9e9;
}
.topnav a {
float: left;
display: block;
color: black;
text-align: center;
padding: 14px 16px;
text-decoration: none;
font-size: 17px;
}
.topnav a:hover {
background-color: #ddd;
color: black;
}
.topnav a.active {
background-color: #2196F3;
color: white;
}
.topnav .search-container {
float: right;
}
.topnav input[type=text] {
padding: 6px;
margin-top: 8px;
font-size: 17px;
border: none;
}
.topnav .search-container button {
float: right;
padding: 6px;
margin-top: 8px;
margin-right: 16px;
background: #ddd;
font-size: 17px;
border: none;
cursor: pointer;
}
.topnav .search-container button:hover {
background: #ccc;
}
@media screen and (max-width: 600px) {
.topnav .search-container {
float: none;
}
.topnav a, .topnav input[type=text], .topnav .search-container button {
float: none;
display: block;
text-align: left;
width: 100%;
margin: 0;
padding: 14px;
}
.topnav input[type=text] {
border: 1px solid #ccc;
}
}
//this can be done without the () in the return statment like return strokes;
/*if (strokes == 1) {
return ("Hole-in-one!");
} else if (strokes <= par -2) {
return ("Eagle");
} else if (strokes == par -1) {
return ("Birdie");
}else if (strokes == par) {
return ("Par");
}else if (strokes == par + 1) {
return ("Bogey");
} else if (strokes == par + 2 ) {
return ("Double Bogey");
} else {
return "Go Home!";
}
// Only change code above this line
}
// Change these values to test
console.log("golfScore(1, 1) should return \"Hole-in-one!\"" + (golfScore(1, 1) === "Hole-in-one!" ? " PASSED" : " NOT PASSED"))
console.log("golfScore(4, 1) should return \"Hole-in-one!\"" + (golfScore(4, 1) === "Hole-in-one!" ? " PASSED" : " NOT PASSED"))
console.log("golfScore(4, 2) should return \"Eagle\""+ (golfScore(4, 2) === names[1] ? " PASSED" : " NOT PASSED"))
console.log("golfScore(5, 2) should return \"Eagle\""+ (golfScore(5,2) === names[1] ? " PASSED" : " NOT PASSED"))
console.log("golfScore(4, 3) should return \"" + names[2] + "\"" + (golfScore(4,3) === names[2] ? " PASSED" : " NOT PASSED"))
console.log("golfScore(5, 4) should return 'Birdie'" + (golfScore(5, 4) === "Birdie" ? " PASSED" : " NOT PASSED"));
console.log("golfScore(4, 4) should return \"" + names[3] + "\"" + (golfScore(4,4) === names[3] ? " PASSED" : " NOT PASSED"))
console.log("golfScore(5, 5) should return \"" + names[3] + "\"" + (golfScore(5,5) === names[3] ? " PASSED" : " NOT PASSED"))
console.log("golfScore(4, 5) should return \"" + names[4] + "\"" + (golfScore(4,5) === names[4] ? " PASSED" : " NOT PASSED"))
console.log("golfScore(4, 6) should return \"" + names[5] + "\"" + (golfScore(4,6) === names[5] ? " PASSED" : " NOT PASSED"))
console.log("golfScore(4, 7) should return \"" + names[6] + "\"" + (golfScore(4,7) === names[6] ? " PASSED" : " NOT PASSED"))
console.log("golfScore(5, 9) should return \"" + names[6] + "\"" + (golfScore(5,9) === names[6] ? " PASSED" : " NOT PASSED"))*/
Let's check out "How does a computer sees a variable" or better yet, how does a computer sees anything.
First, a computer doesn't understand anything other than 0 and 1 which we call it the base 2 binary number system.
Where each bit of memory consists of 2 values, 0 and 1, which occupies 1bit of computer space.
Each number of that 1 bit of memory represents 1 thing. For instance,
0 - False
1 - True
If we increase the memory to 2-bits. We will get these combinations of binaries.
00 - False
01 - True
10 - On
11 - Off
When we increase the bit size further, such as 8-bits or 1 byte. We can handle a range of numbers between 0 - 255.
Video game commonly use this 255 number to define maximum strength, or dexterity because they were using an 8-bits system.
255 is also the number used for color values.
255 can also represents your keyboard keys.
The combination of R-255, G-255, B-255 uses 3 1-byte integer.
Mathematics in Base 2 System: How did we derived 255?
As recall, computer uses a based 2 system.
Based 2 as in mathematics.
2x2x2 = 2 ^ 3 = 8
So if we are using 8-bits or 1-byte, we get...
2^8 = 256 //Hence 0-255
Today we use a 64-bits system.
2^64 = 9,223,372,036,854,775,807
Binary & Memory Concept
In traditional computer programming such as C, you have to let the computer know how much memory you need to reserve for your variables.
char z; //This will occupy 8bits of space, which equals to 0 - 255
int x; //This will occupy 16bits of space, which equals to 0 - 65,535
float y; //This will occupy 32bits of space, which equals to 0 - 2,147,483,647
C Programming have no strings. To simulate a string, you need to create an array of char (Characters)
For instance...
char x[7] = "Frankie";
For the computer, "Frankie" string will look like this...
Index: 0 1 2 3 4 5 6 7
Value: [F] [r] [a] [n] [k] [i] [e] [\0]
or
ASCII: 70 114 97 110 107 105 101
Binary: [01000110] [01110010] [01100001] [01101110] [01101011] [01101001] [01100101]
Computer ultimately sees binary numbers, with each set of binaries holds 1 value.
Knowing that computer sees variable as single value.
Trying to assign 2 numbers to 1 variable is not possible.
Because computer can only handle 1 value per reserved memory.
So what can you put inside a variable?
let x = 10; // Number
let y = 10.5; // Floating Point number
let c = 'a'; // Character
let s = "abc"; // String
let bool = true // Boolean
let arry = [] // Array
let obj = {} // Object
so does \0 represent the entire string in this case ?
Frankie Law:scream: 10:09 PM
null
elijah:house_with_garden: 10:09 PM
this thread is amazing btw !! very instructive
Frankie Law:scream: 10:09 PM
that's how computer knows when the "end of string" is reached, and it will stop reading from the memory.
elijah:house_with_garden: 10:10 PM
so then why does x[7] = "Frankie"; ?
Frankie Law:scream: 10:11 PM
It reserves 7 char worth of space. 1 char for each index.
But in memory, it reserved 8, because of the null terminator.
10:11 PM
0-7 = 8 numbers
10:11 PM
but we write 7.
<h2>Use the Conditional (Ternary) Operator</h2>
<p>condition ? statement-if-true : statement-if-false;
</p>
<h2>Use Multiple Conditional (Ternary) Operators</h2>
<p>hat could also be just used to return zero
10:41 PM
all we had to do is use the last syntax they gave us
10:41 PM
and then return and check the num if it was bigger or smaller then 0
function findGreaterOrEqual(a, b) {
if (a === b) {
return "a and b are equal";
}
else if (a > b) {
return "a is greater";
}
else {
return "b is greater";
}
}
The above function can be re-written using multiple conditional operators:
function findGreaterOrEqual(a, b) {
return (a === b) ? "a and b are equal"
: (a > b) ? "a is greater"
: "b is greater";
}
</p>
Also see: Tab Triggers