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回Web講座2018
Search
北海道科学大学 電子計算機研究部
August 03, 2018
Education
0
60
第08回Web講座2018
北海道科学大学 電子計算機研究部
August 03, 2018
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
第08回Network講座2019
densan
0
49
第07回Network講座2019
densan
0
46
第06回Network講座2019
densan
0
71
第05回Network講座2019
densan
0
51
第04回Network講座2019
densan
0
100
Other Decks in Education
See All in Education
Course Review - Lecture 12 - Next Generation User Interfaces (4018166FNR)
signer
PRO
0
1.8k
미국 교환학생 가서 무료 홈스테이 살면서 인턴 취업하기
maryang
0
110
AI for Learning
fonylew
0
160
Data Physicalisation - Lecture 9 - Next Generation User Interfaces (4018166FNR)
signer
PRO
0
460
2025年度春学期 統計学 第3回 クロス集計と感度・特異度,データの可視化 (2025. 4. 24)
akiraasano
PRO
0
200
サンキッズゾーン 春日井駅前 ご案内
sanyohomes
0
580
みんなのコード 2024年度活動報告書/ 2025年度活動計画書
codeforeveryone
0
190
実務プログラム
takenawa
0
10k
バックオフィス組織にも「チームトポロジー」の考えが使えるかもしれない!!
masakiokuda
0
110
令和政経義塾第2期説明会
nxji
0
120
American Airlines® USA Contact Numbers: The Ultimate 2025 Guide
lievliev
0
240
2025年度春学期 統計学 第13回 不確かな測定の不確かさを測る ー 不偏分散とt分布 (2025. 7. 3)
akiraasano
PRO
0
100
Featured
See All Featured
Designing for humans not robots
tammielis
253
25k
Principles of Awesome APIs and How to Build Them.
keavy
126
17k
It's Worth the Effort
3n
185
28k
Easily Structure & Communicate Ideas using Wireframe
afnizarnur
194
16k
Visualizing Your Data: Incorporating Mongo into Loggly Infrastructure
mongodb
47
9.6k
Understanding Cognitive Biases in Performance Measurement
bluesmoon
29
1.8k
Documentation Writing (for coders)
carmenintech
72
4.9k
Scaling GitHub
holman
461
140k
Into the Great Unknown - MozCon
thekraken
40
1.9k
Java REST API Framework Comparison - PWX 2021
mraible
31
8.7k
Build The Right Thing And Hit Your Dates
maggiecrowley
37
2.8k
How To Stay Up To Date on Web Technology
chriscoyier
790
250k
Transcript
ネットワークチーム 第8回 北海道科学大学 電子計算機研究部
お知らせ 部会でも言いましたが ネットチームでは毎年 夏休みの自由研究をやっています 夏休みに作りたいものを 考えてみてください 講座の最後に聞きます 2
実践編 PW強度測定サービス
実践編 本日の目的 これまでの知識を生かして パスワードの強度を測定するサービスを 作ってみよう! 4
使うもの ⚫ zxcvbn Dropboxが提供している パスワードの強度を測定するための JavaScript ライブラリ ⚫ HTML・CSS・JS の知識
5
構成 6 タイトル フォーム 結果表示 ~~~~ ~~~~ Webページ index.html index.css
zxcvbn.js script.js
構成 7 要件定義 ⚫ 文字を入力する度に リアルタイムで結果を表示する ⚫ 結果は動的に生成する ⚫ ある程度の見栄えを確保する
制作
準備 zxcvbnの入手 1. https://github.com/dropbox/zxcvbn#manual- installation へ飛び、zxcvbn.jsを保存 9
準備 ファイルの作成 2. 以下のような階層でファイルを作成 pw -- index.html css -- index.css
js -- zxcvbn.js -- script.js 10
HTML HTMLを以下のように記述 11
HTMLの解説 22行目 onKeyUp=“check(this)” キーが上がったら つまり 文字が入力される度に 関数check()を呼び出す。 12
https://github.com/dropbox/zxcvbn#usage を読んでみる 13 zxcvbn(password, user_inputs=[]) zxcvbn() takes one required argument,
a password, and returns a result object with several properties:
コンソールでテスト HTMLをブラウザで開いて デベロッパーツールを起動 コンソールに以下を入力 14 let pw = zxcvbn("123456"); console.log(pw);
コンソールでテスト 方針 ⚫ zxcvbn() の引数にパスワードを入れる - フォームへの入力を取得する必要がある ⚫ 上記で得られたオブジェクトを格納する ⚫
オブジェクトのパラメーターを結果として表示する 15
スクリプトを作ろう script.js を以下のように記述 16
スクリプトを作ろう index.html をブラウザで開く 17
スタイルを作ろう index.cssを以下のように記述 18
スタイルを作ろう 完成 19
参考 ⚫ GitHub - dropbox/zxcvbn: Low-Budget Password Strength Estimation https://github.com/dropbox/zxcvbn
20
前期の講座はここまで お疲れ様でした