Intro to Javascript and jQuery

Nov 29, 20122 likes1,452 views

JavaScript is a client-side scripting language that is commonly used to create dynamic and interactive effects on web pages. It resides in the browser and is used to enhance user interfaces and experiences on websites. JavaScript code is made up of statements that are written within script tags. Functions are blocks of code in JavaScript that perform specific tasks, and variables are used to store and retrieve values. jQuery is a JavaScript library that simplifies client-side scripting by using CSS selectors and providing methods to easily manipulate HTML elements and run animations. Both JavaScript and jQuery code is typically linked from the HTML head or an external .js file and placed above other scripts.

javascript & jquery
22-3375 Web Design I // Columbia College Chicago

Student Presentations
Present portfolio mockups
Walk us through the flow (homepage, detail, about)
What types of work will you be showing?
Any special interactions that you need to work out?
Will you be able to code this by the end of the course?

What is a javascript?
JavaScript (sometimes abbreviated JS) is a scripting
language commonly implemented as part of a web
browser in order to create enhanced user interfaces
and dynamic websites.
Javascript is a client-side programming language,
which means that it resides on the client’s machine
and not on the server (in your browser).

Every script is made up of a series of statements.
<script>
first statement;
second statement;
</script>

A JavaScript function is a "recipe" of instructions
(i.e., statements or commands) whose purpose is
to accomplish a well-defined task.
<script>
function square (number)
{
var result = number * number;
return result;
}
</script>

Variables in JavaScript are similar to the variables
you may have studied in high school algebra. You
can think of variables as "holding places" where
values are stored and retrieved.
<script>
greeting = "Hello";
greeting = greeting + ", my friend.";
</script>

Where does javascript go?
Javascript is usually typed in the <head>
element, in a linked .js file, or both.

Try It
<script>
function displayDate(
{
document.getElementById("date").innerHTML=Date();
}
</script>

What is a jquery?
jQuery is a multi-browser JavaScript library designed to
simplify the client-side scripting of HTML.
“Library” in this contexts means a group of javascript
functions (which you might see referred to as methods)
that you can access and run on your page with very little
coding.
jQuery is javascript, but it uses it’s own “selector engine”
that is very designer friendly. A “selector engine” is just
the way that you reference elements in your html in order
to make the do something. jQuery uses CSS selectors,
which you already know how to use!

Where does jquery go?
The jquery library is linked from the
<head> document. You can download the
jquery file from jquery.com, or link to the
Google version. It should go below your
CSS, but above any scripts or plugins.

Try It
<script>
$(document).ready(function(){
$(".btn-slide").click(function(){
$("#panel").slideToggle("slow");
$(this).toggleClass("active");
return false
});
});
</script>

This document provides an introduction to JavaScript and jQuery. It defines JavaScript as a scripting language used to create dynamic and interactive web pages and applications. It resides in the browser rather than on the server. JavaScript uses functions to organize code into well-defined, reusable tasks. Functions are executed when events occur or when called from other scripts. The document also defines jQuery as a JavaScript library that simplifies client-side scripting with HTML through its selector engine and methods. jQuery code is linked in the page head or an external file below CSS but above other scripts.

Class Intro / HTML BasicsShawn Calvert

This document provides an overview of HTML elements and tags. It discusses the basic HTML page structure including <html>, <head>, and <body> tags. It also covers common text formatting tags, links, images, lists, and more. The document emphasizes that HTML provides semantic structure and meaning to content through appropriate tag usage. It concludes with a brief discussion of relative vs. absolute links and FTP for transferring files to a server.

Html / CSS PresentationShawn Calvert

HTML Foundations, pt 2Shawn Calvert

The document provides an overview of HTML elements and tags. It discusses the anatomy of elements, including tags, content, and attributes. Common block elements (like <p> and <div>) and inline elements (like <img> and <a>) are described. The document also covers important tags like <a> for links, <table> for tables, and <form> for forms. It explains how to properly structure these elements and includes examples of proper syntax and usage. Key concepts covered include relative vs. absolute links, the <index> file, using colspan to span table columns, and required form attributes like "action" and "name".

Frontend Crash Course: HTML and CSSThinkful

This document provides an overview of an HTML and CSS crash course, including: - Introductions and goals of learning frontend development concepts - Explanations of HTML tags, elements, and attributes - Explanations of CSS selectors, properties, values, and basic layout techniques - Examples and drills for applying HTML and CSS concepts - A positioning exercise for further practice with CSS layout The document guides students through building their first website and provides resources for continuing to learn frontend development on their own.

Introduction to HTML, CSS, and JavascriptAgustinus Theodorus

This document provides an introduction to HTML, CSS, and JavaScript. It begins with explaining how client-side and server-side code works. It then defines HTML as the standard markup language for web pages and lists some commonly used HTML tags. CSS is introduced as the style sheet language used to describe the presentation of HTML documents. JavaScript is explained as the programming language used to create interactive effects in web browsers. The document concludes by covering JavaScript syntax like variables, functions, and some common methods.

Div tag presentationalyssa_lum11

CSC103 Web Technologies: HTML, CSS, JSRichard Homa

Span and Div tags in HTMLBiswadip Goswami

Presentation on html, cssAamir Sohail

This document discusses HTML and CSS. It provides an overview of HTML, describing it as a markup language used to define web pages using tags. It gives examples of basic HTML tags and page structure. It also covers CSS, explaining that CSS is used to style and lay out HTML elements, including different ways of inserting CSS like inline, internal, and external stylesheets. The document provides examples of HTML code and CSS code.

Week 2-intro-htmlShawn Calvert

This document provides an introduction and overview of HTML and related web technologies. It begins with an explanation of the internet and World Wide Web, then defines key concepts like URLs, DNS, IP addresses, and HTTP. It proceeds to explain the difference between server-side and client-side coding. The document then covers the basic structure of an HTML document using tags like <html>, <head>, and <body>. It defines common text-level, structural, and media tags. Finally, it discusses relative vs. absolute links and the default styling applied by browsers.

Internet and Web Technology (CLASS-9) [React.js] | NIC/NIELIT Web TechnologyAyes Chinmay

Internet and Web Technology (CLASS-14) [JSP] | NIC/NIELIT Web Technology Ayes Chinmay

The document provides information on the topics of Node.js, JSP, and Servlet from a course on Internet and Web Technology. It includes brief introductions and definitions of Node.js, JSP concepts like scripting elements, directives, implicit objects, and the JSP lifecycle. It also discusses using JSP scriptlet, expression, and declaration tags. Examples are given for requesting parameters in JSP and using implicit objects like request.

Web LayoutShawn Calvert

Intro to HTML, CSS & JS - Internship Presentation Week-3Devang Garach

The document provides an agenda and details for a weekly presentation during a training program on information technology. The presentation covers HTML, CSS, and JavaScript. It defines HTML and the differences between HTML4 and HTML5. It describes the HTML5 structure and semantic elements. It also defines CSS and why it is used, CSS selectors and syntax, the box model, CSS units, and different types of JavaScript functions.

Introduction of Html/css/jsKnoldus Inc.

HTML CSS JS in Nut shellAshwin Shiv

The document provides an introduction to HTML, CSS, and JavaScript. It includes sections on: - What HTML, CSS, and JavaScript are and their purposes. HTML is for describing web pages, CSS is for styling elements, and JavaScript is for creating dynamic content. - Basic HTML page structure including common tags like <html>, <head>, <body>. - Key CSS concepts like selectors, properties, values, and the box model. - Core JavaScript concepts including the DOM, jQuery, AJAX, and the differences between JavaScript and jQuery. - Examples are provided throughout to demonstrate uses of each technology.

Html css java script basics All about you needDipen Parmar

Images on the WebShawn Calvert

The document discusses CSS concepts like the cascade, inheritance, and specificity. It explains that the cascade resolves conflicts between multiple CSS rules by prioritizing rules based on their source. Styles can be inherited from parent elements or made more specific. Images can be integrated into webpages and styled with CSS. The document provides guidelines for optimizing image size, format, and quality for the web.

CSS Foundations, pt 2Shawn Calvert

This document discusses CSS positioning properties. It explains static positioning as the default normal flow layout. It describes float as removing an element from the flow and allowing other content to wrap around it. Relative positioning is defined as positioning an element relative to its static position, while fixed takes an element out of flow and positions it relative to the browser window. Absolute positioning positions an element relative to its first positioned ancestor, removing it from the flow. Examples are given for float, relative, fixed, and absolute. Class exercises provide opportunities to practice these positioning techniques.

Intro to HTML and CSS basicsEliran Eliassy

This document provides an overview of HTML and CSS topics including: - A brief history of HTML and CSS standards from 1990 to present. - Descriptions of common HTML elements like <body>, <head>, <img>, <a>, and lists. - Explanations of CSS concepts like selectors, properties, units, positioning, and layout fundamentals. - Details on CSS topics like the box model, centering content, semantic HTML, and flexbox. The document serves as a course outline or reference for learning HTML and CSS fundamentals.

A quick guide to Css and java scriptAVINASH KUMAR

This document provides information about cascading style sheets (CSS). It discusses the different ways to apply stylesheets, including inline, embedded, and external stylesheets. It explains that CSS controls the layout, fonts, colors and overall appearance of web pages. CSS allows separation of design from content and makes pages load faster. The document also covers CSS syntax, selectors, properties and values. Common CSS selectors for HTML elements like headings, paragraphs and horizontal rules are listed along with their properties.

Hushang GaikwadHushnag Gaikwad

This document provides an introduction to HTML, CSS, and JavaScript. It defines HTML as the standard markup language for creating web pages using tags to describe structure. CSS is described as using cascading style sheets to describe how HTML elements are displayed, and can be applied internally, inline, or via external stylesheets. JavaScript is defined as an interpreted scripting language that can display data in alerts, by writing to the HTML output or browser console, or modifying HTML elements.

Java scriptFajar Baskoro

This document provides an overview of JavaScript for client-side programming. It discusses how JavaScript code can be embedded in HTML pages using <script> tags and executed as the page loads. The document covers JavaScript data types, variables, operators, control structures, functions, and libraries. Functions allow code reuse and modularity. Libraries of useful functions can be stored in separate files and loaded as needed.

Web TypographyShawn Calvert

Html,javascript & cssPredhin Sapru

This document provides an overview of HTML, CSS, and JavaScript for web development. It discusses the basics of each technology, how they work together, and includes the following key points: - HTML is the markup language that defines the structure and content of a web page. CSS is used to style and lay out elements on the page. JavaScript adds interactive functionality. - Events, functions, and variables are important JavaScript concepts. Events trigger actions, functions contain reusable code, and variables store and retrieve data. - CSS selectors allow styling elements by type, class, ID, and other attributes. The box model, positioning, and other properties control layout. - Common debugging tools like Firebug help

CSS Foundations, pt 1Shawn Calvert

The document provides an overview of CSS foundations including the three layers of web design, what CSS is, CSS syntax, selectors, applying styles, and the cascade. It discusses the structure, style, and behavior layers and how CSS is used to control presentation. Key points covered include the different ways to add CSS rules, CSS selectors like type, ID, class, and descendant selectors, and how specificity and inheritance apply styles. It also reviews CSS properties for styling text, lists, and links.

HTML 5 Complete ReferenceEPAM Systems

Web Design ProcessShawn Calvert

The document discusses conventions and expectations for website design. It explains that users expect websites to work in predictable ways, so conventions have developed over time through cultural norms, technology limitations, familiarity from other media, ease of use, advertising, common platforms, and trends. It then outlines some basic components that are found on most websites, such as a header, feature area, body/content, sidebar, and footer. Finally, it discusses the standard web development process and where graphic/UI designers fit within the planning and design stages.

Introduction to Responsive Web DesignShawn Calvert

More Related Content

What's hot (20)

Span and Div tags in HTMLBiswadip Goswami

Presentation on html, cssAamir Sohail

Week 2-intro-htmlShawn Calvert

Internet and Web Technology (CLASS-9) [React.js] | NIC/NIELIT Web TechnologyAyes Chinmay

Internet and Web Technology (CLASS-14) [JSP] | NIC/NIELIT Web Technology Ayes Chinmay

Web LayoutShawn Calvert

Intro to HTML, CSS & JS - Internship Presentation Week-3Devang Garach

Introduction of Html/css/jsKnoldus Inc.

HTML CSS JS in Nut shellAshwin Shiv

Html css java script basics All about you needDipen Parmar

Images on the WebShawn Calvert

CSS Foundations, pt 2Shawn Calvert

Intro to HTML and CSS basicsEliran Eliassy

A quick guide to Css and java scriptAVINASH KUMAR

Hushang GaikwadHushnag Gaikwad

Java scriptFajar Baskoro

Web TypographyShawn Calvert

Html,javascript & cssPredhin Sapru

CSS Foundations, pt 1Shawn Calvert

HTML 5 Complete ReferenceEPAM Systems

Span and Div tags in HTMLBiswadip Goswami

Presentation on html, cssAamir Sohail

Week 2-intro-htmlShawn Calvert

Internet and Web Technology (CLASS-9) [React.js] | NIC/NIELIT Web TechnologyAyes Chinmay

Internet and Web Technology (CLASS-14) [JSP] | NIC/NIELIT Web Technology Ayes Chinmay

Web LayoutShawn Calvert

Intro to HTML, CSS & JS - Internship Presentation Week-3Devang Garach

Introduction of Html/css/jsKnoldus Inc.

HTML CSS JS in Nut shellAshwin Shiv

Html css java script basics All about you needDipen Parmar

Images on the WebShawn Calvert

CSS Foundations, pt 2Shawn Calvert

Intro to HTML and CSS basicsEliran Eliassy

A quick guide to Css and java scriptAVINASH KUMAR

Hushang GaikwadHushnag Gaikwad

Java scriptFajar Baskoro

Web TypographyShawn Calvert

Html,javascript & cssPredhin Sapru

CSS Foundations, pt 1Shawn Calvert

HTML 5 Complete ReferenceEPAM Systems

Viewers also liked (19)

Web Design ProcessShawn Calvert

Introduction to Responsive Web DesignShawn Calvert

10 Usability & UX GuidelinesShawn Calvert

This document provides a summary of 10 usability and user experience guidelines that can help make someone a better web designer. The guidelines discussed include mental models, the 80/20 rule, Fitts' law, Hick's law, the seven plus or minus two rule, the two second rule, the F-shaped reading pattern, the trunk test, consistency, and the principle that form follows function. Each guideline is briefly explained in 2-3 sentences with examples given for some. References for further reading on user experience design are also provided.

HTML EmailShawn Calvert

This document provides information and guidance about designing HTML emails. It discusses that HTML email design is different than web design and requires coding like it is 1999 without CSS and with images referenced by absolute URLs. It also recommends using tables for layout, keeping the width to 600px, and delivering emails in a multipart/alternative MIME format. Additionally, it advises designing defensively by considering technology limits, attention spans, and avoiding spam filters. Key aspects include using recognizable "from" names, compelling subjects and previews, ensuring the core message is above the fold, and making emails scan-friendly.

Basics of Web NavigationShawn Calvert

This document discusses different types of web navigation, including structural, associative, and utility navigation. It also discusses types of pages like navigational, content, and functional pages. Good navigation is critical for the user experience and should show users where they are, where they can go, and how to get back. Navigation should match users' mental models of the site and not be overwhelming with too many choices.

Creating Images for the WebShawn Calvert

The document provides guidelines for using images on the web, including saving images in the proper format like JPG, PNG, or GIF depending on whether the image needs transparency or a wide color range, and at the optimal size for the context. It discusses using images within HTML and CSS and measuring images in pixels, and provides exercises to practice saving images at different formats and sizes using Save for Web.

Usability and User ExperienceShawn Calvert

The document discusses key concepts in web design including usability, user experience, and user-centered design. It defines usability as how easy a product is to use, user experience as encompassing all aspects of a user's interaction with a company or product, and user-centered design as optimizing a product around how users need or want to use it rather than forcing users to change their behavior. The document also provides examples of techniques for understanding users like personas, use cases, and usability testing to help ensure designs are focused on the user.

Intro to JavaScriptJussi Pohjolainen

This document provides an introduction to JavaScript including: - JavaScript is an object-oriented scripting language that is a dialect of ECMAScript. - It was originally designed to add interactivity to HTML pages through dynamic HTML, reacting to events, and data validation. - JavaScript is now heavily used in AJAX-based sites to asynchronously retrieve and display data without reloading pages. - The document discusses JavaScript compatibility issues and provides examples of basic JavaScript concepts like variables, comparisons, repetition, and popup boxes.

NodeJs Intro - JavaScript Zagreb Meetup #1Tomislav Capan

Intro to JavascriptAnjan Banda

JavaScript is the programming language of the web. It can dynamically manipulate HTML content by changing element properties like innerHTML. Functions allow JavaScript code to run in response to events like button clicks or timeouts. JavaScript uses objects and prototypes to define reusable behaviors and properties for objects. It is an important language for web developers to learn alongside HTML and CSS.

Intro to javascript (4 week)Jamal Sinclair O'Garro

This document is an introduction to JavaScript presented by Jamal O'Garro of Code Crew. It covers the basics of JavaScript including data types, operators, variables, functions, objects, and the DOM. It also discusses more advanced topics like object-oriented JavaScript, prototypal inheritance, AJAX, APIs, frameworks, and Node.js. The goal is to provide an overview of the core concepts and capabilities of the JavaScript programming language.

Javascript intro for MAHAleksander Fabijan

This document provides an introduction and overview of JavaScript. It begins with an agenda that outlines the topics to be covered, including the history of JS, basic concepts like statements, variables, data types, and functions. The document then covers the brief history of JS from its creation in 1995 to recent developments. It discusses some of the basic building blocks of JS like statements, variables, data types including strings, objects, and arrays. It also covers functions and provides examples of declaring and calling functions. Resources for learning more about JS are listed at the end.

JavaScript IntroEric Brown

Intro to JavascriptKevin Ball

This document provides an introduction to JavaScript. It discusses what JavaScript is, its use in client-side web development, and how it is available in every browser. It then covers programming basics like numbers, strings, variables, conditionals, loops, and functions. Finally, it discusses how JavaScript interacts with HTML through the DOM and some key differences in JavaScript like prototypal inheritance, closures, and event-based programming.

JavaScript - IntroAnton Tibblin

Intro to JavaScriptDan Phiffer

Intro to JavaScriptYakov Fain

This document provides an overview of JavaScript concepts including: - Where JavaScript can run including web browsers and JavaScript engines. - Key differences from Java like JavaScript arriving as text with no compiler and need to work across runtime environments. - Tools for debugging and developing JavaScript like Firefox's Firebug and Chrome Developer Tools. - Variables, functions, objects, and inheritance in JavaScript compared to other languages like Java. Functions can be treated as first-class objects and assigned to properties or passed as callbacks.

User Centered DesignShawn Calvert

This document discusses user-centered design and the roles of web designers. It explains that web designers encompass skills in graphic, UI, and UX design. The standard web development process involves planning, design, production, and launch. Planning includes defining user needs through research and analysis. Design involves wireframes, prototypes, and visual design. UX design focuses on ensuring a positive user experience through attributes like usability, ease of use, and minimizing errors. The goal of user-centered design is to optimize products around how users want to use them rather than forcing users to change behavior.

HTML Foundations, pt 3: FormsShawn Calvert

This document discusses different types of forms and form elements that can be used to collect user input on a website, including text fields, checkboxes, radio buttons, dropdown menus, submit buttons, and file uploads. It provides examples of how to code these different form elements using HTML tags like <form>, <input>, <label>, <select>, and <textarea> and describes attributes that can be added to customize elements. The document also offers best practices for labeling form fields and designing accessible forms.

Web Design ProcessShawn Calvert

Introduction to Responsive Web DesignShawn Calvert

10 Usability & UX GuidelinesShawn Calvert

HTML EmailShawn Calvert

Basics of Web NavigationShawn Calvert

Creating Images for the WebShawn Calvert

Usability and User ExperienceShawn Calvert

Intro to JavaScriptJussi Pohjolainen

NodeJs Intro - JavaScript Zagreb Meetup #1Tomislav Capan

Intro to JavascriptAnjan Banda

Intro to javascript (4 week)Jamal Sinclair O'Garro

Javascript intro for MAHAleksander Fabijan

JavaScript IntroEric Brown

Intro to JavascriptKevin Ball

JavaScript - IntroAnton Tibblin

Intro to JavaScriptDan Phiffer

Intro to JavaScriptYakov Fain

User Centered DesignShawn Calvert

HTML Foundations, pt 3: FormsShawn Calvert

Similar to Intro to Javascript and jQuery (20)

JS BASICS JAVA SCRIPT SCRIPTINGArulkumar

WT Module-3.pptxRamyaH11

The document provides an overview of JavaScript topics including what JavaScript is, where it is used, syntax features like variables, conditionals, and loops. It also discusses JavaScript design principles like progressive enhancement and graceful degradation. Key JavaScript concepts like objects, arrays, functions, and built-in objects like String, Math, and Date are described. The document is a module syllabus that introduces foundational JavaScript concepts.

CS8651- Unit 2 - JS.internet programming paper anna university -2017 regulationamrashbhanuabdul

JavaScript Missing Manual, Ch. 1Gene Babon

Basics java scriptsch samaram

JavaScript is a scripting language that can be used to make web pages interactive. It allows you to check and modify HTML forms, change images, and write dynamic content. JavaScript code is executed by the browser and only affects the current page. The language is case sensitive, lightweight, and interpreted rather than compiled. Variables, literals, objects, operators, control structures, and functions are the basic components of JavaScript code. Comments can be added to explain code. JavaScript code can be embedded directly in HTML pages or linked via external .js files. Code placement in the head or body affects when it runs.

Java scriptAbhishek Kesharwani

JavaScript was designed to add interactivity to HTML pages. It is a scripting language that is usually embedded directly into HTML pages and allows for dynamic text, event handling, reading/writing HTML elements, and validating form data. JavaScript supports both client-side and server-side scripting and was originally developed by Netscape under the name LiveScript before being renamed. It provides programming capabilities to HTML authors and allows for dynamic content, user interaction, and validation without server requests.

Introduction to JavascriptFirdaus Adib

This document provides an overview of JavaScript and DOM for a lecture on internet programming. It outlines the objectives of understanding basic JavaScript concepts and the client-server model. The agenda covers what JavaScript is and why it is useful, where JavaScript code can be located, and how to process user input with DOM. It also gives examples of arithmetic operators in JavaScript and a simple cashier application example.

Internet protocol second unit IIPPT.pptxssuser92282c

WEB MODULE 3.pdfDeepika A B

JavaScript is a scripting language that runs in web browsers. It allows for dynamic interactions and effects on web pages. JavaScript code can run on the client-side to process user input and update pages in real-time without reloading. It is commonly used with HTML and CSS to create interactive web applications. Some key points covered are that JavaScript is weakly typed, prototype-based, and runs directly in web browsers to enhance the user experience.

Java script by Act Academyactanimation

The document provides information about JavaScript including: - JavaScript is a scripting language that adds interactivity to HTML pages and is used for client-side scripting. - It can dynamically update HTML content, react to user events, validate form data, and detect the visitor's browser. - JavaScript code can be embedded directly in HTML pages or placed in external .js files and included using script tags. - The document discusses JavaScript variables, data types, operators, functions, and common uses of JavaScript in web pages.

UNIT 1 (7).pptxDrDhivyaaCRAssistant

The document provides an overview of jQuery and JavaScript concepts. It discusses: 1. What jQuery is and why it's useful, allowing developers to simplify common tasks with fewer lines of code. 2. How to access DOM elements using jQuery selectors, which are similar to CSS selectors. This allows selecting elements by name, ID, class, and other attributes. 3. Core JavaScript concepts like variables, data types, operators, and functions. It also covers variable scope, error handling, and working with objects.

Wt unit 2 ppts client sied technologyPUNE VIDYARTHI GRIHA'S COLLEGE OF ENGINEERING, NASHIK

This document provides an outline and overview of client-side technologies including JavaScript, DOM, and jQuery. The outline includes sections on JavaScript concepts like data types, control structures, arrays, functions, and objects. It also covers DOM levels and manipulating the DOM, as well as introductions to jQuery for selecting elements, changing styles, and handling events. The presentation provides an overview of these key client-side technologies for students.

Wt unit 2 ppts client side technologyPUNE VIDYARTHI GRIHA'S COLLEGE OF ENGINEERING, NASHIK

This document provides an outline and overview of client-side technologies including JavaScript, DOM, and jQuery. The outline covers JavaScript concepts like data types, control structures, arrays, functions, and objects. It also covers DOM levels and manipulating the DOM. Finally, it discusses jQuery and how to load, select elements, handle events, and more. The presentation aims to familiarize students with these important front-end technologies.

JavaScript - Getting Started.pptxJonnJorellPunto

JavaScript is a programming language that allows web pages to be more interactive and dynamic. To add JavaScript to a web page, code is placed between opening and closing <script> tags, which can be inside the <head> or <body> sections. JavaScript code can either be directly written in the HTML file between <script> tags, or it can be saved in an external .js file and linked using the src attribute of the <script> tag. A basic "Hello World" JavaScript program uses the document.write() function to output text directly onto the web page. External JavaScript files allow code to be shared across multiple pages and edited in one place.

javascriptPresentation.pdfwildcat9335

Lecture 5 javascriptMujtaba Haider

This document outlines the objectives of a lecture on JavaScript. It will introduce JavaScript, including using script tags and linking external JavaScript files. It will cover JavaScript expressions, operators, functions, flow control, objects, arrays, the Document Object Model, forms, cookies and more. The lecture aims to provide an overview of the JavaScript language and how it is used for client-side scripting.

JAVA SCRIPTGo4Guru

This document provides an introduction to JavaScript by explaining what it is, how it differs from Java, how it works within web browsers to make pages interactive, and some common uses of JavaScript including form validation and manipulating HTML elements. It discusses how JavaScript code is embedded in HTML pages and executed on the client-side, and provides some simple examples of JavaScript statements and using JavaScript with HTML forms.

JavaScript_III.pptxrashmiisrani1

This document provides an overview of JavaScript, including: - JavaScript is not related to Java and was originally called LiveScript. - JavaScript code is run in web browsers by an interpreter built into the browser, not on servers. - JavaScript can be used to add interactivity to HTML pages by including <script> tags and running code when pages load or in response to user events. - JavaScript functions and variables can be defined and used to manipulate the DOM and handle user interactions.

AJS UNIT-1 2021-converted.pdfSreeVani74

This document discusses jQuery selectors and DOM manipulation using jQuery. It begins with an introduction to jQuery, explaining that jQuery is a JavaScript library that simplifies HTML document traversal, event handling, animations and Ajax interactions. It then covers various jQuery selectors including element, ID, class and universal selectors. It provides examples of how to select and style elements using these selectors. The document also discusses jQuery's DOM manipulation methods for getting and setting attributes and traversing the DOM tree.

JAVA SCRIPTMohammed Hussein

This document provides an overview of JavaScript, including what JavaScript is, how it is used, and some key JavaScript concepts. It defines JavaScript as the scripting language of the web that is used to add interactivity and functionality to HTML pages. The document outlines JavaScript statements, variables, operators, events, and error handling. It also discusses how JavaScript can interact with HTML elements, validate forms, detect the browser, and use cookies. The last few sections cover the navigator object and how JavaScript can retrieve information about the user's browser.

JS BASICS JAVA SCRIPT SCRIPTINGArulkumar

WT Module-3.pptxRamyaH11

CS8651- Unit 2 - JS.internet programming paper anna university -2017 regulationamrashbhanuabdul

JavaScript Missing Manual, Ch. 1Gene Babon

Basics java scriptsch samaram

Java scriptAbhishek Kesharwani

Introduction to JavascriptFirdaus Adib

Internet protocol second unit IIPPT.pptxssuser92282c

WEB MODULE 3.pdfDeepika A B

Java script by Act Academyactanimation

UNIT 1 (7).pptxDrDhivyaaCRAssistant

Wt unit 2 ppts client sied technologyPUNE VIDYARTHI GRIHA'S COLLEGE OF ENGINEERING, NASHIK

Wt unit 2 ppts client side technologyPUNE VIDYARTHI GRIHA'S COLLEGE OF ENGINEERING, NASHIK

JavaScript - Getting Started.pptxJonnJorellPunto

javascriptPresentation.pdfwildcat9335

Lecture 5 javascriptMujtaba Haider

JAVA SCRIPTGo4Guru

JavaScript_III.pptxrashmiisrani1

AJS UNIT-1 2021-converted.pdfSreeVani74

JAVA SCRIPTMohammed Hussein

More from Shawn Calvert (11)

Web Design I Syllabus 22 3375-03Shawn Calvert

This document provides information about a web design course offered in the fall of 2012 at Columbia College Chicago. The 3-credit course covers topics like hypertext, graphic styles, file formats, and user interfaces. Students will design and build HTML documents and graphics and write a thesis. The course requires prerequisites in introduction to graphic design and visual communications. Objectives include learning HTML, CSS, designing for the web. The course will include exercises, projects, and quizzes. Students will maintain a blog and complete an online ad campaign and personal portfolio project.

HTML Foundations, part 1Shawn Calvert

The document provides an overview of HTML elements and tags for basic webpage structure and formatting. It discusses the <html>, <head>, <body> tags and their uses. It also covers common text formatting tags (<p>, <h1>-<h6>), lists (<ul>, <ol>, <li>), links (<a>), images (<img>), and the differences between relative and absolute links. The document is intended as an introduction to basic HTML tags and elements for building webpage structure.

Web Design 1: IntroductionsShawn Calvert

This document provides an introduction and overview of topics that will be covered in a Web Design I class, including: - The basics of HTML elements, tags, and page structure with headings, paragraphs, and nesting tags. - Key concepts like the difference between the Internet and World Wide Web, how URLs and IP addresses work, and the difference between static and dynamic web pages. - The three layers of web design: structure with HTML, style with CSS, and behavior with JavaScript. - A preview of upcoming topics like HTML elements, client style sheets, and learning solid structural design before adding visual design.

22-3530, Photo Communications SyllabusShawn Calvert

This course explores using photography for design communications. Students will apply skills from Photography I to create all images needed for their design and advertising layouts. The course covers alternative photography methods, location and studio lighting, and tabletop photography. Students must have taken Photography I and either Photography I Workshop or Digital Photography for Non-Majors. Attendance is required as students will critique each other's work and collaborate on projects. Students should expect to spend 6-8 hours per week outside of class on coursework. Projects will be evaluated on following instructions, appropriateness of solution, creativity, craftsmanship, and presentation.

An Overview of Stock PhotographyShawn Calvert

The document discusses different types of stock photography licensing: licensed imagery which allows contracted use for a set period of time and usages; royalty-free which requires a single fee for unlimited usage; copyright-free which has different levels of copyright available under Creative Commons; and public domain which includes works published before 1923 or missed copyright renewal. It also lists select sources for each type of licensed photography.

Color PhotographyShawn Calvert

The document summarizes the history of color photography, beginning with the first permanent color photograph taken in 1861 using three black and white photos with red, green, and blue filters. It discusses early pioneers in color photography techniques in the late 1800s. The document also notes the first 3D color stereoscopic photos taken after the 1906 San Francisco earthquake and the first commercially successful color photography process introduced in 1907. The rest of the document focuses on color models and terms used in digital design, including RGB, CMYK, hue, saturation, temperature, and value.

PSA postersShawn Calvert

Composition & LightShawn Calvert

Rodchenko found the natural setting of his country house to be unorganized and without subjects to photograph. However, when he looked up he saw the trees towering above him "like telephone poles" and took a raking shot from below to propose a dynamic alternative to traditional landscape views. In the late 1920s, Bayer began using photography in relation to his design work at the Bauhaus. In 1928 he traveled to Marseille and photographed boats docked in the harbor from overhead, exploiting the camera's ability to transform everyday reality into patterned abstractions. White balance is the adjustment of the colors in an image to compensate for the color of the light source, with a color temperature of around 5000

of Pixels and BitsShawn Calvert

The document discusses key design elements including line, shape, texture, space, size, and value (and color). It provides definitions and examples for each element. Line can organize or divide elements using rules. Shape refers to external outlines like circles, squares, and triangles. Texture adds richness through visual or pattern texture. Space includes white space or negative space between elements. Size relates to scale and relationships between objects. Value adds dimension through lightness and darkness, and color can further enhance mood.

Camera basics Shawn Calvert

Typography I syllabusShawn Calvert

This document provides information about a beginning typography course offered at an unnamed institution. The course will be taught on Monday evenings from 6:00-9:50pm in room 907 by instructor Shawn Calvert in the fall of 2007. The course will introduce students to the basic aspects of letterforms and typography through projects. Students will investigate the historical, technical, and communicative aspects of typography. The course objectives, goals, details, schedule and expectations are provided.

Web Design I Syllabus 22 3375-03Shawn Calvert

HTML Foundations, part 1Shawn Calvert

Web Design 1: IntroductionsShawn Calvert

22-3530, Photo Communications SyllabusShawn Calvert

An Overview of Stock PhotographyShawn Calvert

Color PhotographyShawn Calvert

PSA postersShawn Calvert

Composition & LightShawn Calvert

of Pixels and BitsShawn Calvert

Camera basics Shawn Calvert

Typography I syllabusShawn Calvert

Recently uploaded (20)

Black and White Illustrative Group Project Presentation.pdf (1).pdfAnnasofiaUrsini

What is FIle and explanation of text files.pptxRamakrishna Reddy Bijjam

EUPHORIA GENERAL QUIZ FINALS | QUIZ CLUB OF PSGCAS | 21 MARCH 2025Quiz Club of PSG College of Arts & Science

How to Manage & Create a New Department in Odoo 18 EmployeeCeline George

Trends Spotting Strategic foresight for tomorrow’s education systems - Debora...EduSkills OECD

Deborah Nusche, Senior Analyst, OECD presents at the OECD webinar 'Trends Spotting: Strategic foresight for tomorrow’s education systems' on 5 June 2025. You can check out the webinar on the website https://oecdedutoday.com/webinars/ Other speakers included: Deborah Nusche, Senior Analyst, OECD Sophie Howe, Future Governance Adviser at the School of International Futures, first Future Generations Commissioner for Wales (2016-2023) Davina Marie, Interdisciplinary Lead, Queens College London Thomas Jørgensen, Director for Policy Coordination and Foresight at European University Association

TV Shows and web-series quiz | QUIZ CLUB OF PSGCAS | 13TH MARCH 2025Quiz Club of PSG College of Arts & Science

How to Manage Maintenance Request in Odoo 18Celine George

What are the benefits that dance brings?memi27

Parenting Teens: Supporting Trust, resilience and independencePooky Knightsmith

For more information about my speaking and training work, visit: https://www.pookyknightsmith.com/speaking/ SESSION OVERVIEW: Parenting Teens: Supporting Trust, Resilience & Independence The teenage years bring new challenges—for teens and for you. In this practical session, we’ll explore how to support your teen through emotional ups and downs, growing independence, and the pressures of school and social life. You’ll gain insights into the teenage brain and why boundary-pushing is part of healthy development, along with tools to keep communication open, build trust, and support emotional resilience. Expect honest ideas, relatable examples, and space to connect with other parents. By the end of this session, you will: • Understand how teenage brain development affects behaviour and emotions • Learn ways to keep communication open and supportive • Explore tools to help your teen manage stress and bounce back from setbacks • Reflect on how to encourage independence while staying connected • Discover simple strategies to support emotional wellbeing • Share experiences and ideas with other parents

Rose Cultivation Practices by Kushal Lamichhane.pdfkushallamichhame

Strengthened Senior High School - Landas Tool Kit.pptxSteffMusniQuiballo

MATERI PPT TOPIK 1 LANDASAN FILOSOFIS PENDIDIKANaditya23173

Final Sketch Designs for poster production.pptxbobby205207

How to Manage Upselling of Subscriptions in Odoo 18Celine George

Optimization technique in pharmaceutical product development.pptxUrmiPrajapati3

Analysis of Quantitative Data Parametric and non-parametric tests.pptxShrutidhara2

This presentation covers the following points-- Parametric Tests • Testing the Significance of the Difference between Means • Analysis of Variance (ANOVA) - One way and Two way • Analysis of Co-variance (One-way)  Non-Parametric Tests: • Chi-Square test • Sign test • Median test • Sum of Rank test • Mann-Whitney U-test Moreover, it includes a comparison of parametric and non-parametric tests, a comparison of one-way ANOVA, two-way ANOVA, and one-way ANCOVA.

Capitol Doctoral Presentation -June 2025.pptxCapitolTechU

Exploring Ocean Floor Features for Middle SchoolMarie

Rai dyansty Chach or Brahamn dynasty, History of Dahir History of Sindh NEP.pptxDr. Ravi Shankar Arya Mahila P. G. College, Banaras Hindu University, Varanasi, India.

This presentation has been made keeping in mind the students of undergraduate and postgraduate level. To keep the facts in a natural form and to display the material in more detail, the help of various books, websites and online medium has been taken. Whatever medium the material or facts have been taken from, an attempt has been made by the presenter to give their reference at the end. In the seventh century, the rule of Sindh state was in the hands of Rai dynasty. We know the names of five kings of this dynasty- Rai Divji, Rai Singhras, Rai Sahasi, Rai Sihras II and Rai Sahasi II. During the time of Rai Sihras II, Nimruz of Persia attacked Sindh and killed him. After the return of the Persians, Rai Sahasi II became the king. After killing him, one of his Brahmin ministers named Chach took over the throne. He married the widow of Rai Sahasi and became the ruler of entire Sindh by suppressing the rebellions of the governors.

MATERI PPT TOPIK 4 LANDASAN FILOSOFIS PENDIDIKANaditya23173

Black and White Illustrative Group Project Presentation.pdf (1).pdfAnnasofiaUrsini

What is FIle and explanation of text files.pptxRamakrishna Reddy Bijjam

EUPHORIA GENERAL QUIZ FINALS | QUIZ CLUB OF PSGCAS | 21 MARCH 2025Quiz Club of PSG College of Arts & Science

How to Manage & Create a New Department in Odoo 18 EmployeeCeline George

Trends Spotting Strategic foresight for tomorrow’s education systems - Debora...EduSkills OECD

TV Shows and web-series quiz | QUIZ CLUB OF PSGCAS | 13TH MARCH 2025Quiz Club of PSG College of Arts & Science

How to Manage Maintenance Request in Odoo 18Celine George

What are the benefits that dance brings?memi27

Parenting Teens: Supporting Trust, resilience and independencePooky Knightsmith

Rose Cultivation Practices by Kushal Lamichhane.pdfkushallamichhame

Strengthened Senior High School - Landas Tool Kit.pptxSteffMusniQuiballo

MATERI PPT TOPIK 1 LANDASAN FILOSOFIS PENDIDIKANaditya23173

Final Sketch Designs for poster production.pptxbobby205207

How to Manage Upselling of Subscriptions in Odoo 18Celine George

Optimization technique in pharmaceutical product development.pptxUrmiPrajapati3

Analysis of Quantitative Data Parametric and non-parametric tests.pptxShrutidhara2

Capitol Doctoral Presentation -June 2025.pptxCapitolTechU

Exploring Ocean Floor Features for Middle SchoolMarie

Rai dyansty Chach or Brahamn dynasty, History of Dahir History of Sindh NEP.pptxDr. Ravi Shankar Arya Mahila P. G. College, Banaras Hindu University, Varanasi, India.

MATERI PPT TOPIK 4 LANDASAN FILOSOFIS PENDIDIKANaditya23173

Intro to Javascript and jQuery

1. javascript & jquery 22-3375 Web Design I // Columbia College Chicago

2. Student Presentations Present portfolio mockups Walk us through the flow (homepage, detail, about) What types of work will you be showing? Any special interactions that you need to work out? Will you be able to code this by the end of the course?

3. What is a javascript? JavaScript (sometimes abbreviated JS) is a scripting language commonly implemented as part of a web browser in order to create enhanced user interfaces and dynamic websites. Javascript is a client-side programming language, which means that it resides on the client’s machine and not on the server (in your browser).

4. Javascript Syntax

5. Every script is made up of a series of statements. <script> first statement; second statement; </script>

6. A JavaScript function is a "recipe" of instructions (i.e., statements or commands) whose purpose is to accomplish a well-defined task. <script> function square (number) { var result = number * number; return result; } </script>

7. Variables in JavaScript are similar to the variables you may have studied in high school algebra. You can think of variables as "holding places" where values are stored and retrieved. <script> greeting = "Hello"; greeting = greeting + ", my friend."; </script>

8. Where does javascript go? Javascript is usually typed in the <head> element, in a linked .js file, or both.

9. Where does javascript go? Javascript is usually typed in the <head> element, in a linked .js file, or both.

10. Try It <script> function displayDate( { document.getElementById("date").innerHTML=Date(); } </script>

11. Getting Started with jquery

12. What is a jquery? jQuery is a multi-browser JavaScript library designed to simplify the client-side scripting of HTML. “Library” in this contexts means a group of javascript functions (which you might see referred to as methods) that you can access and run on your page with very little coding. jQuery is javascript, but it uses it’s own “selector engine” that is very designer friendly. A “selector engine” is just the way that you reference elements in your html in order to make the do something. jQuery uses CSS selectors, which you already know how to use!

13. Where does jquery go? The jquery library is linked from the <head> document. You can download the jquery file from jquery.com, or link to the Google version. It should go below your CSS, but above any scripts or plugins.

14. Where does jquery go?

15. Where does jquery go?

16. Try It <script> $(document).ready(function(){ $(".btn-slide").click(function(){ $("#panel").slideToggle("slow"); $(this).toggleClass("active"); return false }); }); </script>

Intro to Javascript and jQuery

Recommended

More Related Content

What's hot (20)

Viewers also liked (19)

Similar to Intro to Javascript and jQuery (20)

More from Shawn Calvert (11)

Recently uploaded (20)

Intro to Javascript and jQuery