Reserved Words in Javascript

JS : Strings

Strings

When you read lessons in this course, you can highlight a single line and save it to your notes. Simply highlight a single line with your mouse (or your finger on mobile) and then a popup will appear asking you to save it to your notes.

You will be able to find these notes in the challenge page by clicking on the Note icon on the top bar, next to the logo. Try it in the next page!

Popular notes will also be shown in yellow highlights which can be easily added to your notes with a single click. And you can also disable those popular highlights from the top right menu.

---

You can create a string in JavaScript by simply using the double quotes (") or single quotes (').

Here's an example:

"This is a string";
'this is another string!'

There is no difference between using a double quote or a single quote. They are exactly the same. Both of these strings do not support interpolation (which means interpolating a variable inside of them). String interpolation will be covered in a future lesson.

Basic String properties

• the .length property is used to return the length of the string.

Here's an example of getting the length of "Nice!":

"Nice!".length;
 //5

We will learn about variables later in this course, but assuming you have a variable called description, here's how you'd get its length:

description.length;

Basic String methods

Here are some common methods that you can call on strings:

.includes(searchString)

This method returns true when the searchString is included inside the parent string. For example:

"Hello World".includes("World"); // true
"Hello World".includes("Potato"); // false

.toUpperCase()

This will return a new string that has all of its characters in upper case:

"hello".toUpperCase(); // "HELLO";

.toLowerCase()

This will return a new string that has all of its characters in lower case:

"NICe".toLowerCase(); // "nice";

Hint: Stuck? Feel free to use CodeToGo to search for common use cases

A note on tests & sample usage

On the left of the screen, you've got tests running your code. And in your editor, you will almost always have some sample usage code.

function sum(a, b) {
    return a + b;
}

//sample usage
sum(1, 3);

The sample usage code is meant to illustrate how your code will be used. However keep in mind that we will take the function that you wrote, and call it against several other possibilities to make sure that you've got the correct answer.
Feel free to use console.log() for the parameters of the function to see what kind of tests we're running.

So even though the sample usage is sum(1, 3), we run more tests in the background with several values. We also often run it with edge case values such as sum(0, 0). All of this simulates a real Test Driven Development environment.

A note on console.log

When solving challenges feel free to add:

console.log(variable_or_expression)

to see its result in the console on the bottom left.

You can also use it to better understand the tests that you're trying to pass.

Android Studio - Installing Android Target Package from terminal

go to: "C:\Users\YOU-USER-NAME\AppData\Local\Android\Sdk\tools\bin"

sdkmanager "platform-tools" "platforms;android-26"

as listed here: https://developer.android.com/studio/command-line/sdkmanager

NPM Install with so much ERR How to fix?

Have you face this problem?

Error: spawn cmd ENOENT

at Process.ChildProcess._handle.onexit (internal/child_process.js:248:19)

at onErrorNT (internal/child_process.js:431:16)

at processTicksAndRejections (internal/process/task_queues.js:83:17)

Emitted 'error' event at:

at Process.ChildProcess._handle.onexit (internal/child_process.js:254:12)

at onErrorNT (internal/child_process.js:431:16)

at processTicksAndRejections (internal/process/task_queues.js:83:17)

npm ERR! code ELIFECYCLE

npm ERR! errno 1

npm ERR! untitled@0.1.0 start: react-scripts start

npm ERR! Exit status 1

npm ERR!

npm ERR! Failed at the untitled@0.1.0 start script.

npm ERR! This is probably not a problem with npm. There is likely additional logging output above.

npm ERR! A complete log of this run can be found in:

npm ERR! C:\Users\Lini Eisha\AppData\Roaming\npm-cache_logs\2019-04-29T17_36_59_252Z-debug.log

What the solution. Well, I have settled this. By go to the user folder 1. C:/users/yourUser 2. Open in your CMD/CMDER/TERMINAL

3. Type NPM init (I use this first, but I think this can bypass)

4. Then NPM install 5. Start install NPM i react or any framework package

JS - add function inside function

As you can see.. You can add function inside function

Select black only in image using Photoshop

short way: Ctrl+Alt+2 and then Ctrl+Shift+i

Visual Studio Code : HTML in Javascript / Jquery Syntax Highlight

https://marketplace.visualstudio.com/items?itemName=EldarGerfanov.leet-html

Material design Card Shadow css

/* material design shadow */

  

  .mat-card-1 {

    box-shadow: 0 1px 3px rgba(0,0,0,0.12), 0 1px 2px rgba(0,0,0,0.24);

    transition: all 0.3s cubic-bezier(.25,.8,.25,1);

    width: 95%;

    margin: 0 auto;

    display: block;

    

  }

  .mat-card-1:hover {

    box-shadow: 0 3px 6px rgba(0,0,0,0.16), 0 3px 6px rgba(0,0,0,0.23);

    width: 100%;

    margin: 0 auto;

    display: block;

  }

  

  .mat-card-2 {

    box-shadow: 0 1px 3px rgba(0,0,0,0.12), 0 1px 2px rgba(0,0,0,0.24);

    transition: all 0.3s cubic-bezier(.25,.8,.25,1);

    width: 95%;

    margin: 0 auto;

    display: block;

  }

  .mat-card-2:hover {

    box-shadow: 0 10px 20px rgba(0,0,0,0.19), 0 6px 6px rgba(0,0,0,0.23);

    width: 100%;

    margin: 0 auto;

    display: block;

  }

  .mat-card-3 {

    box-shadow: 0 1px 3px rgba(0,0,0,0.12), 0 1px 2px rgba(0,0,0,0.24);

    transition: all 0.3s cubic-bezier(.25,.8,.25,1);

    width: 95%;

    margin: 0 auto;

    display: block;

  }

  

  .mat-card-3:hover {

    box-shadow: 0 14px 28px rgba(0,0,0,0.25), 0 10px 10px rgba(0,0,0,0.22);

    width: 100%;

    margin: 0 auto;

    display: block;

  }

  

  .mat-card-4 {

    box-shadow: 0 1px 3px rgba(0,0,0,0.12), 0 1px 2px rgba(0,0,0,0.24);

    transition: all 0.3s cubic-bezier(.25,.8,.25,1);

    width: 95%;

    margin: 0 auto;

    display: block;

  }

  .card-4:hover {

    box-shadow: 0 19px 38px rgba(0,0,0,0.30), 0 15px 12px rgba(0,0,0,0.22);

    width: 100%;

    margin: 0 auto;

    display: block;

  }

  .mat-hover-1 {

    box-shadow: 0 1px 3px rgba(0,0,0,0.12), 0 1px 2px rgba(0,0,0,0.24);

    transition: all 0.3s cubic-bezier(.25,.8,.25,1);

    width: 90%;

    margin: 0 auto;

    display: block;

  }

  

  .mat-hover-1:hover {

    box-shadow: 0 14px 28px rgba(0,0,0,0.25), 0 10px 10px rgba(0,0,0,0.22);

    width: 100%;

    margin: 0 auto;

    display: block;

  }

  

  .mat-hover-2 {

    box-shadow: 0 1px 3px rgba(0,0,0,0.12), 0 1px 2px rgba(0,0,0,0.24);

    transition: all 0.3s cubic-bezier(.25,.8,.25,1);

    width: 90%;

    margin: 0 auto;

    display: block;

  }

  .mat-hover-1:hover {

    box-shadow: 0 19px 38px rgba(0,0,0,0.30), 0 15px 12px rgba(0,0,0,0.22);

    width: 100%;

    margin: 0 auto;

    display: block;

  }

Image Hover Effect

http://imagehover.io/

Imagehover.css is a lovingly crafted CSS library allowing you to easily implement scaleable image hover effects. Choose from over 40 hover effect classes from a CSS library weighing in at a minified size of only 19KB.

https://bootsnipp.com/snippets/92e5X
card style image hover

Bootstrap : Navbar shrink when scroll

Jquery : Jsonbin Parse Json database

FIGMA Environtment

muhaza designer, [09.03.19 13:42]
https://audacitus.com/figpress/home

muhaza designer, [09.03.19 13:50]
https://www.figma.com/file/YjjN8sNumzYni6NZLppKhXXC/FigmaToHtml

muhaza designer, [09.03.19 13:50]
https://audacitus.com/figpress/homes

muhaza designer, [09.03.19 15:13]
https://chrome.google.com/webstore/detail/snappysnippet/blfngdefapoapkcdibbdkigpeaffgcil/related?hl=en

js : parse json COMPLETED

<!DOCTYPE html>
<html>
<body>
<script>

var gethttp = new XMLHttpRequest();
gethttp.onreadystatechange = function() {
  if (this.readyState == 4 && this.status == 200) {
    var load = JSON.parse(this.responseText);
    //select from json
    var x = load.nama;
    var y = load.task;
    // var y = load.pets[1].name;
    //render and to html
    document.querySelector("#nama").innerHTML = x;
    document.querySelector("#alamat").innerHTML = y;
  }
};
// gethttp.open("GET", "./numerologi/json.txt", true);
gethttp.open("GET", "seed/sprout", true);
gethttp.send();
</script>


<b id="nama"></b></br>
<b id="alamat"></b>
</body>
</html>

//htaccess for apache

RewriteEngine on
RewriteCond %{THE_REQUEST} /([^.]+)\.txt [NC]
RewriteRule ^ /%1 [NC,L,R]
RewriteCond %{REQUEST_FILENAME}.txt -f
RewriteRule ^ %{REQUEST_URI}.txt [NC,L]

PHP : Security using htaccess

I would just move the includes folder out of the web-root, but if you want to block direct access to the whole includes folder, you can put a .htaccess file in that folder that contains just:

deny from all

That way you cannot open any file from that folder, but you can include them in php without any problems.

In this htaccess tutorial, we are going to show how you can prevent the direct access of file/URL of your website. Sometimes website owner doesn’t want that user can access their zip, CSS, etc file directly.

To prevent the direct access, you need to add the below script in the .htaccess file.

.htaccess

RewriteEngine on

# script to  stop direct link of zip and css file
RewriteCond %{HTTP_REFERER} !^http://(www\.)?example[NC] 
RewriteCond %{HTTP_REFERER} !^http://(www\.)?example.*$ [NC] 
RewriteRule \.(zip|css)$ http://www.example.com[R,L]

You can add multiple file extensions by ORing the pipe(|) symbol.

(gif|zip|png|js|css|bmp)

References

PHP : convert to json

Many web applications expect external data in JSON format, hence converting MySQL data to JSON is something that web developers encounter on a regular basis. JSON (JavaScript Object Notation) is fast becoming the most popular data format in server/browser communication. It is light weight, human readable and easy to generate and parse.

Data from MySQL database can be easily converted into JSON format using PHP. The below example uses Sakila sample database that comes with standard MySQL installation. It fetches the first 3 rows of actor table into an associative array using mysqli_fetch_assoc(). Then the array is encoded into JSON using json_encode.

<?php

// Initialize variable for database credentials
$dbhost = 'hostname';
$dbuser = 'username';
$dbpass = 'password';
$dbname = 'sakila';

//Create database connection
  $dblink = new mysqli($dbhost, $dbuser, $dbpass, $dbname);

//Check connection was successful
  if ($dblink->connect_errno) {
     printf("Failed to connect to database");
     exit();
  }

//Fetch 3 rows from actor table
  $result = $dblink->query("SELECT * FROM actor LIMIT 3");

//Initialize array variable
  $dbdata = array();

//Fetch into associative array
  while ( $row = $result->fetch_assoc())  {
 $dbdata[]=$row;
  }

//Print array in JSON format
 echo json_encode($dbdata);
 
?>

Result:

[
 {
 "actor_id":"1",
 "first_name":"PENELOPE",
 "last_name":"GUINESS",
 "last_update":"2006-02-15 04:34:33"
 },
 { 
 "actor_id":"2",
 "first_name":"NICK",
 "last_name":"WAHLBERG",
 "last_update":"2006-02-15 04:34:33"
 },
 {
 "actor_id":"3",
 "first_name":"ED",
 "last_name":"CHASE",
 "last_update":"2006-02-15 04:34:33"
 }
]

As you can see, the result is a valid JSON. You may use this in combination with Jquery/AJAX to pass database data to a web application that expects data in JSON.

js : same concept as jquery .load

document.getElementById("demo")
.innerHTML='<object type="text/html" data="index.html" ></object>';

js if else : input

<script>
function analyzeColor3(myColor) {
if (myColor == "Blue") {
alert("Just like the sky!");
}
else if (myColor == "Red") {
alert("Just like shiraz!");
}
else {
alert("Suit yourself then...");
}
}
</script>
<h3>Favorite Color</h3>
<label>
<input type="radio" name="fav_color3" value="Blue" onclick="analyzeColor3(this.value);"> Blue
</label>
<label>
<input type="radio" name="fav_color3" value="Red" onclick="analyzeColor3(this.value);"> Red
</label>
<label>
<input type="radio" name="fav_color3" value="Green" onclick="analyzeColor3(this.value);"> Green
</label>
<label>
<input type="radio" name="fav_color3" value="None" onclick="analyzeColor3(this.value);"> None
</label>

Javascript : Loop Content

The for Loop
One of the most common ways to create a loop is by using the for statement
to create what is known as a for loop. A for loop allows you to repeatedly run
some code until an expression you specify returns false. That probably doesn’t
make a whole lot of sense, so to help clarify this definition, let’s look at an
example.

If we had to translate our earlier saySomething example using for, it would look
as follows:

var jumlah = 10;

function tulisSesuatu() {
document.writeln("hello!");
}

for (var i = 0; i < count; i++) {
tulisSesuatu();
}

Web Designer Information

Essential Information

Degree Level	Associate degree; bachelor's preferred
Degree Field(s)	Computer technology, website design, graphic design
License/Certification	Certificates available
Experience	Professional portfolio
Key Skills	Computer programming and graphic design; computer proficiency; ability to work on a team
Job Outlook (2014-2024)	27% growth
Median Annual Salary (2015)	$64,970 (for web developers)

Source: U.S. Bureau of Labor Statistics

A web designer develops and creates websites and associated applications. Web designers work in a variety of industries and often as independent contractors. Education requirements can vary, but web designers can get entry-level work with an associate's degree. Bachelor's degrees provide students with an expanded and advanced skill set that can lead to better job prospects or career advancement.

Job Description

A web designer creates the look, layout, and features of a website. The job involves understanding both graphic design and computer programming. Once a website is created, a designer helps with maintenance and additions to the website. They work with development teams or managers for keeping the site up-to-date and prioritizing needs, among other tasks.

The U.S. Bureau of Labor Statistics reported in 2015 that the median hourly wage for web developers, who perform the same duties as web designers, was $31.23, or $64,970 annually. The 2014-2024 projected job growth for web developers was 27%, per the BLS. According to the agency, the median income for graphic designers in 2015 was $46,900 ($22.55 hourly). The BLS projected job growth of 1% between 2014 and 2024 for this occupation.

Duties

A web designer's job duties cover all aspects of creating a website. Upon meeting with clients and assessing their needs, web designers help create and maintain the product. Their duties include, but aren't limited to, the following:

• Writing and editing content
• Designing webpage layout
• Determining technical requirements
• Updating websites
• Creating back up files
• Solving code problems

Requirements

According to O*Net Online in 2016, 43% of web developers held a bachelor's degree, 20% had an associate's degree, and 13% had a post-secondary certificate. Web designers need education in computer technology and website design to be competitive in the job market.

An associate's degree program related to web design, such as an Associate of Applied Science in Web Graphic Design, provides a student with a foundation in the design and technical aspects of creating a website. Students learn web design skills and build professional portfolios that highlight their skills and abilities. Common topics include:

• Fundamentals of design imaging
• Basic web design
• Animation
• Multimedia design
• Content management
• Editing for video and audio
• Multimedia programming and technology

A bachelor's degree in multimedia or web design allows students to learn advanced skills needed for professional web design. Students develop artistic and creative abilities in addition to technical skills. Degree programs, such as a Bachelor of Science in Web Design and Interactive Media, cover:

• Databases
• Webpage scripting
• Programming
• Digital imaging
• Multimedia design
• Web development

Jquery: Popup with timer

<!-- Facebook POPUP LikeBox With Timer Code Start Trickstoo-->
<script type="text/javascript" src="http://ajax.googleapis.com/ajax/libs/jquery/1.8.2/jquery.js"></script>
<style type='text/css'>
#exepopup {
background-color: #fff;
position: fixed;
top: 30%;
z-index: 9999;
display: none;
padding: 0px;
left: 50%;
border: 5px solid rgba(82, 82, 82,
0.7);
-webkit-background-clip: padding-box;
-moz-border-radius: 8px 8px 8px 8px;
border-radius: 8px 8px 8px 8px;
width: 75%;
height: 500px;
margin-left: -7%;
margin-top: 0px;
overflow: hidden;

}

@media only screen and (min-device-width : 360px) and (max-width: 786px) {

#exepopup {
background-color: #fff;
position: fixed;
top: 30%;
z-index: 9999;
display: none;
padding: 0px;
left: 50%;
border: 5px solid rgba(82, 82, 82, 0.7);
-webkit-background-clip: padding-box;
-moz-border-radius: 8px 8px 8px 8px;
border-radius: 8px 8px 8px 8px;
width: 320px;
height: 460px;
margin-left: -248px;
margin-top: 0px;
overflow: hidden;
}
}

#exepopup span {
font-size: 20px !important;
font-weight: bold !important;
}

#exepopup h1 {
background: #6d84b4;
border: 1px solid #3b5998 !important;
color: #FFFFFF !important;
font-size: 20px !important;
font-weight: 700 ! important;
padding: 5px !important;
margin: 0 !important;
/* font-family: '"lucida grande",tahoma,verdana,arial,sans-serif !important; */
overflow: hidden !important;
}

.exepopupdata {
font-size: 12px !important;
font-weight: normal ! important;
/* height: 265px !important; */
padding: 1px !important;
background: #6d84b4 ! important;
/* border-bottom: 2px solid #ddd; */
overflow: hidden !important;
}

#exepopupfooter {
text-align: left;
background: #F2F2F2 !important;
height: 56px ! important;
padding: 10px 10px 10px 10px !important;
overflow: hidden !important;
}

#exepopupclose {
float: right;
background-color: #eee !important;
border: 1px solid #ccc !important;
color: #111 !important;
font-weight: bold !important;
padding: 5px 8px 5px 8px !important;
text-decoration: none ! important;
display: inline-block !important;
position: relative !important;
font-size: 18px !important;
margin: 1px ! important;
}

#exepopupclose:active {
top: 1px;
left: 1px;
}


#facebook_like_button_holder {
position: relative;
width: 35px;
height: 35px;
color: #fff;
background: #4267b2;
border-radius: 50%;
}

#facebook_like_button_holder iframe {
position: absolute;
top: 0px;
height: 35px !important;
width: 35px !important;
}

#fake_facebook_button {
pointer-events: none;
position: absolute;
width: 36px;
height: 36px;
left: 0;
top: 0;
}


/* for Tablet & Small Laptop */
</style>
<script type='text/javascript'>
jQuery(document).ready(function () {
function exepopupfunc() {
var sec =  6//popup timer
var timer = setInterval(function () {
$("#exepopupfooter span").text(sec--);
if (sec == 0) {
$("#exepopup").fadeOut("slow");
clearInterval(timer);
}
}, 1000);
var exepopupwindow = jQuery(window).height();
var exepopupdiv = jQuery("#exepopup").height();
var exepopuptop = jQuery(window).scrollTop() + 50;
jQuery("#exepopup").css({ "top": exepopuptop });
}
jQuery(window).fadeIn(exepopupfunc).resize(exepopupfunc)
//alert(jQuery.cookie('sreqshown'));
//var exepopupww = jQuery(window).width();
//var exepopupwww = jQuery("#exepopup").width();
//var exepopupleft = (exepopupww-exepopupwww)/2;
var exepopupleft = 268;
//var exepopupwindow = jQuery(window).height();
//var exepopupdiv = jQuery("#exepopup").height();
//var exepopuptop = (jQuery(window).scrollTop()+exepopupwindow-exepopupdiv) / 2;
jQuery("#exepopup").animate({ opacity: "1", left: "0", left: exepopupleft }, 0).show();
jQuery("#exepopupclose").click(function () {
jQuery("#exepopup").animate({ opacity: "0", left: "-5000000" }, 1000).show();
});
});
</script>

<div id="fb-root"></div>
<script>(function (d, s, id) {
var js, fjs = d.getElementsByTagName(s)[0];
if (d.getElementById(id)) return;
js = d.createElement(s); js.id = id;
js.src = 'https://connect.facebook.net/ms_MY/sdk.js#xfbml=1&version=v3.2';
fjs.parentNode.insertBefore(js, fjs);
}(document, 'script', 'facebook-jssdk'));</script>

<div id="exepopup">
<h1>Sponsored By : ( Iklan Anda Disini )
<div class="exepopupdata" style="float:right;">

<div id="facebook_like_button_holder">

<iframe src="https://www.facebook.com/plugins/like.php?href=https%3A%2F%2Fwww.facebook.com%2Fsuperpantas&width=96&layout=button&action=like&size=small&show_faces=true&share=true&height=65&appId=1275927729128671" width="51" height="65" style="border:none;overflow:hidden;border-radius:20%;margin-top:7px" scrolling="no"
frameborder="0" allowtransparency="true" allow="encrypted-media"></iframe>





<div id="fake_facebook_button">
<img src="https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEhrV3yrE9B6ttBy9kzzGwYvfubb0XTC8Qux_u7U_H8ZTO8KY9T5k2QJ5bUtm9wfmdWyMht32tT21CS7jcxGmjjPMIYl_YPy5y41wvuwpFVSl0OnD_lxCxTU6C9QtnwC3sTHA1slvCOEk9W4/s400/close-2.png" />
</div>

</div>

</div>


</h1>


<img src="https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEhMHBA3gN3vc1gF4evilDU5_cUwhnduc-xyxShTWSh2cUXEGfPv6VIrIsb6Uhs93eA-SzRLpTjd68GfN4y63SnlPI6irU3YDjJO5_ts5LN6vOLl16nvVxzuYrXQgEylA6OAEeLmUxsTZJjQ/s1600/mencanak.png"
width="100%" />


<div id="exepopupfooter">like Superpantas Page atau tunggu sebentar <span>10</span> Seconds...!!!
<!-- <a href="#" id="exepopupclose" onclick="return false;"></a><br /> -->
</div>
</div>
<!-- Facebook POPUP LikeBox With Timer Code End Trickstoo-->

PHP : Prevent Direct Url Open

 <?php
    /* at the top of 'check.php' */
    if ( $_SERVER['REQUEST_METHOD']=='GET' && realpath(__FILE__) == realpath( $_SERVER['SCRIPT_FILENAME'] ) ) {
        /*
           Up to you which header to send, some prefer 404 even if
           the files does exist for security
        */
        header( 'HTTP/1.0 403 Forbidden', TRUE, 403 );

        /* choose the appropriate page to redirect users */
        die( header( 'location: /error.php' ) );

    }
?>

<?php

if (!isset($_SERVER['HTTP_REFERER'])){

echo "uh?"; }

else {

}

?>

Js: Load random url

<script type="text/javascript">
    var pages = [
        "./room1",
        "./room2",
        "./room3"
    ];

    function randomPage() {
        return pages[Math.round(Math.random() * (pages.length - 1))];
    }

    location.href= randomPage();
</script>

PHP : Randomly open list of url

<?php

/**

* Created by PhpStorm.

* User: Azathoth

* Date: 29. 3. 2016

* Time: 14:54

*/

$addresses = [

        './room1',

        './room2',

'./room3',

'./room2',

'./room3',

'./room1'

];

$size = count($addresses);

$randomIndex = rand(0, $size - 1);

$randomUrl = $addresses[$randomIndex];

header('Location: ' . $randomUrl, true, 303);

?>

JQUERY : ADD TEXT ANYWHERE IN INPUT WHEN CLICK

    jQuery("#btn").on('click', function() {
        var $txt = jQuery("#txt");
        var caretPos = $txt[0].selectionStart;
        var textAreaTxt = $txt.val();
        var txtToAdd = "stuff";
        $txt.val(textAreaTxt.substring(0, caretPos) + txtToAdd + textAreaTxt.substring(caretPos) );
    });

<script src="https://ajax.googleapis.com/ajax/libs/jquery/1.9.1/jquery.min.js"></script>

<textarea id="txt" rows="15" cols="70">There is some text here.</textarea>
<input type="button" id="btn" value="OK" />