Alex Pearson introduces a course on programming and building a basic calculator application. The course goals are to learn about software development, build a first website using HTML/CSS, and create a program using JavaScript. Students will set up their development environment, learn programming concepts like data types and functions, and incrementally build a calculator with operations like addition and error handling. The class discusses taking the calculator further in version 2.0 with additional features.
Behat & Automated Testing (Lightning Talk)Rex Lorenzo
This lightning talk introduces Behat, an open source behavior-driven development (BDD) framework for writing automated acceptance tests in a business-readable language. The presenter outlines what Behat is, how to use it by writing scenarios in plain English formatted as executable code, and why organizations benefit from automated cross-browser testing that catches regressions and allows anyone to author tests. Behat converts scenarios to executable tests that interact with a website by triggering specific elements and verifying expected outcomes.
SenchaCon 2016: Expect the Unexpected - Dealing with Errors in Web AppsSencha
This document discusses handling errors in web applications. It begins by explaining what JavaScript errors are and how they are typically invisible to users. It then discusses how to catch errors using window.onerror or addEventListener and logging errors to help debug issues. Ideal error handling involves logging detailed error information to a database and notifying developers. The document wishes for more context around errors, like function arguments or AJAX requests. It introduces a new error logging and monitoring tool that provides detailed user environment data, function arguments, screenshots, and a timeline to help developers debug issues more easily.
Javascript and jQuery PennApps Tech Talk, Fall 2014Kathy Zhou
This document summarizes Kathy Zhou's talk on Javascript and jQuery given at PennApps Fall 2014. The talk provided an introduction to Javascript as a programming language that runs in web browsers and jQuery as a Javascript library for animations, effects, and simplifying Javascript usage. It covered basics of Javascript including data types, functions, and manipulating the DOM. It also demonstrated how jQuery can be used to more easily select and modify page elements, attach event handlers, and implement an autocomplete search bar. The talk aimed to help attendees start building UI features for their web apps using Javascript and jQuery.
This document provides an agenda and discussion for a class on user research, building tools, more JavaScript, and putting a website up. The class will include discussions of homework, UX and collaboration strategies, build tools like Grunt, integrating JavaScript into web pages, functions and scope in JavaScript, and exercises. For homework, students will create a web page that allows a user to select pizza toppings and displays the total price.
Building a PWA - For Everyone Who Is Scared ToRaymond Camden
This document provides an overview of building progressive web apps (PWAs). It discusses the key technologies needed for PWAs including manifest files, service workers, and app shells. It provides examples of how to add a manifest to enable installable web apps, how to cache assets using service workers, and how to send push notifications. While Safari and iOS do not fully support these technologies yet, the document notes they are being developed for future releases.
WordCamp SF 2011: Debugging in WordPressandrewnacin
The document discusses various debugging techniques in WordPress, including:
1. Using WP_DEBUG, SCRIPT_DEBUG, and SAVEQUERIES constants to enable debugging and view queries.
2. Installing plugins like the Debug Bar and Log Deprecated Notices to aid debugging.
3. Checking for issues like permissions, JavaScript errors, redirects, and rewrite rules when troubleshooting.
4. Tips for local development including using hosts files and output buffering to replace live URLs.
5. Mention of tools like Xdebug and unit testing to improve the debugging process.
The document discusses automated browser testing. It notes that while standard browser testing is time-consuming and can miss things, automating it through tools like Dusk can validate user experiences in a realistic way. Dusk makes it possible to write simple tests that check for page content or fill out and submit forms with just a few lines of code. The document demonstrates some sample tests and argues that automated testing helps prevent issues, catch bugs, and ensure quality as a site evolves. It should be added early and test critical user flows and workflows.
This document provides instructions for designing websites locally using MAMP/WAMP on Mac/Windows systems. It discusses installing Apache, MySQL, PHP and WordPress locally, downloading themes and plugins, and using Dreamweaver CS5 to edit files and view live changes in the browser without an internet connection. Specific steps covered include creating databases, installing WordPress, editing themes and files in Dreamweaver, and customizing footers. Screenshots demonstrate properties, filters and discovering related files.
Having Fun Building Web Applications (Day 1 Slides)Clarence Ngoh
This document outlines the agenda and content for Day 1 of a web applications course. The instructor will cover building the front end of web applications using HTML, CSS, JavaScript, jQuery and templating. Students will practice implementing common front end patterns and components. They will scaffold and style a matchmaking application, adding user profiles, events and APIs. The goal is to build out the front end interface without a backend, focusing on design, interactivity and data loading.
To make a website, one can either create all the code and files using software on their own computer or use software installed on a server. When creating from scratch, the code and files are made by the creator and published to a server that hosts the website, making it accessible worldwide. Alternatively, software on the server can be used to easily create and modify pages without needing any software locally. This allows changes from anywhere. Some common options for creating websites include using blog platforms, flash website builders, or working directly from one's own domain with a hosting provider when more advanced capabilities are needed.
This document provides an agenda and overview for a developer training session. It discusses developing a growth mindset for programming, strategies for managing frustration, resources for learning programming concepts and getting help, and approaches for collaborative work. It also introduces backend concepts like servers, databases, and JavaScript on the server side using Node.js. The homework assignment involves researching and documenting programming resources.
This document provides an agenda and instructions for setting up a server and database for a coding project. It discusses setting up a Node.js server on Digital Ocean, forking a sample project on GitHub, installing dependencies with NPM, running the server, and using EJS templates and MySQL Workbench to connect to and modify a database. Students are instructed to fork the sample project, modify it to use their own database, run it on their server, and submit the GitHub link and website URL for homework.
Rich, interactive web applications AKA fat clients are now commonplace. There are so many frameworks for building these rich client applications, and the debate among developers is which of these frameworks to use. As designers and developers we need to step back, and ask ourselves when and how we should enrich our client applications and when or why not. Let’s dig in to the question: Why do we even want fat clients, and when should we use them? Let’s examine the complications such clients introduce so we can weigh them against all the benefits.
The document provides an agenda and overview for a class on untangling the web that covers Javascript topics like JSON, server-side and client-side JS, routes in Node.js, setting up Bluemix applications, using Bluemix services, and working on a project. It discusses moving a cars example from using local WebSQL to a remote SQL database in Bluemix, including connecting a MySQL database, creating tables and fields, querying and inserting data using Node.js and callbacks, and getting data from the database to render on the client-side. Homework involves taking the Bluemix implementation shown and rendering the cloud data as the previous cars example using JSON parsing.
This document provides an agenda and summary for the last class of a course on web development. It discusses homework on using JSON and databases, presentations from student group projects, and next steps. It reviews key topics covered in the course like HTML, CSS, JavaScript, databases, and hosting platforms. The document previews the main topics planned for upcoming modules, provides examples of interesting websites using technologies like speech recognition, and ends with an open question period.
Christmas holiday experiment: creating a VueJS front that gets data through GraphQL from a decoupled WordPress install on another server. Read more on this blogpost: https://conimpeto.be/wordpress/create-a-wordpress-twentyseventeen-theme-with-vuejs-and-graphql/.
Behavior Driven Development (BDD) focuses on defining expected application behaviors through user stories. Cucumber and Capybara are tools that support BDD. Cucumber allows writing tests in plain language and organizing them into feature files. Capybara is a framework that simulates user interactions and uses a domain-specific language to write tests. It supports drivers like Selenium to test web applications with JavaScript.
This document discusses introduction to programming concepts including:
1. Defining computer science and programming terms like algorithms, logic, and coding.
2. Classifying programming languages as high-level, middle-level, and low-level and providing examples.
3. Describing the system development life cycle (SDLC) process which includes problem analysis, program design, coding, testing, and documentation/maintenance.
Basic introduction to WordPress for people who have a coding background/IT background but haven't been using WordPress as a CMS.
Brief history, where it's going and tips & tricks to get started.
Coding, like language study, has cognitive advantages. Learning a system of signs, symbols and rules used to communicate improves thinking by challenging the brain to recognize, negotiate meaning and master different language patterns. Multilingual people are more adept at switching between communication structures. Unfortunately, few high schools and far fewer middle and elementary schools offer courses in computer programming. Some educators are considering a programming language as fulfilling the requirement for a “second language.” Why teach coding outside a computer science class? Should it count as a “second language?” How is a programming language comparable to a spoken language? What should we be teaching as coding?
Simple presentation for an Introductory Session for local area youth and other interested individuals who might want to learn more of what is not currently being taught in schools anymore.
An open house is being held to teach girls how to code. Coding is being introduced and explained. The open house for learning about and trying coding will take place on Monday, November 17th during academic or activity time in the computer room E219.
This document summarizes a project where students in 3rd grade learned to code. It introduces coding as the new literacy and discusses how coding was integrated across the curriculum through various project-based learning activities. These included using coding in math, creating characters, festivals, advertising, science, music, art, games, stories and more. It lists the iPad apps and websites used, and names the teachers involved in the project.
Hotmail ha mejorado la velocidad de acceso y uso de la cuenta de correo, ha ampliado el espacio de almacenamiento sin límite, ha mejorado los filtros anti-spam y de suplantación de identidad, y ahora guarda automáticamente los borradores y actualiza la bandeja de entrada. También permite organizar los correos en carpetas, acceder a la cuenta desde el celular, e integrar otras cuentas de correo.
A brief, language-no-specific introduction to programming concepts - some ways to approach a programming problem, and general characteristics of programming languages (with a bit of a slant towards scripting languages).
Speaking 'Development Language' (Or, how to get your hands dirty with technic...Julie Meloni
Slides from an internal workshop at George Washington University Library on 12 June 2012. The goal of this workshop was to increase the number of people who can “work” on technical issues in the library. Topics were grouped into three main parts: "Development Lifecycle & Where You Fit In", "Computer Programming Basics", and "Python in Particular".
Este documento presenta una introducción al uso de la aplicación Scratch Jr, incluyendo cómo comenzar nuevos proyectos, agregar disfraces y escenarios, y programar el movimiento y comportamiento de los objetos. Explica las diferentes herramientas y bloques de programación disponibles y muestra ejemplos de proyectos simples que los niños pueden crear.
Introduction to Programming (well, kind of.)Julie Meloni
I worked through these slides during the THATCamp New England 2010 Introduction to Programming Bootcamp Session. For more info on THATCamp NE see http://www.thatcampnewengland.org/
This document is an introduction to programming with JavaScript. It discusses what programming is, how to communicate with computers using programming languages like JavaScript, and what makes a good programmer. It also provides an overview of common JavaScript programming concepts like variables, data types, logical operators, conditionals, functions, and objects. The document encourages learners to continue learning programming through books, meetups and practice, and provides some resources for doing so.
Electron - cross platform desktop applications made easyUlrich Krause
Ulrich Krause will be presenting at the Engage 2018 conference on May 22-23, 2018 in Rotterdam, The Netherlands. The presentation will cover building cross-platform desktop applications using Electron, a framework that allows creating such applications with JavaScript, HTML, and CSS. Krause will demonstrate how to build a basic "Hello World" Electron app, add features like menus, file access, and notifications, and how to package the application for distribution. Debugging techniques and ensuring the application works properly across different platforms will also be discussed.
Intro to mobile web application developmentzonathen
Learn all the basics of web app development including bootstrap, handlebars templates, jquery and angularjs, as well as using hybrid app deployment on a phone.
Busy Developer's Guide to Windows 8 HTML/JavaScript AppsJAX London
With the upcoming release of Windows 8, Microsoft decided to bring HTML+Javascript into the world of Windows-platform application development as a first-class citizen. But make no mistake, this isn’t an attempt to somehow subvert Web developers—it’s more about enabling Web developers to leverage those skills in building “native” Windows applications running on the Windows 8 laptops, desktops, and slates. In this presentation, we’ll go over the basics of building a Windows 8 app using HTML and JavaScript, including a brief overview of what’s possible—and what’s not—for the Web developer seeking to “go native” on Windows.
Next week, students will be required to hand in wireframes for their final projects. Wireframes can be created using tools like Balsamiq Mockups, Sketch, or pen and paper. Previous student projects from the FEWD program around the world can be found at a provided URL.
Over 200 Pages of resources and code snippets to learn JavaScript and JavaScript DOM manipulation. JavaScript is the most popular web programming language and this eBook will help you learn more about JavaScript Coding
This document provides an overview of the MEAN stack and demonstrates how to build a sample application with it. It begins with defining each component of the MEAN stack: MongoDB as the database, Express as the web application framework, AngularJS for the frontend framework, and Node.js as the runtime environment. It then demonstrates setting up a basic Express app, integrating authentication with Passport, and interacting with MongoDB using Mongoose. The document also discusses key concepts like asynchronous I/O in Node.js and model-view-controller patterns in AngularJS. Overall, it serves as a high-level introduction to the technologies that make up the MEAN stack.
The document provides an overview of plugin development for Lotus Notes, Domino and Sametime applications using the Lotus Expeditor Toolkit. It discusses what plugins can do, how to install the Expeditor Toolkit plugin in Eclipse, the basic anatomy of a plugin, key extension points, and how to build user interfaces with SWT and jobs. The presentation also demonstrates how to create a sample plugin that reads data from a web service and displays it in a sidebar panel.
The document describes a practical training project to develop a job portal website using PHP at Masters Infosoft Pvt. Ltd. in Jaipur, India by Arjun lal Kumawat, a student at Sobhasaria Engineering College. It discusses the objectives, scope, system analysis and design, hardware and software requirements, data flow diagram, and testing of the job portal website project.
Getting Started in Custom Programming for Talent SourcingGlenn Gutmacher
If you think you're technical but never learned how to code, this should motivate you to realize you don't need to learn much in order to automate a lot of common talent sourcing activities
The document discusses reasons for pursuing a career in web development, predicting its continued growth. It outlines the skills needed, including front-end technologies like HTML, CSS, and JavaScript, as well as back-end options like PHP, Ruby, Python, and Node.js. Testing, frameworks, and devops skills are also important. Overall, the document argues that web development offers an in-demand and exciting career path.
Adobe Flex is the leading techonology for the development and deployment of cross platform Rich Internet applications. This session is an introduction to building RIA with Adobe Flex and AIR.
JavaScript is the most widely used language cross platforms. This talk will analyze the security concerns from past to present with a peek to the future of this important language. This talk was presented as Keynote at CyberCamp Espana 2014.
Week 05 Web, App and Javascript_Brandon, S.H. WuAppUniverz Org
The document discusses JavaScript basics and modular JavaScript design. It provides an agenda that covers JavaScript execution, scopes, types, browser objects, blocks, closures, DOM, event handling, and AJAX. It then discusses object-oriented JavaScript, components, containers, layouts, and client-side MVC patterns for modular JavaScript design. Examples of leveraging standards like HTML, CSS, and JavaScript across devices are also provided.
The document discusses HTML5 as a platform for user interfaces. It outlines several new features of HTML5, including the <canvas> element for drawing, WebGL for 3D graphics, multi-touch support, local storage with Web SQL databases, real-time updates with Web Sockets, improved file handling, and offline application caching. The document argues that HTML5 provides many of the capabilities of native applications and recommends using HTML5 and JavaScript for cross-platform user interface development.
CC-Castle; The best Real-Time/Embedded/HighTech language EVER?Albert Mietus
About (a stalled hunt for) a new programming paradigma: ‘CC’; experimenting with the new syntax and semantics to create the ‘Castle’ language. I had to code syntax-highlighting tools for example-programmes, editor-plugins, etc. I started to build a compiler using model-based engineering tactics for {our domain} specific language. I wrote a lexer/parser grammar; build an AST; I studied LLVM, to use it as back-end. And …
How could I ever imagine I could do that? But it was FUN!
--------------
Presented at 040coders.nl; Thursday, April 18, 2019
The document provides an overview of Google App Engine, a platform for developing and hosting web applications on Google's infrastructure. It discusses the different language runtimes, services, and development tools available on App Engine and highlights some example applications that have been built on the platform. The document also shares experiences from Latin American users and details some new features recently added to App Engine like cursors, task queues, and cron jobs.
Software development has shifted focus from efficiency to productivity, reusability, and user-friendliness. Object-oriented programming (OOP) models objects that contain data and methods. Key OOP concepts include inheritance, where subclasses extend and modify superclass features. An integrated development environment (IDE) combines tools like editors, compilers, linkers, and debuggers. Java uses a hybrid approach of compiling to bytecode, then interpreting for platform independence. Console applications use text input/output. Graphical user interface (GUI) applications use menus and buttons. Applets run in web browsers.
1. The document provides an introduction to the Node.js course, covering topics like JavaScript basics, Node.js fundamentals, Express.js, debugging, and more.
2. Key concepts discussed include how the Node.js runtime works, using core modules, asynchronous programming with callbacks and promises, and the module system.
3. Express.js is introduced as a popular web framework that handles requests and responses, routing, and other complex server tasks so developers can focus on business logic. Debugging tools are also covered.
Similar to Claim Academy Intro to Programming (20)
How to Show Sample Data in Tree and Kanban View in Odoo 17Celine George
In Odoo 17, sample data serves as a valuable resource for users seeking to familiarize themselves with the functionalities and capabilities of the software prior to integrating their own information. In this slide we are going to discuss about how to show sample data to a tree view and a kanban view.
Integrated Marketing Communications (IMC)- Concept, Features, Elements, Role of advertising in IMC
Advertising: Concept, Features, Evolution of Advertising, Active Participants, Benefits of advertising to Business firms and consumers.
Classification of advertising: Geographic, Media, Target audience and Functions.
AI Risk Management: ISO/IEC 42001, the EU AI Act, and ISO/IEC 23894PECB
As artificial intelligence continues to evolve, understanding the complexities and regulations regarding AI risk management is more crucial than ever.
Amongst others, the webinar covers:
• ISO/IEC 42001 standard, which provides guidelines for establishing, implementing, maintaining, and continually improving AI management systems within organizations
• insights into the European Union's landmark legislative proposal aimed at regulating AI
• framework and methodologies prescribed by ISO/IEC 23894 for identifying, assessing, and mitigating risks associated with AI systems
Presenters:
Miriama Podskubova - Attorney at Law
Miriama is a seasoned lawyer with over a decade of experience. She specializes in commercial law, focusing on transactions, venture capital investments, IT, digital law, and cybersecurity, areas she was drawn to through her legal practice. Alongside preparing contract and project documentation, she ensures the correct interpretation and application of European legal regulations in these fields. Beyond client projects, she frequently speaks at conferences on cybersecurity, online privacy protection, and the increasingly pertinent topic of AI regulation. As a registered advocate of Slovak bar, certified data privacy professional in the European Union (CIPP/e) and a member of the international association ELA, she helps both tech-focused startups and entrepreneurs, as well as international chains, to properly set up their business operations.
Callum Wright - Founder and Lead Consultant Founder and Lead Consultant
Callum Wright is a seasoned cybersecurity, privacy and AI governance expert. With over a decade of experience, he has dedicated his career to protecting digital assets, ensuring data privacy, and establishing ethical AI governance frameworks. His diverse background includes significant roles in security architecture, AI governance, risk consulting, and privacy management across various industries, thorough testing, and successful implementation, he has consistently delivered exceptional results.
Throughout his career, he has taken on multifaceted roles, from leading technical project management teams to owning solutions that drive operational excellence. His conscientious and proactive approach is unwavering, whether he is working independently or collaboratively within a team. His ability to connect with colleagues on a personal level underscores his commitment to fostering a harmonious and productive workplace environment.
Date: June 26, 2024
Tags: ISO/IEC 42001, Artificial Intelligence, EU AI Act, ISO/IEC 23894
-------------------------------------------------------------------------------
Find out more about ISO training and certification services
Training: ISO/IEC 42001 Artificial Intelligence Management System - EN | PECB
Webinars: https://pecb.com/webinars
Article: https://pecb.com/article
-------------------------------------------------------------------------------
The Jewish Trinity : Sabbath,Shekinah and Sanctuary 4.pdfJackieSparrow3
we may assume that God created the cosmos to be his great temple, in which he rested after his creative work. Nevertheless, his special revelatory presence did not fill the entire earth yet, since it was his intention that his human vice-regent, whom he installed in the garden sanctuary, would extend worldwide the boundaries of that sanctuary and of God’s presence. Adam, of course, disobeyed this mandate, so that humanity no longer enjoyed God’s presence in the little localized garden. Consequently, the entire earth became infected with sin and idolatry in a way it had not been previously before the fall, while yet in its still imperfect newly created state. Therefore, the various expressions about God being unable to inhabit earthly structures are best understood, at least in part, by realizing that the old order and sanctuary have been tainted with sin and must be cleansed and recreated before God’s Shekinah presence, formerly limited to heaven and the holy of holies, can dwell universally throughout creation
The membership Module in the Odoo 17 ERPCeline George
Some business organizations give membership to their customers to ensure the long term relationship with those customers. If the customer is a member of the business then they get special offers and other benefits. The membership module in odoo 17 is helpful to manage everything related to the membership of multiple customers.
Webinar Innovative assessments for SOcial Emotional SkillsEduSkills OECD
Presentations by Adriano Linzarini and Daniel Catarino da Silva of the OECD Rethinking Assessment of Social and Emotional Skills project from the OECD webinar "Innovations in measuring social and emotional skills and what AI will bring next" on 5 July 2024
Ardra Nakshatra (आर्द्रा): Understanding its Effects and RemediesAstro Pathshala
Ardra Nakshatra, the sixth Nakshatra in Vedic astrology, spans from 6°40' to 20° in the Gemini zodiac sign. Governed by Rahu, the north lunar node, Ardra translates to "the moist one" or "the star of sorrow." Symbolized by a teardrop, it represents the transformational power of storms, bringing both destruction and renewal.
About Astro Pathshala
Astro Pathshala is a renowned astrology institute offering comprehensive astrology courses and personalized astrological consultations for over 20 years. Founded by Gurudev Sunil Vashist ji, Astro Pathshala has been a beacon of knowledge and guidance in the field of Vedic astrology. With a team of experienced astrologers, the institute provides in-depth courses that cover various aspects of astrology, including Nakshatras, planetary influences, and remedies. Whether you are a beginner seeking to learn astrology or someone looking for expert astrological advice, Astro Pathshala is dedicated to helping you navigate life's challenges and unlock your full potential through the ancient wisdom of Vedic astrology.
For more information about their courses and consultations, visit Astro Pathshala.
How to Install Theme in the Odoo 17 ERPCeline George
With Odoo, we can select from a wide selection of attractive themes. Many excellent ones are free to use, while some require payment. Putting an Odoo theme in the Odoo module directory on our server, downloading the theme, and then installing it is a simple process.
Credit limit improvement system in odoo 17Celine George
In Odoo 17, confirmed and uninvoiced sales orders are now factored into a partner's total receivables. As a result, the credit limit warning system now considers this updated calculation, leading to more accurate and effective credit management.
No, it's not a robot: prompt writing for investigative journalismPaul Bradshaw
How to use generative AI tools like ChatGPT and Gemini to generate story ideas for investigations, identify potential sources, and help with coding and writing.
A talk from the Centre for Investigative Journalism Summer School, July 2024
How to Create Sequence Numbers in Odoo 17Celine George
Sequence numbers are mainly used to identify or differentiate each record in a module. Sequences are customizable and can be configured in a specific pattern such as suffix, prefix or a particular numbering scheme. This slide will show how to create sequence numbers in odoo 17.
2. WHAT’S THIS ALL ABOUT?
Who: Alex Pearson
Director of Curriculum & Instruction
Claim Academy
What: A step-by-step intro to your first website and
JavaScript program
Overview of Programming
Intro to HTML/CSS
Intro to JavaScript/JQuery
Why: to get you excited about programming!
3. GOALS OF THIS COURSE:
Get excited! Have fun! Get hype!
Learn about software development.
What is programming?
What does a programmer do?
Learn (a little) about the Web.
What is “the internet”?
How do I make it do what I want?
Build your first website and program.
How do I use HTML/CSS?
How do I use JavaScript/JQuery?
4. THINGS NEEDED FOR CLASS:
Computer: Mac, Windows, or Linux
Sorry, no Chromebooks
Preferred: >2GB of RAM
Wi-Fi: Connection information below
Name: Claim
Password: Claimhome
Brackets: A free text-editor from Adobe
Download link: http://brackets.io
Browser: Chrome, Firefox, Safari, Opera
Please no Internet Explorer. Ever.
5. THINGS NEEDED FOR CLASS 2:
Template Files .zip: download online
https://github.com/NAlexPear/Intro-Class/tree/class-
download
Click “Download .zip” in the right sidebar
Extracted Template Files: wherever you’d like
Don’t forget where you put that file!
Open Project in Brackets: File > Open Folder
Make sure you have ‘css’, ‘js’, ‘images’ directories,
and an index.html file (+ some other stuff)
Live Preview: Set up your live preview
Display ‘index.html’, then click the lightning bolt
6. QUICK BREATHER (5 minutes)
Everything ready to go?
1) Introduce yourself to one of the people sitting
next to you
2) Ask them what kind of laptop they have & why.
3) Ask them what experience they have with
programming, IT, or computers.
4) Introduce your new friend to someone else.
9. WHAT IS PROGRAMMING?
The “verbs” of the computer world
2 + 3
var doThis = function(){ thing to do };
Where is programming used? At every “level”
Hardware/Architecture (1000110011)
Between hardware and an OS (Assembly)
Within an OS (terminals, source code)
On top of OS (programs, virtual machines)
-including in browsers! (just not HTML/CSS)
What did we just do with HTML/CSS, then?
10. WHAT IS THE WEB?
The “web” is a (series of) connection(s):
Users->browsers->the “Internet”->servers
...all communicating via Transfer Protocols (e.g.
HTTP and HTTPS)
USERS BROWSERS INTERNET
SERVERS
11. ENOUGH TALK, LET’S TYPE
HTML: “Hyper Text Markup Language”
DOM: “Document Object Model”
<!DOCTYPE HTML>
<html>
<head>
<title></title>
<link
rel=”stylesheet”>
<script></script>
</head>
<body>
<div>
<h1></h1>
</div>
<div>
<p></p>
</div>
</body>
DOCUMENT
HTML
head
METADATA
body
div
VISIBLE
div
STUFF
12. QUICK BREATHER (5 minutes)
Anything need to be reviewed?
1) Ask your neighbor any questions you have so
far!
a) if you can’t answer them yet, ask me!
2) Tell your neighbor how much you love HTML
and CSS (and what you’d like to learn about
next)
3) Get everything ready for JavaScript!
13. WE GET TO PROGRAM! (finally)
To the editor! (Chrome)
15. JAVASCRIPT BUILDING BLOCKS 2
Methods: functions attached to Objects
- some are custom, some are built in!
- Ex: .length, toUpperCase
Functions: like variables, but for blocks of code
- methods are a kind of function
- you can create your own functions, too!
- you can save functions as a variable
var doSomething = function(parameters){
stuff to do;
};
16. BUILDING A CALCULATOR 1:
JQuery: extending JavaScript’s built-in methods
- interacts with the DOM
- makes ‘Events’ easier to implement
- integrates seamlessly with JavaScript
- $(‘html or css selectors here’).doSomething();
var calc = function(){};
$(document).ready(function(){
$(‘#button’).click(function(){
calc();
});
});
17. BUILDING A CALCULATOR 2:
Back to regular ol’ JavaScript:
- need to gather user input (prompt)
- build functions for each operation
- need to return answers from each function;
var calc = function(){
var num1 = //something
var num2 = //something
var add = function(num1, num2){
return num1+num2;
};
};
18. BUILDING A CALCULATOR 3:
Thinking about user interaction:
- how do we want the user to interact with these
functions?
- what are the limitations of this program?
- think about data types!
var operation = //something
if(operation === //something){
alert(//some function);
}else if (//something else){
alert(//some other function);
};
19. BREAKING OUR CALCULATOR:
Still thinking about users: how can we break it?
- What if users don’t know what numbers are?
- What if users don’t know what operations are
valid or supported?
- What is the data type of user input?
- How can we communicate errors to users?
var num1 = parseInt(input1,0);
if(isNaN(num1) === true || isNaN(num2) === true){
//tell the user that something is wrong
}else{
//carry on
};
21. THANKS, AND GOOD LUCK!
LinkedIn: https://www.linkedin.com/in/nalexpearson
email: alex@claimacademystl.com
twitter: @NAlexPear
GitHub: NAlexPear
Thanks for coding
with me today!
https://claimacademystl.com
Editor's Notes
Hi everybody!
take a look at index.html
in the <title> part of the document, change the title of the webpage to whatever you’d like
in the <body><div class=”header”><h1></h1></div></body> section, change the intro text to whatever you’d like
in the <body><div class=”header><h3></h3></div></body> section, change the “programming is fun” text to whatever you’d like!
Neat, huh? Notice how the text is instantly updated in the preview file. That’s because the browser is just reading a text document like you or I.
Now change the <h3></h3> text into var add = 2+3; console.log(add);
nothing happens, right? That’s because we’re not actually programming yet.
HTML is just HYPER TEXT MARKUP LANGUAGE… or text that we can “mark up” to make prettier.
By itself, HTML is static. It can point to programs, but it isn’t a program by itself.
Now change the <h3></h3> text back into something cool. Then navigate to style.css.
CSS = “cascading style sheets”
very neat stuff, but the name should give you a hint about what it does
Go into the h1 { } styling and change Helvetica to Times New Roman
neat huh?
Now try just writing any old text
doesn’t show up
This means that it’s not just text here. We’re getting closer to programming, but we’re not quite there yet. We can only manipulate the STYLE of something.
if we think about it metaphorically, HTML is the NOUN (or series of nouns)
CSS would be the ADJECTIVES
Programming (or programs) would be VERBS
Very simplified, and maybe not always true, but good rule of thumb
To answer that last question, we need to understand a little bit more about the Web. We obviously used a browser, but where does programming fit in?
Hopefully you’re starting to see the depth of knowledge it might take to call ones-self a “full-stack” developer, or even a “front-end” or “web developer” regardless of languages and frameworks. Be wary of the poser, but be excited about how much there is left to learn! And might I recommend a certain developer bootcamp if this sort of thing is exciting.
Remember, that across the full “stack” of places to program, the “web” is only one option, and there’s a lot to deal with even when we restrict ourselves to the “web”.
For today:
-we’re just looking at the interaction between users and browsers, and that’s it
-Also just static rather than dynamic web interactions
dynamic interactions = facebook, blog pages, twitter (serves content dynamically)
another layer of abstraction on top of static data
static interactions = what we’re doing (even with code, since ours is JUST in the browser rather than being deployed to a server across the internets).
Enough of all that. Let’s mess with stuff again.
Before we get to the “programming” part of the course, we have to know a little bit about how those programs interact with the text documents in front of us: HTML and CSS.
We won’t spend much time on CSS, but we need to know a few things about how HTML documents are set up so that we can manipulate the document with our programs!
We’ve already discovered that HTML is just fancy text. All of the “programming” comes from the browser already, because it reads the text according to certain rules and displays that text according to presets. Those rules and presets are the things that make they hyper-text into a “markup” language. We can play according to those markup rules with TAGS.
You’ve already seen a few tags before. We’ve messed with <title> and <h1>, which was neat. Those tags had very specific roles that mostly dealt with formatting. There are also tags for italics, bold, paragraphs, etc. The most important tags, though, are the ones the divide the HTML document into a series of chunks that interact with one another in a way that a browser can render and humans can understand. We refer to this as the DOM, or document object model.
This is the foundation for how we’ll interact with HTML, and will inform how we mess with tags and content from here on out.
(EXPLAIN DOM DIAGRAM FROM THE OUTSIDE IN) + what you might find in each section. Change the following in each section:
in DOCUMENT and HTML: nothing at all.
in head:
remind folks about <title>
comment out <link> for the stylesheet
add <script> to calculator.js, test function
in body
check out <img> tags and how they work (relative vs url)
relative->directory tree (remind folks that it’s very important NOT to change the directory structure)
change calculator url to an image url of their choice
check out <div> tags
already messed with some of the text inside of tags
change <h1> into other header types to see what happens
should notice that the CSS we linked before changes a lot of the visible properties of the header (neat, huh?)
add a link to http://claimacademyslt.com with an anchor tag <a href=””>
take a look at the div with class “button”
class is styled using CSS, but it’s also turned into an event listener
this is how we’ll interact with the DOM through JQuery and JavaScript
Enough with text and stuff! Let’s get to programming.
We’re going to try out some of the simple concepts in the Javascript Console that comes packaged with Google Chrome. Everybody should open up the console with “control + shift + j”. This is how we’ll begin telling the browser what to do!
Try typing in some simple math (addition, multiplication, division). Notice how the browser responds to our commands, rather than simply outputting text. Also, note how we can cause errors pretty easily when we screw something up!
The nice thing about computers (and programming) is that they do exactly what you tell them to do. The frustrating thing about programming is that computers do exactly what you tell them to do. If there’s a bug, it’s your fault!
Moving on to some important concepts in JavaScript to expand its functionality beyond basic addition...
Programming languages have to differentiate between different kinds of data. While you and I might recognize that “2” and “two” are conceptually the same, the computer doesn’t and can’t. We have to differentiate between asking the computer to add numbers together or concatenating them into a string. An example:
type in 2 + 2 ( you should get 4 as an answer)
now type in “2” + “2” (you should get “22” as an answer)
The different responses happen because of these different data types. There are lots of data types in the programming world and in Javascript, but we’re only going to go over three today: numbers, strings, and booleans. With these three, we can build our final calculator program!
We can do things to and with these data types by using operators. Operators allow us to manipulate data of certain types or allows us to extract information about those types. It’s how we make the sentences of programming. Most of the time, operators work best when you’ve saved the data you’re using in a variable.
Variables allow you to save data values (or functions, which we’ll see later), name them, and then bring them up later for use. You’ll be using a lot of variables as you start programming. Let’s make your first couple with some assignment operators. The most important one (=) simply assigns a value to a variable. Let’s try some of these:
var myName = “Alex”;
var myAge = 26;
var isMale = true;
console.log(“Hi, my name is “ + nyName + “ and I am “ + myAge + “ years old.”);
Cool, huh? Now You’ve already seen a few of these operators in action. Many of the numbers operators make intuitive sense (+, -, etc.). Let’s try some of the following in the console:
console.log(myAge++);
console.log(myAge);
console.log(++myAge);
var greeting = (“Hello, my name is”);
console.log(greeting + “ “ + myName);
For boolean, let’s introduce one more concept to make these a bit more useful. Most of the time, we use a boolean to check if something is true or false, then do a specific thing to once we’ve established that it’s true or false. Example: if myName is “Alex”, log “Hi Alex” to the console, or else log “who are you?”. These are called “if-else” statements. Here’re a few examples:
if(myName === “Alex”){console.log(“Hi Alex!);} else {console.log(“Who are you?”)};
if(myAge < 30){console.log(“A young whippersnapper”);} else {console.log(“Still a whippersnapper”);}
if(myAge >18 && isMale === true){console.log(“Have you signed up for the draft?”);}else{console.log(“move along then”)};
Neat, huh? You’ll find those kinds of operators in most programming languages. There are some syntactical differences between the language, but just about every language out there will have those same data types and operations, just like most spoken languages have verbs, adverbs, clauses, and direct objects.
Now we’ve seen how to store data and manipulate it as variables. We can also store directives as functions. Some functions are attached to an object (like the data type “string”). Those are called methods. Some methods are built in already, which is a nice way of seeing how functions might work. Let’s give it a try!
console.log(myName.length);
console.log(myName.toUpperCase());
var input = prompt(“Look at this box! Put something in it”); console.log(input);
Now let’s try a more complicated problem. See if you can do the following:
use prompt to save a custom string as a variable
calculate the length of that string
save the length of the string as a new variable
write a string to the console that tells the user how long their input was. Make sure that it’s a complete sentence, please.
Now let’s see if we can wrap that up as its own custom function that we could call at any point! Imagine needing to call this same block of code 5 or 500 times on a page. It would be a lot easier if we could call a variable name instead of writing all of this business out again. So try wrapping all of that up in a function, then calling the function.
Once again…. neat!
While working in the console can be fun, it doesn’t add anything to our websites. We need to be able to save our javascript files and connect them to the DOM outlined by the HTML (and styled using css).
We’re actually going to start building our calculator by connecting it to the webpage, then testing the functionality of what we’ve written through bracket’s HTML preview.
Start by going to the ‘js’ directory (where jquery.min.js is stored), and create ‘calculator.js’. Hooray!
Then go to index.html and connect calculator.js to index.html through the <script> tag. Just like the JQuery library is connected above!
Now we need to make sure that whatever we write in this file connects to the document, loads with the DOM, and provides some interactivity. We’re going to do that by making sure to call a function when a certain div is clicked. Let’s see how that might work (see slide).
(Walk through each part of the function above, shouldn’t take too long. )
Inside calc, we need to gather user inputs, store them into variables, and return them (rather than log them to the console or output them somewhere). Returning something means that the value is stored, and can be used in some way when the function is called, but it’s not necessarily visible to the user unless we do something to it.
Go ahead and fill in the rest of these variables and functions so that we have something almost useable!
After this is done, we can test it out with the button. We might be missing something, though...
See powerpoint prompts above.
After a brief brainstorm, we can talk about how to get user input about what operations need to be done and turn that into an output.
Let’s use if/else-if statements to call the operation functions according to user input!
As long as we nest all of that in calc(); we should be able to call something right now with some output. Neat, huh?
See powerpoint prompts above.
After a brief brainstorm, we can talk about how to communicate to the user that they’re silly.
Let’s run it again and see what error messages we get!
How else might users screw up? (Add “else” condition to operations options to fix everything).
See powerpoint prompts above.
After a brief brainstorm, we can talk about how to communicate to the user that they’re silly.
Let’s run it again and see what error messages we get!
How else might users screw up? (Add “else” condition to operations options to fix everything).