technology3-javascript-basics

•

0 gefällt mir•509 views

Darren Woodiwiss

Technologie

Javascript
The Basics

WOODIWISS.ME

Freelance Web Developer & Lecturer
in the Winchester, Hampshire area.

What’s covered

•

What is JavaScript

•

Comments

•

JavaScript in a Browser

•

Data Types

•

Variables

•

Functions

•

Statements

•

Scope

WOODIWISS.ME

What is JavaScript
•

Lightweight Scripting
Language.

•

Interpreted.

•

Object Orientated.

•

Prototype-based.

WOODIWISS.ME

Easy to pick up.
difficult to master.

WOODIWISS.ME

Freelance Web Developer & Lecturer
in the Winchester, Hampshire area.

ECMA
What/Who is ECMA?
•

European Computer Manufacturers Association.

WOODIWISS.ME

ECMA
What/Who is ECMA?
•

European Computer Manufacturers Association.

•

Non-proﬁt Standards Organisation.

WOODIWISS.ME

ECMA
What/Who is ECMA?
•

European Computer Manufacturers Association.

•

Non-proﬁt Standards Organisation.

•

Introducing ECMAScript!

WOODIWISS.ME

ECMAScript
Language

ECMAScript.es

Dialects
JavaScript.js
WOODIWISS.ME

ActionScript.as

So what can
javascript do?

WOODIWISS.ME

Freelance Web Developer & Lecturer
in the Winchester, Hampshire area.

Hardware Programming
•

Arduino via NodeJS
framework.

•

Tessel - micro-controller that
runs JavaScript.

•

Uniduino - gives you the
power to connect the Unity
game engine to Arduino.

•

Control peripherals e.g.
GamePads.

WOODIWISS.ME

Create Hybrid Apps
•

PhoneGap - iOS, Android,
Blackberry, Windows Phone
& more.

•

TideSDK - Windows, OSX,
Linux.

•

Icenieum - Windows, Web,
iOS.

•

Chrome Apps.

WOODIWISS.ME

Server Side

•

Nodejs

•

Among others…

WOODIWISS.ME

Client Side
•

Vanilla JavaScript in a browser.

•

jQuery - simplify client side
scripting.

•

Zepto - Lightweight jQuery
alternative.

•

Three.js - 3D graphics on the
web.

•

AngularJS - SPA framework.

•

jQuery Mobile - Touch
optimised.

WOODIWISS.ME

In the Browser
•

Lets look at some Developer tools.
•

Firefox - Firebug.

•

Chrome - Web Developer Tools.

•

Internet Explorer - Developer ToolBar.

•

Opera - Dragonﬂy.

WOODIWISS.ME

Variables
•

Used to store data.

•

Single line style.

•

Multiline.

•

Typically must begin with a
letter ( $ and _ are valid )

•

Case sensitive.

•

Over-writable - dynamic.

WOODIWISS.ME

Statements

•

The end of a command.

•

Tells the interpreter (browser)
that your intention is ﬁnished.

WOODIWISS.ME

Comments
•

Helpful notes.

•

Good for debugging.

•

Working with others.

•

Don’t overuse.

WOODIWISS.ME

Data Types
•

Primary

!

•

•

“Hello” - “” - “1984” - “TRUE”

•

Number

•

19 - 19.333

•
•

String

Boolean

•

true - false

•

var car = { myCar: “Saturn", getCar:
CarTypes("Honda"), special: Sales };

•

var coffees = ["French Roast", "Colombian", "Kona"];

•

Object

•
•

!

Composite

Array

Special

•

Special

•

Null

•

null, 0, false.

•

Undeﬁned

•

undeﬁned value.

WOODIWISS.ME

Calling / Invoking
Line 12

WOODIWISS.ME

Deﬁne with arguments.

Call with arguments.

WOODIWISS.ME

Deﬁne with arguments.

1

Call with arguments.

WOODIWISS.ME

Deﬁne with arguments.

1

1

Call with arguments.

WOODIWISS.ME

Deﬁne with arguments.

1

1

Call with arguments.

WOODIWISS.ME

1

Deﬁne with arguments.

1

10

1

Call with arguments.

WOODIWISS.ME

1

Deﬁne with arguments.

1

10

10

1

Call with arguments.

WOODIWISS.ME

1

Links / Research
•

https://developer.mozilla.org/en-US/docs/Web/JavaScript

•

https://developer.mozilla.org/en/learn/javascript

•

http://www.creativebloq.com/web-design/things-you-didnt-know-javascript-could-do-6122835

•

http://tessel.io/

•

http://www.uniduino.com/

•

https://wiki.mozilla.org/GamepadAPI

•

http://www.tidesdk.org/

•

http://www.icenium.com/?
utm_source=html5weekly&utm_medium=banner&utm_campaign=html5weeklynewsletter&utm_content=link1

•

http://developer.chrome.com/apps/about_apps.html

•

http://nodejs.org/

•

http://en.wikipedia.org/wiki/List_of_JavaScript_libraries

•

http://mothereff.in/js-variables

•

https://developer.mozilla.org/en-US/docs/Web/JavaScript/Guide/Values,_variables,_and_literals

WOODIWISS.ME

Questions?

WOODIWISS.ME

Freelance Web Developer & Lecturer
in the Winchester, Hampshire area.

Weitere ähnliche Inhalte

Was ist angesagt?

.Less - CSS done right

Daniel Hölbling

Welcome! RGBA

Even Wu

Journey To The Front End World - Part2 - The Cosmetic

Irfan Maulana

Less presentation

Todd Shelton

Start using less css

Ali MasudianPour

An exploration of ideas, lessons, hacks and opportunities to make you a more productive WP developer… and take your business on the road. Topic points: * Lessons learned whilst travelling the world as a remote WP developer. * Hard realities of what it’s like to be a digital nomad, and what you need to do to make it profitable * Australian specific tax implications and opportunities * Acknowledge maintenance is required, and turn it into a product you sell to your clients (eg: ManageWP, InfiniteWP) * Develop using ‘reusable function’ methodologies in your business (eg: starter themes, child themes, frameworks). Look at baking your own framework, but always use others. * Look for opportunities to streamline your development (eg: CSS compilers, FTP sync, placing WP in a subdirectory). * Become a hosting reseller to increase your passive income and be a one point call for your clients. This will save you time dealing with site builds. * Identify opportunities to buy developer licenses and sell access to these as part of your maintenance. * The benefits of stepping out of your comfort zone, and learning from other developers – especially non-WP focused ones. Presented by Simon Foxe at WordCamp Sydney 2018

Digital Nomad Development

WordCamp Sydney

Advanced sass/compass

Nick Cooley

DrupalCamp Chattanooga - September 2014 - Sass 101

Eric Sembrat

Dear (JS) Developers, You now don’t have any excuses anymore: CSS brings custom properties to life, its own variables system, and they also have scope. No jealous! Let see together how to use them and some examples where JS and CSS variables are best friends forever. Talk done at JavaScript Meetup Luxembourg in May 2018 (25min talk) For a more detailed transcript, see: https://noti.st/geoffreycrofte/GsYGzw/slides

CSS Custom Properties (aka CSS Variable)

Geoffrey Croftє

Solving Common Client Requets with jQuery Presentation (v2)

Chris Coyier

Introduction to WordPress

Puneet Sahalot

Was ist angesagt? (11)

.Less - CSS done right

Welcome! RGBA

Journey To The Front End World - Part2 - The Cosmetic

Less presentation

Start using less css

Digital Nomad Development

Advanced sass/compass

DrupalCamp Chattanooga - September 2014 - Sass 101

CSS Custom Properties (aka CSS Variable)

Solving Common Client Requets with jQuery Presentation (v2)

Introduction to WordPress

Ähnlich wie technology3-javascript-basics

6.1 GeospatialWeb101.pptx.pptx

OmidRezaAbbasi1

eMusic: WordPress in the Enterprise

Scott Taylor

Coding for the cloud - development of modern web applications

Wekoslav Stefanovski

Week01 jan19 introductionto_php

Jeanho Chu

Quo vadis, JavaScript? Devday.pl keynote

Christian Heilmann

Web Development using Ruby on Rails

Avi Kedar

Using type script to build better apps

ColdFusionConference

Using type script to build better apps

devObjective

Since the beginning of software, we have bundled frequently-used functionality into libraries -- both our own, and those created by third parties. APIs tell software developers how to use a library, and make it possible for developers to treat libraries as black boxes, considering only what the library does, not how it does it. Today, as software moves increasingly to the Web, APIs and libraries are also moving to the Web. This means that you can now outsource, by means of Web APIs, a huge amount of your application's functionality. What does this mean for software developers? What does this mean for the future of software development? In this talk, I describe the past, present, and future of APIs, and how I believe the Web is changing the landscape.

Web APIs: The future of software

Reuven Lerner

Specialisation 1-jquery-basics

Darren Woodiwiss

Microservices; A Quick Introduction

Abouzar Noori

Week01 jan19 introductionto_php

Jeanho Chu

The things we found in your website

hernanibf

Wp 3hr-course

Rich Webster

Let’s learn how to use JavaScript responsibly and stay up-to-date.

Christian Heilmann

Inside Wordnik's Architecture

Tony Tam

Goldmund, Wyldebeast & Wunderliebe - Responsive Webdesign Workshop

Kim Chee Leong

Web dev#1

Richard Bao

An Introduction to AWS

John Dalziel

JavaScript: Past, Present, Future

Jungryul Choi

Ähnlich wie technology3-javascript-basics (20)

6.1 GeospatialWeb101.pptx.pptx

eMusic: WordPress in the Enterprise

Coding for the cloud - development of modern web applications

Week01 jan19 introductionto_php

Quo vadis, JavaScript? Devday.pl keynote

Web Development using Ruby on Rails

Using type script to build better apps

Web APIs: The future of software

Specialisation 1-jquery-basics

Microservices; A Quick Introduction

Week01 jan19 introductionto_php

The things we found in your website

Wp 3hr-course

Let’s learn how to use JavaScript responsibly and stay up-to-date.

Inside Wordnik's Architecture

Goldmund, Wyldebeast & Wunderliebe - Responsive Webdesign Workshop

Web dev#1

An Introduction to AWS

JavaScript: Past, Present, Future

Kürzlich hochgeladen

GenCyber Cyber Security Day Presentation

Michael W. Hawkins

Imagine a world where information flows as swiftly as thought itself, making decision-making as fluid as the data driving it. Every moment is critical, and the right tools can significantly boost your organization’s performance. The power of real-time data automation through FME can turn this vision into reality. Aimed at professionals eager to leverage real-time data for enhanced decision-making and efficiency, this webinar will cover the essentials of real-time data and its significance. We’ll explore: FME’s role in real-time event processing, from data intake and analysis to transformation and reporting An overview of leveraging streams vs. automations FME’s impact across various industries highlighted by real-life case studies Live demonstrations on setting up FME workflows for real-time data Practical advice on getting started, best practices, and tips for effective implementation Join us to enhance your skills in real-time data automation with FME, and take your operational capabilities to the next level.

From Event to Action: Accelerate Your Decision Making with Real-Time Automation

Safe Software

Developing An App To Navigate The Roads of Brazil

V3cube

AWS Community Day CPH - Three problems of Terraform

Andrey Devyatkin

This presentations targets students or working professionals. You may know Google for search, YouTube, Android, Chrome, and Gmail, but did you know Google has many developer tools, platforms & APIs? This comprehensive yet still high-level overview outlines the most impactful tools for where to run your code, store & analyze your data. It will also inspire you as to what's possible. This talk is 50 minutes in length.

Powerful Google developer tools for immediate impact! (2023-24 C)

wesley chun

💉💊+971581248768>> SAFE AND ORIGINAL ABORTION PILLS FOR SALE IN DUBAI AND ABUDHABI}}+971581248768 +971581248768 Mtp-Kit (500MG) Prices » Dubai [(+971581248768**)] Abortion Pills For Sale In Dubai, UAE, Mifepristone and Misoprostol Tablets Available In Dubai, UAE CONTACT DR.Maya Whatsapp +971581248768 We Have Abortion Pills / Cytotec Tablets /Mifegest Kit Available in Dubai, Sharjah, Abudhabi, Ajman, Alain, Fujairah, Ras Al Khaimah, Umm Al Quwain, UAE, Buy cytotec in Dubai +971581248768''''Abortion Pills near me DUBAI | ABU DHABI|UAE. Price of Misoprostol, Cytotec” +971581248768' Dr.DEEM ''BUY ABORTION PILLS MIFEGEST KIT, MISOPROTONE, CYTOTEC PILLS IN DUBAI, ABU DHABI,UAE'' Contact me now via What's App…… abortion Pills Cytotec also available Oman Qatar Doha Saudi Arabia Bahrain Above all, Cytotec Abortion Pills are Available In Dubai / UAE, you will be very happy to do abortion in Dubai we are providing cytotec 200mg abortion pill in Dubai, UAE. Medication abortion offers an alternative to Surgical Abortion for women in the early weeks of pregnancy. We only offer abortion pills from 1 week-6 Months. We then advise you to use surgery if its beyond 6 months. Our Abu Dhabi, Ajman, Al Ain, Dubai, Fujairah, Ras Al Khaimah (RAK), Sharjah, Umm Al Quwain (UAQ) United Arab Emirates Abortion Clinic provides the safest and most advanced techniques for providing non-surgical, medical and surgical abortion methods for early through late second trimester, including the Abortion By Pill Procedure (RU 486, Mifeprex, Mifepristone, early options French Abortion Pill), Tamoxifen, Methotrexate and Cytotec (Misoprostol). The Abu Dhabi, United Arab Emirates Abortion Clinic performs Same Day Abortion Procedure using medications that are taken on the first day of the office visit and will cause the abortion to occur generally within 4 to 6 hours (as early as 30 minutes) for patients who are 3 to 12 weeks pregnant. When Mifepristone and Misoprostol are used, 50% of patients complete in 4 to 6 hours; 75% to 80% in 12 hours; and 90% in 24 hours. We use a regimen that allows for completion without the need for surgery 99% of the time. All advanced second trimester and late term pregnancies at our Tampa clinic (17 to 24 weeks or greater) can be completed within 24 hours or less 99% of the time without the need surgery. The procedure is completed with minimal to no complications. Our Women's Health Center located in Abu Dhabi, United Arab Emirates, uses the latest medications for medical abortions (RU-486, Mifeprex, Mifegyne, Mifepristone, early options French abortion pill), Methotrexate and Cytotec (Misoprostol). The safety standards of our Abu Dhabi, United Arab Emirates Abortion Doctors remain unparalleled. They consistently maintain the lowest complication rates throughout the nation. Our Physicians and staff are always available to answer questions and care for women in one of the most difficult times in their lives. The decision to have an abortion at the Abortion Cl

+971581248768>> SAFE AND ORIGINAL ABORTION PILLS FOR SALE IN DUBAI AND ABUDHA...

?#DUbAI#??##{{(☎️+971_581248768%)**%*]'#abortion pills for sale in dubai@

Histor y of HAM Radio presentation slide

vu2urc

The value of a flexible API Management solution for Open Banking Steve Melan, Manager for IT Innovation and Architecture - State's and Saving's Bank of Luxembourg Apidays New York 2024: The API Economy in the AI Era (April 30 & May 1, 2024) ------ Check out our conferences at https://www.apidays.global/ Do you want to sponsor or talk at one of our conferences? https://apidays.typeform.com/to/ILJeAaV8 Learn more on APIscene, the global media made by the community for the community: https://www.apiscene.io Explore the API ecosystem with the API Landscape: https://apilandscape.apiscene.io/

Apidays New York 2024 - The value of a flexible API Management solution for O...

apidays

Finology Group – Insurtech Innovation Award 2024

The Digital Insurer

Boost Fertility New Invention Ups Success Rates.pdf

sudhanshuwaghmare1

The 7 Things I Know About Cyber Security After 25 Years | April 2024

Rafal Los

Discord is a free app offering voice, video, and text chat functionalities, primarily catering to the gaming community. It serves as a hub for users to create and join servers tailored to their interests. Discord’s ecosystem comprises servers, each functioning as a distinct online community with its own channels dedicated to specific topics or activities. Users can engage in text-based discussions, voice calls, or video chats within these channels. Understanding Discord Servers Discord servers are virtual spaces where users congregate to interact, share content, and build communities. Servers may revolve around gaming, hobbies, interests, or fandoms, providing a platform for like-minded individuals to connect. Communication Features Discord offers a range of communication tools, including text channels for messaging, voice channels for real-time audio conversations, and video channels for face-to-face interactions. These features facilitate seamless communication and collaboration. What Does NSFW Mean? The acronym NSFW stands for “Not Safe For Work,” indicating content that may be inappropriate for professional or public settings. NSFW Content NSFW content encompasses material that is sexually explicit, violent, or otherwise graphic in nature. It often includes nudity, profanity, or depictions of sensitive topics.

Understanding Discord NSFW Servers A Guide for Responsible Users.pdf

UK Journal

Handwritten Text Recognition for manuscripts and early printed texts

Maria Levchenko

Workshop - Best of Both Worlds_ Combine KG and Vector search for enhanced R...

Neo4j

Automating Google Workspace (GWS) & more with Apps Script

wesley chun

Partners Life - Insurer Innovation Award 2024

The Digital Insurer

presentation ICT roal in 21st century education

jfdjdjcjdnsjd

Building Digital Trust in a Digital Economy Veronica Tan, Director - Cyber Security Agency of Singapore Apidays Singapore 2024: Connecting Customers, Business and Technology (April 17 & 18, 2024) ------ Check out our conferences at https://www.apidays.global/ Do you want to sponsor or talk at one of our conferences? https://apidays.typeform.com/to/ILJeAaV8 Learn more on APIscene, the global media made by the community for the community: https://www.apiscene.io Explore the API ecosystem with the API Landscape: https://apilandscape.apiscene.io/

Apidays Singapore 2024 - Building Digital Trust in a Digital Economy by Veron...

apidays

This presentation explores the impact of HTML injection attacks on web applications, detailing how attackers exploit vulnerabilities to inject malicious code into web pages. Learn about the potential consequences of such attacks and discover effective mitigation strategies to protect your web applications from HTML injection vulnerabilities. for more information visit https://bostoninstituteofanalytics.org/category/cyber-security-ethical-hacking/

HTML Injection Attacks: Impact and Mitigation Strategies

Boston Institute of Analytics

In this session, we will delve into strategic approaches for optimizing knowledge management within Microsoft 365, amidst the evolving landscape of Copilot. From leveraging automatic metadata classification and permission governance with SharePoint Premium, to unlocking Viva Engage for the cultivation of knowledge and communities, you will gain actionable insights to bolster your organization's knowledge-sharing initiatives. In this session, we will also explore how to facilitate solutions to enable your employees to find answers and expertise within Microsoft 365. You will leave equipped with practical techniques and a deeper understanding of how there is more to effective knowledge management than just enabling Copilot, but building actual solutions to prepare the knowledge that Copilot and your employees can use.

Strategies for Unlocking Knowledge Management in Microsoft 365 in the Copilot...

Drew Madelung

Kürzlich hochgeladen (20)

GenCyber Cyber Security Day Presentation

From Event to Action: Accelerate Your Decision Making with Real-Time Automation

Developing An App To Navigate The Roads of Brazil

AWS Community Day CPH - Three problems of Terraform

Powerful Google developer tools for immediate impact! (2023-24 C)

+971581248768>> SAFE AND ORIGINAL ABORTION PILLS FOR SALE IN DUBAI AND ABUDHA...

Histor y of HAM Radio presentation slide

Apidays New York 2024 - The value of a flexible API Management solution for O...

Finology Group – Insurtech Innovation Award 2024

Boost Fertility New Invention Ups Success Rates.pdf

The 7 Things I Know About Cyber Security After 25 Years | April 2024

Understanding Discord NSFW Servers A Guide for Responsible Users.pdf

Handwritten Text Recognition for manuscripts and early printed texts

Workshop - Best of Both Worlds_ Combine KG and Vector search for enhanced R...

Automating Google Workspace (GWS) & more with Apps Script

Partners Life - Insurer Innovation Award 2024

presentation ICT roal in 21st century education

Apidays Singapore 2024 - Building Digital Trust in a Digital Economy by Veron...

HTML Injection Attacks: Impact and Mitigation Strategies

Strategies for Unlocking Knowledge Management in Microsoft 365 in the Copilot...

technology3-javascript-basics

1. Javascript The Basics WOODIWISS.ME Freelance Web Developer & Lecturer in the Winchester, Hampshire area.

2. What’s covered • What is JavaScript • Comments • JavaScript in a Browser • Data Types • Variables • Functions • Statements • Scope WOODIWISS.ME

3. What is JavaScript • Lightweight Scripting Language. • Interpreted. • Object Orientated. • Prototype-based. WOODIWISS.ME

4. Easy to pick up. difficult to master. WOODIWISS.ME Freelance Web Developer & Lecturer in the Winchester, Hampshire area.

5. ECMA What/Who is ECMA? WOODIWISS.ME

6. ECMA What/Who is ECMA? • European Computer Manufacturers Association. WOODIWISS.ME

7. ECMA What/Who is ECMA? • European Computer Manufacturers Association. • Non-proﬁt Standards Organisation. WOODIWISS.ME

8. ECMA What/Who is ECMA? • European Computer Manufacturers Association. • Non-proﬁt Standards Organisation. • Introducing ECMAScript! WOODIWISS.ME

9. ECMAScript Language ECMAScript.es Dialects JavaScript.js WOODIWISS.ME ActionScript.as

10. So what can javascript do? WOODIWISS.ME Freelance Web Developer & Lecturer in the Winchester, Hampshire area.

11. Hardware Programming • Arduino via NodeJS framework. • Tessel - micro-controller that runs JavaScript. • Uniduino - gives you the power to connect the Unity game engine to Arduino. • Control peripherals e.g. GamePads. WOODIWISS.ME

12. Create Hybrid Apps • PhoneGap - iOS, Android, Blackberry, Windows Phone & more. • TideSDK - Windows, OSX, Linux. • Icenieum - Windows, Web, iOS. • Chrome Apps. WOODIWISS.ME

13. Server Side • Nodejs • Among others… WOODIWISS.ME

14. Client Side • Vanilla JavaScript in a browser. • jQuery - simplify client side scripting. • Zepto - Lightweight jQuery alternative. • Three.js - 3D graphics on the web. • AngularJS - SPA framework. • jQuery Mobile - Touch optimised. WOODIWISS.ME

15. In the Browser • Lets look at some Developer tools. • Firefox - Firebug. • Chrome - Web Developer Tools. • Internet Explorer - Developer ToolBar. • Opera - Dragonﬂy. WOODIWISS.ME

16. Variables • Used to store data. • Single line style. • Multiline. • Typically must begin with a letter ( $ and _ are valid ) • Case sensitive. • Over-writable - dynamic. WOODIWISS.ME

17. Statements • The end of a command. • Tells the interpreter (browser) that your intention is ﬁnished. WOODIWISS.ME

18. Comments • Helpful notes. • Good for debugging. • Working with others. • Don’t overuse. WOODIWISS.ME

19. Data Types • Primary ! • • “Hello” - “” - “1984” - “TRUE” • Number • 19 - 19.333 • • String Boolean • true - false • var car = { myCar: “Saturn", getCar: CarTypes("Honda"), special: Sales }; • var coffees = ["French Roast", "Colombian", "Kona"]; • Object • • ! Composite Array Special • Special • Null • null, 0, false. • Undeﬁned • undeﬁned value. WOODIWISS.ME

20. Functions WOODIWISS.ME

21. Calling / Invoking Line 12 WOODIWISS.ME

22. WOODIWISS.ME

23. WOODIWISS.ME

24. Deﬁne with arguments. WOODIWISS.ME

25. Deﬁne with arguments. WOODIWISS.ME

26. Deﬁne with arguments. Call with arguments. WOODIWISS.ME

27. Deﬁne with arguments. Call with arguments. WOODIWISS.ME

28. Deﬁne with arguments. 1 Call with arguments. WOODIWISS.ME

29. Deﬁne with arguments. 1 Call with arguments. WOODIWISS.ME

30. Deﬁne with arguments. 1 Call with arguments. WOODIWISS.ME

31. Deﬁne with arguments. 1 1 Call with arguments. WOODIWISS.ME