JavaScript

【超初心者 JavaScript】Webブラウザで文字や数値を表示させる

【超初心者 JavaScript】Webブラウザで文字や数値を表示させる

HTMLの枠組みにJavaScriptで記入する方法

 

HTMLを使ってWebブラウザに表示できる様になったら、ソースコードを追加してJavaScriptで書ける様にします。

HTMLでWebブラウザに表示させる方法はこちらを参考にして下さい。

【超初心者 JavaScript】Webブラウザで表示させる方法
【超初心者 JavaScript】Webブラウザで表示させる方法

目次1 Webブラウザを準備2 フォルダ作成3 エディターを使ってみる4 ソースコードを書く5 実際にWebブラウザで表示させてみる6 まとめ Webブラウザを準備 なぜWebブラウザが必要かと言うと ...

続きを見る

 

JavaScriptの登場です!

<!DOCTYPE html>
<html>
<head>
    <meta charset="UTF-8">
</head>
<body>
    <script>
        
    </script>
</body>
</html>


7、9行目に記入されている <script> </script> の間にソースコードを書く事で、JavaScriptを使える様になります。

 

 

JavaScriptで数字や文字を書いてみる

まずは document.write(); というものを使用して、ブラウザ上に表示させてみます。

<!DOCTYPE html>
<html>
<head>
    <meta charset="UTF-8">
</head>
<body>
    <script>
        document.write( 3 );
    </script>
</body>
</html>


8行目に document.write( 3 ); と記入しました。

エディターを上書き保存してから、ブラウザを更新します。※毎回必須!

 

左上に「3」と表示されたと思います。

Naza
けっこう感動する

 

はてな

document.write( この部分に表示させたい文字や数字を入力する );

 

※ただし文字を表示させる時は、シングルクォーテーション''又はダブルクォーテーション""で囲みます。

 

<!DOCTYPE html>
<html> <head> <meta charset="UTF-8"> </head> <body> <script> document.write( "私はロボットです。" ); </script> </body> </html>

 

こうする事で文字が表示されます。

 

数字はダブルクォーテーション""で囲ったらダメなの?

という疑問が出てくるので試してみます。

ダブルクォーテーション""ありの場合

<!DOCTYPE html>
<html>
<head>
    <meta charset="UTF-8">
</head>
<body>
    <script>
        document.write( "3 + 7" );
    </script>
</body>
</html>


実行結果

 


ダブルクォーテーション""無しの場合

<!DOCTYPE html>
<html>
<head>
    <meta charset="UTF-8">
</head>
<body>
    <script>
        document.write( 3 + 7 );
    </script>
</body>
</html>

 

実行結果

 

 

ポイント

ダブルクォーテーション""あり:文字としてそのまま表示。
ダブルクォーテーション""無し:計算結果の数値として表示。

 

 

こんな法則があるので覚えておいた方がいいです。

 

Naza
地味に重要
 
 

まとめ

今回は文字と数字の表示を紹介させてもらいました。

短い文字でも数字でも自分で書いたコードで実行し、目に見える変化があると楽しいですね。

俺やってるわ!的なモチベーションも上がります。

これも誰かの役に立てれば幸いです。

最後まで読んでいただきありがとうございました。



以上。

-JavaScript

© 2021 Nazaブログ