【JavaScript】快速入门

❤️‍🔥前情提要❤️‍🔥
  欢迎来到JavaScript快速入门教程
  JavaScript 已然成为就业市场上最受欢迎和需求量最大的语言之一。开发人员经常使用它来构建网站、设计游戏和制作应用程序等。
  在进入工作岗位之前,语言是你简历上应该具备的基本技能之一。
  🍪本教程内容干货满满,跟上步伐吧~🍪


作者介绍

🎓 作者:某编程爱好者📜
🗒️系列文章&专栏推荐: 🔗《MySQL数据库》、🔗 《Web前端教程》、🔗《Python基础》
🕸️为大家推荐一款很好用的前端刷题网站🔗点击跳转



📑1.1 初识JavaScript


👉在本小节你将会对JavaScript的概念作用由来特点以及JavaScript与ECMAScript的关系有一个全新的认识


🏷️1.1.1 什么是JavaScript

🚤点击跳过本小节

💡概念及作用

  • 概念

    • JavaScript 是 Web 的编程语言。
    • JavaScript 是脚本语言,是一种解释性脚本语言(代码不进行预编译)
    • JavaScript 是一种 轻量级的编程语言
    • JavaScript 是可插入 HTML 页面的编程代码
    • JavaScript 插入 HTML 页面后,可由所有的现代浏览器执行
  • 作用

    • 为网页添加各式各样的动态功能
    • 为用户提供更流畅美观浏览效果。 通常JavaScript脚本是通过嵌入在HTML中来实现自身的功能的
  • 前端三件套的作用

    • HTML(HyperText Markup Language)超文本标记语言定义网页文本内容
    • CSS(Sascding Style Sheets)层叠样式表描述网页布局
    • Javascript面向web的编程(脚本)语言:控制网页行为
  • 🎗️JavaScript应用示例:

    🔗JavaScript 能够改变 HTML 内容

    🔗JavaScript 能够改变 HTML 属性

    🔗JavaScript 能够改变 CSS 样式

    🔗JavaScript 能够隐藏 HTML 元素

    🔗JavaScript 能够显示隐藏的 HTML 元素

🚤点击返回上一小节


🏷️1.1.2 JavaScript的由来

🚤点击跳过本小节

🕰️时间:1995年。

🧑‍🔬人物Brendan Eich(布兰登·艾奇)

🏢地点: Netscape(网景)公司,现在的Mozilla。

🖥️事件:在网景导航者浏览器上首次设计出了JavaScript

🥐名称: Netscape最初将这个脚本语言命名为LiveScript。

🥐更名:Netscape与Sun公司合作之后将其改名为JavaScript。

⚛️原因:由于当时Sun公司(2009年被Oracle公司收购)推出的Java语言备受关注,Netscape公司为了营销借用了Java这个名称。

📛事实:JavaScript与Java本质上是两种不同的编程语言

问题:JavaScript在设计之初是做什么的呢?

🔔答案:是一种可以嵌入到网页中的编程语言,用来控制浏览器的行为

🌰举例:直接在浏览器中进行表单验证,用户只有填写格式正确的内容后才能够提交表单,避免了因表单填写错误导致的反复提交,节省了时间网络资源

🕳️缺陷:JavaScript语言非常灵活,其语言特性也产生了一些不良的影响

🌰举例1:利用JavaScript制作网页上的漂浮广告弹窗,让用户感到厌烦。

🌰举例2:利用Web开发中的安全漏洞,在网页中编写恶意代码窃取用户网站身份信息传播病毒等。

建议:要端正态度和奠定扎实的技术功底

🪦目的:希望JavaScript推动Web技术的发展,造福每一位互联网用户。
🏋️现今承担更多的责任:尤其是当Ajax技术兴起之后,浏览器服务器可以进行异步交互了,网站的用户体验又得到了更大的提升。

🌰举例:当人们在百度的搜索框中输入几个字以后,网页会智能感知用户接下来要搜索的内容

⚠️注意:JavaScript的用途已经不仅局限于浏览器了,Node.js的出现使得开发人员能够在服务器端编写JavaScript代码,使得JavaScript的应用更加广泛。

🚤点击返回上一小节


🏷️1.1.3 JavaScript的特点

🚤点击跳过本小节

👉脚本语言

脚本(Script)简单地说就是一条条的文本命令,按照程序流程执行

🌟常见的脚本语言

JavaScriptVBScriptPerlPHPPython等。

非脚本语言

CC++JavaC#等。

🥨脚本语言与非脚本语言的区别

非脚本语言一般需要编译链接生成独立的可执行文件后才能运行。
脚本语言依赖于解释器,只在被调用时自动进行解释或编译

脚本语言的优点

缩短了传统语言“编写 → 编译 → 链接 → 运行”的过程。
简单易学易用,语法规则较松散方便编程

脚本语言的缺点

执行效率不如编译型的语言快
不过,由于计算机的运行速度越来越快,Web应用的需求变化也越来越快,人们更加重视软件的开发速度,脚本语言带来的执行效率下降已经可以忽视了。

⚧️可跨平台

几乎所有的浏览器,包括手机等各类移动设备。
特点:JavaScript语言不依赖操作系统,仅需要浏览器的支持。

🐥支持面向对象

面向对象是软件开发中的一种重要的编程思想,其优点非常多。
基于面向对象思想诞生了许多优秀的库和框架,可以使JavaScript开发变得快捷高效,降低了开发成本。
举例:除了经典的JavaScript库,又诞生了BootstrapAngularJSVue.jsBackbone.jsReactWwebpack等框架和工具。

🚤点击返回上一小节


📑1.2 JavaScript开发工具

工欲善其事,必先利其器,一款优秀开发工具能够极大提高程序开发效率与体验。在Web前端开发中,常用的开发工具有Visual Studio CodeSublime TextHBuilderNotepad++等。

本节将会对常见的浏览器以及代码编辑器做简要介绍


🏷️1.2.1 浏览器

  • 浏览器 :是访问互联网中各种网站所必备的工具。

浏览器分类

面对市面上众多的浏览器,开发人员如何掌控程序的兼容性呢?

答案:许多浏览器都用相同的内核,了解其内核就能对浏览器有一个清晰的归类。

  • 浏览器内核

🚤点击跳过本小节


🏷️1.2.2 代码编辑器

🚤点击返回上一小节


🏷️1.2.3 案例:第一个JavaScript程序

实现步骤:

  • 创建网页文件设置编码

在这里插入图片描述

  • 编写一个简单的网页。
  • 将JavaScript嵌入到HTML中。
  • 测试网页程序。

在这里插入图片描述

⚠️注意:在编码格式中,BOM(Byte Order Mark)是指字节顺序标记,它会在文件头部占用三个字节,用来标识文件的编码格式。对于HTML网页不需要通过BOM来识别编码,因此推荐选择无BOM格式

⚠️在编写JavaScript代码时,应注意基本的语法规则,避免程序出错。具体如下。

  • JavaScript严格区分大小写,在编写代码时一定注意大小写的正确性。
  • JavaScript代码对空格换行缩进 不敏感,一条语句可以分成多行书写
  • 如果一条语句结束后换行书写下一条语句,后面的分号可以省略

📑1.3 JavaScript入门

本小节将会介绍JavaScript引入方式常用输出语句注释数据与运算函数对象事件以及改变网页背景颜色案例来对JavaScript有更多的认识


🏷️1.3.1 JavaScript引入方式

  • 👉嵌入式

    • 嵌入式就是使用< script >标签包裹JavaScript代码,直接编写到HTML文件中。

      语法

      <script>
       JavaScript语句;
      </script>
      

      示例

      <script type="text/javascript">
        JavaScript语句;
      </script>
      

      ⚠️type属性用于告知浏览器脚本的类型。

      ⚠️type默认值为text/javascript(HTML5),可以省略type属性

  • 👉外链式

    • 外链式是指将JavaScript代码保存到一个单独的文件中,通常使用“js”作为文件的扩展名,然后使用<script>标签的src属性引入文件中

      语法

      HTML文件
      ……
      <script src="js/test.js"></script>
      ……
      

      示例

      js/test.js文件
      ……
      alert('Hello');
      ……
      

      相对路径(外链引入方式:js/test.js)

      ……test.html

      ……js

      …………test.js

      相对路径(外链引入方式:…/js/test.js)

      ……html

      …………test.html

      ……js

      …………test.js

      绝对路径(外链引入方式:/js/test.js)

      website(网站根目录)

      ……test.html

      ……js

      …………test.js

      绝对路径(外链引入方式:file:///C:/js/test.js)

      …………test.html

      C:

      ……js

      …………test.js

      URL地址(外链引入方式:http://js.test/file.js)

      website(网站根目录)

      ……test.html

      js.test(某网站根目录)

      ……file.js

      ⚠️注:若自动使用当前页面协议,可写为 //js.test/file.js

🪧相比嵌入式外链式的优势可以总结为以下3点

  1. 嵌入式会导致HTML与JavaScript代码混合在一起,不利于修改和维护

  2. 嵌入式会增加HTML文件的体积,影响网页本身的加载速度,而外链式可以利用浏览器缓存提高速度。

  3. 外链式有利于分布式部署。网页中链接的jscss图片静态文件可以部署到CDN服务器上,利用CDN的优势加快下载速度


  • 👉行内式

    • 行内式是将JavaScript代码作为HTML标签的属性值使用。

      • 用法一

        < a href=“javascript:alert(‘Hello’);”>test

      • 用法二

        <input type=“button” onclick**=“alert(‘Hello’);” value=“test”>**

  • ⚠️注意:由于现代网页开发提倡结构样式行为分离,即分离HTMLCSSJavaScript三部分的代码,避免直接写在HTML标签的属性中,从而更有利于维护。因此在实际开发中不推荐使用行内式

  • 👉JavaScript异步加载

    ❓存在的问题:引入JavaScript代码时,页面的下载和渲染都会暂停,等待脚本执行完成后才会继续(内嵌式或外链式)。

    ❗解决的办法1:对于不需要提前执行的代码,将< script >标签放在< body >标签的底部,可以减少对整个页面下载的影响。

    ❗解决的办法2:可用HTML5为< script >标签新增的两个可选属性:async和defer。

    • 方式一:async

      <script src="http://js.test/file.js" async></script>
      
    • 方式二:defer

      <script src="http://js.test/file.js" defer></script>
      

      ⚠️async异步加载,即先下载文件,不阻塞其他代码执行,下载完成后再执行

      ⚠️defer用于延后执行,即先下载文件,直到网页加载完成后再执行

      ⚠️共同点:即使文件下载失败,也不会阻塞后面的JavaScript代码执行


🏷️1.3.2 常用输出语句

  • alert() 警告框

在这里插入图片描述

  • console.log() 控制台输出

在这里插入图片描述

  • document.write()文档页面输出

在这里插入图片描述


🏷️1.3.3 注释

🥐概念:注释可便于代码的可读性,在程序解析时会被JavaScript解释器忽略

📛分类单行注释多行注释

🔔表示方式:单行注释使用“//”、多行注释使用“/* */”。

  • 👉单行注释:以“//”开始,到该行结束或JavaScript标记结束之前的内容都是注释。

    示例

    <script>
    document.write('Hello, JavaScript');	   // 输出一句话
    </script>
    
  • 👉多行注释:多行注释以“/*”开始,以“*/”结束,它们之间的内容为多行注释。

    示例

    <script>
    /*
    alert('Hello, JavaScript');
    console.log('1234');
    */
    </script>
    

    ⚠️多行注释中可以嵌套单行注释

    ⚠️多行注释中不能再嵌套多行注释


🏷️1.3.4 数据与运算

  • 👉数学运算
    JavaScript支持加(+)减(-)乘(*)除(/)四则运算。

    • 小括号可以改变优先顺序。

      示例

      alert(220 + 230);				// 输出结果:450
      alert(2 * 3 + 25 / 5 - 1);			// 输出结果:10
      alert(2 * (3 + 25) / 5 - 1);			// 输出结果:10.2
      
    • 比较两个数字的大小

      比较的结果是truefalse,这是一种布尔类型的值,表示

      如果比较结果为true,表示成立;如果比较结果为false,表示不成立

      示例

      alert(22 > 33);			// 输出结果:false
      alert(22 < 33);			// 输出结果:true
      alert(22 == 33);			// 输出结果:false
      alert(22 == 22);			// 输出结果:true
      
    • 使用字符串保存数据

      需要在警告框中输出“Hello”时,为了在代码中保存“Hello”这个数据,就需要用到字符串这种数据类型。

      在JavaScript中,使用单引号双引号包裹的数据是字符串

      示例

      alert('Hello');		// 单引号字符串
      alert("Hello"); 		// 双引号字符串
      
    • 比较两个字符串是否相同

      使用“==”运算符可以比较两个字符串是否相同

      示例

      alert('22' == '22');	// 输出结果:true
      alert('22' == '33');	// 输出结果:false
      
    • 字符串与数字的拼接

      +”运算符的操作数只要有一个是字符串,就表示字符串拼接

      +”运算符的操作数全部为数字时,表示相加

      示例

      alert('220' + '230');		// 输出结果:220230
      alert('220 + 230 = ' + 220 + 230);	// 输出结果:220 + 230 = 220230
      alert('220 + 230 = ' + (220 + 230));	// 输出结果:220 + 230 = 450
      
    • 根据比较结果执行不同的代码

      if…else语句用于需要根据比较的结果,来执行不同的代码

      示例

      if (22 > 33) {
      alert(true);	// 判断成立时执行此语句
      } else {
      alert(false);	// 判断不成立时执行此语句
      }
      
    • 使用变量保存数据

      场景:当一个数据需要多次使用时,可以利用变量数据保存起来。

      概念:变量是保存数据的容器,每一个变量都有唯一的名称

      定义:利用var关键字定义。

      示例

      var num1 = 22;	
      var num2 = 33;	
      alert(num1 + num2);
      alert(num1 - num2);
      
      var temp = num1;
      num1 = num2;
      num2 = temp;
      alert('num1 = ' + num1); alert('num2 = ' + num2);	
      

🏷️1.3.5 函数

  • 👉函数的用途

    • 提出问题代码量增多维护困难条理不清阅读困难

    • 解决办法:代码应该模块化组件化,才能更好维护

    • 实现方式:常将一些常用的功能模块编写成函数,通过调用函数完成任务

    • 举例说明alert()就是一个函数

  • 函数的返回值

    • 函数执行后可返回一个表示执行结果的值,下面以prompt()函数为例进行演示。

    示例

    var name = prompt('请输入你的名字:');
    

在这里插入图片描述

  • 函数的参数

    函数支持传入一个多个参数,多个参数可使用逗号分隔

    示例

    prompt('请输入你的名字:', '匿名');
    

在这里插入图片描述

  • 自定义函数

    除直接调用JavaScript内置的函数,用户还可自己定义函数,用于封装代码

    示例

    // 定义函数
    function sum(a, b) {
      var c = a + b; 
      return c;
    }
    
    
    // 调用函数,输出结果:33
    alert(sum(11, 22));
    // 调用函数,输出结果:55
    alert(sum(22, 33));
    

🏷️1.3.6 对象

  • 对象的用途

    编写程序如同开一家公司

    在程序中划分对象,如同在公司中划分部门

    一个对象的成员由属性和方法组成

    属性就是一些变量,可以用来保存部门的名称人数这些基本信息。

    方法就是一些函数,可以用来保存部门的各种工作任务

    当最高领导指挥这些部门时,通过访问对象的属性来获取信息,通过调用对象的方法来完成工作


  • window对象

    window对象是JavaScript浏览器之间交互的主要接入点。

    提供了用于JavaScript脚本控制浏览器的一些接口。

    举例弹出警告框输入框,或者更改网页文档内容等效果。

    示例

    window.console;
    window.document;
    window.alert('test');
    window.prompt('test');
    
    window.console.log('test'); 
    window.document.write('test');	
    

  • document对象

    document对象是window对象的属性之一,主要用于与网页文档进行交互

    示例

    <body>
      <div id="test">Hello</div>
    <script>
      var test = document.getElementById('test');
      alert(test.innerHTML
    </script>
    </body>
    

  • String对象

    在代码中直接定义的字符串,就可以作为对象来使用。

    String对象用于对字符串进行处理。

    示例

    var str = 'apple';		 // 定义一个字符串
    alert(str.length);		// 获取字符串长度,输出结果:5
    alert(str.toUpperCase());	// 获取转换大写后的结果,输出结果:APPLE
    alert('aa'.toUpperCase());	 // 直接调用字符串的成员方法,输出结果:AA
    

  • 自定义对象

    除了直接使用JavaScript中的内置对象,用户也可以自己创建一个自定义对象

    示例

    // 创建对象
    var stu = {};		// 创建一个名称为stu的空对象
    // 添加属性
    stu.name = '小明';		// 为stu对象添加name属性
    stu.gender = '男';		// 为stu对象添加gender属性
    stu.age = 18;		// 为stu对象添加age属性
    // 访问属性
    alert(stu.name);		// 访问stu对象的name属性,输出结果:小明
    
    // 添加方法
    stu.introduce = function () {
    return '我叫' + this.name + ',今年' + this.age + '岁。';
    };
    // 调用方法
    alert(stu.introduce());	// 输出结果:我叫小明,今年18岁。
    

🏷️1.3.7 事件

  • 概念事件是指可以被JavaScript侦测到交互行为

  • 举例:在网页中滑动点击鼠标滚动屏幕敲击键盘等。

  • 用处:当发生事件以后,可以利用JavaScript编程来执行一些特定的代码,从而实现网页的交互效果。

    示例

    <body>
    <input id="btn" type="button" value="test">
    <script>
     document.getElementById('btn').onclick = function() {
    alert(this.value);  // 获取按钮的value属性,输出结果:test
    };
    </script>
    </body>
    

🏷️1.3.8 案例:改变网页背景颜色

代码实现思路:

  • ①编写网页,提供按钮

  • ②为按钮添加点击事件

在这里插入图片描述

  • ③根据color()函数传递的不同参数设置网页的背景色

  • ④编写color()函数并进行测试

在这里插入图片描述


🎀小结

⚡恭喜你的内功又双叒叕敠得到了提高!!!🔋

👉本节首先介绍了JavaScript的用途发展状况,然后讲解了浏览器代码编辑器相关的内容,接着针对JavaScript的入门知识进行了介绍,包括引入方式输出语句注释数据运算函数对象事件

🔚以上就是JavaScript入门的全部知识了~

🫂感谢大家的阅读~

📬后续还会继续更新💓,欢迎持续关注哟~📌

💫如果有错误❌,欢迎指正呀💫

✨如果觉得收获满满,可以点点赞👍支持一下哟~✨


在这里插入图片描述


  • 0
    点赞
  • 0
    收藏
    觉得还不错? 一键收藏
  • 打赏
    打赏
  • 0
    评论
JavaScript是一种动态编程语言,主要用于在Web浏览器中创建动态效果和交互式用户界面。下面是一些快速入门的步骤: 1. 了解基础语法。JavaScript有自己的语法,包括变量声明、条件语句、循环语句、函数等。可以在网上找到许多JavaScript语法的教程和指南。 2. 编写第一个JavaScript程序。可以在HTML页面中添加<script>标签,然后在其中编写JavaScript代码。例如: ``` <script> alert("Hello, world!"); </script> ``` 这将在页面加载时显示一个警告框,其中包含“Hello, world!”文本。 3. 学习如何处理事件。JavaScript可以用来处理不同类型的事件,例如用户单击按钮或提交表单。可以使用addEventListener()函数来添加事件处理程序。例如: ``` <button id="myButton">Click me!</button> <script> var button = document.getElementById("myButton"); button.addEventListener("click", function() { alert("Button clicked!"); }); </script> ``` 这将在用户单击按钮时显示一个警告框,其中包含“Button clicked!”文本。 4. 学习如何操作HTML元素。JavaScript可以用来修改HTML元素的内容、样式和属性。例如: ``` <p id="myParagraph">This is a paragraph.</p> <script> var paragraph = document.getElementById("myParagraph"); paragraph.innerHTML = "This is a new paragraph."; paragraph.style.color = "red"; paragraph.setAttribute("title", "This is a tooltip."); </script> ``` 这将将段落元素的文本内容更改为“This is a new paragraph.”,将其文本颜色更改为红色,并添加一个工具提示。 以上就是JavaScript快速入门步骤。可以通过查找更多教程和示例来深入了解JavaScript的功能和用法。
评论
添加红包

请填写红包祝福语或标题

红包个数最小为10个

红包金额最低5元

当前余额3.43前往充值 >
需支付:10.00
成就一亿技术人!
领取后你会自动成为博主和红包主的粉丝 规则
hope_wisdom
发出的红包

打赏作者

惊鸿若梦一书生

谢谢鼓励

¥1 ¥2 ¥4 ¥6 ¥10 ¥20
扫码支付:¥1
获取中
扫码支付

您的余额不足,请更换扫码支付或充值

打赏作者

实付
使用余额支付
点击重新获取
扫码支付
钱包余额 0

抵扣说明:

1.余额是钱包充值的虚拟货币,按照1:1的比例进行支付金额的抵扣。
2.余额无法直接购买下载,可以购买VIP、付费专栏及课程。

余额充值