[B! JavaScript] ynuk12のブックマーク

【★★★ - ｊＱｕｕｅｒｙ】 - クリックで開くアコーディオンメニュー

スマートフォンにも使える、クリックで開くアコーディオンメニューjQuery スマートフォン等、限られたスペースで複数のコンテンツを設置できるアコーディオンメニュー。シンプルなコードで動作しますので、実装してみてはいかがでしょうか。デモページ DEMO 説明今回は2種類のアコーディオンを紹介します。 1つは「ul」で組むリスト、もう1つは「dl」で組むリストです。なお、「ul」リストは複数開くことができ、「dl」リストは別のタブが閉まるようになっていますので使い分けて見て下さい。 JS $(function(){ $(".accordion p").click(function(){ $(this).next("ul").slideToggle(); $(this).children("span").toggleClass("open"); }); $(".accordion dt"

ynuk12 2019/04/24

リンク

finefinefine.jp

This domain may be for sale!

ynuk12 2019/04/11

リンク

【Javascript】テキストエリアに入力した文字数を数える at softelメモ

問題 Javascriptで、テキストエリアに入力した文字列の文字数を数えてください。答え demo source <textarea onkeyup="document.getElementById('xxxx').value=this.value.length"></textarea> テキストエリアの文字列の文字数は <input type="text" id="xxxx"> 文字です。単純に “文字列”.length で取得できる。全角文字も半角文字も改行もスペースも1文字としてカウントされる。サンプルではonkeyupで再計算している。関連記事【Javascript】テキストエリアに入力した文字列のバイト数を数える

ynuk12 2019/04/11

リンク

JavaScriptで作られたコンテンツはHTMLよりもGoogleの評価が低いのか？

[レベル: 初級] JavaScriptで生成されたコンテンツであっても、通常のHTMLで作られているコンテンツと同じようにGoogleは評価します。 JavaScriptだから評価が下がるということはありません。 JavaScriptを利用したコンテンツで重要なことは、Googlebotが正しくレンダリングできているかどうかです。 JavaScript と HTML の評価は同じ GoogleのJohn Mueller（ジョン・ミューラー）氏にTwitterでフォロワーが次のように質問しました。私のサイトのJavaScriptをGooglebotがクロールすることについて不安があります。JavaScriptによって作られた要素は、HTMLよりも重要度が下がることがありますか？ミューラー氏はこう答えます。いいや。JSで生成されたコンテンツは（私たちがレンダリング、インデックスできれば

ynuk12 2019/04/11

リンク

テキストボックスの操作－JavaScript入門

HOME JavaScript入門テキストボックスの操作ここから、フォームの情報をJavaScriptで取得したり、操作したりする方法について解説します。まずはテキストボックスの操作を考えます。テキストボックスを操作するコードまずはテキストボックスに入力された文字を取得したり、書き換えたりします。 HTMLのbody内に以下のように記入してみて下さい。 <form name="js"> お名前：<input type="text" name="txtb" value=""><br> <input type="button" value="歓迎１" onclick="tbox1()"><br> <input type="button" value="消去" onclick="clr()"><br> </form> <script> //テキストボックスの文字を取得する functi

ynuk12 2019/04/11

リンク

JavaScriptで指定文字を置換、削除する方法

2017/06/22 JavaScriptを使って、文字の一部を置換したり削除する方法を説明します。利用するメソッドはreplace()です。サンプルコード「う」を「く」に置換する例です。 var sourceStr = "ううううう" ; var a = sourceStr.replace( /う/g , "く" ) ;デモ置換 (文字列)「う」という文字を「く」に置換する例です。置換後の文字(「く」の部分)を空文字にすれば削除できます。 var sourceStr = "あいうえおあいうえお" ; var a = sourceStr.replace( /う/g , "く" ) ;

ynuk12 2019/04/11

リンク

JavaScriptで正規表現を使わずにグローバルな文字列置換

文字列置換のお話。通常、replace は１回しか置換してくれない。 >>> "aaaa".replace("a", "A") "Aaaa" 何度も置換させるには、正規表現を使うのが手っ取り早い。 >>> "aaaa".replace(/a/g, "A") "AAAA" 置換前の文字列を文字列で受け取ったときには、正規表現オブジェクトを作ればよい。RegExp コンストラクタの第二引数がフラグ。 function myReplaceGlobal(str, before, after){ var reg = new RegExp(before, "g"); return str.replace(reg, after); } myReplaceGlobal("aaaa", "a", "A"); // AAAA ただ、ドット(.)が任意の文字にマッチしてしまったりと、弊害もある。 myRepl

ynuk12 2019/04/11

リンク

HTMLページのチェックボックスがチェックされているか取得する (JavaScript プログラミング)

JavaScriptでチェックボックスがチェックされているか取得するコードを紹介します。概要 JavaScriptでチェックボックスがチェックされているか、チェックされていないかを確認したい場合があります。チェックボックスのチェック状態を取得するには、チェックボックスオブジェクトのcheckedプロパティの値を参照します。フォーム内のチェックボックスをname、idで指定して取得する場合書式: id属性で指定する場合チェックボックスのチェック状態をidで参照する場合は次の書式で記述します。コード以下のコードを記述します。 <!DOCTYPE html> <html xmlns="http://www.w3.org/1999/xhtml"> <head> <meta http-equiv="Content-Type" content="text/html; charset=ut

ynuk12 2019/04/11

javascript

リンク

チェックボックスに合わせてテキスト入力欄の有効・無効を切り替える方法 - JavaScript TIPSふぁくとりー

《2017年6月15日 12:30 PM 公開/更新》チェックボックスに合わせてテキスト入力欄の有効・無効を切り替える方法 [入力フォーム] チェックボックスと連動するテキスト入力欄があるフォームでは、チェックボックスにチェックが入っているときにだけ対応するテキスト入力欄を有効化(＝文字が入力できる状態)し、チェックが入っていない場合はテキスト入力欄を無効化(＝文字が入力できない状態)すると分かりやすくて便利です。JavaScriptを使って、条件に応じて対象テキスト入力欄のdisabledプロパティの値を変えるだけで、簡単に有効化・無効化を切り替えられます。チェックボックスに合わせてテキスト入力欄の有効・無効を切り替えると分かりやすくて便利チェックボックスのチェック状態と連動するテキストフォームを作るHTML＋JavaScriptソース有効化・無効化は、disabledプロパティ

ynuk12 2019/04/11

javascript

リンク

JavaScript,jQueryの爆速コーディング、デバッグ方法論の勧め～実践向け逆引き(windows,chrome向け)～ - Qiita

JavaScript,jQueryの爆速コーディング、デバッグ方法論の勧め～実践向け逆引き(windows,chrome向け)～JavaScriptjQuery ※2017/4/21にオンロード時のデバッグ方法8を追記しました！こんにちは！エイチーム引越し侍の加藤です！みなさんJavaScript書いてますか？ console.logめっちゃ使うよねーって人は目からうろこのデバッグ方法を、ケース毎に紹介していこうと思います。(僕はconsole.log使いません) サーバーにデバッグ用のコードをアップロードすること無いので、消さずに意図に反してリリースしてしまう危険性がないのもお勧めです。前提知識 F12で出てくるデベロッパーツール(Elements, Console, Source, Network)の知識 Ctrl+Shift+Fで外部ソース(js,css)に対して一括検索が

ynuk12 2019/04/11

リンク

【JavaScript SEO】サーバーサイドでレンダリングすべき要素: メインコンテンツ、構造化データ、titleタグ、hreflangほか

[レベル: 上級] DeepC rawl が主催したウェビナーで Google の Martin Splitt（マーティン・スプリット）氏が、JavaScript サイトの SEO に関するさまざまな質問に回答しました。このなかで、サーバーサイドでレンダリングすべき要素、言い換えると、JavaScript を介してレンダリングさせるべきではない要素をスプリット氏は挙げました。スプリット氏によると、SEO を考慮するのであれば、次の要素はサーバーサイドでレンダリングしてからクライアント（ユーザーと Googlebot）に配信したほうがいいとのことです。メインコンテンツ構造化データ title タグ meta description hreflang 日付に関する記述メインコンテンツは、ページの評価において最も重要です。現在の WRS（ウェブレンダリングサービス）が、古い Chr