Objetos do Navegador

Integrando JS e HTML

/codes/w3c/browser-objects/hello-js/index.html
<!DOCTYPE html>
<html lang="en">
<head>
  <meta charset="UTF-8">
  <meta name="viewport" content="width=device-width, initial-scale=1.0">
  <title>Document</title>
  <script src="js/index.js"></script>
</head>
<body>
  <h1 onclick="hello('Event')">Running Javascript</h1>
  <script>
    hello('Body Script');
  </script>
</body>
</html>
/codes/w3c/browser-objects/hello-js/index.html
<!DOCTYPE html>
<html lang="en">
<head>
  <meta charset="UTF-8">
  <meta name="viewport" content="width=device-width, initial-scale=1.0">
  <title>Document</title>
  <script src="js/index.js"></script>
</head>
<body>
  <h1 onclick="hello('Event')">Running Javascript</h1>
  <script>
    hello('Body Script');
  </script>
</body>
</html>
/codes/w3c/browser-objects/hello-js/js/index.js
function hello(origin) {
  console.log(`Hello ${origin}!`);
}
 
hello('Head Script');
/codes/w3c/browser-objects/hello-js/js/index.js
function hello(origin) {
  console.log(`Hello ${origin}!`);
}
 
hello('Head Script');

Web APIs

Window

Window Hierarchy

Window.innerWidth

const width = window.innerWidth;
console.log(width);
const width = window.innerWidth;
console.log(width);

MDN

Window.alert()

window.alert('Hello world!');
window.alert('Hello world!');

MDN

Window.confirm()

const response = window.confirm('Is this JavaScript?');
console.log(response);
const response = window.confirm('Is this JavaScript?');
console.log(response);

MDN

Window.prompt()

const name = window.prompt('What is your name?');
console.log(name);
const name = window.prompt('What is your name?');
console.log(name);

MDN

Window.close()

window.close();
window.close();

MDN

Window.open()

const windowRef = window.open('https://developer.mozilla.org/');
const windowRef = window.open('https://developer.mozilla.org/');

MDN

Window.print()

window.print();
window.print();

MDN

Location

Location.href

location.href = 'http://www.ifpb.edu.br/noticias';
location.href = 'http://www.ifpb.edu.br/noticias';

MDN

Location.assign()

location.assign('http://www.ifpb.edu.br/');
location.assign('http://www.ifpb.edu.br/');

MDN

Location.reload()

location.reload();
location.reload();

MDN

History

History.back()

history.back();    // history.go(-1)
history.back();    // history.go(-1)

MDN

History.forward()

history.forward(); // history.go(1)
history.forward(); // history.go(1)

MDN

History.go()

history.go(-1)
history.go(1)
history.go(-1)
history.go(1)

MDN

Console

Console.clear()

console.clear()
console.clear()

MDN

Console.log()

const name = 'Alice';
console.log(name);
const name = 'Alice';
console.log(name);
Alice
> undefined
Alice
> undefined

MDN

Console.table()

const fruits = ["apples", "oranges", "bananas"];
console.table(fruits);
const fruits = ["apples", "oranges", "bananas"];
console.table(fruits);

MDN

Document

Document.body

const body = document.body;
console.log(body);
const body = document.body;
console.log(body);

MDN

Document.title

console.log(document.title);
console.log(document.title);

MDN

Document.getElementById()

const passwordElement = document.getElementById('password');
console.log(passwordElement.value);
const passwordElement = document.getElementById('password');
console.log(passwordElement.value);

MDN

Document.querySelector()

const passwordElement = document.querySelector('#password');
console.log(passwordElement.value);
const passwordElement = document.querySelector('#password');
console.log(passwordElement.value);

MDN

Document.querySelectorAll()

const inputs = document.querySelector('input');
Array.from(inputs).map(i => i.value);
const inputs = document.querySelector('input');
Array.from(inputs).map(i => i.value);

MDN

Document.write()

document.write('<h1>Lorem ipsum</h1>');
document.write('<h1>Lorem ipsum</h1>');

MDN

Editar esta página