jQueryをWeb初心者が勉強し始めるための下準備
jQueryの勉強を始めるにあたって、こちらの本を読んでいます。
Web制作の現場で使うjQueryデザイン入門[改訂新版] (WEB PROFESSIONAL)
- 作者: 西畑一馬
- 出版社/メーカー: アスキー・メディアワークス
- 発売日: 2013/03/07
- メディア: 大型本
- クリック: 4回
- この商品を含むブログ (2件) を見る
初心者でもわかりやすいように、導入からサンプルから学べるようになっているのですが、私のような超がつくほどの初心者にはちょっと物足りない部分もある。
何から始めればいいのかもわからないというか。
ということで、自分がjQueryの勉強を始めるまでにした下準備について、メモしておきます。
ファイルの準備
まずは、jQueryのサンプル学習をするにあたって、コードを記述していくためのファイルを用意します。
用意するファイルは以下の3つ。
sample.html
style.css
script.js
それぞれテキストファイルなどで作って、上記の拡張子に変更して保存しておきましょう。
保存は全部一つのフォルダ内に。この保存場所によってファイル内でCSSやjQueryを呼び出すための記述が微妙に変わりますので初心者のかたはご注意を。
jQueryの呼び出し方
次に、jQueryをどういう風に呼び出すかです。
呼び出し方は大きく2つ。
・ライブラリをダウンロードする
・CDNを利用する
ライブラリをダウンロードする場合は、こちらから。
CDNというのはWeb上に展開されていて、共有で使えるライブラリのようなものです。
Googleなどが提供していて、ライブラリをダウンロードしないでも、htmlファイル内からリンクするような形で使えます。
より簡単なので、私はCDNを利用することにしました。
html内の<head>タグの記述
そんなこんなでhtmlファイルの記述は以下のようにしておきます。
<!DOCTYPE html> <html> <head> <meta charset="UTF-8"> <title>jQuery サンプル</title> <link rel="stylesheet" href="style.css"> <script type="text/javascript" src="http://ajax.googleapis.com/ajax/libs/jquery/1.9.0/jquery.min.js"></script> <script type="text/javascript" src="script.js"></script> </head> <body> </body> </html>
上から順に解説しますと、
・まずはDOCTYPEでHTML5の宣言です。今風に。
・次に言語はUTF-8に設定しておきます。これはjQueryを扱う場合は書いておいた方がいいっぽいです。
・titleはなんでもいいです。
・その次はCSSファイルの呼び出し。style.cssと書いてありますね。
・その次がいよいよjQueryのGoogleCDNへのリンク。1.9.0という部分はjQueryのバージョンを表しています。最新にしておけばいいんじゃないでしょうか。
・最後に、jQueryを今後記述していくことになるscript.jsファイルを呼び出しておきます。
まあよくわからなければ、上記のサンプルコードをそのままコピペしていただければ。
ちなみにjQueryの範囲での準備の仕方は下記サイトを参照しました。
7つのサンプルでjQueryを学ぼう!「jQueryが全く分からない人のため」の超初級者向け入門講座 | OZPAの表4
いかがでしょうか?
jQueryの入門書とかでも、意外とHTMLファイルの用意の仕方とかの当たり前すぎることは書いてなかったのでまとめておきました。
でも、自分もこの程度のことすら最初はわからず軽く調べたので、きっと誰かの役に立つはず。
ダンジョントラベラーズ2王立図書館とマモノの封印 (通常版) Amazon.co.jpオリジナル「お風呂スティックポスター」& 他予約特典付き
- 出版社/メーカー: アクアプラス
- 発売日: 2013/03/28
- メディア: Video Game
- クリック: 5回
- この商品を含むブログ (10件) を見る