• 締切済み

記述方法と、JavaScriptは必要かどうか、、

前回の質問はこちらです。 http://okwave.jp/qa/q8137881.html 診断サイトを作成したいです。 脳内メーカーなどではなく、病気診断や性格診断のようなサイトです。 パラメータやポイントで算出するものではなく、スポーツなどのトーナメント表のようなチャート式です。 前回はhtmlとcssで作成し、表示方法についての質問をしましたが、 htmlの <a href="#次の質問">回答</a> などJavaScriptで書いたほうがいいのかな?と、、、、 診断サイトなどはPHPで作成する場合が多いと思いますが、今回私はHTML5、CSS、JavaScriptで作りたいです。 その場合どのように記述するか知りたいです。 jsはドットインストールで学んだだけで基礎の基礎レベルしかわかりません。 DOMやonClickで質問と答えを表示させたりすればいいのかな~?と思ったりしましたが初心者で全然わかりません、、、;; また、動作ができる限りサクサク動くようにしたいです。jsを使うことで動作が重くなったりするのでしょうか? 下手な文章ですいません。 回答よろしくお願いします。

みんなの回答

  • LancerVII
  • ベストアンサー率51% (1060/2054)
回答No.2

こんにちは。 >前回は表示、非表示の部分だけでしたが、htmlの部分をJavaScriptにしたいです。 意図がちょっと読み取れないのですが、htmlの部分をJavaScriptにするとはどのようなものを想定していますか? 表示を動的に制御するのはJavaScriptであり、その元となるものはHTMLになります。 具体的にやりたいこと、考えていることを補足頂ければもう少し具体的な回答が出来ると思います。

namakemononono
質問者

お礼

回答ありがとうございました。 http://phpjavascriptroom.com/?t=js&p=location2 htmlでもjsでも同様に次の質問にジャンプするようなので、前回のまま作成しようと思います。 また、 次の質問に移動するさいURLに#hoge(ID名)を表示させない方法、 次の質問等を非表示にする方法を教えていただければ助かります。

namakemononono
質問者

補足

すみません;; うまく説明でっきませんが、、、 Q1質問  a1答え(Q2へ)  a2答え(Q3へ)  a3答え(Q4へ) Q2質問  a1答え(Q5へ)  a2答え(Q6へ)  a3答え(Q7へ) Q3質問  a1答え(A1へ)  a2答え(Q8へ)  a3答え(Q9へ) ・ ・ ・ Q10質問  a1答え(A2へ)  a2答え(Q3へ)  a3答え(Q4へ) ・ ・ ・ A1結果 A2結果 ・ ・ ・ 診断はこんな感じで、 aを選択(クリック)すると、Qが表示されるようにJavaScriptで制御したいです。 前回はhtmlで <div id="Q1">質問</div>  <a href="#Q2">回答</a> と記述しましたが、そこの部分をJavaScriptを使って制御したいです。それと同時に前回同様にJavaScriptで1画面(フルスクリーン)に1つの質問だけを表示するように制御もできたらと思います。 わかりますでしょうか?;; 説明がうまくできず理解できるか不安ですが、、、;; 作りたいものは http://sade-maso.com/ のような感じです。ただ選択肢によって質問が変わるようにしたいです。 http://luminosite-jwell.blogspot.jp/2012/04/javascript.html を参考にしましたが今の私にはまだ完璧に理解できなくて;;。 またポイント制ではなく、選択肢によって診断結果を導くタイプにしたいので、、、;; もしまた理解できないようなら教えてください;; すいませんTT

全文を見る
すると、全ての回答が全文表示されます。
  • LancerVII
  • ベストアンサー率51% (1060/2054)
回答No.1

こんにちは。 前回の質問を拝見しました。 JavaScriptでの例も出ているようですが、それとは違うのでしょうか。 j>sはドットインストールで学んだだけで基礎の基礎レベルしかわかりません。 >DOMやonClickで質問と答えを表示させたりすればいいのかな~?と思ったりしましたが初心者で全然わかりません、、、;; 自分で作ってみたいなら、どんどん作ってみることです。 すべての動作は基礎の基礎レベルを組み合わせていって作ったものです。 >また、動作ができる限りサクサク動くようにしたいです。jsを使うことで動作が重くなったりするのでしょうか? 今の端末ならそれほど問題は無いと思います。

namakemononono
質問者

お礼

回答ありがとうございました。

namakemononono
質問者

補足

>前回の質問を拝見しました。 JavaScriptでの例も出ているようですが、それとは違うのでしょうか。 前回は表示、非表示の部分だけでしたが、htmlの部分をJavaScriptにしたいです。 回答ありがとうございました。色々試して作ってみます。

全文を見る
すると、全ての回答が全文表示されます。

関連するQ&A

  • nyroModal HEADタグ内の記述について

    nyroModal HEADタグ内の記述について http://nyromodal.nyrodev.com/#download 上記ページより、nyroModal1.6.2をダウンロードしました。 設置方法を下記サイト http://www.css-lecture.com/log/javascript/014.html で調べて、サイトの説明どおり設置してみたところ、headタグ内に記述する5行のソースが古いのか(jsファイルが1.2.8になってる)ダウンロードしたファイルと合わず、動作しませんでした。 自分なりに試行錯誤してみて、あてずっぽうですが、下記ソースに書き換えたところ、ギャラリー表示は正常に動作するようになりました。 <link rel="stylesheet" href="styles/nyroModal.css" type="text/css" media="screen" /> <script type="text/javascript" src="http://ajax.googleapis.com/ajax/libs/jquery/1.4.2/jquery.min.js"></script> <script type="text/javascript" src="js/jquery.nyroModal-1.6.2.js"></script> <script type="text/javascript" src="js/jquery.nyroModal-1.6.2.min.js"></script> <script type="text/javascript" src="js/jquery.nyroModal-1.6.2.pack.js"></script> しかし下記ページの一番下にあるデモと同じように、Googleへのリンク(外部ページを読み込む) http://www.css-lecture.com/template/2008/1001/ をする場合に、 <p><a href="http://www.google.co.jp/" class="nyroModal">Google</a></p> と、記述してもウィンドウサイズが400×300くらいに固定されてしまって縦横にスクロールバーが出てしまい、サイト全体が表示できません。 cssやjsのファイルを編集しようと探してみましたが、ウィンドウサイズを指定しているような記述を見つけることができませんでした。 現在のヴァージョンで正常に動作させるためには、headタグ内にどのような記述をしたら良いでしょうか。 また、外部リンクの際にウィンドウサイズを指定できる方法はありますでしょうか。 当方、ネットで独学で調べて設置をしている初心者ですので的外れな質問をしているかもしれませんが、ご教授いただけますでしょうか。 よろしくお願いいたします。

  • JAvaScriptの外部ファイルの記述について

    HTML内にJavaScriptの処理書くのが嫌で、外部ファイルにしてJavaScriptを読み込むようにしたのですが、このファイルに、実行したい処理を複数書いてしまうとHTMLで正しく処理されなくなるのは何故ですか?.jsファイルには処理は1つしか記述できないのでしょうか?CSSファイルみたいに1つのファイルに何個も処理を記述してHTMLに反映させるようにしたいのですが・・・。どなたにも質問できず困っています。どなたか教えて下さい。jsファイルには処理は1つしか記述できないものなのかどうか回答お願い申し上げます。

  • javascriptにてcss切り替え

    現在webサイトを作成しており、javascriptのcss切り替えにてページの色変更を作っています。 (青、緑、赤、三色で作成) デフォは青で表示しています。 その後緑、赤とリンクで色が変わるようにしています。 ここでご質問です。 緑をクリックした場合は緑に変わる(赤も同様)のですが、別ページにリンクした場合、緑(赤)ではなく青に戻ってします。 別ページにとんでも緑(赤)が引き継がれるにはどのように記述したらよろしいでしょうか? ソースは以下のとおりです。 <head> <link rel="stylesheet" type="text/css" href="css/blue/top.css" media="all" /> <script src="js/styleswitch.js" type="text/javascript"></script> <link rel="alternate stylesheet" type="text/css" title="blue" href="css/blue/top.css" media="all" /> <link rel="alternate stylesheet" type="text/css" title="green" href="css/green/top.css" media="all" /> <link rel="alternate stylesheet" type="text/css" title="red" href="css/red/top.css" media="all" /> </head> <body> <div style="width:200px;"> <a href="javascript:chooseStyle('blue', 30)">青</a><br /> <a href="javascript:chooseStyle('green', 30)">緑</a><br /> <a href="javascript:chooseStyle('red', 30)">赤</a> </div> </body> javascriptは以下のところからしようしています。 http://noongoro.main.jp/note/note0059.html javascriptは初心者です。 ご教授お願いいたします。

  • JavaScript内にJavaScriptを読み込む方法

    HTML内に <script type=\"text/javascript\" src=\"main.js\"></script> という一行を追加すると、バナーが表示されるというスクリプトを作成しています。 main.jsは、 html = \'<script language=\"JavaScript\">\'; html += \'var url0101 = \"url01.xxx.jp\";\'; html += \'var url02 = \"url02.oooo.jp\";\'; html += \'</script>\'; html += \'<script language=\"JavaScript\" src=\"http://xxx.xxxx.xxx/test.js\"></script>\'); html += \'<script language=\"JavaScript\">\'; html += \'Function01(\"check\")\'; html += \'</script>\'; document.write(html); というような風になっており、 (1) 変数の宣言 ↓ (2) http://xxx.xxxx.xxx/test.jsの読み込み ↓ (3) (2)で読み込んだjs内の関数Function01を実行 という流れです。 FireFoxでは表示されましたが、IE6では (2)のjsを読み込む前に(3)のFunction01が実行され、 「オブジェクトを指定してください」のエラーが表示されてしまいます。 よい方法がありましたら教えていただけますでしょうか? よろしくお願いします。

  • JavaScript内にJavaScriptを読み込む方法

    HTML内に <script type="text/javascript" src="main.js"></script> という一行を追加すると、バナーが表示されるというスクリプトを作成しています。 main.jsは、 html = '<script language="JavaScript">'; html += 'var url0101 = "url01.xxx.jp";'; html += 'var url02 = "url02.oooo.jp";'; html += '</script>'; html += '<script language="JavaScript" src="http://xxx.xxxx.xxx/test.js"></script>'); html += '<script language="JavaScript">'; html += 'Function01("check")'; html += '</script>'; document.write(html); というような風になっており、 (1) 変数の宣言 ↓ (2) http://xxx.xxxx.xxx/test.jsの読み込み ↓ (3) (2)で読み込んだjs内の関数Function01を実行 という流れです。 FireFoxでは表示されましたが、IE6では (2)のjsを読み込む前に(3)のFunction01が実行され、 「オブジェクトを指定してください」のエラーが表示されてしまいます。 よい方法がありましたら教えていただけますでしょうか? よろしくお願いします。

  • アートでjavascriptを学びたい

    皆様、よろしくお願いいたします。 私は現在WEBデザイナーとしてUI設計業務とコーディングを行っております。 最近、(生の)JavaScriptの学習を開始しました。 レベルは入門者向けのJS本を読んでいる程度です。具体的には、 ・JavaScript本格入門 ・よくわかるJavaScriptの教科書 ・HTMLとCSSで基礎から学ぶJavaScript ・WEBサイト制作者のためのJavaScript入門講座 などです。 (パーフェクトJavaScript、独習JSは難易度が高かったです) スキル的には既存のコードを読み解き修正を加えるレベルで、 100行以上のコードを書くことはできません。 また、実務ではjsはエンジニアに任せることがほとんどで、自分で書くことはほとんどありません。 このような状態でなぜJSを習得したいかと言いますと、 ・1.ある程度フロントエンドに精通したい(HTML/CSSは分かるので、加えて「JSも任せろ」と言える状態になりたい。) ・2.jQuery等のライブラリ依存から脱却したい ・3.Titaniumでアプリ開発など、JSスキルを流量したい。 などの思惑があるためです。 ただ、JSの必要性は強く感じているのですが、書籍を追って制御構造などのコードを書くだけでは、学習モチベーションを高い状態で保つことが難しいです。 しかし、昔processingやFLASHを触っていたため、アニメーションが発生するもの、特にインタラクティブな物を作成すること対しては興味があります。 とはいえ、processingやactionscriptでは現状の業務に直接結びつかないため、 javascriptでアート系作品を公開しているサイト、書籍、勉強法などはないか、 というのが今回の質問意図となります。 jsDoitはすでに見ていますが、非常に高度な作品が多いため、 順序立てて導入から解説されているような物があれば幸いです。 また、元デザイナー、コーダーで現在jsを使った業務に携わられている方が いらっしゃいましたら、どのように学習を進めて行ったのか、 教えていただけますでしょうか? 以上となります。お手数ですが、ご回答どうぞよろしくお願いいたします。

  • javascriptの記述方法

    javascriptをhtml内に記述する時、 <script type="text/javascript> ~~処理~~ </script> だと思っています。 ただ、ボタンをクリックした時に、メッセージが表示される簡単なHTMLをonclickで作成する時  <input type="button" value="クリック動作確認" onclick="alert('ボタンがクリックされました')"> これだけで実行されます。(headタグにscript記述なしで動作確認。) なぜ、<script>記述がなくても動くのでしょうか? onclick等のイベントハンドラに動作を記述する際は、そういう物だと覚えておいたほうがいいのでしょうか? ※当然関数をonclickに使用する際は、onclick=関数(); と記述し、headのscriptタグに関数を記述すれば動くというのは分かっているのですが・・・。 なぜ、 onclick="alert('ボタンがクリックされました')" の場合は、noscript無しで、動作するのかが分かりません・・・。 ・onclick 属性 = javascript という判断をどこかでされているのでしょうか? その結果、noscriptに記述がなくても動く? ちょっと気持ち悪いので質問させて頂きました。 ご教授お願いします。

  • Javascriptでこんな処理できますか?

    初心者必見!JavaScriptでできることと作れるものってどんなもの? https://www.sejuku.net/blog/3936 これをみるとJavascriptでできること WEBサイトに「動き」を加える 具体例1:HTML要素を追加 具体例2:CSSを変えて見た目を変更 イベント処理 JavaScriptは、マウスの動作やクリックされたという動作をイベントとして取得することができます。 そのイベントと紐づけて、いろいろな動作をつけることも可能です。 非同期通信 非同期通信を使ったアプリは、サーバーの応答を待たず次々と処理を行うことができます。 が出来るとききました。 そこで、 JavascriptでCSVの加工をする http://dripn-snip.com/2018/02/15/csv-js/ JavaScriptでCSVを扱うためには、5つのステップを経る必要があります。 1.ブラウザにCSVを読み込ませる 2.CSVをJavaScriptで扱える形式(配列)に変換する 3.配列を操作する 4.配列をCSVに戻す 5.ダウンロードする でのやり方のようにすれば、 自分のやりたい、 1.ブラウザに編集対象WEBサイトページを読み込ませる 2.ページ内テキストを取得し正規表現で取り出す。 3.取り出したテキストでーたからISDNコードを抽出し 4.Amazonで検索。検索結果を表示 こういう処理ももちろんできますよね? 頭が悪いのですが、努力はしようと考えているのでやろうと思っています。 家にあった、Javascriptの入門書をみていたら正規表現などの軽い解説があるのと DOMの解説、基本的な文法の解説だけだったのでいまいちピント来ませんでした。 アドバイスよろしくお願いします。

  • 記述されているjavascriptがどのようなものか知りたい

    お世話になります。 ホームページを作成するのにほとんどホームページビルダー を使っているのですがSEOとかが言われる前より作っておいた 古いベースのテンプレートを使っていて見直しのために ソースを見るとjavascriptがいくつか記述されているのですが 何年も前に作ったものなので何の為に動作しているかわからなく 必要なさそうな気もするので削除しようかと思っているのですが、 念のためこのスクリプトはどう動くかを知りたいと思いまして 投稿しました。 英語の翻訳のように調べられたり動作を検証できたり教えていただける サイトや書籍の物はないのでしょうか。

  • PHPの外部テキストファイルにJavaScriptを記述する方法

    PHP初心者です。今、Let'sPHPさんのP++BBSを利用して掲示板を作成しているのですが、JavaScriptが動作せずエラーになって困っています。P++BBSは、 --------------------------------------------------- define("HEADFILE", "skin/head.txt");  //定義 include(HEADFILE); //表示 --------------------------------------------------- のようにして、外部テキストにHTML<html><head>~</body></html>までを分割記述し、表示する各場所に定数呼び出しするタイプの掲示板です。 問題は、外部テキストのヘッダー部に <script type="text/javascript" src="my.js"></script> と記述しても反映せずエラーになってしまうことです。PHP内に直接記述すると正常に動作するのですが、どうにかスキンを活かした方法で使用したいと思っています。 使用したいJavaScriptの関数は、<body onload="関数">と、<a href="" onmouseover="関数" onmouseout="関数">の2種のみです。 初心者の質問で申し訳ありませんが、ご助言いただけると嬉しいです。よろしくお願いします!!

    • ベストアンサー
    • PHP