首页    技术博客    PHP教程    数据库技术    前端开发   HTML5    Nginx    php论坛
新用户注册 | 会员登录
加入会员，解锁专属内容
取消
热门标签 | HotTags
当前位置:  开发笔记 > 编程语言 > 正文

[学习笔记]JavaScript基础

作者： | 来源：互联网 | 2023-10-13 09:36
JavaScript概述1.JavaScript定义JavaScript是Netscape公司开发的一种基于对象和事件驱动的脚本语言。它是弱类型语言，只能由浏览器解释执行。其中：脚本语言：解释运行（

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('写在事件中')。 
 type="button" value="方法1" onclick="alert('写在事件中')" />

方法2：

使用script标签，在标签内写js代码。注意：script标签，必须有独立的结束标签。 
  type="button" value="方法2" onclick="_second()" />

方法3：

引入外部js文件，间不可以有Javascript代码。 
  type="button" value="方法3" onclick="_third()" />

注意：

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

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; //numbervar v2 = 15.6; //numbervar v3 = "abc"; //stringvar v4 = false; //booleanvar v5; //undefinedvar 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; //stringvar v4 = v2 - v1; //numbervar v5 = v2 * v1; //numbervar v6 = v2 / v1; //number

5. 运算符

  • 加减乘除：，字符串+数字返回的是字符串，其余全是返回number。
  • 与或非：&&：左右两边都成立则为真；||：左右有一边为真即是真；！：取反。
  • 条件运算，两个等号比较的值的内容，三个等号比较的是值的内容和数据类型。
示例 
var u = 10;var t = "10";alert(u==t); // truealert(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(""); for (var i = 0; i < 5; i++) { document.write(""); for (var j = 0; j < 5; j++) { document.write(""); } document.write(""); } document.write("
第" + (i + 1) + "行，第" + (j + 1) + "列
"); 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("
");};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); // 2var t = "s";alert(parseInt(t)); // NaNvar u = 3.1415926;alert(parseInt(u)); // 3 var a = "3.1415926";alert(parseFloat(a)); // 3.1415926var 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); // 初始化一个数组，长度为5var 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+"
"); // "llo"var s2 = s.substr(2,5);document.write(s2+"
"); // "llo-w"

3. Date

与Java类似。方法较多，具体查阅文档。 
var mydate = new Date();alert(mydate.getDate()); // 日：15alert(mydate.getMonth()); // 月1：0alert(mydate.getDay()); // 星期四：4

4. Math

与Java类似。方法较多，具体查阅文档。 
var t = Math.random(); // 返回的是0-1之间的随机数var f = Math.floor(-5.9999); // 下舍入：-6var s = Math.round(-3.5); // 四舍五入：-3

5. RegExp

5.1 正则表达式对象的建立

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

5.2 正则表达式的使用

test()方法用于匹配正则表达式。方法较多，具体查阅文档。 
电话号码： type="text" name="tel" />
 type="button" value="检查是否是电话号码" onclick="_check()" />
推荐阅读
author-avatar
Tags | 热门标签
RankList | 热门文章
PHP1.CN | 中国最专业的PHP中文社区 | DevBox开发工具箱 | json解析格式化 |PHP资讯 | PHP教程 | 数据库技术 | 服务器技术 | 前端开发技术 | PHP框架 | 开发工具 | 在线工具
Copyright © 1998 - 2020 PHP1.CN. All Rights Reserved | 京公网安备 11010802041100号 | 京ICP备19059560号-4 | PHP1.CN 第一PHP社区 版权所有