Skip to content

Instantly share code, notes, and snippets.

@JoelCodes

JoelCodes/browser-env.html

Created June 13, 2017 20:03
Show Gist options

  • Select an option

    Learn more about clone URLs
  • Save JoelCodes/c1698b535efd10ae47b0f50cd3b94a04 to your computer and use it in GitHub Desktop.

Select an option

Learn more about clone URLs
Save JoelCodes/c1698b535efd10ae47b0f50cd3b94a04 to your computer and use it in GitHub Desktop.
Download ZIP
Raw
browser-env.html
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<meta http-equiv="X-UA-Compatible" content="ie=edge">
<title>Browser Environment</title>
<script src='example.js'></script>
</head>
<body>
<script>
alert(example);
/* Global Object */
console.log(window);
var x = 3;
console.log(window.x);
/* IIFE Immediately Invoked Function Expression */
(function(){
var y = 3;
console.log(window.y);
}());
/* Access to all the objects in the HTML hierarchy */
console.log(document);
/* Information about the user environment */
console.log(navigator);
</script>
</body>
</html>
Raw
document.html
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<meta http-equiv="X-UA-Compatible" content="ie=edge">
<title>Document</title>
<style type="text/css">
.tomato{
color: tomato;
}
.title {
font-weight: bold;
font-size: 2em;
}
</style>
</head>
<body>
<!--<p class='title'>This is my title</p>
<script>
/* Mess with title */
var title = document.getElementsByClassName('title')[0];
title.style.backgroundColor = 'snow';
title.style.transition = 'color 1s';
setInterval(function(){
title.classList.toggle('tomato');
}, 2000);
setTimeout(function(){
title.innerText = 'This is a <em>better</em> title';
}, 1000);
</script>-->
<ul id='list'>
<li>Joel</li>
<li>Don</li>
<li>David</li>
</ul>
<script>
/* Add And Remove List Item */
var list = document.getElementById('list');
console.log(list);
setTimeout(function(){
var newListItem = document.createElement('li');
newListItem.innerText = 'Karl';
list.appendChild(newListItem);
debugger;
setTimeout(function(){
debugger;
newListItem.remove();
}, 2000);
}, 2000);
</script>
</body>
</html>
Raw
events.html
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<meta http-equiv="X-UA-Compatible" content="ie=edge">
<title>Document</title>
<style>
#button{
color: white;
background-color: tomato;
border:none;
border-radius: 5px;
box-shadow: 2px 2px #666;
}
</style>
</head>
<body>
<!--<div id='div'>
<button id='button'>I'm a button!</button>
</div>
<script>
var button = document.querySelector('#button');
button.addEventListener('click', function(event){
console.log(event);
console.log(this);
});
// function factorial(sum){
// if(sum < 2) return 1;
// const lastFactorial = factorial(sum - 1);
// console.trace();
// return sum * lastFactorial;
// }
// factorial(6);
</script>-->
<!--<input type="text" id="txt" value='Too Soon'/>
<script>
var txt = document.querySelector('#txt');
function inputListener(evt){
console.log(this.value);
console.log(evt);
}
txt.addEventListener('keyup', inputListener);
</script>-->
<form>
<p><label for="email">Email</label><input type="email" name="email"/></p>
<p><input id='button' type="submit" value='Submit This Form'/></p>
</form>
<ul id='list'>
</ul>
<script>
var form = document.querySelector('form');
var list =document.querySelector('#list');
form.addEventListener('submit', function(event){
event.preventDefault();
var newElement = document.createElement('li');
newElement.innerText = this.elements.email.value;
list.appendChild(newElement);
this.elements.email.value = '';
});
</script>
</body>
</html>
Raw
example.js
var example = 'I am a global variable';
Sign up for free to join this conversation on GitHub. Already have an account? Sign in to comment