スキップしてメイン コンテンツに移動

【JavaScript基本から 第1回】JavaScriptはどこに書くの?





JavaScriptはどこに書くの?

JavaScriptは  タグの中と、 内の好きな位置に書くことができます。



<script> タグ

JavaScriptのコードは<script> 〜</script> タグの間に書くルールがあります。
記述例
<script>
document.getElementById("demo").innerHTML = "Hello World!!";
</script>


*以前のJavaScriptではtype属性を使って、<script type="text/javascript"></script> と書いていましたが、 今はこのtype属性は必須ではありません。



JavaScriptは <head> タグや <body> タグ内に書く

HTML内に、何個でもJavaScriptを書くことができます。
JavaScriptは<head> タグや <body> タグ、または、その両方に書くことができます。

*好きな場所に書くことはまったく問題ありませんが、見やすいコードのためには1箇所にまとめて書くことが望ましいです。



<head> タグ内に書いた場合の例

JavaScriptをHTMLの<head> タグ内に書いた例です。
下記のサンプルでは、ボタンをクリックしたときに、関数を実行する例です。
記述例
<!DOCTYPE html>
<html>
<head>
<script>
function myFunction() {
    document.getElementById("demo").innerHTML = "内容が書き換わりました";
}
</script>
</head>

<body>

<p id="demo">ボタンをクリックすると内容が変わります</p>

<button type="button" onclick="myFunction()">ボタンをクリック</button>

</body>
</html>




<body> タグの中に書いた場合の例

上記の <head> の中に書いた例と同様に、<body> タグの中にJavaScriptを書いたサンプルです。
記述例
<!DOCTYPE html>
<html>
<body>


<p id="demo">ボタンをクリックすると内容が変わります;/p>

<button type="button" onclick="myFunction()">ボタンをクリック</button>

<script>
function myFunction() {
   document.getElementById("demo").innerHTML = "内容が書き換わりました";
}
</script>

</body>
</html>




外部ファイルとして記述する

JavaScriptは外部ファイルとしても記述できます。
記述例
<!DOCTYPE html>
<html>
<body>
<script src="sample.js"></script>
</body>
</html>
外部化するケースとしては、同じプログラムが、他のHTMLファイルでも使われている場合など、 わざわざ複数回書かずに済みます。

JavaScriptファイルは .js という拡張子で保存します。




Written by Creative Flake

コメント

このブログの人気の投稿

世界一おいしいと思うチョコレートとその謎

こんにちは、クリエイティブフレークです。

自分ランキングでチョコレート部門No.1をキープし続けるMaltesers(モルティーザーズ)というオーストラリアのチョコレートがあるのですが、食べたことがあるという人もいるかと思います。

大きさはチョコボールより一回り大きい感じがします。



チョコレートは日本のチョコにはないような、いわゆる甘い感じです。ティムタムを想像してもらえれば分かりやすいかも!

中にはサックサクの麦芽クッキーが入っていて、これが食べたら止まらない理由です。

コーヒーなんてあれば何箱でもいける。



以前はわたしも日本国内で、輸入菓子を扱っているお店や普通のコンビニでたまに見かけては買ってたのですが、残念なことに今やどこにも見当たりません。



今回おみやげで、写真の「King Share」サイズを4箱いただいたのですが、この容量だけなのか・・・・・・1個だけクッキーじゃなく、キャラメルが入ってる気がする。



最初は「あれ?工場で1つミスしたのが混ざってたのかなぁ」なんて思ってたのですが、2箱目、3箱目も間違いなく1個だけキャラメルが入っているのです!

これはもしかしてコアラのマーチのまゆげコアラ的な?ピンキーの1つだけハートが入っているみたいな??と思ってGoogle先輩に聞いてみました。

が、それらしい回答は見当たらず。



この謎を知っている人、そして日本で買えるところを知っている人がいらっしゃったら、ぜひ教えてください(^v^)/

Photoshopで文字にアンチエイリアスをかける

こんにちは、クリエイティブフレークです。

Photoshopで文字を書いていると、「太字を選択するほどでもないけど、あと気持ちちょっと太かったらいいのに!」、「あとちょっとクリアに見せたいのに!」と思ったことはありませんか?



そんなときに活用したいのが「アンチエイリアス」です。

「エイリアス」とは曲線がギザギザ、ガタガタに表現されてしまうことで、ドット絵みたいに見えます。

なので「アンチ」って言うんですね。



実際に見比べてみると


▲ヒラギノ角ゴシックPro 24pt



明らかに「なし」を選択したものはギザギザです。

「太く」と「シャープ」はちょっと太い感がありますが、「鮮明」と「なめらか」の差が難しいですね。



今度はフォントサイズを変えてみました。


▲ヒラギノ角ゴシックPro 14pt



個人的には、文字が太くなる「シャープ」と「太く」がややジャギー感(ギザギザ感)が残っていますが、「鮮明」と「滑らかに」はフォントサイズを小さくしたときに潰れてしまいやすいイメージです。



では実際どうやって変更するの?なのですが、Photoshop CS6を例に説明します。


▲テキストツール(Tの形)を選びます




▲文字を書いたら上のアンチエイリアスを選びます(うちのマシンが英語ですみません)

Web用や印刷用など、用途によって強弱を使い分けたいですねヽ(・∀・)ノ



Written by Creative Flake

ゲシュタルトの法則をWebデザインにも利用しよう

こんにちは、クリエイティブフレークです。

一度は聞いたことがあるかもしれない「ゲシュタルト」。

ゲシュタルト
人間の精神を、部分や要素の集合ではなく、全体性や構造に重点を置いて捉える。この全体性を持ったまとまりのある構造をドイツ語でゲシュタルト(Gestalt :形態)と呼ぶ。



人間の脳がものの形、要素をどのように認識するか、ということですね。

人間がゲシュタルトを感じるときに起こる、さまざまな種類を「プレグナンツの法則」と呼ぶそうですが、その具体例を簡単に紹介。





ゲシュタルトの法則1 : 近接の法則



近接の法則は、近くにあるもの同士が同じグループだと認識されやすい。





ゲシュタルトの法則2 : 類同の法則



類同の法則は、同じ色や、同じ形同士が同じグループだと認識されやすい。





ゲシュタルトの法則3 : 共通運命の法則



共通運命の法則は、同じ方向に動くもの、同じ周期で点滅するなどが同じグループだと認識されやすい。
共通運命の法則は、近接の法則や類同の法則よりも強く働く。





ゲシュタルトの法則4 : 良い連続の法則



良い連続の法則は、図形はつながった形になりやすいと認識されやすい。
近接、類同、共通運命の法則から、切れ目がなくや突然変化しない図形がよいものだと分かる。





ゲシュタルトの法則5 : 閉合の法則



【】や()のように、閉じた形は同じグループだと認識されやすい。
】【 は同じグループと認識しづらい。





ゲシュタルトの法則6 : 面積の法則



小さいものが図として、大きいものが背景として認識されやすい。





ゲシュタルトの法則7 : 対称の法則



対称な図形は閉じた図として認識されやすい。





このゲシュタルトの法則は心理学をはじめとした様々な分野に応用されていますが、人間の特性を活かすという点で、デザインの分野にも活用されています。

たとえばリモコンのボタン配列。



数多くのボタンを、誰が見ても直感的に分かりやすく、誤操作させないように配置しています。





こちらは私のMacのドック。



急いでいるとよく間違ったアイコンをクリックしてしまうので、試行錯誤の末、この配列が一番使いやすい結論に。





Webデザインにおいては、もしすべてのパーツが単調に置かれていたら……



どこを見ていいのかも分かりづらく、どれがクリックできるのかも分かりづらい。



色や形を変えたり、適度な距…