みこむらめもむらむらむら

なんかHTML5とかJS勉強とかやりながらめもを綴るブログ

【JavaScript】変数

JavaScript

さて引き続き下記テキストをみながらやります
JavaScript本格入門　～モダンスタイルによる基礎からAjax・ｊQueryまで

変数を宣言する

JSの変数はvar命令で宣言する

var x;
var y;
var x, y;
//カンマ区切りでまとめて宣言も可能
var msg = 'こんにちは';
var x = 10;
//宣言時に初期値を設定することも可能

初期値未設定の場合デフォルトで未定義値(undefined)という値が入る、とな

識別子の命名規則

  • 1文字目は英字/アンダースコア(_)/ドル記号($)のどれか
  • 2文字目以降は、1文字目で利用可能な文字か数字
  • 変数名に含まれる英数字の小文字/大文字は区別される
  • JSで意味を持つ予約語じゃないこと
    • break
    • case
    • catch
    • continue
    • default
    • delete
    • do
    • else
    • finally
    • for
    • function
    • if
    • in
    • instanceof
    • new
    • return
    • switch
    • this
    • throw
    • try
    • typeof
    • var
    • void
    • while
    • with


うむ、実際に使ってみないとわからないなー
でもなんかうっすら記憶がある、とりあえず先にすすむのみなのである

【JavaScript】基本的な記法

JavaScript

本当に基礎の基礎からいきますよ

あ、ちなみに参考にしているテキストはこちら

JavaScript本格入門　～モダンスタイルによる基礎からAjax・ｊQueryまで

JSで"Hello,World"

基礎の基礎ですね
ちゃんと忠実にやっていくよ
基本XHTMLないしHTML5で使うのでそのつもりで書くよ

<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">
<html xmlns="http://www.w3.org/1999/xhtml">
<head>
<meta http-equiv="Content-Type" content="text/html; charset=utf-8" />
<title>Hello, World！</title>
</head>
<body>
<pre>
<script type="text/javascript">
 //<![CDATA[
 //document.writelnは指定された文字列を表示するための命令です
 document.writeln('Hello, World ! ');
//]]>
<noscript>JavaScriptが利用できません</noscript>
</script>
</pre>
</body>
</html>

うむーちゃんと表示された！

JSをHTMLファイルに組み込む

XHTML文書でscriptタグを利用するときの注意

XHTMLの場合は

//<![CDATA[
 ここにスクリプトコード
//]]>

って書くべし

じゃあHTML5は？

HTML5の場合はどうなんだろう‥

まあHTML5をサポートしているブラウザで
JSサポートしてないとかない気がするけれども

ちょっと検索かけてみた感じ下記で十分な感じみたい

<!--
 ここにスクリプトコード
//-->

ていうかやっぱりこれすらいらないって書いてるとこもあるや


あとHTML5の場合
scriptタグのtypeの初期値がtext/javascriptだから省略できる、ふむ

スクリプトコードを外部化

このへんはさすがに知ってる！

<script type="text/javascript" src="helloEx.js"></script>

よし！次！

scriptタグを記述するところ

  • bodyタグ配下(任意の位置)
  • bodyタグ配下(body閉じタグの直前)
    • ページ高速化のためスクリプトよりページ描画を先に行うようにページ末尾に配置する
  • headタグ配下
    • JSは関数を呼び出すためのスクリプトよりも関数定義のスクリプトを先に記述しなければならないため
    • たとえばbodyタグの配下で関数を呼び出す必要がある場合はheadタグ配下で事前に読み込む必要がある
    • 行おうとしている処理よりも先に、要素を読み込むというスクリプトを記述しないと、処理の対象要素が存在しないためエラーが出てしまう

これもなんとなく知ってた、よし次

アンカータグにスクリプトを埋め込む～JavaScript疑似プロトコル

アンカータグのhref属性に「JavaScript:～」の形式でURLみたいにJSを埋め込むことができる

<a href="JavaScript:window.alert('こんにちは')">ダイアログを表示してみる</a>

これもなんか使ったことあるかも

JS機能がオフの場合に情報を表示させる

noscriptタグ内に記述、うん知ってた！

文(Statement)のルール

  • 文の末尾にセミコロン「;」をつける(エラーではないが非推奨)
document.writeln('Hello, World ! ');
  • 文の途中で空白や改行、タブを含めることも可能
  • 大文字/小文字の区別が厳密
    • 下記の場合別の命令扱いになる
document.Writeln('Hello, World ! ');
document.writeln('Hello, World ! ');

なんとなく知ってけどなんとなくだったので

コメントを入れる

//1行だとこの書き方、ここがコメント扱い
/*
複数行の場合はこの書き方、ここがコメント扱い
*/

これは、うん！めっちゃ使ってる！









そんなこんなで次の記事へ

【memo】私のやること

ぼやき

なんかこのページの実現方法考えてみて？
みたいなこと云われて

今後学ばねばならなそうなことを‥めも‥

  • JavaScript
    • 読み方、書き方から‥全くといっていいほど書いたことない
    • ページ遷移と描画で使っているとか‥えーわかえらん
    • jQueryとかもかなー
  • JSON
    • なんかいまいちわかってない
  • window.onhashchange
  • Custom Data Attribute
    • ぜんぜんなんのこっちゃ
  • Data URI Scheme
    • あ、これはちょっと前にLPでつかったことあるからわかるかも

こんなもんか‥

ふりっく‥とか‥
できるんだろうか‥

【追記あり】【Android】横向きにするとimgタグの画像が表示されない【未解決？】

Android

えーなんでなの

OS1.6
SO-01B
にて発見

縦だと表示されている画像が　
横向きにすると消える

しかも再び縦にしても表示されないことがある

えーなんなの



以下追記(20120112)

何故か解決したtoday‥

画像のサイズや拡張子とか何も変わってないのに
書き出しなおしたファイルをアップしたらいけたという‥

なにそれなんなのそれ‥

【HTML5】HTML5のDOCTYPE宣言とかエンコーディングとか

HTML5 Android/iPhone共通

ていうかそもそももっと簡単なところで一度は躓いた
HTML5のDOCTYPE宣言とかその辺りってどうするの

初歩の初歩ですが備忘録

【XHTML1.0】

<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">
<html xmlns="http://www.w3.org/1999/xhtml">
<head>
<meta http-equiv="Content-Type" content="text/html; charset=utf-8" />

【HTML5】

<!DOCTYPE html>
<html lang="ja">
<head>
<meta charset="UTF-8">

【Android】角丸border-radiusが効かない

Android CSS

Androidで角丸に指定したはずなのに効かないんですけどってことが
どうやらOS1.6で再現するみたい

いくつかごにょごにょしたら何とかなったのでめも

全部角丸にする場合

【NG】

border-radius:10px 10px 10px 10px;

【OK】

border-radius:10px;

ショートハンドで数値を複数入れるとダメみたい
なんでだろー

なんか省略したら効かないみたいなことを小耳にはさんでいたから
まずはじめに私が書いたのが

border-radius:10px 10px 10px 10px;

だった結果全部角がとがる

ショーハンドで書いている時点で省略だバカヤローってなったわけで
折角だしと思ってためしに数値一個にしたらいけますたふむー

それでは今度は上の角2つだけ角丸にする場合

【NG】

border-radius:10px 10px 0 0;

【OK】

border-top-left-radius:10px;
border-top-right-radius:10px;

ショートハンドはやっぱりあかん
ということでめんどくさいけど全部書かなきゃならないみたい

そういえばこれも気を付けないと

要素の高さ以上のradius値を指定すると角丸が効かない
これはOS1.6だけなのか否かちょっとわからないけれど
手元のOS1.6ではアウトだったのでめも

おまけで自分のためにめもですが

border-radius指定するときに私がハックで入れているのは

-moz-border-radius:10px;
-webkit-border-radius:10px;

この2つ

で、border-top-left-radius:10px;これを書くときは

 -webkit-border-top-left-radius:10px;
 -moz-border-top-left-radius:10px;

なんてことないけどたまに混乱するおバカなので念のため