ホームページ ウェブフロントエンド jsチュートリアル JavaScript DOM プログラミングの例 (Zhi Podcast Learning)_JavaScript スキル

JavaScript DOM プログラミングの例 (Zhi Podcast Learning)_JavaScript スキル

May 16, 2016 pm 06:41 PM
dom javascript プログラミング

彼はまた、DOM の学習方法についてもたくさん説明してくれました。とても有益だったと思います。
ここでは、皆さんと共有した方がよいと思われる例をいくつか紹介します。
1. 第 2 レベルのリンクされたドロップダウン メニュー (第 1 レベルは州、第 2 レベルは都市です。第 1 レベルで州を選択する必要があり、それに応じて第 2 レベルの都市が表示されます)
手順: 1) 基本フレームワーク (HTML): 2 つの複雑なチェック ボックス。2 番目のチェック ボックスにはオプションを指定しないでください。最初のドロップダウン ボックスはイベント ソースとして使用され、関数実装部分として使用されます。 JavaScript は onchange メソッドを通じて刺激されます。

コードをコピーします コードは次のとおりです。

select id= "province" onchange="selCity()"> <br><option > -- 州を選択 --</option> <br> <option >北京</option> <オプション>天津</オプション><br><オプション>山東</オプション> 🎜></select> <br><select id="city"> <br><option> --<br></select> ;/xmp> <br><br> <br>2) ページの変更はあまり必要ありません。ドロップダウン メニューに 1 つを表示するだけです。<br>3) JavaScript を使用して関数を実装するには、最初の選択を行います。この 1 対多の対応を見て、最初はコンテナ マップ コレクションを考えましたが、JavaScript にはマップ コレクションがないため、配列などのコンテナを使用し、最終的にはこの関数の実装に 2 次元配列を使用することにしました。 <br><br><br> </div> <br>コードをコピー<br><br><div class="codetitle"> コードは次のとおりです:<span><a style="CURSOR: pointer" data="4167" class="copybut" id="copybut4167" onclick="doCopy('code4167')"> <u><script type="text/javascript "> </u>function selCity() </a>{ </span>var arr= [["--都市を選択--"],["海淀区","朝陽区","東城区","西城市「地区」、「宣武区」]、</div>[「和平区」、「河北区」、「河東区」、「河西区」、「南開区」]、<div class="codebody" id="code4167">[「武漢」、「宜昌」 、「小干」、「翔樊」、「荊州」]、<br>[「済南」、「青島」、「煙台」、「威海」、「日照」]、<br>[「石家荘」、「保定」 ,"張家口 ","廊坊","邯鄲"]]; <br>var selpNode = document.getElementById("province"); <br>var selcNode = document.getElementById("city"); = arr[selpNode.selectedIndex]; <br>selcNode.options.length = 0; <br>for(var x=0; x<citys.length x>{ <br>var optNode = document.createElement ("オプション "); <br>optNode.innerText = 都市[x] <br>} <br>} <br><br><br>; <br> 概要: 毎回必ず配列をクリアしてください。 <br>2. メーリングリスト<br>の考え方: 1) まず、全体的なフレームワークを考えると、テーブルを使用して書式設定を行い、テーブルや行、ノードなどの関連機能を実現することを考えます。セル<br>2) css 主なことはテーブルをフォーマットすることであり、2 つ目は 2 つの行に異なる効果を選択して表示することです。これは <br> の長さのため、html を動的に変更することで実現されます。コードの CSS 部分は比較的シンプルなので、恥ずかしいことはありません。 <br>3) さまざまな関数を実装するための JavaScript。コードは次のとおりです。 <br></citys.length> </div> <br><br><br>コードをコピーします<br><br><br> コードは次のとおりです。 <br><div class="codebody" id="code82141"> <br><script> <br>var color =""; <br>function getStyle() <br>{ <br>var tableNode =document.getElementsByTagName("table")[0]; >var arr = tableNode.rows; <br>for(var x = 0;x<arr.length>{ <br>if(x%2) <br>arr[x].className = " one"; <br>else <br>arr[x].className = "two"; <br>var tdNode0 = arr[x].cells[0]; <br>tdNode0.align = "center"; <br>arr[x].onmouseover = function() <br>{ <br>color = this.className;//元の値を記録し、マウスを一度動かすと元の色に戻ることができます <br>this.className = "チェック済み"; <br>arr[x].onmouseout = function() <br>{ <br>this.className = color; <br>} <br>} <br> / /同じ機能を実現するにはすべてを選択する必要があるため、どのノードであるかを区別する値を渡します <br>function allCheck(index) <br>{ <br>var allNode = document.getElementsByName("all") [index]; <br>var checkNodes = document.getElementsByName("mail"); <br>for(var x=0;x<checkNodes.length;x ) <BR>{ <BR>checkNodes[x].checked = allNode.checked ; <BR>} <BR>} <BR>function checkBut(num) <BR>{ <BR>var mailNodes = document.getElementsByName("mail"); x<mailNodes.length; <BR>else <BR>mailNodes[x].checked = num; <BR>} <BR>} <BR>function del() <BR>{ <BR>var b = window.confirm (「すべての選択メールを削除してもよろしいですか? "); <BR>if(!b) <BR>return ; <BR>var mailNodes = document.getElementsByName("mail"); <BR>var arr = new Array(); <BR>var pos = 0; <BR>for(var x=0; x<mailNodes.length; .parentNode; <BR>arr[pos ] = trNode; <BR>} <BR>} <BR>for(var x=0; x<arr .length; x ) <BR>{ <BR>arr[x] .parentNode.removeChild(arr[x]); <BR>} <BR>getStyle(); <BR>window.onload = getStyle ; <BR></スクリプト> <br><br></arr.length> </div> </div> </div> <div class="wzconShengming_sp"> <div class="bzsmdiv_sp">このウェブサイトの声明</div> <div>この記事の内容はネチズンが自主的に寄稿したものであり、著作権は原著者に帰属します。このサイトは、それに相当する法的責任を負いません。盗作または侵害の疑いのあるコンテンツを見つけた場合は、admin@php.cn までご連絡ください。</div> </div> </div> <ins class="adsbygoogle" style="display:block" data-ad-format="autorelaxed" data-ad-client="ca-pub-5902227090019525" data-ad-slot="2507867629"></ins> <script> (adsbygoogle = window.adsbygoogle || []).push({}); </script> <div class="AI_ToolDetails_main4sR"> <ins class="adsbygoogle" style="display:block" data-ad-client="ca-pub-5902227090019525" data-ad-slot="3653428331" data-ad-format="auto" data-full-width-responsive="true"></ins> <script> (adsbygoogle = window.adsbygoogle || []).push({}); </script> <!-- <div class="phpgenera_Details_mainR4"> <div class="phpmain1_4R_readrank"> <div class="phpmain1_4R_readrank_top"> <img onerror="this.onerror=''; this.src='/static/imghw/default1.png'" onerror="this.onerror=''; this.src='/static/imghw/default1.png'" src="/static/imghw/hotarticle2.png" alt="" /> <h2>人気の記事</h2> </div> <div class="phpgenera_Details_mainR4_bottom"> <div class="phpgenera_Details_mainR4_bottoms"> <a href="https://www.php.cn/ja/faq/1796780570.html" title="R.E.P.O.説明されたエネルギー結晶と彼らが何をするか(黄色のクリスタル)" class="phpgenera_Details_mainR4_bottom_title">R.E.P.O.説明されたエネルギー結晶と彼らが何をするか(黄色のクリスタル)</a> <div class="phpgenera_Details_mainR4_bottoms_info"> <span>2週間前</span> <span>By 尊渡假赌尊渡假赌尊渡假赌</span> </div> </div> <div class="phpgenera_Details_mainR4_bottoms"> <a href="https://www.php.cn/ja/faq/1796773439.html" title="レポ:チームメイトを復活させる方法" class="phpgenera_Details_mainR4_bottom_title">レポ:チームメイトを復活させる方法</a> <div class="phpgenera_Details_mainR4_bottoms_info"> <span>4週間前</span> <span>By 尊渡假赌尊渡假赌尊渡假赌</span> </div> </div> <div class="phpgenera_Details_mainR4_bottoms"> <a href="https://www.php.cn/ja/faq/1796774171.html" title="ハローキティアイランドアドベンチャー:巨大な種を手に入れる方法" class="phpgenera_Details_mainR4_bottom_title">ハローキティアイランドアドベンチャー:巨大な種を手に入れる方法</a> <div class="phpgenera_Details_mainR4_bottoms_info"> <span>4週間前</span> <span>By 尊渡假赌尊渡假赌尊渡假赌</span> </div> </div> <div class="phpgenera_Details_mainR4_bottoms"> <a href="https://www.php.cn/ja/faq/1796775427.html" title="スプリットフィクションを打ち負かすのにどれくらい時間がかかりますか?" class="phpgenera_Details_mainR4_bottom_title">スプリットフィクションを打ち負かすのにどれくらい時間がかかりますか?</a> <div class="phpgenera_Details_mainR4_bottoms_info"> <span>3週間前</span> <span>By DDD</span> </div> </div> <div class="phpgenera_Details_mainR4_bottoms"> <a href="https://www.php.cn/ja/faq/1796775336.html" title="R.E.P.O.ファイルの保存場所:それはどこにあり、それを保護する方法は?" class="phpgenera_Details_mainR4_bottom_title">R.E.P.O.ファイルの保存場所:それはどこにあり、それを保護する方法は?</a> <div class="phpgenera_Details_mainR4_bottoms_info"> <span>3週間前</span> <span>By DDD</span> </div> </div> </div> <div class="phpgenera_Details_mainR3_more"> <a href="https://www.php.cn/ja/article.html">もっと見る</a> </div> </div> </div> --> <div class="phpgenera_Details_mainR3"> <div class="phpmain1_4R_readrank"> <div class="phpmain1_4R_readrank_top"> <img onerror="this.onerror=''; this.src='/static/imghw/default1.png'" onerror="this.onerror=''; this.src='/static/imghw/default1.png'" src="/static/imghw/hottools2.png" alt="" /> <h2>ホットAIツール</h2> </div> <div class="phpgenera_Details_mainR3_bottom"> <div class="phpmain_tab2_mids_top"> <a href="https://www.php.cn/ja/ai/undresserai-undress" title="Undresser.AI Undress" class="phpmain_tab2_mids_top_img"> <img onerror="this.onerror=''; this.src='/static/imghw/default1.png'" onerror="this.onerror=''; this.src='/static/imghw/default1.png'" class="lazy" data-src="https://img.php.cn/upload/ai_manual/001/246/273/173411540686492.jpg?x-oss-process=image/resize,m_fill,h_50,w_50" src="/static/imghw/default1.png" alt="Undresser.AI Undress" /> </a> <div class="phpmain_tab2_mids_info"> <a href="https://www.php.cn/ja/ai/undresserai-undress" title="Undresser.AI Undress" class="phpmain_tab2_mids_title"> <h3>Undresser.AI Undress</h3> </a> <p>リアルなヌード写真を作成する AI 搭載アプリ</p> </div> </div> <div class="phpmain_tab2_mids_top"> <a href="https://www.php.cn/ja/ai/ai-clothes-remover" title="AI Clothes Remover" class="phpmain_tab2_mids_top_img"> <img onerror="this.onerror=''; this.src='/static/imghw/default1.png'" onerror="this.onerror=''; this.src='/static/imghw/default1.png'" class="lazy" data-src="https://img.php.cn/upload/ai_manual/001/246/273/173411552797167.jpg?x-oss-process=image/resize,m_fill,h_50,w_50" src="/static/imghw/default1.png" alt="AI Clothes Remover" /> </a> <div class="phpmain_tab2_mids_info"> <a href="https://www.php.cn/ja/ai/ai-clothes-remover" title="AI Clothes Remover" class="phpmain_tab2_mids_title"> <h3>AI Clothes Remover</h3> </a> <p>写真から衣服を削除するオンライン AI ツール。</p> </div> </div> <div class="phpmain_tab2_mids_top"> <a href="https://www.php.cn/ja/ai/undress-ai-tool" title="Undress AI Tool" class="phpmain_tab2_mids_top_img"> <img onerror="this.onerror=''; this.src='/static/imghw/default1.png'" onerror="this.onerror=''; this.src='/static/imghw/default1.png'" class="lazy" data-src="https://img.php.cn/upload/ai_manual/001/246/273/173410641626608.jpg?x-oss-process=image/resize,m_fill,h_50,w_50" src="/static/imghw/default1.png" alt="Undress AI Tool" /> </a> <div class="phpmain_tab2_mids_info"> <a href="https://www.php.cn/ja/ai/undress-ai-tool" title="Undress AI Tool" class="phpmain_tab2_mids_title"> <h3>Undress AI Tool</h3> </a> <p>脱衣画像を無料で</p> </div> </div> <div class="phpmain_tab2_mids_top"> <a href="https://www.php.cn/ja/ai/clothoffio" title="Clothoff.io" class="phpmain_tab2_mids_top_img"> <img onerror="this.onerror=''; this.src='/static/imghw/default1.png'" onerror="this.onerror=''; this.src='/static/imghw/default1.png'" class="lazy" data-src="https://img.php.cn/upload/ai_manual/001/246/273/173411529149311.jpg?x-oss-process=image/resize,m_fill,h_50,w_50" src="/static/imghw/default1.png" alt="Clothoff.io" /> </a> <div class="phpmain_tab2_mids_info"> <a href="https://www.php.cn/ja/ai/clothoffio" title="Clothoff.io" class="phpmain_tab2_mids_title"> <h3>Clothoff.io</h3> </a> <p>AI衣類リムーバー</p> </div> </div> <div class="phpmain_tab2_mids_top"> <a href="https://www.php.cn/ja/ai/ai-hentai-generator" title="AI Hentai Generator" class="phpmain_tab2_mids_top_img"> <img onerror="this.onerror=''; this.src='/static/imghw/default1.png'" onerror="this.onerror=''; this.src='/static/imghw/default1.png'" class="lazy" data-src="https://img.php.cn/upload/ai_manual/001/246/273/173405034393877.jpg?x-oss-process=image/resize,m_fill,h_50,w_50" src="/static/imghw/default1.png" alt="AI Hentai Generator" /> </a> <div class="phpmain_tab2_mids_info"> <a href="https://www.php.cn/ja/ai/ai-hentai-generator" title="AI Hentai Generator" class="phpmain_tab2_mids_title"> <h3>AI Hentai Generator</h3> </a> <p>AIヘンタイを無料で生成します。</p> </div> </div> </div> <div class="phpgenera_Details_mainR3_more"> <a href="https://www.php.cn/ja/ai">もっと見る</a> </div> </div> </div> <script src="https://sw.php.cn/hezuo/cac1399ab368127f9b113b14eb3316d0.js" type="text/javascript"></script> <div class="phpgenera_Details_mainR4"> <div class="phpmain1_4R_readrank"> <div class="phpmain1_4R_readrank_top"> <img onerror="this.onerror=''; this.src='/static/imghw/default1.png'" onerror="this.onerror=''; this.src='/static/imghw/default1.png'" src="/static/imghw/hotarticle2.png" alt="" /> <h2>人気の記事</h2> </div> <div class="phpgenera_Details_mainR4_bottom"> <div class="phpgenera_Details_mainR4_bottoms"> <a href="https://www.php.cn/ja/faq/1796780570.html" title="R.E.P.O.説明されたエネルギー結晶と彼らが何をするか(黄色のクリスタル)" class="phpgenera_Details_mainR4_bottom_title">R.E.P.O.説明されたエネルギー結晶と彼らが何をするか(黄色のクリスタル)</a> <div class="phpgenera_Details_mainR4_bottoms_info"> <span>2週間前</span> <span>By 尊渡假赌尊渡假赌尊渡假赌</span> </div> </div> <div class="phpgenera_Details_mainR4_bottoms"> <a href="https://www.php.cn/ja/faq/1796773439.html" title="レポ:チームメイトを復活させる方法" class="phpgenera_Details_mainR4_bottom_title">レポ:チームメイトを復活させる方法</a> <div class="phpgenera_Details_mainR4_bottoms_info"> <span>4週間前</span> <span>By 尊渡假赌尊渡假赌尊渡假赌</span> </div> </div> <div class="phpgenera_Details_mainR4_bottoms"> <a href="https://www.php.cn/ja/faq/1796774171.html" title="ハローキティアイランドアドベンチャー:巨大な種を手に入れる方法" class="phpgenera_Details_mainR4_bottom_title">ハローキティアイランドアドベンチャー:巨大な種を手に入れる方法</a> <div class="phpgenera_Details_mainR4_bottoms_info"> <span>4週間前</span> <span>By 尊渡假赌尊渡假赌尊渡假赌</span> </div> </div> <div class="phpgenera_Details_mainR4_bottoms"> <a href="https://www.php.cn/ja/faq/1796775427.html" title="スプリットフィクションを打ち負かすのにどれくらい時間がかかりますか?" class="phpgenera_Details_mainR4_bottom_title">スプリットフィクションを打ち負かすのにどれくらい時間がかかりますか?</a> <div class="phpgenera_Details_mainR4_bottoms_info"> <span>3週間前</span> <span>By DDD</span> </div> </div> <div class="phpgenera_Details_mainR4_bottoms"> <a href="https://www.php.cn/ja/faq/1796775336.html" title="R.E.P.O.ファイルの保存場所:それはどこにあり、それを保護する方法は?" class="phpgenera_Details_mainR4_bottom_title">R.E.P.O.ファイルの保存場所:それはどこにあり、それを保護する方法は?</a> <div class="phpgenera_Details_mainR4_bottoms_info"> <span>3週間前</span> <span>By DDD</span> </div> </div> </div> <div class="phpgenera_Details_mainR3_more"> <a href="https://www.php.cn/ja/article.html">もっと見る</a> </div> </div> </div> <div class="phpgenera_Details_mainR3"> <div class="phpmain1_4R_readrank"> <div class="phpmain1_4R_readrank_top"> <img onerror="this.onerror=''; this.src='/static/imghw/default1.png'" onerror="this.onerror=''; this.src='/static/imghw/default1.png'" src="/static/imghw/hottools2.png" alt="" /> <h2>ホットツール</h2> </div> <div class="phpgenera_Details_mainR3_bottom"> <div class="phpmain_tab2_mids_top"> <a href="https://www.php.cn/ja/toolset/development-tools/92" title="メモ帳++7.3.1" class="phpmain_tab2_mids_top_img"> <img onerror="this.onerror=''; this.src='/static/imghw/default1.png'" onerror="this.onerror=''; this.src='/static/imghw/default1.png'" class="lazy" data-src="https://img.php.cn/upload/manual/000/000/001/58ab96f0f39f7357.jpg?x-oss-process=image/resize,m_fill,h_50,w_72" src="/static/imghw/default1.png" alt="メモ帳++7.3.1" /> </a> <div class="phpmain_tab2_mids_info"> <a href="https://www.php.cn/ja/toolset/development-tools/92" title="メモ帳++7.3.1" class="phpmain_tab2_mids_title"> <h3>メモ帳++7.3.1</h3> </a> <p>使いやすく無料のコードエディター</p> </div> </div> <div class="phpmain_tab2_mids_top"> <a href="https://www.php.cn/ja/toolset/development-tools/93" title="SublimeText3 中国語版" class="phpmain_tab2_mids_top_img"> <img onerror="this.onerror=''; this.src='/static/imghw/default1.png'" onerror="this.onerror=''; this.src='/static/imghw/default1.png'" class="lazy" data-src="https://img.php.cn/upload/manual/000/000/001/58ab97a3baad9677.jpg?x-oss-process=image/resize,m_fill,h_50,w_72" src="/static/imghw/default1.png" alt="SublimeText3 中国語版" /> </a> <div class="phpmain_tab2_mids_info"> <a href="https://www.php.cn/ja/toolset/development-tools/93" title="SublimeText3 中国語版" class="phpmain_tab2_mids_title"> <h3>SublimeText3 中国語版</h3> </a> <p>中国語版、とても使いやすい</p> </div> </div> <div class="phpmain_tab2_mids_top"> <a href="https://www.php.cn/ja/toolset/development-tools/121" title="ゼンドスタジオ 13.0.1" class="phpmain_tab2_mids_top_img"> <img onerror="this.onerror=''; this.src='/static/imghw/default1.png'" onerror="this.onerror=''; this.src='/static/imghw/default1.png'" class="lazy" data-src="https://img.php.cn/upload/manual/000/000/001/58ab97ecd1ab2670.jpg?x-oss-process=image/resize,m_fill,h_50,w_72" src="/static/imghw/default1.png" alt="ゼンドスタジオ 13.0.1" /> </a> <div class="phpmain_tab2_mids_info"> <a href="https://www.php.cn/ja/toolset/development-tools/121" title="ゼンドスタジオ 13.0.1" class="phpmain_tab2_mids_title"> <h3>ゼンドスタジオ 13.0.1</h3> </a> <p>強力な PHP 統合開発環境</p> </div> </div> <div class="phpmain_tab2_mids_top"> <a href="https://www.php.cn/ja/toolset/development-tools/469" title="ドリームウィーバー CS6" class="phpmain_tab2_mids_top_img"> <img onerror="this.onerror=''; this.src='/static/imghw/default1.png'" onerror="this.onerror=''; this.src='/static/imghw/default1.png'" class="lazy" data-src="https://img.php.cn/upload/manual/000/000/001/58d0e0fc74683535.jpg?x-oss-process=image/resize,m_fill,h_50,w_72" src="/static/imghw/default1.png" alt="ドリームウィーバー CS6" /> </a> <div class="phpmain_tab2_mids_info"> <a href="https://www.php.cn/ja/toolset/development-tools/469" title="ドリームウィーバー CS6" class="phpmain_tab2_mids_title"> <h3>ドリームウィーバー CS6</h3> </a> <p>ビジュアル Web 開発ツール</p> </div> </div> <div class="phpmain_tab2_mids_top"> <a href="https://www.php.cn/ja/toolset/development-tools/500" title="SublimeText3 Mac版" class="phpmain_tab2_mids_top_img"> <img onerror="this.onerror=''; this.src='/static/imghw/default1.png'" onerror="this.onerror=''; this.src='/static/imghw/default1.png'" class="lazy" data-src="https://img.php.cn/upload/manual/000/000/001/58d34035e2757995.png?x-oss-process=image/resize,m_fill,h_50,w_72" src="/static/imghw/default1.png" alt="SublimeText3 Mac版" /> </a> <div class="phpmain_tab2_mids_info"> <a href="https://www.php.cn/ja/toolset/development-tools/500" title="SublimeText3 Mac版" class="phpmain_tab2_mids_title"> <h3>SublimeText3 Mac版</h3> </a> <p>神レベルのコード編集ソフト(SublimeText3)</p> </div> </div> </div> <div class="phpgenera_Details_mainR3_more"> <a href="https://www.php.cn/ja/ai">もっと見る</a> </div> </div> </div> <div class="phpgenera_Details_mainR4"> <div class="phpmain1_4R_readrank"> <div class="phpmain1_4R_readrank_top"> <img onerror="this.onerror=''; this.src='/static/imghw/default1.png'" onerror="this.onerror=''; this.src='/static/imghw/default1.png'" src="/static/imghw/hotarticle2.png" alt="" /> <h2>ホットトピック</h2> </div> <div class="phpgenera_Details_mainR4_bottom"> <div class="phpgenera_Details_mainR4_bottoms"> <a href="https://www.php.cn/ja/faq/gmailyxdlrkzn" title="Gmailメールのログイン入り口はどこですか?" class="phpgenera_Details_mainR4_bottom_title">Gmailメールのログイン入り口はどこですか?</a> <div class="phpgenera_Details_mainR4_bottoms_info"> <div class="phpgenera_Details_mainR4_bottoms_infos"> <img src="/static/imghw/eyess.png" alt="" /> <span>7331</span> </div> <div class="phpgenera_Details_mainR4_bottoms_infos"> <img src="/static/imghw/tiezi.png" alt="" /> <span>9</span> </div> </div> </div> <div class="phpgenera_Details_mainR4_bottoms"> <a href="https://www.php.cn/ja/faq/java-tutorial" title="Java チュートリアル" class="phpgenera_Details_mainR4_bottom_title">Java チュートリアル</a> <div class="phpgenera_Details_mainR4_bottoms_info"> <div class="phpgenera_Details_mainR4_bottoms_infos"> <img src="/static/imghw/eyess.png" alt="" /> <span>1627</span> </div> <div class="phpgenera_Details_mainR4_bottoms_infos"> <img src="/static/imghw/tiezi.png" alt="" /> <span>14</span> </div> </div> </div> <div class="phpgenera_Details_mainR4_bottoms"> <a href="https://www.php.cn/ja/faq/cakephp-tutor" title="CakePHP チュートリアル" class="phpgenera_Details_mainR4_bottom_title">CakePHP チュートリアル</a> <div class="phpgenera_Details_mainR4_bottoms_info"> <div class="phpgenera_Details_mainR4_bottoms_infos"> <img src="/static/imghw/eyess.png" alt="" /> <span>1351</span> </div> <div class="phpgenera_Details_mainR4_bottoms_infos"> <img src="/static/imghw/tiezi.png" alt="" /> <span>46</span> </div> </div> </div> <div class="phpgenera_Details_mainR4_bottoms"> <a href="https://www.php.cn/ja/faq/laravel-tutori" title="Laravel チュートリアル" class="phpgenera_Details_mainR4_bottom_title">Laravel チュートリアル</a> <div class="phpgenera_Details_mainR4_bottoms_info"> <div class="phpgenera_Details_mainR4_bottoms_infos"> <img src="/static/imghw/eyess.png" alt="" /> <span>1262</span> </div> <div class="phpgenera_Details_mainR4_bottoms_infos"> <img src="/static/imghw/tiezi.png" alt="" /> <span>25</span> </div> </div> </div> <div class="phpgenera_Details_mainR4_bottoms"> <a href="https://www.php.cn/ja/faq/php-tutorial" title="PHP チュートリアル" class="phpgenera_Details_mainR4_bottom_title">PHP チュートリアル</a> <div class="phpgenera_Details_mainR4_bottoms_info"> <div class="phpgenera_Details_mainR4_bottoms_infos"> <img src="/static/imghw/eyess.png" alt="" /> <span>1209</span> </div> <div class="phpgenera_Details_mainR4_bottoms_infos"> <img src="/static/imghw/tiezi.png" alt="" /> <span>29</span> </div> </div> </div> </div> <div class="phpgenera_Details_mainR3_more"> <a href="https://www.php.cn/ja/faq/zt">もっと見る</a> </div> </div> </div> </div> </div> <div class="Article_Details_main2"> <div class="phpgenera_Details_mainL4"> <div class="phpmain1_2_top"> <a href="javascript:void(0);" class="phpmain1_2_top_title">Related knowledge<img src="/static/imghw/index2_title2.png" alt="" /></a> </div> <div class="phpgenera_Details_mainL4_info"> <div class="phphistorical_Version2_mids"> <a href="https://www.php.cn/ja/faq/766176.html" title="正規表現を使用してPHP配列から重複した値を削除します" class="phphistorical_Version2_mids_img"> <img onerror="this.onerror=''; this.src='/static/imghw/default1.png'" src="/static/imghw/default1.png" class="lazy" data-src="https://img.php.cn/upload/article/000/465/014/171412038849096.jpg?x-oss-process=image/resize,m_fill,h_207,w_330" alt="正規表現を使用してPHP配列から重複した値を削除します" /> </a> <a href="https://www.php.cn/ja/faq/766176.html" title="正規表現を使用してPHP配列から重複した値を削除します" class="phphistorical_Version2_mids_title">正規表現を使用してPHP配列から重複した値を削除します</a> <span class="Articlelist_txts_time">Apr 26, 2024 pm 04:33 PM</span> <p class="Articlelist_txts_p">正規表現を使用して PHP 配列から重複値を削除する方法: 正規表現 /(.*)(.+)/i を使用して、重複値を照合して置換します。配列要素を反復処理し、preg_match を使用して一致をチェックします。一致する場合は値をスキップし、一致しない場合は重複値のない新しい配列に追加します。</p> </div> <div class="phphistorical_Version2_mids"> <a href="https://www.php.cn/ja/faq/768423.html" title="プログラミングは何のためにあるのか、それを学ぶと何の役に立つのか?" class="phphistorical_Version2_mids_img"> <img onerror="this.onerror=''; this.src='/static/imghw/default1.png'" src="/static/imghw/default1.png" class="lazy" data-src="https://img.php.cn/upload/article/202404/28/2024042813340393503.jpg?x-oss-process=image/resize,m_fill,h_207,w_330" alt="プログラミングは何のためにあるのか、それを学ぶと何の役に立つのか?" /> </a> <a href="https://www.php.cn/ja/faq/768423.html" title="プログラミングは何のためにあるのか、それを学ぶと何の役に立つのか?" class="phphistorical_Version2_mids_title">プログラミングは何のためにあるのか、それを学ぶと何の役に立つのか?</a> <span class="Articlelist_txts_time">Apr 28, 2024 pm 01:34 PM</span> <p class="Articlelist_txts_p">1. プログラミングは、Web サイト、モバイル アプリケーション、ゲーム、データ分析ツールなど、さまざまなソフトウェアやアプリケーションの開発に使用できます。その応用分野は非常に幅広く、科学研究、医療、金融、教育、エンターテイメントなど、ほぼすべての業界をカバーしています。 2. プログラミングを学ぶことは、問題解決スキルと論理的思考スキルを向上させるのに役立ちます。プログラミング中、問題を分析して理解し、解決策を見つけてコードに変換する必要があります。この考え方は、分析能力と抽象能力を養い、実際的な問題を解決する能力を向上させることができます。</p> </div> <div class="phphistorical_Version2_mids"> <a href="https://www.php.cn/ja/faq/738905.html" title="Golang を使用してブラウザベースのアプリケーションを構築する" class="phphistorical_Version2_mids_img"> <img onerror="this.onerror=''; this.src='/static/imghw/default1.png'" src="/static/imghw/default1.png" class="lazy" data-src="https://img.php.cn/upload/article/000/887/227/171253944257388.jpg?x-oss-process=image/resize,m_fill,h_207,w_330" alt="Golang を使用してブラウザベースのアプリケーションを構築する" /> </a> <a href="https://www.php.cn/ja/faq/738905.html" title="Golang を使用してブラウザベースのアプリケーションを構築する" class="phphistorical_Version2_mids_title">Golang を使用してブラウザベースのアプリケーションを構築する</a> <span class="Articlelist_txts_time">Apr 08, 2024 am 09:24 AM</span> <p class="Articlelist_txts_p">Golang を使用してブラウザベースのアプリケーションを構築する Golang は JavaScript と組み合わせて、動的なフロントエンド エクスペリエンスを構築します。 Golang をインストールする: https://golang.org/doc/install にアクセスします。 Golang プロジェクトをセットアップします。 main.go というファイルを作成します。 GorillaWebToolkit の使用: HTTP リクエストを処理するための GorillaWebToolkit コードを追加します。 HTML テンプレートの作成: template サブディレクトリに、メイン テンプレートであるindex.html を作成します。</p> </div> <div class="phphistorical_Version2_mids"> <a href="https://www.php.cn/ja/faq/1796627539.html" title="コーディングの鍵: 初心者のための Python の力を解き放つ" class="phphistorical_Version2_mids_img"> <img onerror="this.onerror=''; this.src='/static/imghw/default1.png'" src="/static/imghw/default1.png" class="lazy" data-src="https://img.php.cn/upload/article/000/887/227/172862025183752.jpg?x-oss-process=image/resize,m_fill,h_207,w_330" alt="コーディングの鍵: 初心者のための Python の力を解き放つ" /> </a> <a href="https://www.php.cn/ja/faq/1796627539.html" title="コーディングの鍵: 初心者のための Python の力を解き放つ" class="phphistorical_Version2_mids_title">コーディングの鍵: 初心者のための Python の力を解き放つ</a> <span class="Articlelist_txts_time">Oct 11, 2024 pm 12:17 PM</span> <p class="Articlelist_txts_p">Python は、学習の容易さと強力な機能により、初心者にとって理想的なプログラミング入門言語です。その基本は次のとおりです。 変数: データ (数値、文字列、リストなど) を保存するために使用されます。データ型: 変数内のデータの型 (整数、浮動小数点など) を定義します。演算子: 数学的な演算と比較に使用されます。制御フロー: コード実行のフロー (条件文、ループ) を制御します。</p> </div> <div class="phphistorical_Version2_mids"> <a href="https://www.php.cn/ja/faq/1796627752.html" title="Java をシンプルに: プログラミング能力を高める初心者向けガイド" class="phphistorical_Version2_mids_img"> <img onerror="this.onerror=''; this.src='/static/imghw/default1.png'" src="/static/imghw/default1.png" class="lazy" data-src="https://img.php.cn/upload/article/000/465/014/172864265167787.jpg?x-oss-process=image/resize,m_fill,h_207,w_330" alt="Java をシンプルに: プログラミング能力を高める初心者向けガイド" /> </a> <a href="https://www.php.cn/ja/faq/1796627752.html" title="Java をシンプルに: プログラミング能力を高める初心者向けガイド" class="phphistorical_Version2_mids_title">Java をシンプルに: プログラミング能力を高める初心者向けガイド</a> <span class="Articlelist_txts_time">Oct 11, 2024 pm 06:30 PM</span> <p class="Articlelist_txts_p">Java をシンプルに: プログラミング能力の初心者向けガイド はじめに Java は、モバイル アプリケーションからエンタープライズ レベルのシステムに至るまで、あらゆるもので使用される強力なプログラミング言語です。初心者にとって、Java の構文はシンプルで理解しやすいため、プログラミングの学習に最適です。基本構文 Java は、クラスベースのオブジェクト指向プログラミング パラダイムを使用します。クラスは、関連するデータと動作をまとめて編成するテンプレートです。簡単な Java クラスの例を次に示します。 publicclassperson{privateStringname;privateintage;</p> </div> <div class="phphistorical_Version2_mids"> <a href="https://www.php.cn/ja/faq/1796629481.html" title="未来を創る: まったくの初心者のための Java プログラミング" class="phphistorical_Version2_mids_img"> <img onerror="this.onerror=''; this.src='/static/imghw/default1.png'" src="/static/imghw/default1.png" class="lazy" data-src="https://img.php.cn/upload/article/000/465/014/172879754270834.jpg?x-oss-process=image/resize,m_fill,h_207,w_330" alt="未来を創る: まったくの初心者のための Java プログラミング" /> </a> <a href="https://www.php.cn/ja/faq/1796629481.html" title="未来を創る: まったくの初心者のための Java プログラミング" class="phphistorical_Version2_mids_title">未来を創る: まったくの初心者のための Java プログラミング</a> <span class="Articlelist_txts_time">Oct 13, 2024 pm 01:32 PM</span> <p class="Articlelist_txts_p">Java は、初心者と経験豊富な開発者の両方が学習できる人気のあるプログラミング言語です。このチュートリアルは基本的な概念から始まり、高度なトピックに進みます。 Java Development Kit をインストールしたら、簡単な「Hello, World!」プログラムを作成してプログラミングを練習できます。コードを理解したら、コマンド プロンプトを使用してプログラムをコンパイルして実行すると、コンソールに「Hello, World!」と出力されます。 Java の学習はプログラミングの旅の始まりであり、習熟が深まるにつれて、より複雑なアプリケーションを作成できるようになります。</p> </div> <div class="phphistorical_Version2_mids"> <a href="https://www.php.cn/ja/faq/1796627843.html" title="Python による問題解決: 初心者プログラマーとして強力なソリューションをアンロックする" class="phphistorical_Version2_mids_img"> <img onerror="this.onerror=''; this.src='/static/imghw/default1.png'" src="/static/imghw/default1.png" class="lazy" data-src="https://img.php.cn/upload/article/000/000/164/172865152123140.jpg?x-oss-process=image/resize,m_fill,h_207,w_330" alt="Python による問題解決: 初心者プログラマーとして強力なソリューションをアンロックする" /> </a> <a href="https://www.php.cn/ja/faq/1796627843.html" title="Python による問題解決: 初心者プログラマーとして強力なソリューションをアンロックする" class="phphistorical_Version2_mids_title">Python による問題解決: 初心者プログラマーとして強力なソリューションをアンロックする</a> <span class="Articlelist_txts_time">Oct 11, 2024 pm 08:58 PM</span> <p class="Articlelist_txts_p">Python は、問題解決の初心者に力を与えます。ユーザーフレンドリーな構文、広範なライブラリ、変数、条件文、ループによる効率的なコード開発などの機能を備えています。データの管理からプログラム フローの制御、反復的なタスクの実行まで、Python が提供します</p> </div> <div class="phphistorical_Version2_mids"> <a href="https://www.php.cn/ja/faq/1796627928.html" title="C の謎を解く: 新人プログラマーのための明確でシンプルな道" class="phphistorical_Version2_mids_img"> <img onerror="this.onerror=''; this.src='/static/imghw/default1.png'" src="/static/imghw/default1.png" class="lazy" data-src="https://img.php.cn/upload/article/000/887/227/172865805114452.jpg?x-oss-process=image/resize,m_fill,h_207,w_330" alt="C の謎を解く: 新人プログラマーのための明確でシンプルな道" /> </a> <a href="https://www.php.cn/ja/faq/1796627928.html" title="C の謎を解く: 新人プログラマーのための明確でシンプルな道" class="phphistorical_Version2_mids_title">C の謎を解く: 新人プログラマーのための明確でシンプルな道</a> <span class="Articlelist_txts_time">Oct 11, 2024 pm 10:47 PM</span> <p class="Articlelist_txts_p">C は、初心者がシステム プログラミングを学習するのに最適な選択肢です。ヘッダー ファイル、関数、メイン関数のコンポーネントが含まれています。 「HelloWorld」を印刷できる単純な C プログラムには、標準入出力関数宣言を含むヘッダー ファイルが必要で、main 関数で printf 関数を使用して印刷します。 C プログラムは、GCC コンパイラーを使用してコンパイルして実行できます。基本をマスターしたら、データ型、関数、配列、ファイル処理などのトピックに進み、熟練した C プログラマーになることができます。</p> </div> </div> <a href="https://www.php.cn/ja/web-designer.html" class="phpgenera_Details_mainL4_botton"> <span>See all articles</span> <img src="/static/imghw/down_right.png" alt="" /> </a> </div> </div> </div> </main> <footer> <div class="footer"> <div class="footertop"> <img src="/static/imghw/logo.png" alt=""> <p>福祉オンライン PHP トレーニング,PHP 学習者の迅速な成長を支援します!</p> </div> <div class="footermid"> <a href="https://www.php.cn/ja/about/us.html">私たちについて</a> <a href="https://www.php.cn/ja/about/disclaimer.html">免責事項</a> <a href="https://www.php.cn/ja/update/article_0_1.html">Sitemap</a> </div> <div class="footerbottom"> <p> © php.cn All rights reserved </p> </div> </div> </footer> <input type="hidden" id="verifycode" value="/captcha.html"> <script>layui.use(['element', 'carousel'], function () {var element = layui.element;$ = layui.jquery;var carousel = layui.carousel;carousel.render({elem: '#test1', width: '100%', height: '330px', arrow: 'always'});$.getScript('/static/js/jquery.lazyload.min.js', function () {$("img").lazyload({placeholder: "/static/images/load.jpg", effect: "fadeIn", threshold: 200, skip_invisible: false});});});</script> <script src="/static/js/common_new.js"></script> <script type="text/javascript" src="/static/js/jquery.cookie.js?1743585191"></script> <script src="https://vdse.bdstatic.com//search-video.v1.min.js"></script> <link rel='stylesheet' id='_main-css' href='/static/css/viewer.min.css?2' type='text/css' media='all' /> <script type='text/javascript' src='/static/js/viewer.min.js?1'></script> <script type='text/javascript' src='/static/js/jquery-viewer.min.js'></script> <script type="text/javascript" src="/static/js/global.min.js?5.5.53"></script> <script> var _paq = window._paq = window._paq || []; /* tracker methods like "setCustomDimension" should be called before "trackPageView" */ _paq.push(['trackPageView']); _paq.push(['enableLinkTracking']); (function () { var u = "https://tongji.php.cn/"; _paq.push(['setTrackerUrl', u + 'matomo.php']); _paq.push(['setSiteId', '9']); var d = document, g = d.createElement('script'), s = d.getElementsByTagName('script')[0]; g.async = true; g.src = u + 'matomo.js'; s.parentNode.insertBefore(g, s); })(); </script> <script> // top layui.use(function () { var util = layui.util; util.fixbar({ on: { mouseenter: function (type) { layer.tips(type, this, { tips: 4, fixed: true, }); }, mouseleave: function (type) { layer.closeAll("tips"); }, }, }); }); document.addEventListener("DOMContentLoaded", (event) => { // 定义一个函数来处理滚动链接的点击事件 function setupScrollLink(scrollLinkId, targetElementId) { const scrollLink = document.getElementById(scrollLinkId); const targetElement = document.getElementById(targetElementId); if (scrollLink && targetElement) { scrollLink.addEventListener("click", (e) => { e.preventDefault(); // 阻止默认链接行为 targetElement.scrollIntoView({ behavior: "smooth" }); // 平滑滚动到目标元素 }); } else { console.warn( `Either scroll link with ID '${scrollLinkId}' or target element with ID '${targetElementId}' not found.` ); } } // 使用该函数设置多个滚动链接 setupScrollLink("Article_Details_main1L2s_1", "article_main_title1"); setupScrollLink("Article_Details_main1L2s_2", "article_main_title2"); setupScrollLink("Article_Details_main1L2s_3", "article_main_title3"); setupScrollLink("Article_Details_main1L2s_4", "article_main_title4"); setupScrollLink("Article_Details_main1L2s_5", "article_main_title5"); setupScrollLink("Article_Details_main1L2s_6", "article_main_title6"); // 可以继续添加更多的滚动链接设置 }); window.addEventListener("scroll", function () { var fixedElement = document.getElementById("Article_Details_main1Lmain"); var scrollTop = window.scrollY || document.documentElement.scrollTop; // 兼容不同浏览器 var clientHeight = window.innerHeight || document.documentElement.clientHeight; // 视口高度 var scrollHeight = document.documentElement.scrollHeight; // 页面总高度 // 计算距离底部的距离 var distanceToBottom = scrollHeight - scrollTop - clientHeight; // 当距离底部小于或等于300px时,取消固定定位 if (distanceToBottom <= 980) { fixedElement.classList.remove("Article_Details_main1Lmain"); fixedElement.classList.add("Article_Details_main1Lmain_relative"); } else { // 否则,保持固定定位 fixedElement.classList.remove("Article_Details_main1Lmain_relative"); fixedElement.classList.add("Article_Details_main1Lmain"); } }); </script> </body> </html>