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

Поділитися
Вставка
  • Опубліковано 25 лис 2024

КОМЕНТАРІ • 83

  • @webgodweb
    @webgodweb  3 роки тому +8

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

  • @j.m-i1j
    @j.m-i1j Рік тому +12

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

  • @松竹康弘-w9d
    @松竹康弘-w9d Рік тому +1

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

  • @riel4811
    @riel4811 11 місяців тому +1

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

    • @webgodweb
      @webgodweb  11 місяців тому +1

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

  • @ahiru-nd5yh
    @ahiru-nd5yh 3 місяці тому +1

    毎回助かってます!

    • @webgodweb
      @webgodweb  3 місяці тому

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

  • @TheSnsd0308
    @TheSnsd0308 3 роки тому +3

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

    • @webgodweb
      @webgodweb  3 роки тому +1

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

  • @マコチャン-c5h
    @マコチャン-c5h 8 місяців тому

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

  • @user-j5tpmgd76
    @user-j5tpmgd76 2 роки тому +1

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

  • @usahitomi
    @usahitomi 3 роки тому +2

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

    • @webgodweb
      @webgodweb  3 роки тому

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

  • @rss-restartsmail-7290
    @rss-restartsmail-7290 3 роки тому +2

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

  • @user-zp1os
    @user-zp1os 3 роки тому +1

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

    • @webgodweb
      @webgodweb  3 роки тому

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

  • @chapuchapu22
    @chapuchapu22 Рік тому +6

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

    • @webgodweb
      @webgodweb  Рік тому +1

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

  • @こーちゃんねる-h2g
    @こーちゃんねる-h2g Рік тому +1

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

  • @影林進次郎
    @影林進次郎 3 роки тому +1

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

    • @webgodweb
      @webgodweb  3 роки тому

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

  • @hirohappiness8165
    @hirohappiness8165 3 роки тому +2

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

    • @webgodweb
      @webgodweb  3 роки тому

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

  • @ナチュラル-z3r
    @ナチュラル-z3r Рік тому

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

  • @日傘星雨
    @日傘星雨 9 місяців тому

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

    • @webgodweb
      @webgodweb  9 місяців тому +1

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

  • @kong9435
    @kong9435 3 роки тому

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

    • @webgodweb
      @webgodweb  3 роки тому

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

    • @kong9435
      @kong9435 3 роки тому

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

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

  • @yumaITkakeruAI
    @yumaITkakeruAI 2 роки тому

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

    • @webgodweb
      @webgodweb  2 роки тому

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

    • @yumaITkakeruAI
      @yumaITkakeruAI 2 роки тому

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

  • @aknr7704
    @aknr7704 3 роки тому +2

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

    • @webgodweb
      @webgodweb  3 роки тому +1

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

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

    わかりやすかったっす。

    • @webgodweb
      @webgodweb  Рік тому +1

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

  • @junpei3
    @junpei3 2 роки тому +1

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

    • @webgodweb
      @webgodweb  2 роки тому +2

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

  • @shuntoshinzato
    @shuntoshinzato Рік тому

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

  • @変態先生改め変わった態度
    @変態先生改め変わった態度 4 місяці тому

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

  • @NEGAI.bose-Bluetooth
    @NEGAI.bose-Bluetooth Рік тому

    分かりやすい!

    • @webgodweb
      @webgodweb  Рік тому +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ブラウザの「検証ツール」という機能に付随するため、下記の動画をご覧ください。
      ua-cam.com/video/4yJSMcMfMVI/v-deo.html
      (Console画面については 28:11 から触れていますが、検証ツールが何たるかを知っていただくべく、全編見て頂いた方がいいかと思います)
      検証ツールの起動方法(右クリック)や、ショートカットキーについても上記動画の 1:47 より紹介しております。

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

    初めまして!動画拝見させていただきました!
    いま、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
      なるほどです!!記事も含めてありがとうございます!
      チャンネル登録させていただきますね!

  • @福田悟-m4y
    @福田悟-m4y 3 роки тому +2

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

  • @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("動物じゃないやんけ!")

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

  • @今昔物語集
    @今昔物語集 Рік тому

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

    • @webgodweb
      @webgodweb  Рік тому

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

  • @カルー純一
    @カルー純一 3 роки тому

    一年前からファンです!

  • @Star-qp7rv
    @Star-qp7rv Рік тому

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

    • @webgodweb
      @webgodweb  Рік тому +1

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

    • @Star-qp7rv
      @Star-qp7rv Рік тому

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

  • @daffy-benkyou
    @daffy-benkyou 3 роки тому

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

    • @webgodweb
      @webgodweb  3 роки тому +1

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

    • @daffy-benkyou
      @daffy-benkyou 3 роки тому

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

  • @高島雅矢
    @高島雅矢 3 роки тому

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

    • @webgodweb
      @webgodweb  3 роки тому

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

    • @高島雅矢
      @高島雅矢 3 роки тому

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

  • @さくら桜-b7m
    @さくら桜-b7m 2 роки тому

    完了です

    • @webgodweb
      @webgodweb  2 роки тому

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

  • @桂小太郎-g9g
    @桂小太郎-g9g 2 роки тому

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

    • @account415
      @account415 2 роки тому +2

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

  • @kakkoiinippon
    @kakkoiinippon Рік тому

    🇯🇵🇯🇵🇯🇵いいですね

    • @webgodweb
      @webgodweb  Рік тому

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

  • @カルー純一
    @カルー純一 3 роки тому

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

    • @webgodweb
      @webgodweb  3 роки тому

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

  • @カレーライスだいすき
    @カレーライスだいすき 3 роки тому +1

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

    • @webgodweb
      @webgodweb  3 роки тому +1

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

  • @カルー純一
    @カルー純一 3 роки тому +1

    なっちゃんの下着何色?

    • @ytss554
      @ytss554 3 роки тому +1

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

  • @cojitube
    @cojitube 2 роки тому

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