SlideShare ist ein Scribd-Unternehmen logo
1 von 9
Downloaden Sie, um offline zu lesen
1 
JavaScript 1 
JavaScriptはホームページやアプリ上で写真をクリックすると写真が 
拡⼤大される等、主に「動き」を司るプログラミング⾔言語です。 
JavaScriptを⽤用いることでサイトやアプリをより表現豊かにすること 
ができます。 
また、iPhone,AndroidアプリもJavaScriptを⽤用いて開発することも可 
能で、今、最も注⽬目されている⾔言語の1つです。 
Copyright (c) 株式会社HEART QUAKE All rights reserved .
2 
JavaScriptとは (1/2) 
l JavaScriptとは 
- 1995年年に登場した⽐比較的古いプログラミング⾔言語 
- Javaというプログラミング⾔言語とは全くの別物 
- PHP等はサーバー側で動作するサーバーサイドプログラミ 
ング⾔言語なのに対して、JavaScriptはブラウザ上で動作す 
るクライアントサイド、または、フロントサイドと呼ばれ 
る。 
ネットワークネットワーク 
ソフトウェア 
クライアントサーバー 
Copyright (c) 株式会社HEART QUAKE All rights reserved . 
php等は 
サーバーで実⾏行行される 
JavaScriptは 
ブラウザで実⾏行行される
3 
JavaScriptとは (2/2) 
l JavaScriptはHTMLプログラム内に記述することができます。 
l HTML,JavaScriptを記述し、拡張⼦子を.htmlに変えて保存した 
ものを、ブラウザで開けば出来上がり。 
今回はhellojs.htmlという名前で保存してください。 
html 
head 
meta charset=utf-8 
titleウェブページのタイトル/title 
script 
alert(Hello World); 
/script 
/head 
body 
ウェブページを作成しました! 
/body 
/html 
Copyright (c) 株式会社HEART QUAKE All rights reserved . 
ブラウザで表⽰示すると 
ポップアップが表⽰示される
4 
私たちが使う⾔言語のことは「⾃自然⾔言語」といいます。 
Copyright (c) 株式会社HEART QUAKE All rights reserved . 
プログラムとは 
l プログラムとは… 
- コンピュータに対する指⽰示命令令書 
ü 「コンピュータで計算する」 ではなく「計算させる」 
l プログラミング⾔言語とは… 
- コンピュータに指⽰示するために使⽤用される⾔言語 
l プログラム⾔言語にはたくさんの種類があります 
A / A+ / ABAP / ABC / ABCL / ActionScript / ActiveBasic / Ada / Ada 95 / Agena / AHDL / ALGOL / Alice / APL / AppleScript / as / ash / AutoIt / AWK / B / Bash / BASIC / 
BCPL / Befunge / BLISS / Boo / BrainCrash / Brainfuck / C / C# / C++ / C@ / Caml / CAP-X / CASL / Cecil / CFScript / Cg / Chef / CHILL / Clipper / Clojure / CLU / 
COBOL / ColdFusion / Common Lisp / Component Pascal / Concurrent Clean / Concurrent Prolog / Constraint Handling Rules / CPL / csh / Curl / Curry / Cω / D / 
Delphi / DMDScript / Dylan / ECMAScript / Eiffel / Enterprise Generation Language / Erlang / Escapade / Esterel / Euclid / Euphoria / F# / False / Fantom / Ferite / Ficl / 
Flavors / Forth / FORTRAN / Fortress / Gas / GLSL / Go / Groovy / Guarded Horn Clauses / Haskell / HLASM / HLSL / HOLON / HSP / HQ9+ / HQ9F+ / HyperTalk / 
Icon / IDL (interactive data language) / Inform / InScript / INTERCAL / Io / IPL / ISWIM / J / Java / JavaScript / JavaFX Script / JHDL / JScript .NET / KL1 / KEMURI / 
KRC / ksh / LabVIEW / Lazy K / Light Game Programming / Limbo / Linda / Linden Scripting Language (LSL) / Lingo / Lisaac / LISP / LOGO / Lola / LotusScript / Lua / 
Lucid / Lush / Lustre / Malbolge / Mana / MASM / Mathematica / Mercury / Mind / Miranda / Misa / MixJuice / ML / Modula-2 / Modula-3 / MONAmona / Mops / MSIL / M 
言語 / NASM / Nemerle / Noop / Oberon / Oberon-2 / Object Pascal / Object REXX / Object Tcl (OTcl) / Objective-C / Objective Caml (OCaml) / Occam / Ook! / 
OpenOffice.org Basic / OPS / Oz / Pacbase / PARLOG / Pascal / PBASIC / Pd (pure data) / PCN (program composition notation) / Perl / PHP / Pic / Piet / Pike / PL/0 / 
PL/I / Planner / pnuts / PostScript / Processing / Prolog / Pxem / Python / QtScript / R / REALbasic / REBOL / REXX / roff / RPG / Ruby / SAL / SASL / Sather / Scala / 
Scheme / Self / SFL / sh / Shakespeare / Simula / Simulink / SISAL / SKILL / Smalltalk / SNOBOL / Squeak / Squirrel / superC / SystemC / SystemVerilog / t3x / TAL / 
Telescript / TeX / Tcl / tcsh / Tenems / TL/I / Tonyu System / TTS / TTSeno / Turing / Unlambda / UnrealScript / VBScript / Visual Basic .NET / Whitespace / Verilog 
HDL / VHDL / WICS / Whirl / Windows PowerShell / WMLScript / XQuery / XSLT …
5 
srcipt 
alert(Hello World); 
alert(もう1⾏行行。n バックスラッシュnで改⾏行行できます); 
/script 
Copyright (c) 株式会社HEART QUAKE All rights reserved . 
Javascirptの書き⽅方のルール 
開始タグと終了了タグ 
l 開始タグと終了了タグ 
- JavaScriptのスクリプトはscript という開始タグと、 
- /scriptという終了了タグの内側に記述します。 
 
 
l 命令令ごとにセミコロン(;)で区切切る 
- 1つの命令令を終えるごとに「;」セミコロンで区切切ります。 
- ⽇日本語で⾔言えば「。」英語では「.」と同じ扱いです。
6 
Copyright (c) 株式会社HEART QUAKE All rights reserved . 
変数 (1/2) 
l 変数 
- 変数を使うことで、数値や⽂文字を⼀一回仮保存し、 
あとから使うことができるようになります。 
ブラウザ 
answer 
html 
head 
meta charset=utf-8 
titleウェブページのタイトル/title 
script 
var number1 = 5 + 3; 
var number2 = 5 – 2; 
var answer = number1 + number2; 
alert(answer); 
/script 
途中結果を箱に 
/head 
仮保存しておくイメージ 
body 
ウェブページを作成しました! 
/body 
/html
7 
Copyright (c) 株式会社HEART QUAKE All rights reserved . 
変数 (2/2) 
l 変数 
- 名前のついた段ボール箱のこと 
ü 正式には「値」を格納しておくためのメモリ上の領領域 
 
- 変数のなかには、数値、⽂文字列列や配列列(後述)、その他 
JavaScriptで扱うあらゆるデータを格納することができま 
す。 
- var とは variable (変えられる)の略略です 
var box1 = 5; var box2 = 千葉葉順; 
千葉葉順box2
l エラー内容を確認しよう! 
- プログラミングを始めたばかりのころはエラーに頭を悩まされます。 
8 
上⼿手く動かなかったら 
エラーの発⾒見見箇所を探せるようにしましょう。 
- Google Chromeの、 
ü 表⽰示  開発/管理理  JavaScriptコンソール で確認可能 
Copyright (c) 株式会社HEART QUAKE All rights reserved . 
7⾏行行⽬目が間違っているようだ
9 
Copyright (c) 株式会社HEART QUAKE All rights reserved . 
お疲れ様でした!!

Weitere ähnliche Inhalte

Andere mochten auch

Lolipop server
Lolipop serverLolipop server
Lolipop serverJun Chiba
 
System3 search
System3 searchSystem3 search
System3 searchJun Chiba
 
Reservation3
Reservation3Reservation3
Reservation3Jun Chiba
 
Login facebook
Login facebookLogin facebook
Login facebookJun Chiba
 
System insert hint
System insert hintSystem insert hint
System insert hintJun Chiba
 
Geolocation4 system
Geolocation4 systemGeolocation4 system
Geolocation4 systemJun Chiba
 
Array facebook
Array facebookArray facebook
Array facebookJun Chiba
 
System3 ajax
System3 ajaxSystem3 ajax
System3 ajaxJun Chiba
 
キャリア
キャリアキャリア
キャリアJun Chiba
 
System4 detail for_h
System4 detail for_hSystem4 detail for_h
System4 detail for_hJun Chiba
 
20110329チャリティイベント
20110329チャリティイベント20110329チャリティイベント
20110329チャリティイベントJun Chiba
 
Session facebook
Session facebookSession facebook
Session facebookJun Chiba
 
Api geocoding
Api geocodingApi geocoding
Api geocodingJun Chiba
 
Api gurunavi
Api gurunaviApi gurunavi
Api gurunaviJun Chiba
 

Andere mochten auch (20)

Lolipop server
Lolipop serverLolipop server
Lolipop server
 
System3 search
System3 searchSystem3 search
System3 search
 
Reservation3
Reservation3Reservation3
Reservation3
 
System all
System allSystem all
System all
 
Login facebook
Login facebookLogin facebook
Login facebook
 
System insert hint
System insert hintSystem insert hint
System insert hint
 
Ajax
AjaxAjax
Ajax
 
Setup
SetupSetup
Setup
 
Geolocation4 system
Geolocation4 systemGeolocation4 system
Geolocation4 system
 
Array facebook
Array facebookArray facebook
Array facebook
 
Domain
DomainDomain
Domain
 
System3 ajax
System3 ajaxSystem3 ajax
System3 ajax
 
My sql h
My sql hMy sql h
My sql h
 
Css
CssCss
Css
 
キャリア
キャリアキャリア
キャリア
 
System4 detail for_h
System4 detail for_hSystem4 detail for_h
System4 detail for_h
 
20110329チャリティイベント
20110329チャリティイベント20110329チャリティイベント
20110329チャリティイベント
 
Session facebook
Session facebookSession facebook
Session facebook
 
Api geocoding
Api geocodingApi geocoding
Api geocoding
 
Api gurunavi
Api gurunaviApi gurunavi
Api gurunavi
 

Ähnlich wie Javascript1-1

Flutterやってみよう
FlutterやってみようFlutterやってみよう
FlutterやってみようRyuto Yasugi
 
GraalVMで使われている、他言語をJVM上に実装する仕組みを学ぼう
GraalVMで使われている、他言語をJVM上に実装する仕組みを学ぼうGraalVMで使われている、他言語をJVM上に実装する仕組みを学ぼう
GraalVMで使われている、他言語をJVM上に実装する仕組みを学ぼうKoichi Sakata
 
ソースコードの共通化
ソースコードの共通化ソースコードの共通化
ソースコードの共通化Jun Hosokawa
 
プログラマになれないあなたのための言語戦略 (Gunma.web #7 2011/12/17)
プログラマになれないあなたのための言語戦略 (Gunma.web #7 2011/12/17)プログラマになれないあなたのための言語戦略 (Gunma.web #7 2011/12/17)
プログラマになれないあなたのための言語戦略 (Gunma.web #7 2011/12/17)parrotstudio
 
Ruby向け帳票ソリューション「ThinReports」の開発で知るOSSの威力
Ruby向け帳票ソリューション「ThinReports」の開発で知るOSSの威力Ruby向け帳票ソリューション「ThinReports」の開発で知るOSSの威力
Ruby向け帳票ソリューション「ThinReports」の開発で知るOSSの威力ThinReports
 
2009年のPHPフレームワーク
2009年のPHPフレームワーク2009年のPHPフレームワーク
2009年のPHPフレームワークTakuya Sato
 
Opa - Cloud Language
Opa - Cloud LanguageOpa - Cloud Language
Opa - Cloud LanguageTozo Tanaka
 
From Java To Clojure
From Java To ClojureFrom Java To Clojure
From Java To ClojureKent Ohashi
 
JavaScript.Next
JavaScript.NextJavaScript.Next
JavaScript.Nextdynamis
 
NAO/Pepper 開発環境 について
NAO/Pepper 開発環境 についてNAO/Pepper 開発環境 について
NAO/Pepper 開発環境 についてTakuji Kawata
 
最新技術動向(2011年上期)
最新技術動向(2011年上期)最新技術動向(2011年上期)
最新技術動向(2011年上期)Mahito Ogura
 
DEV-011_TypeScript ~Any browser. Any host. Any OS. Open Source~
DEV-011_TypeScript ~Any browser. Any host. Any OS. Open Source~DEV-011_TypeScript ~Any browser. Any host. Any OS. Open Source~
DEV-011_TypeScript ~Any browser. Any host. Any OS. Open Source~decode2016
 
Web技術勉強会23回目
Web技術勉強会23回目Web技術勉強会23回目
Web技術勉強会23回目龍一 田中
 
Rds 2008 R2 Express Editionで遊んでみよう
Rds 2008 R2 Express Editionで遊んでみようRds 2008 R2 Express Editionで遊んでみよう
Rds 2008 R2 Express Editionで遊んでみようguest468ec6
 
Groovy Bootcamp 2015 by JGGUG
Groovy Bootcamp 2015 by JGGUGGroovy Bootcamp 2015 by JGGUG
Groovy Bootcamp 2015 by JGGUGUehara Junji
 
HiveとImpalaのおいしいとこ取り
HiveとImpalaのおいしいとこ取りHiveとImpalaのおいしいとこ取り
HiveとImpalaのおいしいとこ取りYukinori Suda
 
2008.10.18 L4u Tech Talk
2008.10.18 L4u Tech Talk2008.10.18 L4u Tech Talk
2008.10.18 L4u Tech Talkmitamex4u
 
今日からはじめるHTML5 ver.2012
今日からはじめるHTML5 ver.2012今日からはじめるHTML5 ver.2012
今日からはじめるHTML5 ver.2012Yasuhito Yabe
 
Rubyとプログラミング言語の潮流
Rubyとプログラミング言語の潮流Rubyとプログラミング言語の潮流
Rubyとプログラミング言語の潮流Kazuhiko Kato
 

Ähnlich wie Javascript1-1 (20)

StatGenSummerSchool2023_Programming.pdf
StatGenSummerSchool2023_Programming.pdfStatGenSummerSchool2023_Programming.pdf
StatGenSummerSchool2023_Programming.pdf
 
Flutterやってみよう
FlutterやってみようFlutterやってみよう
Flutterやってみよう
 
GraalVMで使われている、他言語をJVM上に実装する仕組みを学ぼう
GraalVMで使われている、他言語をJVM上に実装する仕組みを学ぼうGraalVMで使われている、他言語をJVM上に実装する仕組みを学ぼう
GraalVMで使われている、他言語をJVM上に実装する仕組みを学ぼう
 
ソースコードの共通化
ソースコードの共通化ソースコードの共通化
ソースコードの共通化
 
プログラマになれないあなたのための言語戦略 (Gunma.web #7 2011/12/17)
プログラマになれないあなたのための言語戦略 (Gunma.web #7 2011/12/17)プログラマになれないあなたのための言語戦略 (Gunma.web #7 2011/12/17)
プログラマになれないあなたのための言語戦略 (Gunma.web #7 2011/12/17)
 
Ruby向け帳票ソリューション「ThinReports」の開発で知るOSSの威力
Ruby向け帳票ソリューション「ThinReports」の開発で知るOSSの威力Ruby向け帳票ソリューション「ThinReports」の開発で知るOSSの威力
Ruby向け帳票ソリューション「ThinReports」の開発で知るOSSの威力
 
2009年のPHPフレームワーク
2009年のPHPフレームワーク2009年のPHPフレームワーク
2009年のPHPフレームワーク
 
Opa - Cloud Language
Opa - Cloud LanguageOpa - Cloud Language
Opa - Cloud Language
 
From Java To Clojure
From Java To ClojureFrom Java To Clojure
From Java To Clojure
 
JavaScript.Next
JavaScript.NextJavaScript.Next
JavaScript.Next
 
NAO/Pepper 開発環境 について
NAO/Pepper 開発環境 についてNAO/Pepper 開発環境 について
NAO/Pepper 開発環境 について
 
最新技術動向(2011年上期)
最新技術動向(2011年上期)最新技術動向(2011年上期)
最新技術動向(2011年上期)
 
DEV-011_TypeScript ~Any browser. Any host. Any OS. Open Source~
DEV-011_TypeScript ~Any browser. Any host. Any OS. Open Source~DEV-011_TypeScript ~Any browser. Any host. Any OS. Open Source~
DEV-011_TypeScript ~Any browser. Any host. Any OS. Open Source~
 
Web技術勉強会23回目
Web技術勉強会23回目Web技術勉強会23回目
Web技術勉強会23回目
 
Rds 2008 R2 Express Editionで遊んでみよう
Rds 2008 R2 Express Editionで遊んでみようRds 2008 R2 Express Editionで遊んでみよう
Rds 2008 R2 Express Editionで遊んでみよう
 
Groovy Bootcamp 2015 by JGGUG
Groovy Bootcamp 2015 by JGGUGGroovy Bootcamp 2015 by JGGUG
Groovy Bootcamp 2015 by JGGUG
 
HiveとImpalaのおいしいとこ取り
HiveとImpalaのおいしいとこ取りHiveとImpalaのおいしいとこ取り
HiveとImpalaのおいしいとこ取り
 
2008.10.18 L4u Tech Talk
2008.10.18 L4u Tech Talk2008.10.18 L4u Tech Talk
2008.10.18 L4u Tech Talk
 
今日からはじめるHTML5 ver.2012
今日からはじめるHTML5 ver.2012今日からはじめるHTML5 ver.2012
今日からはじめるHTML5 ver.2012
 
Rubyとプログラミング言語の潮流
Rubyとプログラミング言語の潮流Rubyとプログラミング言語の潮流
Rubyとプログラミング言語の潮流
 

Mehr von Jun Chiba

バルーンバ人文化を探れ!パワーポイント・動画マニュアル販売用のスライドシェア資料
バルーンバ人文化を探れ!パワーポイント・動画マニュアル販売用のスライドシェア資料バルーンバ人文化を探れ!パワーポイント・動画マニュアル販売用のスライドシェア資料
バルーンバ人文化を探れ!パワーポイント・動画マニュアル販売用のスライドシェア資料Jun Chiba
 
内定者/新入社員向け ビジネスライティング研修用パワーポイントスライド販売用サンプル
内定者/新入社員向け ビジネスライティング研修用パワーポイントスライド販売用サンプル内定者/新入社員向け ビジネスライティング研修用パワーポイントスライド販売用サンプル
内定者/新入社員向け ビジネスライティング研修用パワーポイントスライド販売用サンプルJun Chiba
 
図形伝達ゲーム「グラコミ」
図形伝達ゲーム「グラコミ」図形伝達ゲーム「グラコミ」
図形伝達ゲーム「グラコミ」Jun Chiba
 
傾聴力を高めるビジネスゲーム「傾聴チャレンジ」
傾聴力を高めるビジネスゲーム「傾聴チャレンジ」傾聴力を高めるビジネスゲーム「傾聴チャレンジ」
傾聴力を高めるビジネスゲーム「傾聴チャレンジ」Jun Chiba
 
無料アイスブレイクスライドサンプル
無料アイスブレイクスライドサンプル無料アイスブレイクスライドサンプル
無料アイスブレイクスライドサンプルJun Chiba
 
ストレスマネジメント体験ゲーム「ストマネ」
ストレスマネジメント体験ゲーム「ストマネ」ストレスマネジメント体験ゲーム「ストマネ」
ストレスマネジメント体験ゲーム「ストマネ」Jun Chiba
 
ベストチームオンライン説明スライド
ベストチームオンライン説明スライドベストチームオンライン説明スライド
ベストチームオンライン説明スライドJun Chiba
 
死の疑似体験ワーク 対面版
死の疑似体験ワーク 対面版死の疑似体験ワーク 対面版
死の疑似体験ワーク 対面版Jun Chiba
 
地図作成ゲーム「ジグソータウン」説明資料
地図作成ゲーム「ジグソータウン」説明資料地図作成ゲーム「ジグソータウン」説明資料
地図作成ゲーム「ジグソータウン」説明資料Jun Chiba
 
プロジェクトテーマパーク説明資料
プロジェクトテーマパーク説明資料プロジェクトテーマパーク説明資料
プロジェクトテーマパーク説明資料Jun Chiba
 
死の疑似体験ワーク(対面版)説明資料
死の疑似体験ワーク(対面版)説明資料死の疑似体験ワーク(対面版)説明資料
死の疑似体験ワーク(対面版)説明資料Jun Chiba
 
ヘリウムリング&フープリレー
ヘリウムリング&フープリレーヘリウムリング&フープリレー
ヘリウムリング&フープリレーJun Chiba
 
世界記録を目指すマシュマロチャレンジ
世界記録を目指すマシュマロチャレンジ世界記録を目指すマシュマロチャレンジ
世界記録を目指すマシュマロチャレンジJun Chiba
 
相互理解ワークショップ、内定者懇親会で使えるワークスタイルトランプ
相互理解ワークショップ、内定者懇親会で使えるワークスタイルトランプ相互理解ワークショップ、内定者懇親会で使えるワークスタイルトランプ
相互理解ワークショップ、内定者懇親会で使えるワークスタイルトランプJun Chiba
 
ハラスメント研修用ワーク「ハラスメントフラグ」
ハラスメント研修用ワーク「ハラスメントフラグ」ハラスメント研修用ワーク「ハラスメントフラグ」
ハラスメント研修用ワーク「ハラスメントフラグ」Jun Chiba
 
チームビルディングに効果的な楽しく学びのあるゲーム12選+α
チームビルディングに効果的な楽しく学びのあるゲーム12選+αチームビルディングに効果的な楽しく学びのあるゲーム12選+α
チームビルディングに効果的な楽しく学びのあるゲーム12選+αJun Chiba
 
ロジカルシンキング研修用パワーポイント資料の無料サンプル
ロジカルシンキング研修用パワーポイント資料の無料サンプルロジカルシンキング研修用パワーポイント資料の無料サンプル
ロジカルシンキング研修用パワーポイント資料の無料サンプルJun Chiba
 
ビジネスマナー研修用パワーポイント資料無料サンプル版
ビジネスマナー研修用パワーポイント資料無料サンプル版ビジネスマナー研修用パワーポイント資料無料サンプル版
ビジネスマナー研修用パワーポイント資料無料サンプル版Jun Chiba
 
クイズ型レクリエーション「みんなのクイズ」
クイズ型レクリエーション「みんなのクイズ」クイズ型レクリエーション「みんなのクイズ」
クイズ型レクリエーション「みんなのクイズ」Jun Chiba
 
ドミノレンタル
ドミノレンタルドミノレンタル
ドミノレンタルJun Chiba
 

Mehr von Jun Chiba (20)

バルーンバ人文化を探れ!パワーポイント・動画マニュアル販売用のスライドシェア資料
バルーンバ人文化を探れ!パワーポイント・動画マニュアル販売用のスライドシェア資料バルーンバ人文化を探れ!パワーポイント・動画マニュアル販売用のスライドシェア資料
バルーンバ人文化を探れ!パワーポイント・動画マニュアル販売用のスライドシェア資料
 
内定者/新入社員向け ビジネスライティング研修用パワーポイントスライド販売用サンプル
内定者/新入社員向け ビジネスライティング研修用パワーポイントスライド販売用サンプル内定者/新入社員向け ビジネスライティング研修用パワーポイントスライド販売用サンプル
内定者/新入社員向け ビジネスライティング研修用パワーポイントスライド販売用サンプル
 
図形伝達ゲーム「グラコミ」
図形伝達ゲーム「グラコミ」図形伝達ゲーム「グラコミ」
図形伝達ゲーム「グラコミ」
 
傾聴力を高めるビジネスゲーム「傾聴チャレンジ」
傾聴力を高めるビジネスゲーム「傾聴チャレンジ」傾聴力を高めるビジネスゲーム「傾聴チャレンジ」
傾聴力を高めるビジネスゲーム「傾聴チャレンジ」
 
無料アイスブレイクスライドサンプル
無料アイスブレイクスライドサンプル無料アイスブレイクスライドサンプル
無料アイスブレイクスライドサンプル
 
ストレスマネジメント体験ゲーム「ストマネ」
ストレスマネジメント体験ゲーム「ストマネ」ストレスマネジメント体験ゲーム「ストマネ」
ストレスマネジメント体験ゲーム「ストマネ」
 
ベストチームオンライン説明スライド
ベストチームオンライン説明スライドベストチームオンライン説明スライド
ベストチームオンライン説明スライド
 
死の疑似体験ワーク 対面版
死の疑似体験ワーク 対面版死の疑似体験ワーク 対面版
死の疑似体験ワーク 対面版
 
地図作成ゲーム「ジグソータウン」説明資料
地図作成ゲーム「ジグソータウン」説明資料地図作成ゲーム「ジグソータウン」説明資料
地図作成ゲーム「ジグソータウン」説明資料
 
プロジェクトテーマパーク説明資料
プロジェクトテーマパーク説明資料プロジェクトテーマパーク説明資料
プロジェクトテーマパーク説明資料
 
死の疑似体験ワーク(対面版)説明資料
死の疑似体験ワーク(対面版)説明資料死の疑似体験ワーク(対面版)説明資料
死の疑似体験ワーク(対面版)説明資料
 
ヘリウムリング&フープリレー
ヘリウムリング&フープリレーヘリウムリング&フープリレー
ヘリウムリング&フープリレー
 
世界記録を目指すマシュマロチャレンジ
世界記録を目指すマシュマロチャレンジ世界記録を目指すマシュマロチャレンジ
世界記録を目指すマシュマロチャレンジ
 
相互理解ワークショップ、内定者懇親会で使えるワークスタイルトランプ
相互理解ワークショップ、内定者懇親会で使えるワークスタイルトランプ相互理解ワークショップ、内定者懇親会で使えるワークスタイルトランプ
相互理解ワークショップ、内定者懇親会で使えるワークスタイルトランプ
 
ハラスメント研修用ワーク「ハラスメントフラグ」
ハラスメント研修用ワーク「ハラスメントフラグ」ハラスメント研修用ワーク「ハラスメントフラグ」
ハラスメント研修用ワーク「ハラスメントフラグ」
 
チームビルディングに効果的な楽しく学びのあるゲーム12選+α
チームビルディングに効果的な楽しく学びのあるゲーム12選+αチームビルディングに効果的な楽しく学びのあるゲーム12選+α
チームビルディングに効果的な楽しく学びのあるゲーム12選+α
 
ロジカルシンキング研修用パワーポイント資料の無料サンプル
ロジカルシンキング研修用パワーポイント資料の無料サンプルロジカルシンキング研修用パワーポイント資料の無料サンプル
ロジカルシンキング研修用パワーポイント資料の無料サンプル
 
ビジネスマナー研修用パワーポイント資料無料サンプル版
ビジネスマナー研修用パワーポイント資料無料サンプル版ビジネスマナー研修用パワーポイント資料無料サンプル版
ビジネスマナー研修用パワーポイント資料無料サンプル版
 
クイズ型レクリエーション「みんなのクイズ」
クイズ型レクリエーション「みんなのクイズ」クイズ型レクリエーション「みんなのクイズ」
クイズ型レクリエーション「みんなのクイズ」
 
ドミノレンタル
ドミノレンタルドミノレンタル
ドミノレンタル
 

Javascript1-1

  • 1. 1 JavaScript 1 JavaScriptはホームページやアプリ上で写真をクリックすると写真が 拡⼤大される等、主に「動き」を司るプログラミング⾔言語です。 JavaScriptを⽤用いることでサイトやアプリをより表現豊かにすること ができます。 また、iPhone,AndroidアプリもJavaScriptを⽤用いて開発することも可 能で、今、最も注⽬目されている⾔言語の1つです。 Copyright (c) 株式会社HEART QUAKE All rights reserved .
  • 2. 2 JavaScriptとは (1/2) l JavaScriptとは - 1995年年に登場した⽐比較的古いプログラミング⾔言語 - Javaというプログラミング⾔言語とは全くの別物 - PHP等はサーバー側で動作するサーバーサイドプログラミ ング⾔言語なのに対して、JavaScriptはブラウザ上で動作す るクライアントサイド、または、フロントサイドと呼ばれ る。 ネットワークネットワーク ソフトウェア クライアントサーバー Copyright (c) 株式会社HEART QUAKE All rights reserved . php等は サーバーで実⾏行行される JavaScriptは ブラウザで実⾏行行される
  • 3. 3 JavaScriptとは (2/2) l JavaScriptはHTMLプログラム内に記述することができます。 l HTML,JavaScriptを記述し、拡張⼦子を.htmlに変えて保存した ものを、ブラウザで開けば出来上がり。 今回はhellojs.htmlという名前で保存してください。 html head meta charset=utf-8 titleウェブページのタイトル/title script alert(Hello World); /script /head body ウェブページを作成しました! /body /html Copyright (c) 株式会社HEART QUAKE All rights reserved . ブラウザで表⽰示すると ポップアップが表⽰示される
  • 4. 4 私たちが使う⾔言語のことは「⾃自然⾔言語」といいます。 Copyright (c) 株式会社HEART QUAKE All rights reserved . プログラムとは l プログラムとは… - コンピュータに対する指⽰示命令令書 ü 「コンピュータで計算する」 ではなく「計算させる」 l プログラミング⾔言語とは… - コンピュータに指⽰示するために使⽤用される⾔言語 l プログラム⾔言語にはたくさんの種類があります A / A+ / ABAP / ABC / ABCL / ActionScript / ActiveBasic / Ada / Ada 95 / Agena / AHDL / ALGOL / Alice / APL / AppleScript / as / ash / AutoIt / AWK / B / Bash / BASIC / BCPL / Befunge / BLISS / Boo / BrainCrash / Brainfuck / C / C# / C++ / C@ / Caml / CAP-X / CASL / Cecil / CFScript / Cg / Chef / CHILL / Clipper / Clojure / CLU / COBOL / ColdFusion / Common Lisp / Component Pascal / Concurrent Clean / Concurrent Prolog / Constraint Handling Rules / CPL / csh / Curl / Curry / Cω / D / Delphi / DMDScript / Dylan / ECMAScript / Eiffel / Enterprise Generation Language / Erlang / Escapade / Esterel / Euclid / Euphoria / F# / False / Fantom / Ferite / Ficl / Flavors / Forth / FORTRAN / Fortress / Gas / GLSL / Go / Groovy / Guarded Horn Clauses / Haskell / HLASM / HLSL / HOLON / HSP / HQ9+ / HQ9F+ / HyperTalk / Icon / IDL (interactive data language) / Inform / InScript / INTERCAL / Io / IPL / ISWIM / J / Java / JavaScript / JavaFX Script / JHDL / JScript .NET / KL1 / KEMURI / KRC / ksh / LabVIEW / Lazy K / Light Game Programming / Limbo / Linda / Linden Scripting Language (LSL) / Lingo / Lisaac / LISP / LOGO / Lola / LotusScript / Lua / Lucid / Lush / Lustre / Malbolge / Mana / MASM / Mathematica / Mercury / Mind / Miranda / Misa / MixJuice / ML / Modula-2 / Modula-3 / MONAmona / Mops / MSIL / M 言語 / NASM / Nemerle / Noop / Oberon / Oberon-2 / Object Pascal / Object REXX / Object Tcl (OTcl) / Objective-C / Objective Caml (OCaml) / Occam / Ook! / OpenOffice.org Basic / OPS / Oz / Pacbase / PARLOG / Pascal / PBASIC / Pd (pure data) / PCN (program composition notation) / Perl / PHP / Pic / Piet / Pike / PL/0 / PL/I / Planner / pnuts / PostScript / Processing / Prolog / Pxem / Python / QtScript / R / REALbasic / REBOL / REXX / roff / RPG / Ruby / SAL / SASL / Sather / Scala / Scheme / Self / SFL / sh / Shakespeare / Simula / Simulink / SISAL / SKILL / Smalltalk / SNOBOL / Squeak / Squirrel / superC / SystemC / SystemVerilog / t3x / TAL / Telescript / TeX / Tcl / tcsh / Tenems / TL/I / Tonyu System / TTS / TTSeno / Turing / Unlambda / UnrealScript / VBScript / Visual Basic .NET / Whitespace / Verilog HDL / VHDL / WICS / Whirl / Windows PowerShell / WMLScript / XQuery / XSLT …
  • 5. 5 srcipt alert(Hello World); alert(もう1⾏行行。n バックスラッシュnで改⾏行行できます); /script Copyright (c) 株式会社HEART QUAKE All rights reserved . Javascirptの書き⽅方のルール 開始タグと終了了タグ l 開始タグと終了了タグ - JavaScriptのスクリプトはscript という開始タグと、 - /scriptという終了了タグの内側に記述します。 l 命令令ごとにセミコロン(;)で区切切る - 1つの命令令を終えるごとに「;」セミコロンで区切切ります。 - ⽇日本語で⾔言えば「。」英語では「.」と同じ扱いです。
  • 6. 6 Copyright (c) 株式会社HEART QUAKE All rights reserved . 変数 (1/2) l 変数 - 変数を使うことで、数値や⽂文字を⼀一回仮保存し、 あとから使うことができるようになります。 ブラウザ answer html head meta charset=utf-8 titleウェブページのタイトル/title script var number1 = 5 + 3; var number2 = 5 – 2; var answer = number1 + number2; alert(answer); /script 途中結果を箱に /head 仮保存しておくイメージ body ウェブページを作成しました! /body /html
  • 7. 7 Copyright (c) 株式会社HEART QUAKE All rights reserved . 変数 (2/2) l 変数 - 名前のついた段ボール箱のこと ü 正式には「値」を格納しておくためのメモリ上の領領域 - 変数のなかには、数値、⽂文字列列や配列列(後述)、その他 JavaScriptで扱うあらゆるデータを格納することができま す。 - var とは variable (変えられる)の略略です var box1 = 5; var box2 = 千葉葉順; 千葉葉順box2
  • 8. l エラー内容を確認しよう! - プログラミングを始めたばかりのころはエラーに頭を悩まされます。 8 上⼿手く動かなかったら エラーの発⾒見見箇所を探せるようにしましょう。 - Google Chromeの、 ü 表⽰示 開発/管理理 JavaScriptコンソール で確認可能 Copyright (c) 株式会社HEART QUAKE All rights reserved . 7⾏行行⽬目が間違っているようだ
  • 9. 9 Copyright (c) 株式会社HEART QUAKE All rights reserved . お疲れ様でした!!