[学习笔记]JavaScript基础

最新推荐文章于 2024-07-13 15:45:29 发布
最新推荐文章于 2024-07-13 15:45:29 发布
阅读量6.8k 收藏
点赞数
分类专栏： JavaScript
版权声明：本文为博主原创文章，遵循 CC 4.0 BY-SA 版权协议，转载请附上原文出处链接和本声明。
本文链接：https://blog.csdn.net/u010388781/article/details/51167703
版权

JavaScript概述

1. JavaScript定义

JavaScript是Netscape公司开发的一种 基于对象和 事件驱动的 脚本语言。它是弱类型语言，只能由浏览器解释执行。
其中：
脚本语言：解释运行 （由浏览器来解释执行） ，无需编译。
基于对象：有一些内置的对象共我们使用，但是不能完全实现继承，封装和多态，只能模拟。
事件驱动：必须由事件触发。

2. JavaScript的发展历程

在1995年时，由网景（Netscape）公司在Netscape 浏览器上首次设计实现而成。因为网景公司与升阳（Sun）公司合作，网景公司管理层次结构希望它外观看起来像Java，因此取名为JavaScript。但实际上它的语法风格与Self及Scheme较为接近。  
为了获取技术优势，微软（Microsoft）推出了JScript，CEnvi推出ScriptEase，与JavaScript类似同样可在浏览器上运行。为了统一规格，1997年，在ECMA（欧洲计算机制造商协会）的协调下，由网景、升阳、微软和Borland公司组成的工作组确定统一标准：ECMA-262。因为JavaScript兼容于ECMA标准，因此也称为ECMAScript。 目前规范：ECMA-262。

3. JavaScript的特点

  • 交互性（信息的动态交互）
  • 跨平台性（不允许直接访问本地硬盘）
  • 安全性（只要是可以解释Js的浏览器都可以执行，和平台无关）

JavaScript的语言组成

1. 核心语法（ECMA Core）
2. 浏览器对象模型（BOM，Browser Object Model）
3. 文档对象模型（DOM，Document Object Model）

JavaScript和HTML的结合方式

方法1：

直接写在事件中，当浏览器不能正确解释时，在前面加上“javascript:”，例如：javascript:alert('写在事件中')。 
   
   

    
    

     
     <input type="button" value="方法1" onclick="alert('写在事件中')" />

方法2：

使用script标签，在标签内写js代码。注意：script标签，必须有独立的结束标签。 
   
   

    
    

     
     <script  type="text/javascript" >
    
    

    
    

     
     function _second(){
    
    

    
    

     
     	alert("使用script标签，在标签内写js代码");
    
    

    
    

     
     }
    
    

    
    

     
     </script>
    
    

    
    

     
      
    
    

    
    

     
     <input type="button" value="方法2" onclick="_second()" />

方法3：

引入外部js文件，<script>和</script>间 不可以有JavaScript代码。 
   
   

    
    

     
     <script type="text/javascript" src="demo.js" ></script>
    
    

    
    

     
      
    
    

    
    

     
     <input type="button" value="方法3" onclick="_third()" />

注意：

  • JavaScript每句最后的分号“;”非必须，但是建议加上。
  • JavaScript的变量，方法和运算符对大小写敏感。
  • JavaScript可以写在网页<html>标签内的任意地方，但是一般在<head>标签内。
  • 只有需要使用JavaScript打印输出，才将JavaScript写在<body>标签内。

JavaScript的基本语法

1. 注释

   
   

    
    

     
     /*多行注释*/
    
    

    
    

     
     //单行注释

2. 变量定义

使用var关键字进行变量定义，也可以不使用： 
   
   

    
    

     
     var a = 1;
    
    

    
    

     
     a = "test";
    
    

    
    

     
     a = 3.1415926;
    
    

    
    

     
     a = false;
    
    

    
    

     
     b = 3;
由于JavaScript是弱类型语言，所以数据类型由值确定。

3. 变量类型

五种基本数据类型：Undefined、Null、Boolean、Number 和 String，存储在栈区。
引用数据类型：存储在堆区。 
   
   

    
    

     
     var v1 = 10; //number
    
    

    
    

     
     var v2 = 15.6; //number
    
    

    
    

     
     var v3 = "abc"; //string
    
    

    
    

     
     var v4 = false; //boolean
    
    

    
    

     
     var v5; //undefined
    
    

    
    

     
     var v6 = null; //基本数据类型是null，用typeof验证的时候是object
  • Undefined：typeof()测试为Undefined。
  • null：typeof()测试为Object。
  • var str = "abc";：基本数据类型字符串。
    var str = new String("abc");：引用数据类型字符串对象。
    基本数据类型字符串可以直接调用字符串对象的方法，因为JavaScript为弱类型语言。

4. 弱类型转换

   
   

    
    

     
     var v1 = "1.5";
    
    

    
    

     
     var v2 = 3;
    
    

    
    

     
     var v3 = v2 + v1; //string
    
    

    
    

     
     var v4 = v2 - v1; //number
    
    

    
    

     
     var v5 = v2 * v1; //number
    
    

    
    

     
     var v6 = v2 / v1; //number

5. 运算符

  • 加减乘除：，字符串+数字返回的是字符串，其余全是返回number。
  • 与或非：&&：左右两边都成立则为真；||：左右有一边为真即是真；！：取反。
  • 条件运算，两个等号比较的值的内容，三个等号比较的是值的内容和数据类型。
示例 
   
   

    
    

     
     var u = 10;
    
    

    
    

     
     var t = "10";
    
    

    
    

     
     alert(u==t); // true
    
    

    
    

     
     alert(u===t); // false
  • 三元运算符：判断表达式 ? 表达式1 : 表达式2;
  • 在javaScript当中，''、0、false、undefined、NaN、null是假，其余全是真。
示例 
   
   

    
    

     
     var v = NaN ? 10 : 20; // 20

6. 流程控制

6.1 条件

   
   

    
    

     
     if
     
      
     
     (
     
     condition1
     
     )
     
      
     
     {
    
    

    
    

     
       statement1
     
     ;
    
    

    
    

     
     }
     
      
     
     else
     
      
     
     if
     
      
     
     (
     
     condition2
     
     )
     
      
     
     {
    
    

    
    

     
       statement2
     
     ;
    
    

    
    

     
     }
     
      
     
     else
     
      
     
     {
    
    

    
    

     
       statement3
     
     ;
    
    

    
    

     
     }
其中，else if 和 else 不是必须的。

6.2 循环

方式一：
while (condition) {
  statement;
}

方式二：
do {
  statement;
} while (condition);

方式三：
for (初始化表达式; 循环条件表达式; 循环后操作表达式) {
  statement;
}
  • while 循环是先判断，后执行；do-while 循环是先执行后判断。
  • for 循环先执行初始化表达式，然后判断循环条件表达式，如果满足则执行循环体，接着执行循环后操作表达式，然后循环判断循环条件表达式，直到不满足为止。也就是说初始化表达式只在一开始执行一次，接下来就是条件表达式->循环体->操作表达式的循环执行。

6.3 多重选择

   
   

    
    

     
     switch
     
      
     
     (
     
     choice
     
     )
     
      
     
     {
    
    

    
    

     
       
     
     case
     
      
     
     1
     
     :
    
    

    
    

     
         statement1
     
     ;
    
    

    
    

     
         
     
     break
     
     ;
    
    

    
    

     
       
     
     case
     
      
     
     2
     
     :
    
    

    
    

     
         statement2
     
     ;
    
    

    
    

     
         
     
     break
     
     ;
    
    

    
    

     
       
     
     default
     
     :
    
    

    
    

     
         
     
     // bad input
    
    

    
    

     
         statement3
     
     ;
    
    

    
    

     
         
     
     break
     
     ;
    
    

    
    

     
     }
  • case 标签可以是任意数据类型 var。
  • switch 语句从与选项值（choice）相匹配的 case 标签处开始执行，直到遇到 break 语句，或者执行到 switch 语句的结束为止。如果没有相匹配的 case 标签，而有 default 子句，就执行这个子句。

6.4 案例

动态打印表格
   
   

    
    

     
     <html>
    
    

    
    

     
      
    
    

    
    

     
     <head>
    
    

    
    

     
         <title>动态打印表格</title>
    
    

    
    

     
     </head>
    
    

    
    

     
      
    
    

    
    

     
     <body>
    
    

    
    

     
         <script type="text/javascript">
    
    

    
    

     
         //document 是DOM中的内置对象,有一个输出方法write()
    
    

    
    

     
         document.write("<table border='1' width='600px' height='300px'>");
    
    

    
    

     
         for (var i = 0; i < 5; i++) {
    
    

    
    

     
             document.write("<tr>");
    
    

    
    

     
             for (var j = 0; j < 5; j++) {
    
    

    
    

     
                 document.write("<td align='center'>第" + (i + 1) + "行，第" + (j + 1) + "列</td>");
    
    

    
    

     
             }
    
    

    
    

     
             document.write("</tr>");
    
    

    
    

     
         }
    
    

    
    

     
         document.write("</table>");
    
    

    
    

     
         </script>
    
    

    
    

     
     </body>
    
    

    
    

     
      
    
    

    
    

     
     </html>
效果


打印倒三角
   
   

    
    

     
     <script type="text/javascript">
    
    

    
    

     
     var icon = "\u263a";
    
    

    
    

     
     for (var i = 0; i < 6; i++) {
    
    

    
    

     
         for (var j = 0; j < i; j++) {
    
    

    
    

     
             document.write("  ");
    
    

    
    

     
         };
    
    

    
    

     
         for (var j = 0; j < (6 - i); j++) {
    
    

    
    

     
             document.write(icon+"  ");
    
    

    
    

     
         };
    
    

    
    

     
         document.write("<br />");
    
    

    
    

     
     };
    
    

    
    

     
     </script>
效果



JavaScript方法的定义

定义方法的关键字：function。

方法1：

function 方法名(参数){
    方法体
    （有可能有返回值，有可能没有返回值）
}

示例 
   
   

    
    

     
     //没有参数没有返回值
    
    

    
    

     
     function _myfunction() {
    
    

    
    

     
         alert("hello world");
    
    

    
    

     
     }
    
    

    
    

     
     //调用方式 
    
    

    
    

     
     _myfunction();
    
    

    
    

     
      
    
    

    
    

     
     //没有参数，有返回值
    
    

    
    

     
     function _myfunction() {
    
    

    
    

     
         return "hello world";
    
    

    
    

     
     }
    
    

    
    

     
     //调用方式
    
    

    
    

     
     alert(_myfunction());
    
    

    
    

     
      
    
    

    
    

     
     //有参数，没有返回值
    
    

    
    

     
     function _myfunction(str) {
    
    

    
    

     
         alert(str);
    
    

    
    

     
     }
    
    

    
    

     
     //调用方式
    
    

    
    

     
     _myfunction("hello World");
    
    

    
    

     
      
    
    

    
    

     
     //有参数和返回值
    
    

    
    

     
     function _myfunction(str) {
    
    

    
    

     
         return ("hello javascript " + str);
    
    

    
    

     
     }
    
    

    
    

     
     //调用方式
    
    

    
    

     
     alert(_myfunction("test"));

方法2：

var 方法名 = function(参数){
    方法体
    （可能有返回值，也可能没有）
}

示例 
   
   

    
    

     
     var _myfunc = function() {
    
    

    
    

     
         alert("hello second defined function ");
    
    

    
    

     
     }
    
    

    
    

     
     

    
    

    
    

     
     //调用方式
    
    

    
    

     
     _myfunc();
    
    

    
    

     
     alert(_myfunc); // 把等号后面的内容当成变量的值输出
    
    

    
    

     
     alert(_myfunc()); // 先运行方法体，然后输出undefined

方法3（不常用）：

var 方法名 = new Function(参数1, 参数2, 参数n, 方法体内容);

示例 
   
   

    
    

     
     var _mytest = new Function("a", "b", "return a+b;");
    
    

    
    

     
     

    
    

    
    

     
     //调用方式
    
    

    
    

     
     alert(_mytest(1, 2));

JavaScript全局方法

1. isNaN

当不是数字时返回true，是数字时返回false。 
   
   

    
    

     
     var a = "test";
    
    

    
    

     
     alert(isNaN(a)); // true

2. parseInt，parseFloat

对字符串进行解析。parseInt解析成整数，如果是整数则正常解析，如果是浮点数则返回整数部分，如果不是数字返回NaN。parseFloat解析成浮点数，如果是浮点数则正常解析，如果不是一个数字则返回NaN。

示例 
   
   

    
    

     
     var s = "1";
    
    

    
    

     
     alert(parseInt(s)+1); // 2
    
    

    
    

     
     var t = "s";
    
    

    
    

     
     alert(parseInt(t)); // NaN
    
    

    
    

     
     var u = 3.1415926;
    
    

    
    

     
     alert(parseInt(u)); // 3
    
    

    
    

     
      
    
    

    
    

     
     var a = "3.1415926";
    
    

    
    

     
     alert(parseFloat(a)); // 3.1415926
    
    

    
    

     
     var b = "test";
    
    

    
    

     
     alert(parseFloat(b)); // NaN

3. eval

将eval的参数当成js代码来执行。 
   
   

    
    

     
     eval("alert(1+2)"); // 3

4. escape和unescape

对字符串进行编码和解码，这样就可以在所有的计算机上读取该字符串而不受平台影响。 
   
   

    
    

     
     var v1 = "      test";
    
    

    
    

     
     var v2 = "你好";
    
    

    
    

     
     alert(escape(v1)); // "%20%20%20%20%20%20test"
    
    

    
    

     
     alert(escape(v2)); // "%u4F60%u597D"
    
    

    
    

     
      
    
    

    
    

     
     var v3 = "%20%20%20%20%20%20test";
    
    

    
    

     
     var v4 = "%u4F60%u597D";
    
    

    
    

     
     alert(unescape(v3)); // "      test"
    
    

    
    

     
     alert(unescape(v4)); // "你好"

5. encodeURI和decodeURI

把字符串作为 URI 进行编码和解码。 
   
   

    
    

     
     var uri = "      test你好";
    
    

    
    

     
     document.write(encodeURI(uri)); // "%20%20%20%20%20%20test%E4%BD%A0%E5%A5%BD"
    
    

    
    

     
     var _uri = "%20%20%20%20%20%20test%E4%BD%A0%E5%A5%BD";
    
    

    
    

     
     document.write(decodeURI(_uri)); // "      test你好"

JavaScript常用对象

1. Array

  • 数组定义可以不指定数组长度，数组中的数据类型可以任意并混合。
  • 初始化数组的方法比较自由。
  • 方法较多，具体查阅文档。
   
   

    
    

     
     var arr = new Array(); // 创建数组
    
    

    
    

     
     arr[0] = "a";
    
    

    
    

     
     arr[1] = 3;
    
    

    
    

     
     arr[15] = 5;
    
    

    
    

     
     alert(arr[14]); // undefined
    
    

    
    

     
      
    
    

    
    

     
     var arr1 = new Array(5); // 初始化一个数组，长度为5
    
    

    
    

     
     var arr2 = new Array(1, 2, 3, 4); // 初始化一个数组长度为4，并初始化了元素
    
    

    
    

     
     var arr3 = [5]; // 初始化一个数组长度为1，并初始化了元素

常用方法
  • 按指定分隔符转化为字符串
    join()
  • 向数组末尾添加和删除元素
    push()
    pop()
  • 对数组进行字典排序
    sort()

2. String

  • 可以对基本数据类型String类型变量使用String对象方法。
常用方法（多数与Java类似）
  • 字符串截取
    subString(a, b)：从a截取到b，含头不含尾。
    subStr(a, b)：从a开始截取b个字符。
  • 方法较多，具体查阅文档。
示例 
   
   

    
    

     
     var s = "hello-world";
    
    

    
    

     
     var s1 = s.substring(2,5);
    
    

    
    

     
     document.write(s1+"<br />"); // "llo"
    
    

    
    

     
     var s2 = s.substr(2,5);
    
    

    
    

     
     document.write(s2+"<br />"); // "llo-w"

3. Date

与Java类似。 方法较多，具体查阅文档。 
   
   

    
    

     
     var mydate = new Date();
    
    

    
    

     
     alert(mydate.getDate()); // 日：15
    
    

    
    

     
     alert(mydate.getMonth()); // 月1：0
    
    

    
    

     
     alert(mydate.getDay()); // 星期四：4

4. Math

与Java类似。 方法较多，具体查阅文档。 
   
   

    
    

     
     var t = Math.random(); // 返回的是0-1之间的随机数
    
    

    
    

     
     var f = Math.floor(-5.9999); // 下舍入：-6
    
    

    
    

     
     var s = Math.round(-3.5); // 四舍五入：-3

5. RegExp

5.1 正则表达式对象的建立

  • 使用new创建对象：var _reg = new RegExp("正则表达式");
  • 直接使用正则表达式创建对象：var _reg = /^正则表达式/，注意：不可以有双引号。

5.2 正则表达式的使用

test()方法用于匹配正则表达式。 方法较多，具体查阅文档。 
   
   

    
    

     
     <script type="text/javascript">
    
    

    
    

     
     function _check() {
    
    

    
    

     
         var _reg = /^[0-9]{11}/;
    
    

    
    

     
         var _tel = document.getElementsByName("tel")[0].value;
    
    

    
    

     
         if (_reg.test(_tel)) {
    
    

    
    

     
             alert("是一个电话号码");
    
    

    
    

     
         } else {
    
    

    
    

     
             alert("不是一个电话号码");
    
    

    
    

     
         }
    
    

    
    

     
     }
    
    

    
    

     
     </script>
    
    

    
    

     
     电话号码：
    
    

    
    

     
     <input type="text" name="tel" />
    
    

    
    

     
     <br/>
    
    

    
    

     
     <input type="button" value="检查是否是电话号码" onclick="_check()" />
Dark_Tomcat
关注
专栏目录
尚硅谷web前端学习笔记javaScript基础全部 143页 40207字
01-28
尚硅谷web前端学习笔记javaScript基础全部 143页 40207字
JavaScript基础学习笔记
10-25
JavaScript 基础学习笔记 本资源摘要信息基于黑马视频记录的学习笔记，涵盖了 JavaScript 基础知识点，包括 HTML、CSS、JavaScript、DOM、事件处理等内容。 HTML 和 CSS 基础 * HTML 结构：head、body、title、...
学习笔记 JavaScript基础语法（全）
weixin_63676550的博客
01-15 8560
JavaScript基础语法学习笔记，视频教程链接放在末尾
Javascript入门学习笔记
weixin_61370021的博客
04-27 4672
JS入门学习笔记，JavaScript是目前web开发中不可缺少的脚本语言，js不需要编译即可运行，运行在客户端，需要通过浏览器来解析执行JavaScript代码。
javaScript学习笔记（一）js基础
热门推荐
一叶知秋
09-21 13万+
================================= 公众号 关注一波 （一叶知秋博客） 不定期分享视频资料 一、简介 1、概述： JavaScript是目前web开发中不可缺少的脚本语言，js不需要编译即可运行，运行在客户端，需要通过浏览器来解析执行JavaScript代码。 诞生于1995年，当时的主要目的是验证表单的数据是否合法。 Java...
JavaScript基础第一弹学习笔记
最新发布
qq_55961367的博客
07-13 1739
JavaScript是一种运行在客户端（浏览器）的编程语言，实现人机交互效果。
JS学习笔记（JavaScript基础学习必备）
weixin_44009656的博客
05-01 4545
讲解JavaScript 基础语法、关键特性、JSON、WebAPI 等知识点。涉及网页窗口交互的方法以及通过 DOM 进行网页元素的相关操作。 文章目录一、JavaScript 基础1.什么是 JavaScript2.JavaScript 范例3.变量4.数字与运算符5.数组概述6.操作数组7.Null 和 Undefined8.字符串9.转换成字符串10.转换成数值类型11.转换成布尔类型二 、JavaScript 关键特性1.条件2.循环3.函数（参数，函数返回值）4.创建函数5.挑战：制作直角三角形
JavaScript基础知识学习笔记
weixin_43739821的博客
01-05 1034
引入方式 基础语法 书写语法 变量 数据类型和运算符 函数function 第一种定义格式 第二种定义格式 闭包 对象 基本对象 Array对象 String对象 自定义对象 JSON对象 BOM对象 Window对象 Location对象 DOM对象 DOM介绍 获取DOM对象 操作DOM对象 案例 javascript事件 javascript事件简介 javascript事件绑定 常见javascript事件 javascript事件案例
《高性能JavaScript》学习笔记
Leon_Chenl的博客
05-21 1106
当DOM的变化影响了元素的几何属性（宽和高）——比如改变边框宽度或给段落增加文字，导致行数增加——浏览器需要重新计算元素的几何属性，同样其他元素的几何属性和位置也会因此受到影响。一旦空闲，队列中的下一个任务就被重新提取出来并运行。并不是所有的DOM变化都会影响几何属性，例如改变一个元素的背景色不会影响它的宽和高，这种情况下只会发生一次重绘，因为元素的布局并没有改变。对象成员包括属性和方法，当一个被命名的成员引用了一个函数，该成员就被称为一个“方法”，相反，引用了非函数类型的成员就被称为“属性”。
JavaScript学习笔记
qq_53388077的博客
03-30 1612
JavaScript是一门跨平台、面向对象的脚本语言，是用来控制网页行为的。脚本语言通常直接解释执行，不需要编译，缩短了传统编程语言的运行过程/*定义格式：var 对象名={属性名1：属性值1，属性名2：属性值2，属性名3：属性值3，函数名称：function(形参列表){}*/var user={age:20,alert("用膳");//简化方法：eat(){alert("用膳");
【前端学习笔记2】javaScript基础
qq_60955696的博客
01-20 596
是一种运行在客户端（服务器的编程语言）javacript分为行内JavaScript，内部JavaScript，外部JavaScript内部JavaScript直接写在html中body里面我们将script放在html文件的地步附近的原因是浏览器会按照代码在文件中的顺序加载html如果先加载的JavaScript期望修改其下方的html，那么他可能会因为html未加载而失效。因此，将JavaScript代码放在html页面的底部附件通常是最好的策略。
JavaScript学习笔记,javascript基础知识,基础语法整理.pdf
11-24
JavaScript基础知识点总结 JavaScript是一种高级的、动态的、基于对象的客户端脚本语言。它是在网页上执行的脚本语言，能实现网页的交互功能。下面是该资源中的重要知识点总结： 一、 JavaScript 基本概念 * ...
JavaScript 学习笔记之基础中的基础
10-24
理解和掌握这些基础内容，对于学习更深层次的JavaScript知识和技术至关重要。不要因为这些内容看似基础而忽略它们，因为良好的基础是深入学习和质的飞跃的前提。只有打好基础，我们才能在实际开发中应用自如，创造出...
[学习笔记]JS获取指定日期前一天
[ 风少爷]
04-16 1505
var mydate=new Date(Date.parse(stockdate.replace(/-/g,"/"))); var yesterday_milliseconds=mydate.getTime()-1000*60*60*24;  var yesterday=new Date();  yesterday.setTime(yesterday_milliseconds);  v
[学习笔记]JS下拉框赋值
[ 风少爷]
04-16 1104
var FrustaNumber=FrustaNumbers.split(","); if(FrustaNumber.length>0) { for(var i=0;i { remarkObj.options.add(new Option(FrustaNumber[i],FrustaNumber[i])); } }
[学习笔记]window.showModalDialog窗口跳转取值
[ 风少爷]
04-16 873
/主页面     var params="&viewUID=PerformanceEvaSettingSelectConpayView&mode=preview&conpayobj="+obj;         var url=$contextPath()+"/bpmengine/view/framedialog.jsp?xpage="+$contextPath()+"/bpmengine/v
JavaScript学习笔记：从基础到DOM编程
"这是一份全面的JavaScript学习笔记，涵盖了从CSS样式表基础到JavaScript语法、DOM编程等多个方面，旨在帮助读者深入理解并掌握JavaScript语言。" 在这份笔记中，作者首先介绍了CSS样式表的基本概念，包括什么是CSS...
评论
添加红包

请填写红包祝福语或标题

个

红包个数最小为10个

元

红包金额最低5元

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

抵扣说明：

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

余额充值