Upgrade to Pro
— share decks privately, control downloads, hide ads and more …
Speaker Deck
Features
Speaker Deck
PRO
Sign in
Sign up for free
Search
Search
第08回Network講座2019
Search
北海道科学大学 電子計算機研究部
July 23, 2019
Education
0
49
第08回Network講座2019
北海道科学大学 電子計算機研究部
July 23, 2019
Tweet
Share
More Decks by 北海道科学大学 電子計算機研究部
See All by 北海道科学大学 電子計算機研究部
第12回Network講座2019
densan
1
56
第11回Network講座2019
densan
0
70
第10回Network講座2019
densan
0
46
第09回Network講座2019
densan
1
160
第07回Network講座2019
densan
0
46
第06回Network講座2019
densan
0
71
第05回Network講座2019
densan
0
51
第04回Network講座2019
densan
0
100
第03回Network講座2019
densan
0
39
Other Decks in Education
See All in Education
The Art of Note Taking
kanaya
1
140
SkimaTalk Teacher Guidelines
skimatalk
0
790k
2025/06/05_読み漁り学習
nag8
0
150
生成AIとの上手な付き合い方【公開版】/ How to Get Along Well with Generative AI (Public Version)
handlename
0
490
小さなチャレンジが生んだチームの大きな変化 -私のふりかえり探求の原点
callas1900
0
550
今も熱いもの!魂を揺さぶる戦士の儀式:マオリ族のハカ
shubox
0
210
OpenRobomaster 中国のロボットコンテスト 日本連携の可能性
takasumasakazu
0
450
Interaction - Lecture 10 - Information Visualisation (4019538FNR)
signer
PRO
0
2k
IMU-00 Pi
kanaya
0
370
Sponsor the Conference | VizChitra 2025
vizchitra
0
550
Linuxのよく使うコマンドを解説
mickey_kubo
1
150
技術文章を書くための執筆技術と実践法(パラグラフライティング)
hisashiishihara
18
6.5k
Featured
See All Featured
Fantastic passwords and where to find them - at NoRuKo
philnash
51
3.3k
Building a Modern Day E-commerce SEO Strategy
aleyda
42
7.4k
Embracing the Ebb and Flow
colly
86
4.7k
4 Signs Your Business is Dying
shpigford
184
22k
Why You Should Never Use an ORM
jnunemaker
PRO
58
9.4k
How GitHub (no longer) Works
holman
314
140k
Designing for Performance
lara
610
69k
CoffeeScript is Beautiful & I Never Want to Write Plain JavaScript Again
sstephenson
161
15k
[RailsConf 2023 Opening Keynote] The Magic of Rails
eileencodes
29
9.6k
Helping Users Find Their Own Way: Creating Modern Search Experiences
danielanewman
29
2.7k
JavaScript: Past, Present, and Future - NDC Porto 2020
reverentgeek
50
5.5k
Raft: Consensus for Rubyists
vanstee
140
7k
Transcript
ネットワークチーム 第8回 2019 北海道科学大学 電子計算機研究部
実践編 PW強度測定サービス
実践編 本日の目的 これまでの知識を生かして パスワードの強度を測定するサービスを 作ってみよう! 3
使うもの ⚫ zxcvbn Dropboxが提供している パスワードの強度を測定するための JavaScript ライブラリ ⚫ HTML・CSS・JS の知識
4
構成 5 タイトル フォーム 結果表示 ~~~~ ~~~~ Webページ index.html index.css
zxcvbn.js script.js
構成 6 要件定義 ⚫ 文字を入力する度に リアルタイムで結果を表示する ⚫ 結果は動的に生成する ⚫ ある程度の見栄えを確保する
制作
準備 zxcvbnの入手 1. https://github.com/dropbox/zxcvbn#manual- installation へ飛び、zxcvbn.jsを保存 8
準備 ファイルの作成 2. 以下のような階層でファイルを作成 pw -- index.html css -- index.css
js -- zxcvbn.js -- script.js 9
HTML HTMLを以下のように記述 10
HTMLの解説 22行目 onKeyUp=“check(this)” キーが上がったら つまり 文字が入力される度に 関数check()を呼び出す。 11
https://github.com/dropbox/zxcvbn#usage を読んでみる 12 zxcvbn(password, user_inputs=[]) zxcvbn() takes one required argument,
a password, and returns a result object with several properties:
コンソールでテスト HTMLをブラウザで開いて デベロッパーツールを起動 コンソールに以下を入力 13 let pw = zxcvbn("123456"); console.log(pw);
コンソールでテスト 方針 ⚫ zxcvbn() の引数にパスワードを入れる - フォームへの入力を取得する必要がある ⚫ 上記で得られたオブジェクトを格納する ⚫
オブジェクトのパラメーターを結果として表示する 14
スクリプトを作ろう script.js を以下のように記述 15
スクリプトを作ろう index.html をブラウザで開く 16
スタイルを作ろう index.cssを以下のように記述 17
スタイルを作ろう 完成 18
参考 ⚫ GitHub - dropbox/zxcvbn: Low-Budget Password Strength Estimation https://github.com/dropbox/zxcvbn
19
今回の講座はここまで お疲れ様でした