undefined in startup

51
undefinedin.net 5/21/2015 wrote by ironiqu

Upload: ironiqu

Post on 17-Aug-2015

387 views

Category:

Technology


0 download

TRANSCRIPT

undefinedin.net5/21/2015 wrote by ironiqu

undefined in

この会では、 JavaScriptで主に言語そのものだけではなく

HTMLとの連携 (DOM)について学んでいく勉強会にしたいです

今日のアジェンダ

1.勉強会 :”undefined in”2.勉強会のスタートアップとして3.言語の紹介4.皆さんが思っていること5.私が思っていること6.やってみたいこと7.最後に

60分ほどおつきあいください

勉強会 :”undefined in”

undefined in?長い!読みづらい!

略して、 u/i(ゆーあい )とお呼びください

勉強会 :”undefined in”

”ところで undefined”をご存知ですか?

勉強会 :”undefined in”

“undefined”とは JavaScriptで、宣言されていない変数初期化されてない変数

日本語では、未定義と訳されます

勉強会 :”undefined in”

“undefined”は定義されていないと言いました

しかし、 JavaScriptでは“undefined”は定義されています

勉強会 :”undefined in”

“undefined”は未定義って言ったじゃん

勉強会 :”undefined in”

//variableという宣言されてない変数を出力console.log(variable); //undefined

勉強会 :”undefined in”

//undefinedを直接出力してみるconsole.log(undefined); //undefined

//もちろんが undefined出力される

勉強会 :”undefined in”

//undefinedの定義、存在は?

console.log(undefined in window); //true

勉強会 :”undefined in”

>>undefined in window

これは、 in演算子を使ってwindow変数に undefinedの存在を調べました

結果は真 (true)

勉強会 :”undefined in”

つまり、 undefinedはundefinedを定義していますけれど、 undefined(未定義 )

勉強会 :”undefined in”

この会では、知ってはいるけど足を踏み入れてない

わからない、勉強の仕方がわからない

そんな undefinedを勉強しましょうという会です

勉強会のスタートアップとして

今回は、皆さんの undefinedを絞り出し何を知りたいのか何を出来るようになりたいかそういうことを考えていきたいと思います

勉強会のスタートアップとして

何を知りたい何を出来るようになりたい

いきなりでは、それこそ undefinedだよ!

言語の紹介

JavaScriptMozillaが ECMAScriptをベースに

策定した言語

言語の紹介

ECMAScriptECMAインターナショナルが

策定した言語

言語の紹介

歴史のお勉強?言語のお勉強ではありますが

歴史を知っておいた方が楽しいです

言語の紹介

JavaScriptプロトタイプベースの

オブジェクト指向言語であるスクリプト言語

言語の紹介

どういう言語の仕組みかそれが要点ですね

詳細な解説はこれから先の勉強会で

言語の紹介

紹介したいメインはJavaScriptを使うと

何が出来るのかということです

言語の紹介

主に力を発揮するのは HTMLとの連携

HTMLはわかりますよね?

言語の紹介

HTML(HyperText Markup Language)

W3Cが策定したマークアップ言語

言語の紹介

ハイパーなテキスト写真やリンク、リスト、表

普通のテキストで表現できないものを表現するハイパーなテキスト

言語の紹介

JavaScriptと HTML二つの架け橋になってくれるのが

APIの DOMという仕組みです

言語の紹介

DOM(Document Object Model)DOMを使って JavaScriptは

HTMLを操作することが出来ます

言語の紹介

document.body.innerTEXT = “ ”テキスト ;

//bodyタグ内に//「テキスト」という文字を挿入します

言語の紹介

たった一行で文字を挿入できる!夢が広がりますね

言語の紹介

JavaScriptがほかに出来ること

言語の紹介

時間の操作

日付の操作一定時間後に処理一定間隔で処理

言語の紹介

数字の操作

円周率から三角関数など使える

言語の紹介

画像の処理

ちょっと難しいけど色を変えたり

言語の紹介

通信の処理

主に httpを使う処理環境によっては wsや udpだって

皆さんが思っていること

では、言語について少しわかったところで

JavaScriptを勉強するうえでの弊害はなんでしょう?

皆さんが思っていること

なにを絶対できるように学習したいの?

私が思っていること

jQueryに依存しすぎている

私が思っていること

jQueryJavaScriptを便利に使うための道具ライブラリーと言われます

私が思っていること

jQueryJavaScriptを便利に使うための道具ライブラリーと言われます

私が思っていること

私が紹介したい、ぜひ使ってほしいライブラリ

Vanilla JS

私が思っていること

Vanilla JS超最速のライブラリー超軽量のライブラリー

私が思っていること

実は、 0バイトのライブラリー

私が思っていること

jQueryを使ってもいいですがjQueryばかりに頼らずネイティブで記述するべき

私が思っていること

結局、処理が速いのはネイティブ軽いのはネイティブ

私が思っていること

勉強をするときはライブラリーからじゃなく

ネイティブの処理を勉強してほしい

やってみたいこと

ここまで聞いて、いかがですか?何かやってみたいことは出来ましたか?

やってみたいこと

JavaScriptはWebブラウザとテキストエディターだけで

環境が整う材料のほとんどいらない言語です

やってみたいこと

やってみたいと思ったことは実践してみましょう

最後に

今回では、スタートアップで皆さんに方向性を固めていただく流れでした。

これからは、それをベースに掘り下げながら勉強会をしていきたいと思っています。ぜひ、次回も参加していただけたら幸いです。

最後に

時間があれば、マニアックな処理を紹介します

最後に

参加いただきありがとうございました