カテゴリ: Javascript/Java

ページ: << 1 2 3 >>

Firefoxでのキー入力判定処理

パーマリンク 2009/05/29 23:01:48 著者: kumaold メール
カテゴリ: プログラミング, Javascript/Java

入力フォームでEnterキーを押すと検索ができるようにJavaScriptでキー入力判定するところでブラウザ間の仕様の違いにはまったのでメモ書き。


普通はIEでやるときは、inputタグに onKeyPress="keycheck();" とか書いて、JavaScript側でこんな感じでやればいいわけですが・・・

function keycheck() {
    if (event.keyCode == 13) {	// Enterキーが押されたとき
        search();
    }
}

これではFirefoxだとうまいこと動いてくれないんですよ。


どうも色々調べてみると、Firefoxではevent.keyCodeがないのと、Eventオブジェクトがグローバルでないため常に0が返ってきてしまうようです。

そこで、呼び出す側で onKeyPress="keycheck(event);" にした上で、

function keycheck(event) {
    // Enterキーが押されたとき
    if (event.keyCode == 13 || event.charCode == 13) {
        search();
    }
}

こうすることでFirefoxでも問題なく動作します。


改訂第4版 JavaScript ポケットリファレンス改訂第4版 JavaScript ポケットリファレンス
古籏 一浩
売り上げランキング : 3877
おすすめ平均

かんたんに表をソートできるJavaScript

パーマリンク 2009/04/16 23:34:00 著者: kumaold メール
カテゴリ: プログラミング, Javascript/Java

HTMLでテーブルで表示したときにかんたんにソートできるJavaScriptです。

使い方はいたって簡単。

まずはas day pass byの中のsorttableからsorttable.jsをダウンロードします。

あとは<head>内などでJavaScriptをインポートした上で、<table>のclass属性に"sortable"を付けるだけ。(sorttableでないので注意)


すると、それだけで下の表ように項目名をクリックするとソートしてくれます。

(強いて言えば項目が数字だけでないと文字列としてソートされるのが難点)

CPU名 周波数 FSB コア数 価格
XEON X7460 2660 MHz 1066 MHz 6 326,999円
XEON X5492 3400 MHz 1600 MHz 4 179,999円
Core i7 965 Extreme Edition 3200 MHz - 4 105,769円
Core 2 Quad Q9300 2500 MHz 1333 MHz 4 22,980円
Core 2 Duo E4700 2600 MHz 800 MHz 2 18,179円
Pentium Dual-Core E2160 1800 MHz 800 MHz 2 6,980円


参考記事 - ソートできる表を作成するjavascript「sorttable.js」

type="text/javascript">
type="text/javascript" src="http://pagead2.googlesyndication.com/pagead/show_ads.js">

JSPでデータベース

パーマリンク 2008/09/18 19:36:38 著者: kumaold メール
カテゴリ: 仕事, プログラミング, Javascript/Java

ここ数日間、苦労してJSPでデータベース操作はできないものかと調べてました。

なかなかネット上に新しい有効な方法が少なくて苦労しましたが、やっと簡単にDBに接続する方法を見つけました。


以前からJSPタグライブラリを使っているのでそれを前提として書きます。
(普通に書くと多分もう少し面倒になりそう)


まず、PostgreSQL用のJDBCドライバをダウンロード。

こちらのページの「JDBC4 Postgresql Driver, Version 8.3-603

これをJSTLなどと同様のディレクトリ(webapps/jsp/WEB-INF/lib)に置く。
ついでに「postgresql.jar」などとリネーム(しなくてもいい)

で、Tomcatを再起動。

service tomcat restart


これで下準備は完了。

肝心の処理内容のソースコードはこちら。

<%@ page contentType="text/html; charset=UTF-8" pageEncoding="utf-8" %>
<%@taglib prefix="c" uri="http://java.sun.com/jsp/jstl/core"%>
<%@taglib prefix="sql" uri="http://java.sun.com/jsp/jstl/sql"%>
<!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.01 Transitional//EN">
<html>
    <head>
    <meta http-equiv=content-type content="text/html; charset=UTF-8">
    <title>JSPデータベース@タグライブラリ</title>
</head>
<body>

<%-- PostgreSQLデータベースに接続 --%>
<sql:setDataSource
    var="db"
    url="jdbc:postgresql://localhost/DBname"
    user="user"
    password="pass"
    driver="org.postgresql.Driver"
/>

<%-- SQLクエリを発行 --%>
<sql:query var="bbs" dataSource="${db}">
    SELECT * FROM bbs;
</sql:query>

<table border="1" cellspacing="0">
    <tr>
        <th>投稿ID</th><th>投稿者</th><th>投稿内容</th>
    </tr>
<c:forEach var="log" items="${bbs.rows}">
    <tr>
        <td>${log['id']}</td>
        <td>${log['name']}</td>
        <td>${log['post']}</td>
    </tr>
</c:forEach>
</table>

</body>
</html>


ここで全体の流れについて簡単な解説をしときます。
素のPHPでDBアクセスするときの流れにかなり近い感じです。


通常のcoreライブラリに加え、sqlタグライブラリをインクルード

<%@taglib prefix="sql" uri="http://java.sun.com/jsp/jstl/sql"%>


初期設定をし、取得したデータソースをdbオブジェクトに格納する。
url には、「jdbc:postgresql://localhost/」に続けてデータベース名と入力。

<sql:setDataSource
    var="db"
    url="jdbc:postgresql://localhost/DBname"
    user="user"
    password="pass"
    driver="org.postgresql.Driver"
/>


SQL文を実行し、結果をbbsオブジェクトに返す。
sql="SQL文"として<sql:query />タグ内に書いても良い。

<sql:query var="bbs" dataSource="${db}">
    SELECT * FROM bbs;
</sql:query>


オブジェクトbbsのrowsを参照することで、1レコードを取り出すことができる。

あとはデータが連想配列になっているので、PHP同様にデータが取り出せる。

<c:forEach var="log" items="${bbs.rows}">
・・・
</c:forEach>
type="text/javascript">
type="text/javascript" src="http://pagead2.googlesyndication.com/pagead/show_ads.js">

<< 1 2 3 >>

一六社で働くITエンジニアのブログ。

普段はWeb系システム開発と地元のPCサポートをやってます。いつの間にやら会社に8年目。
技術ネタ中心に日々の仕事と生活と趣味やらを気が向いたら書いてます。

2017年3月
 << <   > >>
      1 2 3 4
5 6 7 8 9 10 11
12 13 14 15 16 17 18
19 20 21 22 23 24 25
26 27 28 29 30 31  

検索

XMLフィード

16ブログ     powered by b2evolution free blog software