質問をすることでしか得られない、回答やアドバイスがある。

15分調べてもわからないことは、質問しよう!

新規登録して質問してみよう
ただいま回答率
85.50%
JavaScript

JavaScriptは、プログラミング言語のひとつです。ネットスケープコミュニケーションズで開発されました。 開発当初はLiveScriptと呼ばれていましたが、業務提携していたサン・マイクロシステムズが開発したJavaが脚光を浴びていたことから、JavaScriptと改名されました。 動きのあるWebページを作ることを目的に開発されたもので、主要なWebブラウザのほとんどに搭載されています。

jQuery

jQueryは、JavaScriptライブラリのひとつです。 簡単な記述で、JavaScriptコードを実行できるように設計されています。 2006年1月に、ジョン・レシグが発表しました。 jQueryは独特の記述法を用いており、機能のほとんどは「$関数」や「jQueryオブジェクト」のメソッドとして定義されています。

Q&A

解決済

2回答

1655閲覧

javascript、jQueryのfunctionについて

退会済みユーザー

退会済みユーザー

総合スコア0

JavaScript

JavaScriptは、プログラミング言語のひとつです。ネットスケープコミュニケーションズで開発されました。 開発当初はLiveScriptと呼ばれていましたが、業務提携していたサン・マイクロシステムズが開発したJavaが脚光を浴びていたことから、JavaScriptと改名されました。 動きのあるWebページを作ることを目的に開発されたもので、主要なWebブラウザのほとんどに搭載されています。

jQuery

jQueryは、JavaScriptライブラリのひとつです。 簡単な記述で、JavaScriptコードを実行できるように設計されています。 2006年1月に、ジョン・レシグが発表しました。 jQueryは独特の記述法を用いており、機能のほとんどは「$関数」や「jQueryオブジェクト」のメソッドとして定義されています。

0グッド

0クリップ

投稿2016/10/24 06:42

編集2016/10/24 06:54

jQueryのプラグインを使ったコードを幾つか書いてるうちに一部のコードが機能しなくなりました。
前にも同じ事があった際、追加したコードを削除(function部分?)を削除すると動作したので今回も同じではと考えているのですが、Javascriptの事は全くわかならいので詳しい方いましたらよろしくお願いします。

動かないのはdatepickerになります。
不備などありましたらご指摘ください。よろしくお願いします。

【追加内容】
jQueryのカレンダースクリプトと背景画像がランダムで切り替わるスクリプト書いたらカレンダーの方が立ち上がらなくなりました。原因はfunction部分の被りでしょうか。
それよもJavascript特有の問題なのでしょうか。
よろしくお願いします。

【main.php】 <script> $(function() { $("#datepicker").datepicker(); }); </script> <script src="./jquery.min.js"></script> <script> $(function() {... } </script>
【main.php】 <!--カレンダースクリプト--> <script> $(function() { $("#datepicker").datepicker(); }); </script> <!--背景画像スクリプト--> <script src="./jquery.min.js"></script> <script> $(function() {... } </script>

気になる質問をクリップする

クリップした質問は、後からいつでもMYページで確認できます。

またクリップした質問に回答があった際、通知やメールを受け取ることができます。

バッドをするには、ログインかつ

こちらの条件を満たす必要があります。

guest

回答2

0

ベストアンサー

javascript

1<script src="./jquery.min.js"></script> 2<script src="./jquery.datepicker.js"></script> 3<script> 4 $(function() { 5 $("#datepicker").datepicker(); 6 }); 7</script>

最初にjquery呼んでください。

投稿2016/10/24 06:46

takepieee

総合スコア686

バッドをするには、ログインかつ

こちらの条件を満たす必要があります。

退会済みユーザー

退会済みユーザー

2016/10/24 06:50

コメントありがとうございます。 今質問内容の不備が見つかったので訂正します。 正しくはdatepickerのscriptを書いた後に別のjQuery(背景画像のランダム切り替えコード)を書くとfunction名が被っているのか動かなくなります。
takepieee

2016/10/24 06:53

記載コードの修正をお願いします。
退会済みユーザー

退会済みユーザー

2016/10/24 06:55

今しがた追加させていただきました。不足や不備等ありましたらご指摘ください。よろしくお願いします。
takepieee

2016/10/24 07:07 編集

わかりにくかったですか。すみません。 <!--カレンダースクリプト--> <script> $(function() { $("#datepicker").datepicker(); }); </script> <!--背景画像スクリプト--> <script src="./jquery.min.js"></script> <script> $(function() {... } </script> こうではなく <script src="./jquery.min.js"></script> <script src="datepickerのJSファイル"></script> <script> $(function() { $("#datepicker").datepicker(); // +背景画像あれこれ }); </script> こういう順番です。 jqueryを先に読み、その次にdatepickerを読み、その後にfunction~~を読んで下さい。 --- 追記: すみません、閉じ方が違ってましたので修正します。 読み込む順番について、 1)head内でCSSファイルを読み込む 2)bodyタグで内容を読み込む 3)最後にJSでブラウザ処理を行う の方がいいですよ。
退会済みユーザー

退会済みユーザー

2016/10/24 07:02

コメントありがとうございます。 すぐに取り掛かります。
退会済みユーザー

退会済みユーザー

2016/10/24 07:42

コメントありがとうございます。 javascript自体機能から初めて導入いしているので何がなんだか状態です。 今以下のような感じなります。 takepieeeさんに言われた通り <script src="./jquery.min.js"></script>を再良しに読み込み、次にdatepickerを読み込み形にしています。 ただfunction以下のコードがわかりません。 よろしくお願いします。 <!DOCTYPE html> <html> <head> <meta charset="utf-8"> <!--css読み込み --> <link rel="stylesheet" href="xxxx" type="text/css"> <link rel="stylesheet" href="//maxcdn.bootstrapcdn.com/font-awesome/4.3.0/css/font-awesome.min.css"> <!--背景画像ランダムスクリプト--> <script src="./jquery.min.js"></script> <!--Jqueryカレンダースクリプト--> <script src=xxxx"></script> <script src="xxxx"></script> <script src="xxxx"></script> <script src="xxxxx"></script> <link rel="xxxx" > <script> $(function() { $("#datepicker").datepicker(); 【ここの定義?の仕方がわからないです】 var array = [ "画像1", "画像2", "画像3", ]; var l = array.length; var r = Math.floor(Math.random()*l); var bgimgurl = array[r]; $("div.クラス名").css('background-image',('url("'+bgimgurl+'")')); }); </script> <!--もっと見るボタン--> <script src="//ajax.googleapis.com/ajax/ libs/jquery/2.0.3/jquery.min.js"> </script> </script>--> <!--fecebook用--> <div id="fb-root"></div> <script>(function(d, s, id) { var js, fjs = d.getElementsByTagName(s)[0]; if (d.getElementById(id)) return; js = d.createElement(s); js.id = id; js.src = "//connect.facebook.net/ja_JP/sdk.js#xfbml=1&version=v2.7"; fjs.parentNode.insertBefore(js, fjs); }(document, 'script', 'facebook-jssdk'));</script> <title>サンプルサイト</title> </head>
takepieee

2016/10/24 08:08

- 上記に書きましたが、headタグ内からscriptタグを全部切り取り、</body>の前あたりに移動してください。 - facebook用のソレは、実際にいいねボタンを入れる部分に埋め込んで下さい。 - もっと見るボタンはコメントアウトしているっぽいんで言うべきではないかもしれませんが、jqueryを特殊な場合を除いて複数読み込む必要はないですよ。 - "画像3", ←配列の最後はカンマ不要です。 - akio221様が仰っているように、F12でJSエラーが出ていないか確認してください。原則エラーがあるとJS全体が動かなくなります。
退会済みユーザー

退会済みユーザー

2016/10/24 08:22

コメントありがとうございます。 まずは以下を実行しみます。 ・scriptを全部bodyに移動 ・ facebook用のいいね移動 ・- "画像3", ←カンマ削除 そのあとでakio221さんのエラー内容出してみたいと思います。
退会済みユーザー

退会済みユーザー

2016/10/24 10:02

すいません。電車内だったので作業できず今作業に戻りました。 言われた3点実行したら一発でした!すごいです。 ありがとうございます。 javascriptはphpみたいに頭にもってくるのではなく、下(/body)に配置するのが正解ということなんでしょうか。 まだまだ全然わからないことだらけですがとりあえず今回の件無事解決できて本当に助かりました! ありがとうございます。
退会済みユーザー

退会済みユーザー

2016/10/24 10:03

ごめんなさい。 ベストアンサーのボタン間違えてしまいました。 本当に申し訳ありません…。
takepieee

2016/10/24 10:17

$("#datepicker") このid=datepickerの部分をselector(要素)と言いますが、 HTMLを上から順番に読んでいって最後にJSを処理しないと、jQuery的には「そんな要素ないよ?」になってしまいます。 大体の場合、セレクタを発火(event、クリックとかそういうの)させて、何かを処理する。というのが基本です。
退会済みユーザー

退会済みユーザー

2016/10/25 05:36

お礼遅れてすいません。 最後にJSを処理することでjQueryが正常に立ち上がるようになって本当に助かりました。 時間を見つけて少しずつ今後必要なjavascriptについても勉強していきたいと思います。 この度は正確かつ丁寧な回答本当にありがとうございます! また機会がありましたらよろしくお願いします。
guest

0

2回functionを記述して呼ぶ理由がよくわかりません。

<script src="./jquery.min.js"></script> <script> $(function() {... ・ 背景画像スクリプト ・ ID:DatePickerへの割付 } </script>

としてみてはいかがですか。

また、どのようなブラウザをご利用かはわかりませんが、
Functionがコケているのであれば、ブラウザのデバッグモード(F12)で、
エラーが分かることもありますよ。

投稿2016/10/24 07:05

akio221

総合スコア716

バッドをするには、ログインかつ

こちらの条件を満たす必要があります。

退会済みユーザー

退会済みユーザー

2016/10/24 08:23

コメントありがとうございます。 ぐちゃぐちゃになっているコードを一旦綺麗に整理してブラウザのデバッグモード(F12)を出力してみたいと思います。 お忙しい中でのコメントありがとうございます! 非常に助かります。
guest

あなたの回答

tips

太字

斜体

打ち消し線

見出し

引用テキストの挿入

コードの挿入

リンクの挿入

リストの挿入

番号リストの挿入

表の挿入

水平線の挿入

プレビュー

15分調べてもわからないことは
teratailで質問しよう!

ただいまの回答率
85.50%

質問をまとめることで
思考を整理して素早く解決

テンプレート機能で
簡単に質問をまとめる

質問する

関連した質問