＄の意味　表示の相違

今勉強してますが、エラーチェックとはどのようにするのでしょうか？
console.log shift alt j でひらくのか今勉強しているchrom、developer f12で開くのかjavascriptのなかにconsole.log()を書いて、表示させるのかどのようにしたらよろしいでしょうか？

イメージ説明

左図の↑の場所が違い、左下の数字が表れません。

javascript
1<!DOCTYPE html>
2<html lang="ja">
3<head>
4    <meta charset="utf-8">
5    <script src="https://code.jquery.com/jquery-3.2.0.min.js"></script>
6    <title>スクロール実験</title>
7    </head>
8    <body style="text-align:center;">
9    <h1>スクロール実験</h1>
10    <p>hello!</p>
11    <p>hello!</p>
12    <p>hello!</p>
13    <p>hello!</p>
14    <p>hello!</p>
15    <p>hello!</p>
16    <p>hello!</p>
17    <p>hello!</p>
18    <p>hello!</p>
19    <p>hello!</p>
20    <p>hello!</p>
21    <p>hello!</p>
22    <p>hello!</p>
23    <p>hello!</p>
24    <p>hello!</p>
25    <p>hello!</p>
26    <p>hello!</p>
27    <p>hello!</p>
28    <p>hello!</p>
29    <p>hello!</p>
30    <p>hello!</p>
31    <p>hello!</p>
32    <p>hello!</p>
33    <p>hello!</p>
34    <p>hello!</p>
35    <p>hello!</p>
36    <p>hello!</p>
37    <p>hello!</p>
38    <p>hello!</p>
39    <p>hello!</p>
40    <p>hello!</p>
41    <p>hello!</p>
42    <p>hello!</p>
43    <p>hello!</p>
44    <p>hello!</p>
45    <p>hello!</p>
46    <p>hello!</p>
47    <p>hello!</p>
48    <p>hello!</p>
49    <p>hello!</p>
50    <p>hello!</p>
51    <p>hello!</p>
52    <p>hello!</p>
53    <p>hello!</p>
54    <p>hello!</p>
55    <p>hello!</p>
56    <p>hello!</p>
57    <p>hello!</p>
58    <p>hello!</p>
59    <p>hello!</p>
60    <p>hello!</p>
61    <p>hello!</p>
62    <p>hello!</p>
63    <p>hello!</p>
64    <p>hello!</p>
65    <p>hello!</p>
66    <p>hello!</p>
67    <p>hello!</p>
68    <p>hello!</p>
69    <p>hello!</p>
70    <p>hello!</p>
71    <div id="back-to-top" style="position:fixed;right;5px;bottom:5px"><a href="#"</a>↑
72    </div>
73    <div id="pos" style"position:fixed;left:5px;bottom:5px"></div>
74
75    <script>
76    $(function() {
77      $('$back-to-top').hide();
78
79      $(window).scroll(function() {
80          $('#pos').text$(this).scrollTop();
81          if ($((this).scrollTop() > 60 {
82            $('$back-to-top').fadeIn();
83
84          } else {
85            $('$back-to-top').fadeOut();
86
87          }
88      });
89
90
91    });
92
93
94    </script>
95
96</body>
97</html>
98

javascript
1 $(window).scroll(function()
2```の$の意味。これはオブジェクト.メソッド名()でしょうか？
3
4「$(document).ready(function() { …この document が読み込まれたら次の処理をしなさいを省略すると
5
6「$(function() { …」らしいのですが

行動規範の内容に同意します

回答5件

$()は関数です。

71行目、style属性のrightプロパティの部分、セミコロンとコロンの打ち間違い。
71行目、aタグの対応がとれていない。
73行目、style属性と値の間にイコールがない。
81行目、if文の括弧の対応が取れていない。
$((this).scrollTop() > 60)ではなくて、($(this).scrollTop() > 60)。
$back-to-topは#back-to-top。
$('#pos').text$(this).scrollTop()は$('#pos').text($(this).scrollTop())。

HTML
1<!DOCTYPE html>
2<html lang="ja">
3<head>
4    <meta charset="utf-8">
5    <script src="https://code.jquery.com/jquery-3.2.0.min.js"></script>
6    <title>スクロール実験</title>
7</head>
8<body style="text-align:center;">
9<h1>スクロール実験</h1>
10<p>hello!</p>
11<p>hello!</p>
12<p>hello!</p>
13<p>hello!</p>
14<p>hello!</p>
15<p>hello!</p>
16<p>hello!</p>
17<p>hello!</p>
18<p>hello!</p>
19<p>hello!</p>
20<p>hello!</p>
21<p>hello!</p>
22<p>hello!</p>
23<p>hello!</p>
24<p>hello!</p>
25<p>hello!</p>
26<p>hello!</p>
27<p>hello!</p>
28<p>hello!</p>
29<p>hello!</p>
30<p>hello!</p>
31<p>hello!</p>
32<p>hello!</p>
33<p>hello!</p>
34<p>hello!</p>
35<p>hello!</p>
36<p>hello!</p>
37<p>hello!</p>
38<p>hello!</p>
39<p>hello!</p>
40<p>hello!</p>
41<p>hello!</p>
42<p>hello!</p>
43<p>hello!</p>
44<p>hello!</p>
45<p>hello!</p>
46<p>hello!</p>
47<p>hello!</p>
48<p>hello!</p>
49<p>hello!</p>
50<p>hello!</p>
51<p>hello!</p>
52<p>hello!</p>
53<p>hello!</p>
54<p>hello!</p>
55<p>hello!</p>
56<p>hello!</p>
57<p>hello!</p>
58<p>hello!</p>
59<p>hello!</p>
60<p>hello!</p>
61<p>hello!</p>
62<p>hello!</p>
63<p>hello!</p>
64<p>hello!</p>
65<p>hello!</p>
66<p>hello!</p>
67<p>hello!</p>
68<p>hello!</p>
69<p>hello!</p>
70<p>hello!</p>
71<div id="back-to-top" style="position:fixed;right:5px;bottom:5px">
72    <a href="#">↑</a>
73</div>
74<div id="pos" style="position:fixed;left:5px;bottom:5px"></div>
75
76<script>
77    $(function () {
78        $('#back-to-top').hide();
79        $(window).scroll(function () {
80            $('#pos').text($(this).scrollTop());
81            if (($(this).scrollTop() > 60)) {
82                $('#back-to-top').fadeIn();
83            } else {
84                $('#back-to-top').fadeOut();
85            }
86        });
87    });
88</script>
89</body>
90</html>

投稿2017/04/06 05:09

編集2017/04/06 05:14

s8_chu

総合スコア14731

https://teratail.com/questions/71521
https://teratail.com/questions/71506

エラーチェックができないとかいわせねぇよ。

https://teratail.com/questions/71414
Chrome Developer Tools入門 (全10回) - プログラミングならドットインストール
過去の質問からこれも見てるはず。
これでも自分はちゃんとやってますって言えるの？

投稿2017/04/06 07:22

編集2017/04/06 07:30

toutou

総合スコア2050

Everatch

2017/04/06 07:45

toutouさん言い方きっついなーと思いましたが、リンク先見て理解しました。せめて同じ問題を繰り返さないよう学習してほしいですね...

toutou

2017/04/06 07:53

リンク先のことだけならまだいいんですがね。余罪がたんまりありますので、おそらく学習しないでしょう。もともと口のいいほうではないですが、それなりの方にはさらに悪くなります。

行動規範の内容に同意します

HTML
1<div id="pos" style"position:fixed;left:5px;bottom:5px"></div>
2```↓
3```HTML
4<div id="pos" style="position:fixed;left:5px;bottom:5px"></div>

追記：

他にもいろいろ問題があるみたいですね。

HTMLの構文を間違えると、CSSが思ったように適用されず、JavaScriptも同様に期待の動作をしなくなる可能性があります。ブラウザが記述ミスを独自に補完することで一見問題なく表示されるように見える事もありますが、表示が思い通りにならない場合はまず構文をチェックしましょう。

投稿2017/04/06 05:08

編集2017/04/06 05:29

kei344

総合スコア69407

goforward

2017/04/06 07:06

ドットインストールのコードと一応照らし合わせていますが

kei344

2017/04/06 07:32

が、何？「チェック」は「眺める」ではないですよ。先ほど提示したデベロッパーツールでもHTMLの構造が確認出来ます。他のチェックツールも過去の質問の中で教えてもらっていると思いますので、それを使ってエラー箇所周辺の問題を探していくことが必要です。プログラムが思い通りに動かない場合は基本的に自分がミスしていると思ってください。「バグ」に出会うことより「うっかりミス」をする可能性のほうが高いです。

行動規範の内容に同意します

$の意味。これはオブジェクト.メソッド名()でしょうか？

はい、そのとおりです。

jQuery( element )

jQuery() | jQuery API Documentation

.scroll( handler )

.scroll() | jQuery API Documentation

というかtypo多いですよ。きちんとエラーメッセージ読んでますか？

質問追記をうけて追記

Five orders of Ignoranceというペーパーで、無知のレベルには５つのレベルがあるとされています。

0OI: 全部分かっている
「答え」を持っている。あとは書き写すだけで完成する。
1OI: 分からないことが分かっている
答えを得るための「質問」を持っている。
2OI: 分からないことが分からない
「質問」を持たない状態。決定的な答えを引き出すための「質問」ができない。
3OI: 分からないことが分からない状況を何とかする術を知らない
2OI→1OI→0OIと進んでいくためのプロセスがない状態です。
4OI: 無知にレベルがあることを知らない

質問する際はこの中で自分がどのステップに居るのか理解しておくことが重要です。
質問は恥ではないし役に立つ - Qiita

「魚をくれ」じゃなくて「魚の釣り方」を教わるようにする

答えを教わるほうが、聞き手も答える側も手短に済みます。
しかしながらそれでは聞き手の成長には繋がらず、何度も似たような質問を繰り返すようになります。
知識がない領域については特に安易に答えを教えてもらいたくなりますが、なるべく自分の成長を考えて「○○をしていてエラーが出たのですが、××さんはこういうとき、どうやって原因探りますか?」ような質問をします。
質問は恥ではないし役に立つ - Qiita

投稿2017/04/06 05:10

編集2017/04/06 07:52

Lhankor_Mhy

総合スコア36115

toutou

2017/04/06 05:17

この人がエラーを読むわけないじゃないですかw

行動規範の内容に同意します

ベストアンサー

あなたのコード上の$はjQueryと同義です。jQueryは毎回毎回jQueryと書かせるのが大変だろうと気を利かせて、$という名前の関数オブジェクトを用意しています。以下の2つは全く同じ処理を表しています。

JavaScript
1jQuery(window);
2$(window);

「$(document).ready(function() { …この document が読み込まれたら次の処理をしなさいを省略すると
「$(function() { …」らしいのですが

この認識は正しいです。jQueryがいちいち前者で書く手間を省かせてくれるために、後者でも同じ動きをしてくれるようにしています。

#追記
よく見たら間違いだらけです。

HTML
1<!--aタグの書き方がおかしい-->
2<div id="back-to-top" style="position:fixed;right;5px;bottom:5px"><a href="#"</a>↑
3<div id="back-to-top" style="position:fixed;right;5px;bottom:5px"><a href="#">↑</a>

HTML
1<!--style属性にイコールがない-->
2<div id="pos" style"position:fixed;left:5px;bottom:5px"></div>
3<div id="pos" style="position:fixed;left:5px;bottom:5px"></div>

JavaScript
1// IDの指定の仕方が間違っている(3箇所ある)
2$('$back-to-top').hide();
3$('#back-to-top').hide();

投稿2017/04/06 05:09

編集2017/04/06 05:14

masaya_ohashi

総合スコア9206

あなたの回答

tips

プレビュー

行動規範の内容に同意します

質問の解決につながる回答をしましょう。サンプルコードなど、より具体的な説明があると質問者の理解の助けになります。また、読む側のことを考えた、分かりやすい文章を心がけましょう。

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

ただいまの回答率
85.48%

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

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

質問する

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

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

＄の意味　表示の相違

質問追記をうけて追記

関連した質問