Day 4

This is the last planned day for my JS Cheatsheet.  Now on to more exciting things.
#CodingPhase #TheCodingWay #365CodingPhaseChallenge

Index.html

<!DOCTYPE html>
<html>
<head>
<!-- Cheatsheet created as a code along with a Traversy Media video on YouTube -->
<!-- https://www.youtube.com/watch?v=vEROU2XtPR8&t=323s -->
<title>JavaScript Cheatsheet</title>
<link rel="stylesheet" type="text/css" href="style.css">

<!--
To connect to an external JavaScript file, use the following code
<script src="main.js"></script>
-->

</head>
<body>
<div class="header">
<h1 id="heading">Learning JaveScript</h1>
<p>With Brad Traversy & Sean Connelly</p>
</div>

<div class="container">
<button onclick="doClick()">Click Me One</button>
<br>
<button onclick="this.innerHTML = 'You Clicked'">Click Me Two</button>
<br>
<button onclick="changeText()">Click Me Three</button>
</div>

<div>
<!-- Use <script></script> TAGs when not using external JS file -->
<!-- It is best -->
<script>
alert('Script tags work');
</script>
</div>

<!--
variables can contain:
letters, numbers, underscores, and dollar signs

variable names should begin with a letter
although they can begin with either a _(underscore) or $(dollar sign)
variable names are case sensitive (Test is not the same as test)
-->

<!--
camel case
var myFavoriteNumber

partial case
var MyFavoriteNumber

underscore
var my_favorite_number
-->

<script>
// Number
var number1 = 35;
var number2 = 40;
var number3 = '35';
var number4 = '40';

alert(number1 + number2);
alert(number3 + number4);
alert('My favorite number is ' + number1); //cancontanate string and numeric variables
// End Numbers

// Array
var colors1 = []; //initialized array
var colors1 =['red', 'green', 'blue']; //initialized w/values

alert(colors1); //alert contains all values
alert(colors1[1]); //returns green
// Arrays are 0(zero) based.
// Three values are in positions 0, 1, and 2

// Alternate array declaration
var colors2 = new Array('grey', 'yellow', 'pink');

alert(colors2[2]); //returns pink

// Adding values to the array
colors2[3] = 'orange'; // works for known positions

// A better way to add values
colors2.push('teal'); // Called "dot" syntax

alert(colors2);

var numbers = [5,56,85,124,3,84,'Twenty']; // Values can be mixed

alert(numbers[0] + numbers[3]);
alert(numbers.length);
alert(numbers.sort());
alert(numbers.reverse());
// End Array

//Loops
// for loops
// for(set a variable; set the condition; increment) {
// do something
// }

for (var i = 0; i < 10; i++) {
console.log(i);
}

var w = 0;
while(w < 10) {
console.log(w);
w++;
}

var digits = [55,84,95,221,2,8,665,35,44];

digits.forEach(function(number){
console.log(number);
});
//End Loops

// String

// Object
// Object Literal
var person = {
firstName: 'Sean',
lastName: 'Connelly',
age: 50,
children: ['Danielle', 'Kieran'],
address: { // Embedded object
street: '555 Merryville Ln',
city: 'Broken Bow',
state: 'OK'
},
fullName: function() {
return this.firstName + " " + this.lastName;
}
}
console.log(person.firstName);
console.log(person.children[0]);
console.log(person.address); // Shows entire object
console.log(person.address.state);
console.log(person.fullName());

// Object Constructor
var apple = new Object();
apple.color = 'red';
apple.shape = 'round';

apple.describe = function() {
return 'An apple is the color ' + this.color + ' and is the shape ' + this.shape;
}

console.log(apple.describe());

// Constructor Pattern
function Fruit(name, color, shape) {
this.name = name;
this.color = color;
this.shape = shape;

this.describe = function() {
return 'A ' + this.name + ' is the color ' + this.color + ' and is the shape ' + this.shape;
}
}

var orange = new Fruit('orange', 'orange', 'round');
var melon = new Fruit('melon', 'green', 'round');

console.log(orange);
console.log(melon.shape);
console.log(melon.describe());
// You can also create arrays of objects
// End Object


// Conditionals
// Keep in mind:
// = is an assignment operator
// == is used to compare values
// === is used to compare values of the same data-type

var var1 = 3;
var var2 = 4;
if(1 == 1) {
console.log('This is true');
} else {
console.log('This is not true');
}

if(var1 == var2 && var1 == 3) { // If var2 = 3 this would be true
console.log('This is true');
} else {
console.log('This is not true');
}

if(var1 == var2 || var1 == 3) { // || = or
console.log('This is true');
} else {
console.log('This is not true');
}

var fruit = 'apple';

switch(fruit)
{
case "banana":
alert('I hate bananas');
break;

case "apple":
alert('I love apples');
break;

case "Orange":
alert('Oranges are OK');
break;

default:
alert('I love all other fruit');
break;
}
// End Conditionals

// Events
function doClick() {
alert('you clicked');
}

function changeText() {
var heading = document.getElementById('heading');
heading.innerHTML = 'You Clicked Me Three!'
}
// End Events
</script>

</body>
</html>

Comments

Post a Comment

Popular posts from this blog

Day 184

I started looking at a new tutorial I found on lerning HTML and found myself lacking.  I am starting to re-focus my studies and work on building a straight path to employment.  This is part of the code that I did in the new tutorial.  I am now focusing on Joe's content. #CodingPhase #TheCodingWay #365CodingPhaseChallenge ********** <main>       <section>         <h2>Local News</h2>         <article>           <header>             <h3>Fire fighters rescue man from building</h3>             <p>(author, date)</p>           </header>           <p>This is the story text. This is the story text.</p>           <p>This is the story text. This is the story text.</p> ...
Read more

Day 2

index.html for a javascript cheat sheet.  Not finished... only about a third of the way through this one. ********** <!DOCTYPE html> <html> <head> <!-- Cheatsheet created as a code along with a Traversy Media video on YouTube --> <!-- https://www.youtube.com/watch?v=vEROU2XtPR8&t=323s --> <title>JavaScript Cheatsheet</title> <link rel="stylesheet" type="text/css" href="style.css"> <!-- To connect to an external JavaScript file, use the following code <script src="main.js"></script> --> </head> <body> <div class="header"> <h1>Learning JaveScript</h1> <p>With Brad Traversy</p> </div> <div class="container"> </div> <div> <!-- Use <script></script> TAGs when not using external JS file --> <!-- It is best --> <scri...
Read more

Day 188

This is me working on building a dev environment on a linux box... #CodingPhase #TheCodingWay #365CodingPhaseChallenge ********** smc@smc-ToshLap:~$ sudo npm install gulp-cli -g /usr/bin/gulp -> /usr/lib/node_modules/gulp-cli/bin/gulp.js + gulp-cli@2.2.0 added 236 packages from 157 contributors in 7.232s smc@smc-ToshLap:~$ sudo npm install gulp@3.9.1 -g npm WARN deprecated gulp-util@3.0.8: gulp-util is deprecated - replace it, following the guidelines at https://medium.com/gulpjs/gulp-util-ca3b1f9f9ac5 npm WARN deprecated graceful-fs@3.0.11: please upgrade to graceful-fs 4 for compatibility with current and future versions of Node.js npm WARN deprecated minimatch@2.0.10: Please update to minimatch 3.0.2 or higher to avoid a RegExp DoS issue npm WARN deprecated minimatch@0.2.14: Please update to minimatch 3.0.2 or higher to avoid a RegExp DoS issue npm WARN deprecated graceful-fs@1.2.3: please upgrade to graceful-fs 4 for compatibility with current and future versions o...
Read more