B/S学习之路—JavaScript学习笔记—第一天&基本语法

最新推荐文章于 2024-11-05 15:26:40 发布
最新推荐文章于 2024-11-05 15:26:40 发布
阅读量767 收藏
点赞数
分类专栏： JavaScript 文章标签： javascript dom
版权声明：本文为博主原创文章，遵循 CC 4.0 BY-SA 版权协议，转载请附上原文出处链接和本声明。
本文链接：https://blog.csdn.net/songyi160/article/details/49034259
版权

【唠叨两句】       

       不得不承认学习是件枯燥乏味的事情，为了监督自己能坚持走下去并且做到知识的沉淀积累和升华特开通此博客撰写学习笔记，希望自己坚持到底同时也希望大家能多多指点共同交流，如果大家对笔记中出现的错误或者有好的建议请留言或加我QQ:907607658

       首先激励下自己：编程高手=坚持+学习+苦练+交流，下面正式开始自己的学习：

【JavaScript简介】

        通俗来讲JavaScript就是一种脚本语言，它并不编译生成机器代码，只是由浏览器的解释器将其动态地处理成可执行的代码，利用JavaScript可以减少客户端对服务器的访问，同时也可以增加网页的动态显示效果（HTML只能制作出静态的网页，无法独立的完成与客户端动态交互的网页设计）。

        JavaScript也是一种面向对象的编程语言，它所包含的对象由两部分组成，即变量和函数也称为属性和方法。

        JavaScript同样是一种安全性语言，它不允许访问本地硬盘，并且不能将数据存入到服务器上，不允许对网络文档进行修改和删除，只能通过浏览器实现信息浏览或动态交互，从而有效的防止数据丢失。

【JavaScript学习笔记——第一天】

【JavaScript基本语法——变量】

（1）JavaScript是弱类型的编程语言——所有变量的声明都要用：var

[html]  view plain copy
  1. <!DOCTYPE html>  
  2. <html xmlns="http://www.w3.org/1999/xhtml">  
  3. <head>  
  4. <meta http-equiv="Content-Type" content="text/html; charset=utf-8"/>  
  5.     <title></title>  
  6.     <script type="text/javascript">  
  7.         var n = 'Hello World!';  
  8.         alert(n);  
  9.     </script>  
  10. </head>  
  11. <body>  
  12.   
  13. </body>  
  14. </html>  

代码执行效果：


alert()函数：弹出消息对话框(对话框中有一个OK按钮)

（2）变量名只能由字母、下划线开头，且不能使用JavaScript中的关键字

（3）JavaScript声明字符串可以用双引号也可以用单引号，建议用单引号，方便和HTML、C#等的集成，避免使用转义字符。

（4）JavaScript变量没有块级作用域的概念，看下面f1函数中变量n的作用域

[html]  view plain copy
  1. <!DOCTYPE html>  
  2. <html xmlns="http://www.w3.org/1999/xhtml">  
  3. <head>  
  4.     <meta http-equiv="Content-Type" content="text/html; charset=utf-8" />  
  5.     <title></title>  
  6.     <script type="text/javascript">  
  7.         //定义函数f1  
  8.         function f1() {  
  9.             var sum = 10;  
  10.             if (sum > 5) {  
  11.                 var n = 10;  
  12.                 n++;  
  13.             }  
  14.             alert(n);  
  15.         }  
  16.         f1();  //调用函数f1  
  17.     </script>  
  18. </head>  
  19. <body>  
  20.   
  21. </body>  
  22. </html>  
代码执行效果：


【JavaScript基本语法——六种数据类型】

1、Boolean(布尔)  2、Nummber(数字)  3、String(字符串)  4、Undefined(未定义)  5、Null(空对象)  6、Object(对象类型)

[html]  view plain copy
  1. <!DOCTYPE html>  
  2. <html xmlns="http://www.w3.org/1999/xhtml">  
  3. <head>  
  4. <meta http-equiv="Content-Type" content="text/html; charset=utf-8"/>  
  5.     <title></title>  
  6.     <script type="text/javascript">  
  7.         var n1 = true;  
  8.         var n2 = 90;  
  9.         var n3 = '好人一生平安！';  
  10.         var n4;  
  11.         var n5 = null;  
  12.         var n6 = new Object();  
  13.         alert('n1:' + typeof(n1) + '  n2:' + typeof(n2) + '  n3:' + typeof(n3) +'  n4:' + typeof(n4) +'  n5:' + String(n5) +'  n6:' + typeof(n6));  
  14.     </script>  
  15. </head>  
  16. <body>  
  17.   
  18. </body>  
  19. </html>  
代码执行效果：

typeof()函数：查询数据类型

[html]  view plain copy
  1. <!DOCTYPE html>  
  2. <html xmlns="http://www.w3.org/1999/xhtml">  
  3. <head>  
  4. <meta http-equiv="Content-Type" content="text/html; charset=utf-8"/>  
  5.     <title></title>  
  6.     <script type="text/javascript">  
  7.         var n = new Object();  
  8.         alert(n instanceof Object);  
  9.     </script>  
  10. </head>  
  11. <body>  
  12.   
  13. </body>  
  14. </html>  

代码执行效果：


instanceof()函数：判断数据类型

【JavaScript基本语法——函数】

（1）JavaScript中的方法没有访问修饰符，没有返回值类型，参数列表中的参数不需要写类型（var），函数名首字母小写。

[html]  view plain copy
  1. function 函数名称(参数表) {  
  2.             函数执行部分;  
  3.         }  

[html]  view plain copy
  1. <!DOCTYPE html>  
  2. <html xmlns="http://www.w3.org/1999/xhtml">  
  3. <head>  
  4.     <meta http-equiv="Content-Type" content="text/html; charset=utf-8" />  
  5.     <title></title>  
  6.     <script type="text/javascript">  
  7.         function ff(sum) {  
  8.             alert(sum);  
  9.         }  
  10.         ff(100);  
  11.         ff('好人一生平安！');  
  12.     </script>  
  13. </head>  
  14. <body>  
  15.   
  16. </body>  
  17. </html>  
代码执行效果：

    
（2）在JavaScript函数参数表中传递任意个参数

[html]  view plain copy
  1. <!DOCTYPE html>  
  2. <html xmlns="http://www.w3.org/1999/xhtml">  
  3. <head>  
  4.     <meta http-equiv="Content-Type" content="text/html; charset=utf-8" />  
  5.     <title></title>  
  6.     <script type="text/javascript">  
  7.         function ff() {  
  8.             var sumNum = 0;  
  9.             for (var i = 0; i < arguments.length; i++) {  
  10.                 sumNum += arguments[i];  
  11.             }  
  12.             return sumNum;  
  13.         }  
  14.         var result = ff(1,2,3,4,5);  
  15.         alert(result);  
  16.     </script>  
  17. </head>  
  18. <body>  
  19.   
  20. </body>  
  21. </html>  
代码执行效果：

提升小练习：传递两个参数并计算两个数之间的所有数字的和，包括这两个数字

方法一：

[html]  view plain copy
  1. <!DOCTYPE html>  
  2. <html xmlns="http://www.w3.org/1999/xhtml">  
  3. <head>  
  4.     <meta http-equiv="Content-Type" content="text/html; charset=utf-8" />  
  5.     <title></title>  
  6.     <script type="text/javascript">  
  7.         function f1(n1, n2) {  
  8.             var sum = 0;  
  9.             for (var i = n1; i <= n2; i++) {  
  10.                 sum += i;  
  11.             }  
  12.             return sum;  
  13.         }  
  14.         var result = f1(1, 100);  
  15.         alert(result);  
  16.     </script>  
  17. </head>  
  18. <body>  
  19.   
  20. </body>  
  21. </html>  
代码执行效果：


方法二：

[html]  view plain copy
  1. <!DOCTYPE html>  
  2. <html xmlns="http://www.w3.org/1999/xhtml">  
  3. <head>  
  4.     <meta http-equiv="Content-Type" content="text/html; charset=utf-8" />  
  5.     <title></title>  
  6.     <script type="text/javascript">  
  7.         function f2() {  
  8.             var sum = 0;  
  9.             for (var i = arguments[0]; i <= arguments[1]; i++) {  
  10.                 sum += i;  
  11.             }  
  12.             return sum;  
  13.         }  
  14.         var result = f2(1, 100);  
  15.         alert(result);  
  16.     </script>  
  17. </head>  
  18. <body>  
  19.   
  20. </body>  
  21. </html>  

代码执行效果：

（3） JavaScript匿名函数

[html]  view plain copy
  1. <!DOCTYPE html>  
  2. <html xmlns="http://www.w3.org/1999/xhtml">  
  3. <head>  
  4.     <meta http-equiv="Content-Type" content="text/html; charset=utf-8" />  
  5.     <title></title>  
  6.     <script type="text/javascript">  
  7.         var f1 = function () {  
  8.             return '努力学习中……';  
  9.         }  
  10.         var result = f1();  
  11.         alert(result);  
  12.     </script>  
  13. </head>  
  14. <body>  
  15.   
  16. </body>  
  17. </html>  
代码执行效果：


注：一旦将一个匿名方法赋值给了一个变量，则一定要在后面加上分号。

【JavaScript基本语法——面向对象】

创建对象和创建函数语法一样，只不过对象名命名时要注意：对象名首字母大写。

[html]  view plain copy
  1. <!DOCTYPE html>  
  2. <html xmlns="http://www.w3.org/1999/xhtml">  
  3. <head>  
  4.     <meta http-equiv="Content-Type" content="text/html; charset=utf-8" />  
  5.     <title></title>  
  6.     <script type="text/javascript">  
  7.         function Person(){}  
  8.         var per = new Person();  
  9.         per.name = '张三';  
  10.         per.age = '18';  
  11.         per.gender = '男';  
  12.         per.sayHello = function () {  
  13.             alert('这方法也可以……');  
  14.         };  
  15.         alert(per.name);  
  16.         alert(per.age);  
  17.         alert(per.gender);  
  18.         per.sayHello();  
  19.     </script>  
  20. </head>  
  21. <body>  
  22.   
  23. </body>  
  24. </html>  
代码执行效果：

     

【JavaScript基本语法——数组】

[html]  view plain copy
  1. </pre><span style="font-size:18px">代码执行效果：</span><p><span style="font-size:18px"><span style="font-size:18px"><span style="font-size:18px"></span></span></span></p><pre name="code" class="html"><!DOCTYPE html>  
  2. <html xmlns="http://www.w3.org/1999/xhtml">  
  3. <head>  
  4.     <meta http-equiv="Content-Type" content="text/html; charset=utf-8" />  
  5.     <title></title>  
  6.     <script type="text/javascript">  
  7.         //var shuZu = new Array();  
  8.         //shuZu[0] = 1;  
  9.         //shuZu[1] = '好人';  
  10.         //shuZu[2] = true;  
  11.         //for (var i = 0; i < shuZu.length; i++) {  
  12.         //    alert(shuZu[i]);  
  13.         //}  
  14.   
  15.         var shuZu = [1, 2, 3];  
  16.         for (var i = 0; i < shuZu.length; i++) {  
  17.             alert(shuZu[i]);  
  18.         }  
  19.     </script>  
  20. </head>  
  21. <body>  
  22.   
  23. </body>  
  24. </html>  
     

【JavaScript基本语法——键值对】

[html]  view plain copy
  1. <!DOCTYPE html>  
  2. <html xmlns="http://www.w3.org/1999/xhtml">  
  3. <head>  
  4. <meta http-equiv="Content-Type" content="text/html; charset=utf-8"/>  
  5.     <title></title>  
  6.     <script type="text/javascript">  
  7.         //var jian = new Array();  
  8.         //jian['hr'] = '好人';  
  9.         //jian['ys'] = '一生';  
  10.         //jian['pa'] = '平安';  
  11.         //for(var key in jian){  
  12.         //    alert(key+'-----'+jian[key]);  
  13.         //}  
  14.         var jian = { "hr": "好人", "ys": "一生", "pa": "平安" };  
  15.         for(var key in jian){  
  16.             alert(key+'----'+jian[key]);  
  17.         }  
  18.     </script>  
  19. </head>  
  20. <body>  
  21.   
  22. </body>  
  23. </html>  
代码执行效果：

      

【JavaScript基本语法——给字符串String扩展方法】

[html]  view plain copy
  1. <!DOCTYPE html>  
  2. <html xmlns="http://www.w3.org/1999/xhtml">  
  3. <head>  
  4. <meta http-equiv="Content-Type" content="text/html; charset=utf-8"/>  
  5.     <title></title>  
  6.     <script type="text/javascript">  
  7.         //判断给定字符串是否是邮箱  
  8.         //传统方法：  
  9.         //var msg = '123456789@qq.com';  
  10.         //function isEmail(str) {  
  11.         //    return str.indexOf('@') != -1 ? true : false;  
  12.         //}  
  13.         //alert(isEmail(msg));  
  14.   
  15.         //给字符串扩展个方法进行判断，以后的字符串都可以拥有该方法  
  16.         String.prototype.isEmail = function () {  
  17.             return this.indexOf('@') != -1 ? true : false;  
  18.         }  
  19.         var msg = '123456789@qq.com';  
  20.         alert(msg.isEmail());  
  21.     </script>  
  22. </head>  
  23. <body>  
  24.   
  25. </body>  
  26. </html>  
代码执行效果：

songyi160
关注
专栏目录
JavaScript学习笔记-B站动力节点
m0_52041525的博客
02-19 1740
文章目录1.1.什么是JavaScript，有什么用？1.2.HTML，CSS，JavaSript三者关系2.在HTML中怎么嵌入JavaScript代码？3.4.5.6.7.8.9.10.11.12.13.14.15. 1.1.什么是JavaScript，有什么用？ JavaScript是运行在浏览器上的脚本语言。简称JS。 JavaScript是网景公司（NetScape）的 布兰登艾奇（JavaScript之父）开发的，最初叫做LiveScript。 LiveScript的出现让浏览器更加的生动
JavaScript高级第04天笔记1
08-03
### JavaScript高级第04天笔记1：正则表达式与网络协议 #### 一、正则表达式的概念与使用 ##### 1.1 正则表达式的定义 正则表达式（Regular Expression）是一种用于匹配字符串中字符组合的工具，在 JavaScript 中...
B/S学习进阶之路
zzxixin的博客
07-22 164
这里写自定义目录标题欢迎使用Markdown编辑器新的改变功能快捷键合理的创建标题，有助于目录的生成如何改变文本的样式插入链接与图片如何插入一段漂亮的代码片生成一个适合你的列表创建一个表格设定内容居中、居左、居右SmartyPants创建一个自定义列表如何创建一个注脚注释也是必不可少的KaTeX数学公式新的甘特图功能，丰富你的文章UML 图表FLowchart流程图导出与导入导出导入 欢迎使用Ma...
JavaScript基础语法
mengweiwei_的博客
04-29 2289
JavaScript基础语法，他和春天一起来啦！ 想先看看哪个？JavaScript基础语法，他和春天一起来啦！一、==JavaScript是什么？==1.==JavaScript的历史沿革==2.==JavaScript的组成部分==3.==JavaScript的特点==① ==解释性的脚本语言==② ==动态 实时 交互==③ ==跨平台==④ ==安全==⑤ ==面向对象==4.==JavaScript的作用==5.==浏览器如何执行JavaScript==二、==JavaScript怎么用==1.
JavaScript基础(JS基本语法)
weixin_44978043的博客
08-31 198
1.JavaScript简介 （1）JavaScript概述 JavaScript是一个基于对象的、事件驱动的、解释型的编程语言 （2）JavaScript特点 JavaScript特点：基于对戏那个、事件驱动、跨平台、解释型 ·基于对象：JavaScript语言中它提供了大量的对象可以直接使用，提高程序开发效率 ·事件驱动：可以让项目和用户的操作之间产生一些良好的交互 ·跨平台：不通过的操作系统上都...
JavaScript的基础知识
webcass的博客
09-23 222
它是一种基于对象和事件驱动，具有相对安全性，并广泛用于客户端网页开发的脚本语言，主要用与为网页添加交互功能。（2）引用方式： 可以采用引用方式进行JavaScript 脚本库的调用，以提高程序代码的利用率。(1)ECMAScript：描述了Javascript语言的基本语法和基本 对象。（1）直接方式：是由大部分含有JavaScript的网页都采用这种方法。(3) 浏览器对象模型: 描述了与浏览器进行交换的方法和接口。（2）文本对象模型:描述了处理网页内容的方法和接口。\' : '单引号；
js-5秒之后跳转页面
qq_41670147的博客
12-03 1765
<!DOCTYPE html> <html lang="en"> <head> <meta charset="UTF-8"> <meta name="viewport" content="width=device-width, initial-scale=1.0"> <meta http-equiv="X-...
学习笔记 JavaScript基础语法（全）
weixin_63676550的博客
01-15 8642
JavaScript基础语法学习笔记，视频教程链接放在末尾
JavaScript入门：第一天笔记与基本概念
在JavaScript Day_01的学习笔记中，我们深入探讨了JavaScript语言的基础知识和应用。JavaScript作为一门重要的开发语言，尤其在前端开发领域发挥着核心作用，它基于ECMAScript规范，允许在网页中实现动态交互。 ...
html学习笔记第一天总结.pdf
10-11
在第一天的学习中，我们首先了解了网页的基本概念。网页是因特网上一系列按照特定规则制作的HTML文件集合，用于展示特定内容。这些内容可能包括图片、链接、文字、声音和视频等元素。网页通常以.htm或.html文件形式...
JavaScript课堂笔记 第三天
07-04
以上只是JavaScript学习第三天可能涉及的部分关键知识点，实际笔记中可能还会涵盖更多细节，如字符串方法、正则表达式、错误处理、模块化等内容。深入理解和掌握这些概念是成为熟练JavaScript开发者的基础。
初见Javascript
aimei1647的博客
04-25 151
灵活的Javascript Javascript是一门弱内容语言，不需要声明变量的类型， 这一点与PHP的语法类似。弱类型语法虽然灵活，当时他的缺点也很明显，由于规范性不明确，所以不离开维护等。因此有了一些Javascript语法糖，比如：TypeScript、CoffeScript等。这些语法糖给JS添加了一些新特性以便于团队的开发，需要将这些语法糖转换为浏览器支持的原生JS。 1...
学习笔记6:前端、后端（B/S）学习路线
weixin_46069079的博客
03-11 807
简介 B/S B/S（Browser/Server，浏览器/服务器）不同于C/S模式。用户不需要安装客户端，只需要通过浏览器就能实现各种数据的交互。此种模式由于浏览器的刷新机制，页面动态更新机制，服务器数据负荷，响应速度等问题，B/S的稳定性明显不如C/S架构，但随着技术的发展，B/S所面临的问题将会逐渐改善。 前端（Front-end） 2、软件准备 vscode Google Chrome N...
一些常用的react hooks以及各自的作用
weixin_48602044的博客
11-01 460
关于react hooks的一些知识与应用
JavaScript 生成二维码
qq_30049249的博客
11-02 243
我试过了，这一款js库支持中英文混合。进入网站后，可以直接点击运行哟～
软件测试学习笔记丨Vue常用指令-条件渲染（v-if）
最新发布
ceshiren_com的博客
11-05 501
v-show只是简单控制dom元素的display属性。v-if通过操纵dom元素来进行切换显示。
vxe-grid ，增加新行，并且定位到新增的行
花花鱼的专栏
11-05 178
vxe-grid新增空行，并且定位到空行位置。
评论 1
添加红包

请填写红包祝福语或标题

个

红包个数最小为10个

元

红包金额最低5元

当前余额3.43元 前往充值 >
需支付：10.00元
成就一亿技术人!
领取后你会自动成为博主和红包主的粉丝 规则
hope_wisdom
发出的红包
实付元
使用余额支付
点击重新获取
扫码支付
钱包余额 0

抵扣说明：

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

余额充值