Introduction to Javascript

What is Javascript?
JavaScript is a powerful and versatile programming language that plays a crucial role in modern web development, enabling developers to create dynamic and interactive web applications.

More Simple Terms:
JavaScript is like a magic language that helps make websites do cool and interactive things. It’s like the superhero of the internet, making web pages fun and exciting for everyone!

1. Purpose:
   • Web Development: JavaScript is primarily used to add interactivity and dynamic behavior to web pages. It allows developers to manipulate the content of a webpage, handle user interactions, and create dynamic user interfaces.
   • Client-Side Scripting: JavaScript is executed on the client’s browser, enabling real-time updates and interactions without the need to reload the entire webpage.
2. Features:
   • Interactivity: JavaScript allows developers to create responsive and interactive user interfaces. It can handle events like button clicks, form submissions, and mouse movements.
   • Asynchronous Programming: JavaScript supports asynchronous programming, allowing tasks to be executed independently of the main program flow. This is essential for handling tasks such as fetching data from servers without blocking the user interface.
3. Syntax:
   • C-like: JavaScript’s syntax is influenced by the C programming language, making it familiar to developers from similar backgrounds.
   • Scripting Language: JavaScript is often referred to as a scripting language due to its dynamic typing, automatic memory management, and ease of use for quick development.
4. ECMAScript:
   • Standardization: JavaScript is based on the ECMAScript standard, which defines the rules for the language’s implementation. Modern browsers and environments follow ECMAScript specifications to maintain consistency in language features. (ECMAScript is a standardized scripting language specification that serves as the foundation for JavaScript and other scripting languages. It defines the rules and features that scripting languages must adhere to, ensuring consistency and interoperability across different environments and implementations.)
5. Frameworks and Libraries:
   • Node.js: Allows JavaScript to be used for server-side programming, extending its capabilities beyond the browser.
   • React, Angular, Vue: Front-end frameworks that facilitate the development of complex and interactive user interfaces.
   • Express: A popular back-end framework for building web applications using Node.js.
6. Integration:
   • HTML and CSS: JavaScript works seamlessly with HTML and CSS, forming the trio of technologies commonly used in web development (HTML for structure, CSS for styling, and JavaScript for behavior).
   • APIs: JavaScript can interact with various APIs (Application Programming Interfaces) to fetch and send data, enabling integration with third-party services.
7. Cross-browser Compatibility:
   • Client-Side Execution: As a client-side scripting language, JavaScript needs to be supported by web browsers. Modern browsers like Chrome, Firefox, Safari, and Edge have robust JavaScript engines.

More information via Mozilla.org
https://developer.mozilla.org/en-US/docs/Learn/JavaScript/First_steps/What_is_JavaScript

Learning More from W3Schools

https://www.w3schools.com/js/default.asp

CodePen Examples

Assignment 5 - Event Site Javascript & CSS Updates

*Submit Assignment into D2L

—–Customizing our Event Site with Javascript and CSS—–

Step 1: Add Alert Box

Add this code into your Event Site in your multisite network via HTML Code Block when editing your Home Page
https://codepen.io/dustingrice/pen/xxBmvEW

Change the message that is displayed in the alert box, and in the main H1 tag after the text box is submitted… For example, change it to say “Hi [name]! Are you ready to go to ___________?”

Step 2: Changing the look of your RSVP Form with CSS Code

At a minimum, your forms should include the following:

-Center All Contact Forms and Fields
-Border Around Form with Rounded Corners
-New Background Color behind Form Only
-Limit the width of the fields to a maximum of 500px wide
-Add a thin border to all text and textarea fields
-Add a :hover state to all input text and textarea fields so that when you roll over each field it slightly changes color to make it feel a little more interactive

Here is some basic code to start with:

form {
background-color: black;
padding:40px;
border: 1px solid gray;
border-radius:50px;
width:3000px;
max-width:500px;
}

label {
color:white;
}

input:hover, textarea:hover {
background-color:lightgray;
}

input, textarea {
border-radius:50px !important;
}

OPTIONAL: Add any additional CSS code throughout your site to polish everything up!

Here are some ideas…

-Review your overall text size
-Review your website font(s)
-Review the spacing and padding around different areas

Step 3: Javascript Exercises

Complete a Minimum of a dozen Javascript Examples at W3Schools & Submit a Screenshot:
https://www.w3schools.com/js/exercise_js.asp?filename=exercise_js_variables1

Submit a link to your event website, as well as a screenshot for your exercises completes above!

Sample Student Work