Skip to content

Instantly share code, notes, and snippets.

@rssilva
Last active Dec 11, 2015
Embed
What would you like to do?
HTML document used on the 24th post of dailydevtips.com
<!DOCTYPE html>
<html lang="pt" dir="ltr" class="client-nojs">
<head>
<meta http-equiv="Content-Type" content="text/html; charset=utf-8">
<script type="text/javascript" src="arguments.js"></script>
</head>
<body>
<div id="wrapper"></div>
</body>
</html>
//vamos criar uma função genérica para ver a aplicação do objeto "arguments"
var minhaFuncao = function () {
//aqui vemos que embora ele não tenha sido declarado
//é um objeto "array-like" que tem todas as
//variáveis passadas como argumento para a função
console.log(arguments)
var wrapper = document.getElementById('wrapper') //div principal do documento HTML
//esse for itera pelo objeto arguments
for (var i = 0, len = arguments.length; i < len; i++) {
//se o tipo do argumento no índice i for string...
//você pode estranhar esse "igual a" dessa forma === em vez dessa ==
//faremos um estudo mais detalhado sobre isso
if (typeof(arguments[i]) === 'string') {
//o html da div principal é concatenado com um elemento h2 contendo
//o conteúdo do objeto argumentos no índice i
wrapper.innerHTML += '<h2>' + arguments[i] + '</h2>';
}
//se o tipo do objeto arguments no índice i for um objeto
//e se esse objeto tiver a propriedade length
if (typeof(arguments[i]) === 'object' && arguments[i].length) {
//o html da div principal é concatenado com uma lista
wrapper.innerHTML += '<ul>';
//essse for itera por todos os filhos dessa lista (os elementos li, no caso)
//esses elementos vão ser concatenados ao html da div principal
for (var j = 0, len2 = arguments[i].length; j < len2; j++) {
wrapper.innerHTML += '<li>' + arguments[i][j] + '</li>';
}
wrapper.innerHTML += '</ul>';
}
}
}
//aqui temos as variáveis que serão passadas como parâmetro para a nossa função
var subtitulo1 = 'Se é uma string, vira um h2',
subtitulo2 = 'se é um array, vira uma lista (ul), veja abaixo, a lista do supermercado',
lista1 = ['pão', 'leite', 'queijo', 'presunto'],
subtitulo3 = 'esse é um terceiro subtitulo',
lista2 = ['1958', '1962', '1970', '1994', '2002'],
subtitulo4 = 'Você consegue identificar o que significa a lista acima?';
window.onload = function () {
//quando os elementos forem renderizados na tela, a função será chamada
//todas as strings declaradas acima serão passadas como argumento
minhaFuncao(subtitulo1, subtitulo2, lista1, subtitulo3, lista2, subtitulo4);
}
//Aqui estamos redefinindo a função, com uma única diferença
//declaramos a função com uma variável local arguments
//veja o que acontece quando você faz isso...
//arguments não é uma palavra reservada, então pode ser sobrescrita
//feito isso, não teremos o mesmo efeito desejado. Tome cuidado!
var minhaFuncao = function () {
var arguments = '';
console.log(arguments)
var wrapper = document.getElementById('wrapper')
for (var i = 0, len = arguments.length; i < len; i++) {
if (typeof(arguments[i]) == 'string') {
wrapper.innerHTML += '<h2>' + arguments[i] + '</h2>';
}
if (typeof(arguments[i]) == 'object' && arguments[i].length) {
wrapper.innerHTML += '<ul>';
for (var j = 0, len2 = arguments[i].length; j < len2; j++) {
wrapper.innerHTML += '<li>' + arguments[i][j] + '</li>';
}
wrapper.innerHTML += '</ul>';
}
}
}
//Nesse caso, estamos reescrevendo a função, e adicionando arguments
//como a variável passada como argumento, substitua-a e veja os efeitos
var minhaFuncao = function (arguments) {
console.log(arguments)
var wrapper = document.getElementById('wrapper')
for (var i = 0, len = arguments.length; i < len; i++) {
if (typeof(arguments[i]) == 'string') {
wrapper.innerHTML += '<h2>' + arguments[i] + '</h2>';
}
if (typeof(arguments[i]) == 'object' && arguments[i].length) {
wrapper.innerHTML += '<ul>';
for (var j = 0, len2 = arguments[i].length; j < len2; j++) {
wrapper.innerHTML += '<li>' + arguments[i][j] + '</li>';
}
wrapper.innerHTML += '</ul>';
}
}
}
Sign up for free to join this conversation on GitHub. Already have an account? Sign in to comment