# Introduction to Javascript and Jquery Documentation3 minPublished on Mar 20, 2023Updated on ![Javascript logo on a yellow background](https://cdn.prod.website-files.com/67053868fc01e494462e71c9/671228a6d17e2ac58c740ee0_64760069e93084646c9ef1c5_6265538bd7e9e73d4c920778_Open-Graph-intro-javascript.png)Table of contents [ Copied](#)[ ](#)[ ](#)[ ](#) - [H2 Example](#) Use AI to summarize this article[ ChatGPT](#)[ Claude](#)[ Grok](#)[ Perplexity](#)[ Google AI](#)Key pointsThere are many different types of **programming languages**. For instance, websites use **HTML**, **CSS**, and **JavaScript** to function properly. If you have read our [article on CSS and HTML](/blog/webflow-html-css), you now know that: - HTML designates the elements (form, heading, button) of a website - CSS combines styles like 'color, size, etc.' and dynamically shapes the design of your site. Today, let's explore a new language: JavaScript. ## JavaScript Code JavaScript is a scripting language that can be used to **add interactivity** and customization to web pages and software applications. JavaScript is primarily used to add **functionality to web pages**, such as automated **actions**. It is a programming language that executes directly in the browser. JavaScript has a syntax made up of a series of characters and symbols. ### JavaScript Syntax Example ![JavaScript Code Example](https://cdn.prod.website-files.com/67053868fc01e494462e71c9/671228a7d17e2ac58c740f1f_64760069e93084646c9eef0d_6265540045767b2f9c54d260_exemple-code-javascript.png)JavaScript Code Example So, what’s the difference with jQuery? jQuery is a code library that helps you easily add animations to the web! ## jQuery jQuery is a fast, feature-rich JavaScript library. It greatly simplifies many different operations on HTML documents, such as traversing and manipulating the DOM, handling events, animations, and Ajax. With its easy-to-use API working across multiple browsers, jQuery has become one of the most popular ways to use JavaScript. ### How to Use jQuery? jQuery provides a way to detect events and execute custom code when one of these events occurs. There are two methods for integrating jQuery data into your site. I will introduce you to the one I know best, the integration using the "src=" function. ![Example of jQuery Code Integration on Webflow](https://cdn.prod.website-files.com/67053868fc01e494462e71c9/671228a7d17e2ac58c740f43_64760069e93084646c9eef0b_626553db0215f676920bb118_Integration-jquery-webflow.png)jQuery Integration in Webflow This was a brief introduction to JavaScript and jQuery. If you want to learn more, there are several online courses available, including a comprehensive one included with the Finsweet Pro subscription! [ ](#)![Florian Bodelot](https://cdn.prod.website-files.com/67053868fc01e494462e71c9/678a725470105160732b0a8a_florian-website-vf.webp)Florian BodelotCo-founder[ ](/team/florian-bodelot)[ ](https://fr.linkedin.com/in/florian-bodelot-digidop)[ ](https://twitter.com/florian_bodelot)+1200 readers ## Stay ahead of the curve! Subscribe now for expert insights. [Subscribe ](https://digidop.substack.com/subscribe)![Preview Digidop Newsletter](https://cdn.prod.website-files.com/6705382c85d21c496de94fa5/671231c436687e9d40d995e9_newsletter-digidop.webp)[Preview Newsletter ](https://digidop.substack.com/) ## Suggested articles ![Collage of homepages from B2B SaaS agencies including Digidop, Vydera, FlowNinja, OFF+BRAND, Yuri & Neil, MetaLab, Shakuro and Ramotion](https://cdn.prod.website-files.com/67053868fc01e494462e71c9/6ab922fa556f97c19ea7db9a_Best%20B2B%20SaaS%20Agencies%20in%202026_EN.webp)DocumentationAll blog post ### Top 20 Web & Digital Agencies for B2B SaaS in 2026 [Top 20 Web & Digital Agencies for B2B SaaS in 2026](/blog/best-b2b-saas-agencies)Top 20 Web & Digital Agencies for B2B SaaS in 2026![Webflow Source interface showing AI agents, website editing, and role-based Views in a unified workspace.](https://cdn.prod.website-files.com/67053868fc01e494462e71c9/6a9fa9f8608ffcc774c47eb7_source%20(1).webp)NewsDevelopmentAll blog post ### Webflow launches Source. Our take on this shift. [Webflow launches Source. Our take on this shift.](/blog/webflow-launches-source)Webflow launches Source. Our take on this shift.![Citation rate by AI platform: ChatGPT 100%, Perplexity 100%, Gemini 67%, and Claude 0%.](https://cdn.prod.website-files.com/67053868fc01e494462e71c9/6a9044c13914f1d6ac3e9161_citation.jpg)DocumentationAIAll blog post ### Make Your Website Visible in ChatGPT, Perplexity, and AI Answers [Make Your Website Visible in ChatGPT, Perplexity, and AI Answers](/blog/make-your-website-visible-in-chatgpt-perplexity-and-ai-answers)Make Your Website Visible in ChatGPT, Perplexity, and AI Answers[See all articles ](/blog)Every great website   starts with a conversation[Talk to an expert ](/contact)[Book a call ](/calendly)![Abstract composition of black and gold metallic ribbons with elegant light reflections and smooth gradients. A premium background conveying luxury, modernity, and innovation.](https://cdn.prod.website-files.com/6705382c85d21c496de94fa5/6a69a346549deffabdf98afa_shape-cta-footer.webp)