一白山中

自分を磨き、自分なりの幸せを追求しよう

JavaScript出力

JavaScript

①ポップアップ表示

<!DOCTYPE html>
<html>
<head>
<meta charset="utf-8">
<title>一白山中(ennya.hatenablog.com)</title>
</head>
<body>
    
<h1>初めての画面</h1>
<p>初めての段落</p>
<script>
window.alert(5 + 6);
</script>
    
</body>
</html>

②HTML要素を入れ替え

<!DOCTYPE html>
<html>
<head> 
<meta charset="utf-8"> 
<title>一白山中(ennya.hatenablog.com)</title>
</head>
<body>
    
<h1>初めてのWebサイト</h1>
<p id="demo">初めての段落</p>
<script>
document.getElementById("demo").innerHTML="段落もう更新された";
</script>
    
</body>
</html>

③HTML自体に出力する

<!DOCTYPE html>
<html>
<head> 
<meta charset="utf-8"> 
<title>一白山中(ennya.hatenablog.com)</title>
</head>
<body>
    
<h1>初めてのWebサイト</h1>
<p>初めての段落</p>
<script>
document.write(Date());
</script>
    
</body>
</html>

または、

<!DOCTYPE html>
<html>
<head> 
<meta charset="utf-8"> 
<title>一白山中(ennya.hatenablog.com)</title>
</head>
<body>
    
<h1>初めてのWebサイト</h1>
<p>初めての段落</p>
<button onclick="myFunction()">クリックしてください</button>
<script>
function myFunction() 
{
    document.write(Date());
}
</script>
    
</body>
</html>

④コンソールに出力する

<!DOCTYPE html>
<html>
<head> 
<meta charset="utf-8"> 
<title>一白山中(ennya.hatenablog.com)</title>
</head>
<body>
    
<h1>初めてのWebサイト</h1>
<p>
ブラウザ(Chrome, edge, Firefox) F12で開発者ツールで稼働させ、コンソールタブで、確認できます。
</p>
<script>
a = 5;
b = 6;
c = a + b;
console.log(c);
</script>
    
</body>
</html>

 

※alterよりconsoleのほうは、より詳しい情報を確認できます。また、サイト画面も中断されないです。

 

※consoleにも変数利用できます。

var hello = 'hello';
var one = 1;

console.log('%s world', hello)
console.log('%d + 1 = 3', one)

 

※consoleのレイアウト調整もできます。

console.log('%cfuck', 'font-size:20px')

 

(function() {
    var _log = console.log;
    console.log = function() {
        if (typeof(arguments[0]) != 'object' && typeof(arguments[0]) != 'function' && arguments.length == 1) {
            _log.call(console, '%c' + arguments[0], "text-shadow: 0 1px 0 #ccc,0 2px 0 #c9c9c9,0 3px 0 #bbb,0 4px 0 #b9b9b9,0 5px 0 #aaa,0 6px 1px rgba(0,0,0,.1),0 0 5px rgba(0,0,0,.1),0 1px 3px rgba(0,0,0,.3),0 3px 5px rgba(0,0,0,.2),0 5px 10px rgba(0,0,0,.25),0 10px 10px rgba(0,0,0,.2),0 20px 20px rgba(0,0,0,.15);font-size:5em")
        } else {
            _log.call(console, ...arguments)
        }
    }
})()