JavaScriptの「Form」オブジェクトと各「elements」の入力を取得する基本
書籍の中から有用な技術情報をピックアップして紹介する本シリーズ。今回は、秀和システム発行の書籍『JavaScript Web開発パーフェクトマスター（2015年6月27日発行）』からの抜粋です。 ご注意：本稿は、著者及び出版社の許可を得て、そのまま転載したものです。このため用字用語の統一ルールなどは＠ITのそれとは一致しません。あらかじめご了承ください。 これまでにHTMLのボタンやテキストフィールドを利用したプログラムを作成しましたが、これらの要素をひとまとめにして管理するHTML要素を「フォーム」と呼びます。フォームで入力された情報は、プログラムを使用してWebサーバーへ送信することができるので、アンケートや会員登録などのページで利用されています。 Point JavaScriptにおけるフォームの利用 HTMLのフォームは、form要素としてページ上に配置します。さらに<form>～
JavaScriptでonsubmitを使う方法を現役エンジニアが解説【初心者向け】
JavaScriptのonsubmitとは JavaScriptのonsubmitとは、送信ボタンが押された時に起動するイベントです。 formタグに、onsubmitを追加して起動する関数を指定することで送信前の内容のチェックや確認に使用することができます。preventDefault()と一緒に使用して、フォームの送信イベントをキャンセルするといった使い方もします。 onsubmitの使い方 onsubmitは、formタグにonsubmit属性を追加し使う関数を指定する、またはeventListenerでsubmitイベントを追加する、といった方法で使うことができます。 formタグにonsubmit属性を追加して行う場合は、以下のようにして行います。 <form onsubmit="check()"> <input type='submit' value="送信"> </form>
Cookieへの書き込みと読み出し(document.cookie)
Cookie はブラウザに保存される小さなテキストデータです。サーバからブラウザに送信されて保存されたり、逆にブラウザから保存していた Cookie をサーバに送ったりするものですが、 document オブジェクトの cookie プロパティを使用するとブラウザに保存されている Cookie を読み込んだり新しい値を Cookie に書き込むことができます。ここでは JavaScript を使って Cookie を保存したり、保存されている Cookie を読み込む方法について解説します。 Cookieの読み込みと書き込み Cookie とはブラウザに保存可能な短い文字列のデータです。 Web サーバにブラウザからアクセスしたときに、サーバ側からブラウザに Cookie のデータを送信して保存したり、ブラウザから Web サーバに対して保存していた Cookie を送信したりします。 w
JavaScript フォーム入力内容をクッキーに保存（document.cookie, escape, unescape）
<html> <head> <title>フォーム入力内容をクッキーに保存</title> <script language="JavaScript"> <!-- cookiename = "form"; // クッキー名 life = 30; // クッキーの保存日数 element = new Array("name", "mail"); // 保存するエレメント名 function getcookie() { // クッキー読み込み cookie = ""; cookie1 = document.cookie.split("; "); // "; "で分割 for(i = 0 ; i < cookie1.length ; i++) { cookie2 = cookie1[i].split("="); // "="で分割 if(cookie2[0] == cookiename) { c
変数の値が未定義値(undefined)か判定する
JavaScript では変数を宣言したあとで値を一度も格納していない場合は未定義値 undefined が格納されています。ここでは変数がまだ未定義で undefined が格納されているかどうかを判定する方法について解説します。
JavaScript によるコメントスパム対策
JavaScript によるコメントスパム対策 Permalink URL http://www.magicvox.net/archive/2005/05280030/ Posted by ぴろり Posted at 2005/05/28 00:30 Trackbacks 関連記事 (1) Comments コメント (1) Post Comment コメントできます Category SPAM Photo by AJC1 ブログを持つものとして、コメントスパム対策は避けられない道にあるようです。当サイトでは幸いなことに未だにその害を被ってはいませんが、先輩諸氏のブログは日々、スパマーとの激烈な戦い(?)を繰り広げられています。 現在、様々なコメントスパム対策が提案されていますが、これ一つで完璧と言える対策がないのが現状です。ブログ管理者は、これらの方法を上手く組み合わせることで、スパマー
ブラウザにデータを保存するlocalStorage（ローカルストレージ）の使い方
今回お届けするのは、「localStorage（ローカルストレージ）」について。 HTML5から導入されたAPI、Web Storageの一種で、その仕組みはcookieによく似ています。 Web Storageと一体どのような違いがあるのか、今回はその概要と使い方を見ていきましょう。 ブラウザにデータを保有してどうするの？ cookieもWeb Storageもクライアント側（ブラウザ）にデータを保有する機能ですが、なぜそのような仕組みが登場したのでしょうか？ その答えは、HTTPが「ステートレスな（=状態をもたない）プロトコル」であることに関連しています。少しだけおさらいしてみましょう。 HTTP通信は「リクエストを投げる→レスポンスを返す」の一往復のやりとりで完結します。 全通信のひとつひとつが全く別のリクエストとして扱われるため、例えば再訪問かどうかを判断することは不可能で、同じク
javascript 文字実体参照をそのままhtml上に表示する
文字実体参照をそのままhtml上に表示 文字実体参照（エンティティ参照）をそのままhtml上に表示するには、「textContent」を使用します。 <h1 id="bar"></h1> <script> 'use strict'; document.getElementById("hoge").textContent = '<>&"'' </script> 実行結果を確認すると、文字実体参照のまま表示されていることが確認できます。 「innerHTML」だと「特殊文字」のまま表示されます。 document.getElementById("hoge").innerHTML= '<>&"'' 実行結果 また、以下のコードを、 document.getElementById("hoge").textContent =
PSD.jsを使ってPhotoshopのレイヤー命名規則のチェックを行う | GREE Engineering
ごぶさたしております。ちょびえです。 最近はblender2.8のベータが出始めたのでモデリングやらレンダリングやって遊んでいます。 前々からZBrushやらhoudiniで遊んでましたが、ポリゴンフローの良し悪しとか言われてもよくわからん、という事でモデリングに手を出し始めたんですがやってみると楽しいですねぇ。 2.8ではレンダリングエンジンにEeveeが入ったのでわりとゲームに近い描画方法となってきていますし、デフォルトが黒系のテーマで見慣れた画面ですし、ポストエフェクトなどもつらつらいじって試せるので手つけておくのオススメですよ。 (近いといってもゲームのshadingの考えでnode組み立てられるか、というとそうではないので戸惑ったりもしますが) さて、今日はゲームのアセット制作をしていくと気になってくるPSDファイルの命名規則チェックについて書いてみようかと思います。 背景 ゲー
JavaScript入門 - とほほのWWW入門
JavaScript とは？ JavaScript と Java の関係は？ ECMAScript とは？ JavaScript のバージョン ES5 の新機能 ES5.1 の新機能 ES2015(ES6) の新機能 ES2016(ES7) の新機能 ES2017(ES8) の新機能 ES2018(ES9) の新機能 ES2019(ES10) の新機能 ES2020(ES11) の新機能 ES2021(ES12) の新機能 ES2022(ES13) の新機能 ES2023(ES14) の新機能 JavaScript とは？ Netscape Communications 社が開発したプログラミング言語です。1995年に同社の Netscape Navigator 2.0 で初めてサポートされ、Microsoft 社の Internet Explorer 3.0 でも同様の機能 JScrip
既存のウェブサイトに React を追加する – React
この記事は古くなっており、今後更新されません。新しい React 日本語ドキュメントである ja.react.dev をご利用ください。 React を追加するためのおすすめの方法については、既存プロジェクトに React を追加するを参照してください。 まずは必要なぶんだけ使ってみましょう。 React は当初から、段階的に導入することができるようにデザインされています。つまり最小限の部分で React を利用することも、あるいは大規模に React を利用することも可能です。既存のページにちょっとしたインタラクティブ性をもたせたいだけでも構いません。React コンポーネントを使えばお手の物です。 多くのウェブサイトはシングルページアプリケーションではありませんし、そうする必要もありません。まずはたった数行のコードから、あなたのウェブサイトに React を取り入れてみましょう。ビルド
jQuery 不要 Luminous Lightbox の使い方
ライトボックス Luminous Lightbox の使い方 Luminous はとても軽量でシンプルな jQuery に依存しない画像用ライトボックスプラグイン（JavaScript）です。 以下は Luminous Lightbox（v2.3.5/2021-08-03）の基本的な使い方や、ギャラリー表示やキャプションの表示方法、画像枚数と現在の画像位置（インデックス）の表示、webpack でのバンドル、WordPress で表示する方法などの解説（覚書）です。 Luminous Github：https://github.com/imgix/luminous ダウンロード https://github.com/imgix/luminous の右上の「Code」をクリックして「Download ZIP」をクリックするか、本文中（Installation > Manual） の Down
JavaScript Primer - 迷わないための入門書
文と式 本格的に基本文法について学ぶ前に、JavaScriptというプログラミング言語がどのような要素からできているかを見ていきましょう。 JavaScriptは、文（Statement）と式（Expression）から構成されています。 式 式（Expression）を簡潔に述べると、値を生成し、変数に代入できるものを言います。 42のようなリテラルやfooといった変数、関数呼び出しが式です。 また、1 + 1のような式と演算子の組み合わせも式と呼びます。 式の特徴として、式を評価すると結果の値を得ることができます。 この結果の値を評価値と呼びます。 評価した結果を変数に代入できるものは式であるという理解で問題ありません。 // 1という式の評価値を表示 console.log(1); // => 1 // 1 + 1という式の評価値を表示 console.log(1 + 1); //
【JavaScript】return falseの意味について総まとめ。コード付で解説 ｜ 25歳でフリーランス28歳で起業したエンジニア -じゃけぇ- のあれこれ
これをコードで見てみましょう。 親子関係にあるdiv要素があります。それぞれ色のついた部分をクリックしたらアラートがあがるようにしています。 子要素(青い部分)をクリックすると、バブリングにより親要素のクリックイベントも実行されることが確認できると思います。 このイベント伝播の制御に関わってくるのが return false preventDefault() stopPropagation() などになります。順番に見ていきましょう。 return falseを使ってイベント伝播を制御する では実際にreturn falseを使用して親へのイベント伝播を止めてみましょう。 ここで超重要なのは プレーンなJavaScriptとjQueryでreturn falseの挙動が異なる ということです。 先に結論から言うと、 となります。 実際にコードで見てみましょう。 jQueryでreturn
jQueryでページのトップへ戻る | 私的雑録
$(function () { $('a[href="#"]').click(function() { $('html,body').animate({ scrollTop: 0 }, 'fast'); // アニメーションなし // $('html,body').scrollTop(0); return false; }); }); scrollTop: 0で画面一番上へ移動。 scrollTop: 300で上から300pxの位置へ移動。 scrollTop: $(document).height()で画面一番下へ移動。 非jQuery版 window.addEventListener('load', function() { document.querySelector('a[href="#"]').addEventListener('click', function() { wind
リリース、障害情報などのサービスのお知らせ
最新の人気エントリーの配信
j次のブックマーク
k前のブックマーク
lあとで読む
eコメント一覧を開く
oページを開く
なぜJavascriptにビルドが必要？フロントエンド開発の知識をアップデートしよう
tagsqa.com
jQueryの$()は何をしているのか、DOMContentLoadedとloadの違い
送信ボタン連打対策。theme+NEO更新。 · satopian/poti-kaini@081c4d5
Canvasに画像が表示されません