• js基础(一)


    javascript基本介绍(一)

    (后面我会持续写关于关于js的知识,里面写了很多js的小细节大家可以看下希望对大家有帮助,同时希望大家如果感觉有帮助的话可以帮忙顶一下,谢谢了)

    Javascript介绍

    javascript是什么

    • javaScript 是因特网上最流行的脚本语言,它存在于全世界所有 Web 浏览器中,能够增强用户与 Web 站点和 Web 应用程序之间的交互。
      脚本语言:脚本语言又被称为扩建的语言,或者动态语言,直接嵌入html页面,是一种解释型语言,由解释器来运行,用来控制软件应用程序,脚本通常以文本保存,只在被调用时进行解释或编译

    • JavaScript 是可插入 HTML 页面的编程代码。

    • JavaScript 插入 HTML 页面后,可由所有的现代浏览器执行。

    • JavaScript 与 Java 是两种完全不同的语言

    javascript作用

    我们通过javascript可以改变html内容,改变html样式,进行验证输入等。

    javascript历史

    Netscape网景) 发明了 JavaScript

        1997年由来自由来自 Netscape、Sun、微软、Borland 和其他一些对脚本编程感兴趣的公司的程序员组成的 TC39 锤炼出了 ECMA-262,该标准定义了名为 ECMAScript 的全新脚本语言。

        从此,Web 浏览器就开始努力(虽然有着不同的程度的成功和失败)将 **ECMAScript **作为 JavaScript 实现的基础。
    ECMAScript 仅仅是一个描述,定义了脚本语言的所有属性、方法和对象。其他语言可以实现 ECMAScript 来作为功能的基准,JavaScript 就是这样:

    javascript组成 ###

    javascript的核心ECMAScript描述了语言的语法和基本对象。
    一个完整的javaScript实现是由下面三个不同部分组成的。

    • 本地对象和内置对象JavaScript(ECMAScript)即核心
    • 文档对象模型(DOM)
    • 浏览器对象模型(BOM)

    导入js方式

    HTML 的 <script> 标签用于把 JavaScript 插入 HTML 页面当中
    编写JavaScript 三种种方式:事件定义时、内部JS和外部JS
    内部JS程序,在HTML源码中

    <script type="text/javascript">
       alert(1);
    </script>
    

    外部JS程序,在HTML中引入单独的JS程序

     <script src="1.js"></script>
     1.js 内容
     alert(2);
    

    注意:在引用外部JS的script标签间不能编写JavaScript代码,Style标签可以放在任意的位置,但不建议放在body中。

    Javascript基础语法

    变量声明

    变量是用于存储信息的容器
    javascript中的变量与我们在java中的变量一样。
    在javascript中使用用 var 运算符(variable 的缩写)加变量名定义的

    JavaScript 变量名称的规则:

    • 变量对大小写敏感(y 和 Y 是两个不同的变量)
    • 变量必须以字母或下划线开始

    注意:由于 JavaScript 对大小写敏感,变量名也对大小写敏感。

    数据类型

    JavaScript和Java一样存在两种数据类型

    • 原始值 (存储在栈Stack中简单数据)
    • 引用值 (存储在堆heap中对象)

    5种原始数据类型

    **Undefined、Null、Boolean、Number 和 String **

    JavaScript中字符串是原始数据类型
    typeof方法:运算符,查看变量类型

    所有引用类型都是object
    instanceof 运算符解决typeof对象类型判断问题

    **区分 undefined 和 null **

    • 变量定义了未初始化/ 访问对象不存在属性 --undefined
    • 访问的对象不存在 --null

    原始数据类型

    (1)Number

    创建方式:
    var myNum=new Number(value);
    var myNum=Number(value);

    属性和方法:

    • toString():转成字符串
    • valueOf():返回一个 Number 对象的基本数字值

    (2)Boolean

    创建方式:
    var bool = new Boolean(value);
    var bool = Boolean(value);

    属性和方法:

    • toString():转成字符串
    • valueOf():返回一个 Boolean 对象的基本值(boolean)

    (3)String

    创建方式:
    var str = new String(s);
    var str = String(s);

    属性和方法:

    •       **length:**字符串的长度
      
    •   	**charAt(index):**返回索引字符
      
    •   	**charCodeAt(index):**返回索引字符unicode
      
    •   	**indexOf(String):**返回字符的索引
      
    •   	**lastIndexOf(String);**逆向返回字符的索引
      
    •   	**split(reg);**将字符串按照特殊字符切割成数组
      
    •   	**substr(index):**从起始索引号提取字符串中指定数目的字符
      
    •   	**substring(str1,str2):**提取字符串中两个指定的索引号之间的字符
      
    •   	**toUpperCase();**转大写
      

    示例:

    (4)Array

    创建方式:
    var arr = new Array();//空数组
    var arr = new Array(size);//创建一个指定长度的数据
    var arr = new Array(element0, element1, ..., elementn);//创建数组直接实例化元素
    var arr = [];//空数组
    ** var arr = [1,2,5,"java"];**//创建数组直接实例化元素

    属性和方法:

    •       **length:**数组长度
      
    •   	**join():**把数组的所有元素放入一个字符串。元素通过指定的分隔符进行分隔一个
      
    •   	**pop():**删除并返回最后元素
      
    •   	**push():**向数组的末尾添加一个或更多元素,并返回新的长度
      
    •   	**reverse();**反转数组
      
    •   	**sort();**排序
      

      ** join方法演示**

    输出结果
    **George,John,Thomas
    George_John_Thomas **

    (5)Date

    创建方式:
    var myDate = new Date();
    var myDate = new Date(毫秒值);//代表从1970-1-1到现在的一个毫秒值

    属性和方法

    •       getFullYear():年
      
    •   	getMonth():月 0-11
      
    •   	getDate():日 1-31
      
    •   	getDay():星期 0-6
      
    •   	getTime():返回1970年1月1日午夜到指定日期(字符串)的毫秒数
      
    •   	toLocaleString();获得本地时间格式的字符串
      

    (6)Math

    创建方式:
    Math 对象并不像 Date 和 String 那样是对象的类,因此没有构造函数 Math(),像 Math.sin() 这样的函数只是函数,不是某个对象的方法。您无需创建它,通过把 Math 作为对象使用就可以调用其所有属性和方法。

    属性和方法

    •       PI:圆周率
      
    •   	abs():绝对值
      
    •   	ceil():对数进行上舍入
      
    •   	floor():对数进行下舍入
      
    •   	pow(x,y):返回 x 的 y 次幂
      
    •   	random():0-1之间的随机数
      
    •   	round():四舍五入
      

    (7)RegExp

    创建方式:
    var reg = new RegExp(pattern);
    var reg = /^正则规则$/;

    规则的写法:

    •       [0-9] 
      
    •   	[A-Z]
      
    •   	[a-z]
      
    •   	[A-z]
      
    •   	d 代表数据
      
    •   	D	非数字
      
    •   	w	查找单词字符
      
    •   	W	查找非单词字符
      
    •   	s	查找空白字符
      
    •   	S	查找非空白字符
      
    •   	n+	出现至少一次
      
    •   	n*	出现0次或多次
      
    •   	n?	出现0次或1次
      
    •   	{5} 出现5
      
    •   	{2,8} 2到8次
      

    方法

    test(str):检索字符串中指定的值。返回 true 或 false

    exec() 方法检索字符串中的指定值。返回值是被找到的值。如果没有发现匹配,则返回 null。

    例子

    var patt1=new RegExp("e");
    
    document.write(patt1.exec("The best things in life are free")); 
    

    输出:e

    您可以向 RegExp 对象添加第二个参数,以设定检索。例如,如果需要找到所有某个字符的所有存在,则可以使用 "g" 参数 ("global")。

    在使用 "g" 参数时,exec() 的工作原理如下:

    • 找到第一个 "e",并存储其位置

    • 如果再次运行 exec(),则从存储的位置开始检索,并找到下一个 "e",并存储其位置

      var patt1=new RegExp("e","g");
      do
      {
      result=patt1.exec("The best things in life are free");
      document.write(result);
      }
      while (result!=null)

    输出结果:**eeeeeenull
    **

    compile() 既可以改变检索模式,也可以添加或删除第二个参数。

    var patt1=new RegExp("e");
    
    document.write(patt1.test("The best things in life are free"));
    
    patt1.compile("d");
    
    document.write(patt1.test("The best things in life are free"));
    

    由于字符串中存在 "e",而没有 "d",以上代码的输出是:

    truefalse

    需求:
    校验邮箱:

    		var email = haohao_827@163.com
    		var reg = /^[A-z]+[A-z0-9_-]*@[A-z0-9]+.[A-z]+$/;
    		reg.test(email);
    

    引用类型

    引用类型通常叫做类(class),也就是说,遇到引用值,所处理的就是对象。
    从传统意义上来说,ECMAScript 并不真正具有类。
    ECMAScript 定义了“对象定义”,逻辑上等价于其他程序设计语言中的类。
    对象是由 new 运算符加上要实例化的对象的名字创建的
    var obj=new Object();
    Object对象自身用处不大,但是 ECMAScript 中的 Object 对象与 Java 中的 java.lang.Object 相似,ECMAScript 中的所有对象都由这个对象继承而来,Object 对象中的所有属性和方法都会出现在其他对象中
    常用的javascript对象有 Boolean,Number,Array,String,Date,Math,RegExp.
    可以使用instanceof运算符来判断对象的类型。

    类型转换###

    ECMAScript为开发者提供了大量的类型转换方法。
    大部分类型具有进行简单转换的方法,还有几个全局方法可以用于更复杂的转换。
    Boolean 值、数字和字符串的原始值它们是伪对象,这意味着它们实际上具有属性和方法。

    转换成字符串

    toString()方法.

    转换成数字

    ECMAScript 提供了两种把非数字的原始值转换成数字的方法,

    即 **parseInt() **和 parseFloat()

    前者把值转换成整数,后者把值转换成浮点数。

    注意:只有对 String 类型调用这些方法,它们才能正确运行;对其他类型返回的都是 NaN(not a number)。

    强制类型转换

    使用强制类型转换可以访问特定的值。
    ECMAScript 中提供了三种强制类型转换:

    1. 把给定的值转换成Boolean类型
    2. 把给定的值转换成数字
    3. 把给定的值转换成字符串

    在js中一切元素都可以都判断出布尔值,所以我们把其他数据强转为布尔型

    重点:(这个和java中不同)
    下面的这些都需要记忆

    var b1=Boolean(""); //false--空字符串
    var b2 = Boolean("hello"); //true  非空值
    var b3 = Boolean(50); // true 非空值
    var b4 = Boolean(null);// false 空值
    var b5 = Boolean(0); // flase -零
    var b6 = Boolean(new object()); // true 对象
    var b7 = Boolean(NaN); // flase
    var b8 = Boolean(undefined); //flase 创建变量没有赋值
    

    根据这个特性可以当做简单的if语句

    var a;
    a&&console.log("我是判断语句我不会输出,因为a是false所以不会执行到后面来");
    

    运算符与表达式

    一元运算符

    • ++ 自加
    • -- 自减
    • void运算符

    void 运算符对任何值返回 undefined。该运算符通常用于避免输出不应该输出的值,
    例如,
    从 HTML 的<a元素调用 JavaScript 函数时。

    要正确做到这一点,函数不能返回有效值,否则浏览器将清空页面,只显示函数的结果。
    例如:

    <a href="javascript:window.open('about:blank')">Click me</a>
    

    如果把这行代码放入 HTML 页面,点击其中的链接,即可看到屏幕上显示 "[object]"。这是因为 window.open() 方法返回了新打开的窗口的引用。然后该对象将被转换成要显示的字符串。要避免这种效果,可以用 void 运算符调用 window.open() 函数:

    <a href="javascript:void(window.open('about:blank'))">Click me</a>
    

    这使 window.open() 调用返回 undefined,它不是有效值,不会显示在浏览器窗口中。

    提示:请记住,没有返回值的函数真正返回的都是 undefined。


    **逻辑运算符**

    逻辑运算会有三种 NOT AND OR

    在学习各种逻辑运算符之前,让我们先了解一下 ECMAScript-262 v5 规范中描述的 ToBoolean 操作。

    参数类型 结果

    Undefined	false
    Null		 false
    Boolean	  结果等于输入的参数(不转换)
    Number	   如果参数为 +0, -0 或 NaN,则结果为 false;否则为 true。
    String	   如果参数为空字符串,则结果为 false;否则为 true。
    Object	   true
    
    • 逻辑NOT运算符

      如果运算数是对象,返回 false
      如果运算数是数字 0,返回 true
      如果运算数是 0 以外的任何数字,返回 false
      如果运算数是 null,返回 true
      如果运算数是 NaN,返回 true
      如果运算数是 undefined,发生错误

    • 逻辑AND运算会

      运算数 1 运算数 2 结果
      true true true
      true false false
      false true false
      false false false

    • 逻辑OR运算符

      运算数 1 运算数 2 结果
      true true true
      true false true
      false true true
      false false false

    • 加性运算符

    某个运算数是 NaN,那么结果为 NaN。

    -Infinity    加 		-Infinity,	结果为 	-Infinity。
    Infinity	 加 		-Infinity,	结果为	 NaN。
    +0 		  加 		+0,		   结果为	 +0。
    -0 		  加		 +0,		   结果为 	+0。
    -0 		  加 		-0,           结果为 	-0。
    

    不过,如果某个运算数是字符串,那么采用下列规则:
    如果两个运算数都是字符串,把第二个字符串连接到第一个上。
    如果只有一个运算数是字符串,把另一个运算数转换成字符串,结果是两个字符串连接成的字符串。

    关系运算符

    关系运算符有>(大于),<(小于) >=(大于等于) <=(小于等于) ,它们的运算结果返回的是一个boolean值。

    常规比较

    如果是数字,那么比较与我们在java中操作一样。
    如果是两个字符串使用关系运算符操作,那么我们可以简单理解成是按照字母的码值来比较。比较容易理解的是根据字母顺序,在前的字母比在后的小,所有的小写字母都大于大写字母。
    比较数字或字符串
    如果两个数字字符串比较,例如:”23”<”3”,它们也是按照数字在码表中的码值来比较.
    如果一个是数字一个是字符串,那么会将字符串转换成数字在进行比较。

    等性运算符

    ECMAScript提供了两套等性运算符:

    • 等号与非等号用来处理原始值
    • 全等号与非全等号来处理对象。

    执行类型转换的规则如下:

    • 如果一个运算数是 Boolean 值,在检查相等性之前,把它转换成数字值。false 转换成 0,true 为 1。
    • 如果一个运算数是字符串,另一个是数字,在检查相等性之前,要尝试把字符串转换成数字。
    • 如果一个运算数是对象,另一个是字符串,在检查相等性之前,要尝试把对象转换成字符串。
    • 如果一个运算数是对象,另一个是数字,在检查相等性之前,要尝试把对象转换成数字。

    在比较时,该运算符还遵守下列规则:

    • 值 null 和 undefined 相等。
    • 在检查相等性时,不能把 null 和 undefined 转换成其他值。
    • 如果某个运算数是 NaN,等号将返回 false,非等号将返回 true。
    • 如果两个运算数都是对象,那么比较的是它们的引用值。如果两个运算数指向同一对象,那么等号返回 true,否则两个运算数不等。

    全等号由三个等号表示(=),只有在无需类型转换运算数就相等的情况下,才返回 true。
    非全等号由感叹号加两个等号(!
    )表示,只有在无需类型转换运算数不相等的情况下,才返回 true。

    例子

    <!DOCTYPE html>
    <html>
      <head>
    <title>测试不全等</title>
    <script>
      var a = 1;
      var b = 4;
      a !== b && console.log("true");//true
      var c = true;
      a !== c && console.log("true");//true
    </script>
    <meta charset="UTF-8">
      </head>
      <body>
      </body>
    </html>
    

    下面列一些特殊情况

    表达式   				值
    null==undefined		true 
    "NaN"==NaN			false
    5==NaN				false
    NaN==NaN			  false
    NaN!=NaN			  true
    
    • 三元运算符

    在js中也存在三元运算符,与java中使用方式一样。例如:

    var max = (num1 > num2) ? num1 :num2;
    这个表达式描述的就是如果num1大于num2,那么max的值就是num1,返回之max的结果就是num2.

    • 赋值运算符

    简单的赋值运算符由等号(=)实现,只是把等号右边的值赋予等号左边的变量

    每种主要的算术运算以及其他几个运算都有复合赋值运算符:

    • 乘法/赋值(*=)

    • 除法/赋值(/=)

    • 取模/赋值(%=)

    • 加法/赋值(+=)

    • 减法/赋值(-=)

    • 逗号运算符
      用逗号运算符可以在一条语句中执行多个运算。例如:
      var a=1,b=2,c=3;

    Javascript基础语法-条件语句 ####

    if语句

    javascrip中的if语句,与我们在java中使用基本相同,例如:

    if (i > 30) {
    alert("大于 30");
    }else {
    alert("小于等于 30");
    }
    

    switch语句

    switch语句也与我们在jdk1.7中使用相同,也就是说,它可以直接判断字符串类型
    var BLUE = "blue", RED = "red", GREEN = "green";

    switch (sColor) {
      case BLUE: alert("Blue");
    break;
      case RED: alert("Red");
    break;
      case GREEN: alert("Green");
    break;
      default: alert("Other");
    }
    

    Javascript基础语法-循环语句

    在javascript中也存在循环语句for while do-while,基本与在java中使用相同.

    for示例
    var iCount = 6;
    for (var i = 0; i < iCount; i++) {
      alert(i);
    }
    

    注意:在声明变量归我们使用var

    while示例

    var i = 0;
    while (i < 10) {
      i += 2;
    }
    

    do-while示例

    var i = 0;
    do {
    i += 2;
    } while (i < 10);
    

    注意:在while后面的分号

  • 相关阅读:
    python 递归一行实现字符串反转
    HABSE安装教程
    Target runtime Apache Tomcat v7.0 is not defined.
    论各种非人性化自动设置及关闭位置(持续更新中。。。)
    装饰者模式
    傻瓜式servlet监听器简单实例
    editplus代码格式化
    session,cookie机制
    servlet文件部署在tomcat上
    python学习笔记(一):作图
  • 原文地址:https://www.cnblogs.com/yangliguo/p/7398974.html
Copyright © 2020-2023  润新知