約 2,903,061 件
https://w.atwiki.jp/api_programming/pages/95.html
下位ページ Content 読み込み時の参考サイト 折りたたみ、表示・非表示の切り替えslideUp(),slideDown()を用いる (jQuery) collapsible(jQuery mobile) visiblity, display none (CSS) 画面のスクロールanimate(...) (jQuery) 読み込み時の参考サイト jQuery日本語リファレンス jQuery入門道場 折りたたみ、表示・非表示の切り替え slideUp(),slideDown()を用いる (jQuery) http //semooh.jp/jquery/api/effects/slideUp/%5Bspeed%5D%2C+%5Bcallback%5D/ collapsible(jQuery mobile) https //api.jquerymobile.com/collapsible/ visiblity, display none (CSS) visibility - MDN display - https //developer.mozilla.org/ja/docs/Web/CSS/display 画面のスクロール animate(...) (jQuery) Javascript/jQuery/表示 http //www.hp-stylelink.com/news/2014/01/20140110.php
https://w.atwiki.jp/cod4mod/pages/131.html
html2プラグインエラー このプラグインを使うにはこのページの編集権限を「管理者のみ」に設定してください。 It is JavaScript which imitated the effect of familiarity. Arbitrary character strings can be displayed. How to use Please write the following code to HTML. script language="JavaScript" src="http //www13.atwiki.jp/cod4mod/pub/effect1.js" /script div id="net_codmod_effect1" style="visibility hidden" Write a strings here. br/ Only a br tag can be included. /div script language="JavaScript" net_codmod_effect1_exec("net_codmod_effect1",3000,-1,1000); /script Any tags other than br/ cannot be included in strings. Please specify a font etc. by a style property or CSS. The monospaced font containing a Greek character is recommended. How to use #2 Since InnerHTML is rewritten an early periodicity, it may become slow if it embeds to a complicated page. In that case, please prepare simple HTML containing the above-mentioned code, indicate by an in-line frame, and avoid. Example a) Simple HTML for an in-line frame (inline.html) html head meta HTTP-EQUIV="Content-Type" CONTENT="text/html; charset=UTF-8"/ meta HTTP-EQUIV="Content-Script-Type" CONTENT="text/javascript"/ script language="JavaScript" src="http //www13.atwiki.jp/cod4mod/pub/effect1.js" /script /head body div id="net_codmod_effect1" style="visibility hidden" Test /div script language="JavaScript" net_codmod_effect1_exec("net_codmod_effect1",3000,-1,1000); /script /body /html b) Main HTML (Part; A code for inline.html to be included) iframe src="./inline.html" scrolling="no" frameborder="0" /iframe Option An argument is specified and an operation can be changed. net_codmod_effect1_exec(id, time, repeat, delay) id It is id of the tag containing strings. time It is display time (ms). It will not disappear, if 0 is specified. repeat It is a numbers of times of a repetition of a display. If 1 is specified, it will repeat infinitely. In the case of time=0, it is not meaningful. delay It is the latency time to a display (ms). Download If you would like to put JavaScript on your site directly, please download from here. Effect1.js Confirmed browser IE6, IE7, FireFox2, Opera9 and Safari3 (WindowsXP SP2) (This article was created using translation software. Please pardon what it is hard to read.) 名前 すべて読む
https://w.atwiki.jp/api_programming/pages/266.html
下位ページ Content 関数の定義function文による定義 デフォルト引数の設定 引数は参照渡しか値渡しか? 関数の定義 http //www.atmarkit.co.jp/ait/articles/0707/10/news124.html] function文による定義 Functionコンストラクタによる定義 関数リテラルによる定義 function文による定義 function 関数名([引数1 [, 引数2 [, ……]]) { [関数内で実行される任意の命令……] } デフォルト引数の設定 = で事前設定しておくと、デフォルト扱いになる。 function testfunc(a, b = null) もし function testfunc(a = null, b) で、引数 testfunc(1) にしたら、a = 1, b = undefined になる。 デフォルト引数 - MDN Web Docs 20200426 引数は参照渡しか値渡しか? オブジェクト、配列は参照渡し 数、文字列は値渡し http //so-zou.jp/web-app/tech/programming/javascript/grammar/function/#no13
https://w.atwiki.jp/cod4mod/pages/130.html
html2プラグインエラー このプラグインを使うにはこのページの編集権限を「管理者のみ」に設定してください。 お馴染みのエフェクトを模したJavaScriptです。 任意の文字列を表示させることができます。 使用方法 使用するには次のコードをHTMLに埋め込んでください。 script language="JavaScript" src="http //www13.atwiki.jp/cod4mod/pub/effect1.js" /script div id="net_codmod_effect1" style="visibility hidden" ここに文字列を書いてください br/ 改行タグのみ含むことができます /div script language="JavaScript" net_codmod_effect1_exec("net_codmod_effect1",3000,-1,1000); /script 表示文字列に改行( br/ )以外のタグを含めることはできません(トップページのニュースではアンカータグが使われていますが、あれはゲームへの忠実度を犠牲にした特殊仕様です)。 フォント等はstyle属性やCSSで適宜指定してください。推奨はギリシャ文字を含む等幅フォントです。 使用方法2 早い周期でInnerHTMLを書き換えるため、複雑なページに埋め込むと重くなることがあります。その場合は上記コードを含む単純なHTMLを用意し、そのHTMLをインラインフレーム表示して回避してください。ちなみにこのページもその方法で表示しています。 例: a) インライン表示用HTML(inline.html) html head meta HTTP-EQUIV="Content-Type" CONTENT="text/html; charset=UTF-8"/ meta HTTP-EQUIV="Content-Script-Type" CONTENT="text/javascript"/ script language="JavaScript" src="http //www13.atwiki.jp/cod4mod/pub/effect1.js" /script /head body div id="net_codmod_effect1" style="visibility hidden" Test /div script language="JavaScript" net_codmod_effect1_exec("net_codmod_effect1",3000,-1,1000); /script /body /html b) メインHTML(インラインフレーム表示コード) iframe src="./inline.html" scrolling="no" frameborder="0" /iframe オプション スクリプトの引数を指定して動作を変更できます。 net_codmod_effect1_exec(id, time, repeat, delay) id 表示文字列を含むタグのidです。 time 文字列の表示時間(ms)です。0を指定すると消えなくなります。 repeat 表示の繰り返し回数です。-1を指定すると無限に繰り返します。time=0の場合は意味がありません。 delay 表示開始までの待ち時間(ms)です。 ダウンロード JavaScriptを直接ご自分のサイトに置きたい方はこちらからダウンロードしてください。 Effect1.js 動作確認済ブラウザ IE6, IE7, FireFox2, Opera9, Safari3 (WindowsXP SP2) 名前 すべて読む
https://w.atwiki.jp/oreference/pages/15.html
Javascriptのリファレンスです。 表記の仕方は絶賛悩み中。 候補としては 初出 実際のソースコード どういう時に使うのか? 使い方の例 分類 splice ex) function.splice(x, y) setTimeout(function, 時間) clearTimeout(ID) document.getElementById( ID ).innerHTML = "" alert( ) console.log(X) .disabled 【世界時計】 var time = document.getElementById(‘time’) time.innerHTML = ‘ という超有名コンボ getDay() は日曜0 土曜6 とした数字を返してくれる setTimeout(関数, 待機時間) 関数 を 待機時間ごとに繰り返す 時間を二桁表示にする方法 取得した時間(hour min sec)が10未満だったら hour = “0” + hour; みたいにすればおk if文内の処理が1行で終わるときは{}なくてもおk selectタグ と option select id=“ID” option value=“値” ラベル1 →ラベルのところが実際に表示されるところ selectでデフォルト表示にするには selected 時差をうまくやる Tokyoを奇人として、ずらす ↓ここは理解できてないと思う selected indexでselectで選ばれているやつになる select要素にアクセスして、そのラベルもとってくる var cityElement = document.getElementById("city"); var index = cityElement.selectedIndex; var timeZone = cityElement.options[index].value;→cityElementつまり、id=“city”の中のoptionの中の[index]の値 getTime()とかは全てミリ秒なので気をつける 【為替計算】 ◯formタグがよくわかんねい ◯inputタグ type=“number” step=“0.1” 0.1刻みにできるってこと value=“” デフォルトで表示されるやつ size=“” フォントサイズかな input type=“number” id=“ID” value=“初期値” min=“最小値 max=“最大値” step=“刻み幅” ◯button valueはラベルとなる属性 ◯関数と引数 引数の可能性を感じたがやっぱりよくわからない ◯引数の設定は “” じゃなくて ‘ ◯「ドルから円に両替」ボタンを押すと onclick="exchange(‘toYen’)” 関数exchangeに引数toYenをもたせているってこと で、関数exchange(exchangeType)としていることによって 引数をもたせている。 で、その後のif文で 引数が toYen のとき にしている。 ※なんかうまく説明が書けないな。。。。 ◯画像の差し替え 選択した国によって画像がかわる方法 まず、デフォルト画像に name=“ID” という属性を加える で、変えたいときは document.ID.src = “画像URL”; function imgChange() { var imgArray = ["a.jpg","b.jpg","c.jpg", "d.jpg","e.jpg"]; var cnt = Math.floor(Math.random() * imgArray.length); document.SP.src = imgArray[cnt]; } 【スライドショー】 border solid #999999 1px; これでグレーの囲いがつけられる 透明度は opacity クラスは複数設定可能 div class=“thumb select” ◯アルゴリズムとか 配列に画像を5枚格納 サムネをクリックした時に関数発動 そのときに引数をつけている、つまり、 showImage(0)であれば showimage(imageNo)という定義なので、 imageNo = 0 という状態で以降の処理が進むというわけ で、 document.getElementById(“main”).src = imageArray[imageNo]; によって、mainのDOM要素のsrcプロパティとしてアクセスして、それをクリックした画像と切り替える で、 thumbImages = document.getElementByClassName(“thumb”) で、クラスthumbの全ての画像要素を取得して、 まずはselectクラスを消し去る このときに、for文によって、すべてのサムネのselectを消し去る thumbImage[i].classList.remove(“select”). DOM要素.classLIst.remove(取り除くクラス名) for文では、i thumbImges.lengthを使うといいよね DOM要素.classLIst.add(追加クラス名) ◯buttonタグ input type=“button” もあるけど button /button もある。 ラベルを自由に記述できるので、ラベルを画像にしたりできるというわけです。 ◯タイマースタートとタイマーの停止 setTimeout と clearTimeout setInterval と clearInterval →違いは今のところ分からないが、どっちでもできる !!!!!!!!!!!なんか動かないので、続きはそこから!!!!!! バグが分かんなかったから、コピペした! ◯ audio タグ audio src=“音楽ファイル” controls autoplay loop /audio controls 再生 一時停止 ボリュームとかを操作できるコントロールバーが追加される autoplay ページを開くと勝手に再生 loop 繰り返し再生 ◯audioで全てのブラウザに対応させる方法 source タグで複数のファイル形式を記述する ◯BGMの再生 再生 → 要素.play() 一時停止 → 要素.pause() 停止 → 要素.load() ◯input type=“range” input type=“range” id=“ID” value=“初期値” min=“最小値” max=“最大値” step=“間隔” ◯ボタンを押せないようにする 要素.disabled = true; → 押せない 要素.disabled = false; → できる このへんでもぐらたたきつくってた 【らくがき帳】 ◯canvasタグ canvas id=“ID” width=“” height=“” /canvas 透明なキャンパスが生成される ◯キャンパスの取得とコンテキストの取得 これは決まり文句!! canvasタグにIDをふっておいて var canvas = document.getElemntById(‘main’); var coctext = .getContext(“2d”); ◯線の色 コンテキスト.strokeStyle = 色 ◯四角形の輪郭のみの描画 コンテキスト.strokeRect(x, y, w, h) →(左上頂点のx座標 左上頂点のy座標 四角形の幅 四角形の高さ ) ◯塗りつぶしの設定 コンテキスト.fillStyle = 色 ◯四角形の塗りつぶしの描画 コンテキスト.fillRect =(x,y,w,h) x y w h の引数は四角形の輪郭描画と同じ引数 つまり、左上頂点(x,y)に(w,h)の大きさの四角形塗りつぶし ◯キャンバス上の図形は パス と呼ばれる線の集合からなる strokeRectメソッド や fillRextメソッドは、パスを意識せずに四角形を描画できるが、基本的にキャンバス上の図形はパスを作成し、そのパスを描画するという手順になる。 パスの作成 コンテキスト.beginPath(); 始点の移動 コンテキスト.moveTo(x, y) キャンバス上の座標(x,y)が始点 線の作成 コンテキスト.lineTo(x, y) 現在の座標から指定の座標まで線(=パス)が惹かれ、指定の 座標に移動。 →つまり、このときの指定の座標が次状態での始点ということ ※ここまではパスを作成しただけで、描画はされていない! パスの描画 コンテキスト.stroke() 線の色はstrokeStyleプロパティで指定した色になる ◯パスを閉じる → 最後の座標と最初の座標を結ぶ コンテキスト.closePath() ◯円の描画 コンテキスト.arc(x, y, radius startAngle, endAngle, anticlockwise) 円の中心座標(x,y) 円の半径 開始角度 終了角度 描画方向 trueは反時計回り falseは時計回り ◯マウス関連のイベント onMouseDown マウスボタンが押されたら onMouseMove マウスボタン移動したら onMouseUp マウスボタンが離されたら 引数の event はeventオブジェクトと呼ばれ、イベントが発生した時のマウスカーソルの位置やイベントの種類などが格納されている ◯event.clientX →ブラウザ上のX座標 ◯canvasのときのお約束 キャンバスの取得とコンテキストの取得 var canvas = document.getElementById(“main”); var context = canvas.getContext(“2d”) ◯書いた絵を別ウィンドウで表示 新しいウィンドウをを開いて、直接HTMLタグをぶちこむ function showImage() { var canvas = document.getElementById("main"); var imageWin = window.open("", "”); //新しいウィンドウを開く imageWin.document.open(); imageWin.document.write( html ); imageWin.document.write( head title Draw /title /head ); imageWin.document.write( body ); imageWin.document.write( img src=" + canvas.toDataURL() + " ); imageWin.document.write( /body /html ); imageWin.document.close(); } ◯キャンバスのデータをURLデータとして生成 キャンバス.toDataURL(); 【付箋アプリ】 ◯ドラッグドロップ関係 draggable属性→ドラッグを許可するかどうか onDragStartイベント→ドラッグを開始した時に発生するイベント ◯DataTransferというインタフェース ドラッグ時にはsetDataメソッドを使って渡したいデータを格納 setData(データ型, データ) →setData(データ型)で取り出せる event.preventDefault(); →通常のドラッグ操作(範囲指定など)を禁止する ◯placeholder属性 →入力フォームの説明文。ここになんとかを入力してください。みたいな。 →入力フォームに何も入力されていない時に指定された文をグレーで表示する。 ◯radioボタンのchecked属性 ◯radioボタンが選択されているかどうかは、ボタンのDOM要素アクセスして、checked属性がtrueかどうか調べればよい ◯DOM要素の作成 document.crateElement(タグ) ◯DOM要素の子要素を追加 親要素.appendchild(追加する子要素) ◯オブジェクト指向とは 情報 と 操作 をまとめて、ひとつのもの(=オブジェクト)として考えるプログラミング手法。 JSでは 情報 を格納する変数を プロパティ と呼び、 動作する関数 を メソッド と呼ぶ。また、プロパティ と メソッド をまとめて定義したものを クラス と呼ぶ。 付箋紙の持つ情報と操作は次のようになる 情報(=プロパティ) ID 付箋紙に表示するテキスト 付箋紙の色 配置座標(x,y) 動作(=メソッド) DOM要素を作成する 移動する。 ◯プロトタイプとかクラスとコンストラクタとかぜんぜんわかんなーい
https://w.atwiki.jp/xxxstfxxx/pages/102.html
JavaScriptでデータの圧縮・解凍 はじめに 必要ライブラリ 圧縮 解凍 参考リンク はじめに データを少なくするには、どうすればいいか・・・。 多分、これよりも良い方法があると思いますが。 とりあえず、満足。当たり前ですが、データ数少ないと逆効果です。 下記のページからライブラリを頂戴しました。 高度な JavaScript 技集 必要ライブラリ script type="text/javascript" src="./js/libs/base64.js" /script script type="text/javascript" src="./js/libs/inflate.js" /script script type="text/javascript" src="./js/libs/deflate.js" /script script type="text/javascript" src="./js/libs/utf.js" /script 圧縮 ○○○ = base64encode(zip_deflate(utf16to8( "●●●" ))); 解凍 ●●● = utf8to16(zip_inflate(base64decode( "○○○" ))); 参考リンク 高度な JavaScript 技集 タグ: 最終更新:0000年00月00日00時00分00秒.. 上へ https //www14.atwiki.jp/xxxstfxxx/ 編集権: 合計: - 今日: - 昨日: - トップページの合計: - 関連してるかもニュース GitHub、「GitHub Universe」での発表内容を解説 開発プロセス全体の生産性を引き上げる多数の新機能を提供(Impress Watch) - Yahoo!ニュース - Yahoo!ニュース JetBrains、リモート開発機能と軽量IDE「Fleet」を発表(ZDNet Japan) - Yahoo!ニュース - Yahoo!ニュース TypeScriptを効率的に独習しよう! 無料で学べる「TypeScript Deep Dive」日本語版の翻訳者が学習法を解説 - CodeZine(コードジン) トップエンジニア学生に聞いた好きなプログラミング言語TOP3、3位Ruby、2位JavaScript、1位は?| - @DIME 元SEのぷよぷよプロ選手が夢をサポート! 福岡の高校でプログラミングの出張授業(GAMEクロス) - Yahoo!ニュース - Yahoo!ニュース コロナ禍後、オフィスに戻る開発者は大幅に減少?--GitHub「Octoverse」レポート(ZDNet Japan) - Yahoo!ニュース - Yahoo!ニュース 「ぷよぷよ」と青森りんごがコラボ! プログラミング教材を使ったりんごゲームがSNSで話題に(GAMEクロス) - Yahoo!ニュース - Yahoo!ニュース プログラミング言語「TypeScript 4.5」をMicrosoftが公開:機能を大幅に拡充 - @IT - ITmedia 最も需要がある技術職はバックエンド開発者--2022年の雇用市場(ZDNet Japan) - Yahoo!ニュース - Yahoo!ニュース 懐かしのRPGをJavaScriptで手軽に作れる! ゲーム好きの心をつかむ「ハックフォープレイ」(Impress Watch) - Yahoo!ニュース - Yahoo!ニュース Microsoft、Edgeのセキュリティを固める「Super Duper Secure Mode」を最新安定版に導入(ITmedia PC USER) - Yahoo!ニュース - Yahoo!ニュース Webブラウザで使えるVisual Studio Code「OpenVSCode Server」(TechTargetジャパン) - Yahoo!ニュース - Yahoo!ニュース JavaScriptにはないTypeScript独自の型あれこれ - ITmedia
https://w.atwiki.jp/saicron/pages/80.html
Programming Language/JavaScript/DOM/JavaScript DOM Contents Programming Language/JavaScript/DOM/JavaScript DOMContents Tutorial Tutorial JavaScript DOMプログラミング - WIKIBOOKS Traversing an HTML table with JavaScript and DOM Interfaces - MDN page top
https://w.atwiki.jp/sevenlives/pages/2594.html
V8 SpiderMonkey JavaScriptCore JScript Charakan?
https://w.atwiki.jp/m_shige1979/pages/1013.html
記述サンプル body タグ内に記述 hoge1.html !DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http //www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd" html xmlns="http //www.w3.org/1999/xhtml" head meta http-equiv="Content-Type" content="text/html; charset=UTF-8" / title テストサイト /title /head body script type="text/javascript" !-- document.write("Hello World"); // -- /script /body head タグ内に記述 hoge2.html !DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http //www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd" html xmlns="http //www.w3.org/1999/xhtml" head meta http-equiv="Content-Type" content="text/html; charset=UTF-8" / title テストサイト /title script type="text/javascript" !-- document.write("Hello World2"); // -- /script /head body /body head タグ内の外部ファイルを定義 hoge3.html !DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http //www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd" html xmlns="http //www.w3.org/1999/xhtml" head meta http-equiv="Content-Type" content="text/html; charset=UTF-8" / title テストサイト /title script type="text/javascript" src="./js_test3.js" /script /head body /body js_test3.js document.write("Hello World3");
https://w.atwiki.jp/kodan/pages/70.html
JavaScriptでHTMLのInputタグを使わずにPOST送信する必要があった。 script type=“text/javascript” function submitForm( value ){ var form = document.createElement( ‘form’ ); document.body.appendChild( form ); var input = document.createElement( ‘input’ ); input.setAttribute( ‘type’ , ‘hidden’ ); input.setAttribute( ‘name’ , ‘myvalue’ ); input.setAttribute( ‘value’ , value ); form.appendChild( input ); form.setAttribute( ‘action’ , ‘example.php’ ); form.setAttribute( ‘method’ , ‘post’ ); form.submit(); } /script 参照URL