【超入門】初心者向けJavaScript解説!これから学習を始める方必見【Webデザイン・プログラミング】

Поделиться
HTML-код
  • Опубликовано: 24 дек 2024

Комментарии •

  • @webgodweb
    @webgodweb  3 года назад +9

    いま、学んでおいて損はないおすすめのプログラミング言語、JavaScriptの初心者向け解説です!
    これから学習を始める方にも気軽に観ていただけます。
    ↓↓↓ jQuery解説はこちら ↓↓↓
    【超初心者向け】jQuery最新版の読み込み・使い方解説2021!初めてでも簡単にアコーディオンメニューが作れるようになります【HTML・CSS コーディング】
    ruclips.net/video/Vw7xzB78uGg/видео.html
    【初心者向け】jQueryで作るハンバーガーメニュー3種類!スライドメニュー、フェードインなど レスポンシブデザイン【HTML・CSS コーディング】
    ruclips.net/video/8BItmm-CQvc/видео.html

  • @j.m-i1j
    @j.m-i1j Год назад +12

    解説と言いつつ、難しい言葉を使うRUclipsrさんが多い中、おばかさんにも理解できるような言葉を選んで分かりやすく解説して頂いてありがたいです!

  • @松竹康弘-w9d
    @松竹康弘-w9d Год назад +1

    4月よりプログラミングの勉強をしています。HTML、CSS、Bootstrapに続きJavaScriptの勉強をしています。色々と勉強させてください。今後とも動画拝見させて頂きます。

  • @riel4811
    @riel4811 Год назад +1

    これはすごいわかりやすい

    • @webgodweb
      @webgodweb  Год назад +1

      コメントありがとうございます!🙇‍♀️

  • @マコチャン-c5h
    @マコチャン-c5h 9 месяцев назад

    JavaScriptの言語は少し勉強したことがあったのですが、導入のところが勉強になりました。ありがとうございます。楽しく学べました。感謝しています。💝💖💫💮

  • @ahiru-nd5yh
    @ahiru-nd5yh 4 месяца назад +1

    毎回助かってます!

    • @webgodweb
      @webgodweb  4 месяца назад

      お役に立てているなら嬉しいです!✨

  • @kong9435
    @kong9435 3 года назад +1

    いつも、視聴を楽しみにしています。こんな動画があるんですね。ありがとうございます。

    • @webgodweb
      @webgodweb  3 года назад

      いつもご視聴ありがとうございます🙇‍♀️
      学習の導入的な動画になれれば嬉しいです!✨

    • @kong9435
      @kong9435 3 года назад

      @@webgodweb
      ほんとに助かってます
      今、課題になっている件ですが
      検索条件入力Formを作成しているのですが
      一つの項目に
      メーカ名、メーカコード

      ラベルと入力BOX、検索ボタン
      を一つのグループにして
      ほかの
      項目のラベルと入力BOXと調和をとりたいと苦心しています。
      FrexBoxでできそうですかね?
      この辺のマイナーな部分の解決策をご教示願えればと、あなたの動画をあさってます。

  • @TheSnsd0308
    @TheSnsd0308 3 года назад +3

    丁度始めようと思っていたのですごく嬉しいです!頑張って勉強します!

    • @webgodweb
      @webgodweb  3 года назад +1

      ご視聴ありがとうございます!
      タイミング良くてこちらも嬉しいです!✨

  • @chapuchapu22
    @chapuchapu22 Год назад +7

    この時点ではJavaScriptが簡単に思える。。この後地獄を見ることになってもまずは入口まで導いてくれたことに感謝です。はやく網羅したい、、、気持ちだけ先走ってはいけませんね。頑張ります。笑

    • @webgodweb
      @webgodweb  Год назад +1

      ご視聴ありがとうございます!
      おっしゃる通りです😂モチベーションが下がらない程度に取り組みながら、着実にステップアップしていきましょう、、!!

  • @user-zp1os
    @user-zp1os 3 года назад +1

    動画アップまってました!👏
    とてもわかりやすいコンテンツばかりで助かってます〜

    • @webgodweb
      @webgodweb  3 года назад

      いつもご視聴ありがとうございます!🙇‍♀️
      今後もお役に立てるように頑張ります!

  • @hirohappiness8165
    @hirohappiness8165 3 года назад +2

    初めて動画、拝見しました。
    丁寧に説明されてて分かりやすかったです。
    ジャバスクリプトを身近に感じました。
    ウレピヨです☺笑。
    ありがとう。

    • @webgodweb
      @webgodweb  3 года назад

      ご視聴ありがとうございます!
      もう少し進んだ内容も、初学者のみなさんにわかりやすく解説できるように準備しています🙇‍♀️
      またご視聴いただければこちらこそ、、とってもうれピヨです!🐥

  • @ナチュラル-z3r
    @ナチュラル-z3r Год назад

    分かりやすい〜
    ありがとうございますは😊❤

  • @影林進次郎
    @影林進次郎 3 года назад +1

    JavaScript美味しそうで、楽しそうですね! 楽ピヨです!

    • @webgodweb
      @webgodweb  3 года назад

      コメントありがとうございます!🐥🐥

  • @yumaITkakeruAI
    @yumaITkakeruAI 2 года назад

    JavaScriptを学び始める動画では
    最適でした!ありがとうございます!!

    • @webgodweb
      @webgodweb  2 года назад

      そう言っていただけると制作した甲斐があります!ありがとうございます🙇‍♀️

    • @yumaITkakeruAI
      @yumaITkakeruAI 2 года назад

      @@webgodweb イベントは予定があって
      行けないですが陰ながら応援しています!!

  • @暴落前夜何もするなそこに居ろ

    わかりやすかったっす。

    • @webgodweb
      @webgodweb  Год назад +1

      よかったです!!🙇‍♀️

  • @user-j5tpmgd76
    @user-j5tpmgd76 2 года назад +1

    8:47 これってどこに書き込んでるんですか?
    アプリかなんかインストールして、それにコードを打ち込んでるのでしょうか?

  • @こーちゃんねる-h2g
    @こーちゃんねる-h2g Год назад +1

    大学でプログラミングがさっぱりでどこから手をつけたらいいか分からなかった自分でも理解できました!
    がんばります!ありがとうございました😂

  • @rss-restartsmail-7290
    @rss-restartsmail-7290 3 года назад +2

    動画めちゃくちゃわかりやすかったです!ドットインストールでHTML,CSS一通り終えて、Java Scriptの学習を始めているのですが、HTML,CSSで、模写コードを見ないでも出来る位に、HTML,CSSかけるようになってから、次の学習は始めた方が、後の理解が早かったりしますか?

  • @junpei3
    @junpei3 2 года назад +1

    JavaScriptもわかりやすくて助かります。

    • @webgodweb
      @webgodweb  2 года назад +2

      たくさんご視聴いただきありがとうございます🙇‍♀️🙇‍♀️

  • @NEGAI.bose-Bluetooth
    @NEGAI.bose-Bluetooth Год назад

    分かりやすい!

    • @webgodweb
      @webgodweb  Год назад +1

      ありがとうございます!!🙇‍♀️

  • @aknr7704
    @aknr7704 3 года назад +2

    Webデザイナー向けのJavaScriptの解説動画や本があまりないので、実用的な(スライドショーや固定ヘッダーなど)コードの書き方を教えていただけると嬉しいです。

    • @webgodweb
      @webgodweb  3 года назад +1

      リクエストありがとうございます!今後そのようなテーマのJavaScript解説動画も検討させていただきます!☺️

  • @日傘星雨
    @日傘星雨 10 месяцев назад

    勉強になりましたm(_ _)m
    そういえば例えば
    animals = pizzaと書いてますが半角スペースは必須なのでしょうか?自分は半角スペース入れるのがめんどくさくてスペースなしで記述してみたら普通に表示されたんですが
    これってどうなんでしょうか?

    • @webgodweb
      @webgodweb  10 месяцев назад +1

      イコールなどの特別な記号があれば通常どおり認識されて動くこともありますが、基本的にはコードを動かすのに必要な半角スペースも多い&解読しにくくて間違えやすいコードになってしまうので、最低限で使っていただきたいと思います🙇‍♀️

  • @TV-vh5ji
    @TV-vh5ji 2 года назад

    質問なのですが、①13:26、chromeを開くのはどうすればいのですか。②「dhoromeを開く」とは?script.jsファイルをchoromeで開く、という行為のことですか?③13:37、「コマンド・オプション・I」と聞こえますがどのキーのことですか?次のconsoleの画面への行き方がわかりません(よく聞き取れません) ご教示頂き度。

    • @webgodweb
      @webgodweb  2 года назад +1

      「Google Chrome」とは、Webサイトを閲覧するための「Webブラウザ」というアプリケーションの一種です。
      WebブラウザでJavaScriptのファイル単体を開いても意味がありませんので、JavaScriptのコードを読み込ませているHTMLファイルを開いています。
      (8:52 周辺で解説している通り、JavaScriptのコードを書いて動作確認をしていくために、HTMLファイルの準備が必要となります)
      Webブラウザには他にも種類がありますが、お勧めしているのは「Google Chrome」ですので、もしご自身のPCにインストールされていない場合は下記からダウンロードしてください。
      www.google.co.jp/chrome/?brand=YTUH&gclid=CjwKCAjwzY2bBhB6EiwAPpUpZlcbWIQv1QjJ-N_B9HV9aF-DqLZhAAZxuMhq8TUCZ4n8m5LUBQJIRxoCunQQAvD_BwE&gclsrc=aw.ds
      また、Console画面は、Webブラウザの「検証ツール」という機能に付随するため、下記の動画をご覧ください。
      ruclips.net/video/4yJSMcMfMVI/видео.html
      (Console画面については 28:11 から触れていますが、検証ツールが何たるかを知っていただくべく、全編見て頂いた方がいいかと思います)
      検証ツールの起動方法(右クリック)や、ショートカットキーについても上記動画の 1:47 より紹介しております。

  • @福田悟-m4y
    @福田悟-m4y 3 года назад +2

    うれピヨです!かわいいw

  • @shuntoshinzato
    @shuntoshinzato Год назад

    HTMLはどこでダウンロードできますか

  • @カルガモアップデート

    初めまして!動画拝見させていただきました!
    いま、Javascriptを勉強中なのですが、以下の構文で
    var no = window.prompt("好きなおみくじ番号を入力してください。");
    switch(no%4) {
    case 0:
    alert("大吉です!");
    break;
    case 1:
    alert("吉です。");
    break;
    case 2:
    alert("中吉です。");
    break;
    switch(no)ではなくswitch(no%4)になる理由、わかりますでしょうか、。
    いろんな動画を見たのですが解決しなくて、、
    もしよろしければでいいので、教えていただけると幸いです!!

    • @webgodweb
      @webgodweb  Год назад

      なぜこの式になるか、というより、何を条件にするか、という意味合いにはなるのですが、
      switch(no%4) の場合は、「変数noの値を4で割った場合の余りの数」を元に条件判定しています。
      これを switch(no) とした場合、単純に「変数noの値がいくつか」によって条件判定することになるので、どちらが間違いというわけではないのですが、おみくじの結果が決まる条件が変わるかと思います。
      下記の記事なども参考にしてみてください。
      magazine.techacademy.jp/magazine/35944

    • @カルガモアップデート
      @カルガモアップデート Год назад

      @@webgodweb
      なるほどです!!記事も含めてありがとうございます!
      チャンネル登録させていただきますね!

  • @usahitomi
    @usahitomi 3 года назад +2

    はじめまして!ひよこなつさんかわいいですね(*´∀`)説明が分かりやすいのでいつも参考にさせてもらってます。私は今JavaScriptの勉強しているのですが苦戦してます。JavaScriptで何か作る動画をリクエストしたいです!カルーセルとかお願いします!

    • @webgodweb
      @webgodweb  3 года назад

      いつもご視聴ありがとうございます!🙇‍♀️
      学習を後押しできるような動画を今後も更新していけるように頑張ります!
      なにか作る動画、かしこまりました🙏リクエストありがとうございます☺️

  • @daffy-benkyou
    @daffy-benkyou 3 года назад

    丁度、最近勉強し始めました。前から勉強させて頂いてます。キャラ変可愛いですね(笑)

    • @webgodweb
      @webgodweb  3 года назад +1

      いつもご視聴ありがとうございます!🐥
      驚かせてしまったらすみません😂

    • @daffy-benkyou
      @daffy-benkyou 3 года назад

      @@webgodweb 逆にコメント返してもらえて嬉しいです。これからも応援してます!そして勉強になります!!

  • @変態先生改め変わった態度
    @変態先生改め変わった態度 5 месяцев назад

    メソッドに関しては、それこそJavaやPythonみたいなサーバーサイド言語を学ばないとイメージが難しいよな

  • @今昔物語集
    @今昔物語集 Год назад

    JavaScriptってhtmlとCSSの知識がないと習得不可能ですか?

    • @webgodweb
      @webgodweb  Год назад

      いえ!内容としては別物なので学習は進めていただけると思いますが、JavaScriptでHTML(DOM)を操作したり、CSSを編集したりできるので、いずれ基礎知識などは必要になってきます。とはいえ、学ぶことが増えると言うよりは、そもそも技術上切り離せない知識でもあるので、、JavaScriptに重きを置いて学習しつつ、必要になったタイミングでHTML/CSSもきちんと学んでいただくのがいいかと思います。

  • @Star-qp7rv
    @Star-qp7rv Год назад

    23:10の3つ並んでる===って=と何が違うんですか?

    • @webgodweb
      @webgodweb  Год назад +1

      ご視聴ありがとうございます。===はJavaScriptで二つの値を厳密に比較するという意味になります。

    • @Star-qp7rv
      @Star-qp7rv Год назад

      @@webgodweb ありがとうございました。

  • @TV-vh5ji
    @TV-vh5ji 2 года назад

    動画の通りにやってみたのですが、その通りにならず、また、説明もよくわからないので質問させてください。①条件式if ・・if else の下りですが、動物がペンギンだったら~、サルさったら~、どちらでもなければ~、と条件を与えているのに、画面ではいきなりペンギンだと出るのはなぜですか? constの()の内容が条件に対する定義だからですか?②この通りに打ち込んでみたのですが、まったく何もポップアップしません。入力ミスでしょうか ③この作業の前の「こんにちわ!」をコメントアウトせずに②の打ち込みを行ったあと再度表示すると、こんどは②「こんにちわ」がポップアウトしなくなりました。なぜでしょうか。ご教示いただければ幸いです。

    • @webgodweb
      @webgodweb  2 года назад

      ①のご質問については、定数「animals」の中身の値が何か、によって条件分岐した結果を表示しています。動画内では、「const animals = "penguin";」というように、条件式より先に定数の値を決めています。
      この時の条件式では、「定数「animals」の値が「penguin」だったら、「ペンギンだ!」とアラートを出す。そうじゃなかったら…」というように指定していて、定数の値に対応させてアラートする内容を変えるように命令しているので、「定数「animals」の値が「penguin」だったら」という条件に当てはまった為、「ペンギンだ!」というアラートが出ています。
      ②に関しては、実際の記載内容を見せていただかないと、どこが入力ミスかどうかは判りかねます。ただ、③に関して言うと、JavaScriptはどこかのコードにエラーがあるとその時点で処理が止まり、それ以降のコードが実行されなくなりますので、まさに②に入力ミスがあった為に、③の現象が起きているように見受けられます。

    • @TV-vh5ji
      @TV-vh5ji 2 года назад

      ご教示ありがとうございます。③のalertの表示の記述、このように書いてますが、
      間違ってますでしょうか。ポップアップが出ない件です。

      //console.log("表示できた!1");
      //console.log("表示できた!2");
      //console.log("表示できた!3");
      alert("こんにちわ!");


      //const animals = "penguin";
      const animals = "monkey";
      if(animals === "penguin"){
      alert("ペンギンだ!");
      }else if(animals ==="monkey"){
      alert("サルだ!");
      }else{
      alert("動物じゃないやんけ!")

      お手数ですが宜しくお願いします。

  • @高島雅矢
    @高島雅矢 3 года назад

    JSをbodyの閉じタグの下で読み込むみたいなのも聞いたことあるのですが間違ってますか?

    • @webgodweb
      @webgodweb  3 года назад

      ご質問ありがとうございます!
      の下では、タグの外に出てしまうことになりますね。
      HTMLのルール上、タグのすぐ下に配置できるのはタグとタグだけなので、タグの外に出すのは文法上の誤りです🙇‍♀️
      developer.mozilla.org/ja/docs/Web/HTML/Element/html

    • @高島雅矢
      @高島雅矢 3 года назад

      @@webgodweb 分かりました!ありがとうございます!

  • @桂小太郎-g9g
    @桂小太郎-g9g 2 года назад

    どうしたら、consoleの画面が表示されるのですか?

    • @account415
      @account415 2 года назад +2

      Windowsの場合は「ctrl+shift+i」もしくはF12で Macの場合は「command+option+i」で表示できるとおっしゃってました。

  • @さくら桜-b7m
    @さくら桜-b7m 2 года назад

    完了です

    • @webgodweb
      @webgodweb  2 года назад

      ありがとうございます!お疲れ様でした!!☺️

  • @カルー純一
    @カルー純一 3 года назад

    一年前からファンです!

  • @kakkoiinippon
    @kakkoiinippon Год назад

    🇯🇵🇯🇵🇯🇵いいですね

    • @webgodweb
      @webgodweb  Год назад

      コメントありがとうございます☺️

  • @カレーライスだいすき
    @カレーライスだいすき 3 года назад +1

    ほんとに説明がわかりやすいから自分もJavaScriptできるんじゃね?て思えましたwww

    • @webgodweb
      @webgodweb  3 года назад +1

      コメントありがとうございます!
      あまり難しく考えず、ぜひトライしてみてください!✨

  • @カルー純一
    @カルー純一 3 года назад

    JavaScriptとjavaはメロンとメロンパンくらい違う!

    • @webgodweb
      @webgodweb  3 года назад

      良い例えですね😂その通りだと思います!!

  • @カルー純一
    @カルー純一 3 года назад +1

    なっちゃんの下着何色?

    • @ytss554
      @ytss554 3 года назад +1

      .natsuko-pants { background-color: #ddd; }

  • @cojitube
    @cojitube 2 года назад

    animalsで複数形だから配列かと思ったら文字列で草