JavaWeb--JavaScript基础

最新推荐文章于 2020-07-11 17:47:19 发布

锅巴QAQ

最新推荐文章于 2020-07-11 17:47:19 发布

阅读量256

点赞数

分类专栏： JavaWeb 文章标签： javascript js java

本文链接：https://blog.csdn.net/pit3369/article/details/104487085

版权

JavaWeb 专栏收录该内容

16 篇文章 0 订阅

订阅专栏

JavaScript：

1-概念：

一门客户端脚本语言

运行在客户端浏览器中的。每一个浏览器都有JavaScript的解析引擎
脚本语言：不需要编译，直接就可以被浏览器解析执行了

2-功能：

可以来增强用户和html页面的交互过程，可以来控制html元素，让页面有一些动态的效果，增强用户的体验。

3-JavaScript发展史：

1992年，Nombase公司，开发出第一门客户端脚本语言，专门用于表单的校验。命名为： C-- ，后来更名为：ScriptEase
1995年，Netscape(网景)公司，开发了一门客户端脚本语言：LiveScript。后来，请来SUN公司的专家，修改LiveScript，命名为JavaScript
1996年，微软抄袭JavaScript开发出JScript语言
1997年，ECMA(欧洲计算机制造商协会)，制定出客户端脚本语言的标准：ECMAScript，就是统一了所有客户端脚本语言的编码方式。

JavaScript = ECMAScript + JavaScript自己特有的东西(BOM+DOM)

4-ECMAScript：

客户端脚本语言的标准

4-1基本语法：

4-1-1与html结合方式

内部JS：定义

<head>
    <meta charset="UTF-8">
    <title>Title</title>
    <!--
       内部JS
       外部JS
   -->
    <script>
        // 内部样式
        alert("Hello World");
    </script>

    <!--外部js样式：js文件夹下的a.js文件-->
    <script src="js/a.js"></script>

</head>

4-1-2注释

单行注释：//注释内容
多行注释：/注释内容/

4-1-3数据类型：

原始数据类型(基本数据类型)：5种

number：数字。整数/小数/NaN(not a number 一个不是数字的数字类型)
string：字符串。字符串 “abc” “a” ‘abc’
boolean: true和false
null：一个对象为空的占位符
undefined：未定义。如果一个变量没有给初始化值，则会被默认赋值为undefined

引用数据类型：对象

414变量

一小块存储数据的内存空间

Java语言是强类型语言，而JavaScript是弱类型语言：
强类型：在开辟变量存储空间时，定义了空间将来存储的数据的数据类型。只能存储固定类型的数据
弱类型：在开辟变量存储空间时，不定义空间将来的存储数据类型，可以存放任意类型的数据。

语法：var 变量名 = 初始化值;

typeof运算符：获取变量的类型。
注：null运算后得到的是object

4.1.5运算符

一元运算符：只有一个运算数的运算符
++，-- ， +(正号)

++ --: 自增(自减)

++(–) 在前，先自增(自减)，再运算
++(–) 在后，先运算，再自增(自减)

+(-)：正负号

注意：在JS中，如果运算数不是运算符所要求的类型，那么js引擎会自动的将运算数进行类型转换

其他类型转number：

string转number：按照字面值转换。如果字面值不是数字，则转为NaN（不是数字的数字）
boolean转number：true转为1，false转为0

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <title>一元运算符</title>
    <script>
        /*
        1. 一元运算符：只有一个运算数的运算符
        ++，-- ， +(正号) -（负号）
        * ++ --: 自增(自减)
            * ++(--) 在前，先自增(自减)，再运算
            * ++(--) 在后，先运算，再自增(自减)

        * +(-)：正负号
        * 注意：在JS中，如果运算数不是运算符所要求的类型，那么js引擎会自动的将运算数进行类型转换
        * 其他类型转number：
            * string转number：按照字面值转换。如果字面值不是数字，则转为NaN（不是数字的数字）
            * boolean转number：true转为1，false转为0
         */
        var num = 3;
        var a = ++num;

        document.write("num=" + num);// 4
        document.write(a); // 4
        document.write("<hr>");

        var b = +"123";
        document.writeln(typeof (b) + "<br>");//b转换为number
        var b = +"123abc";
        document.writeln("b==" + b) + "<br>";
        document.writeln(typeof (b) + "<br>");//b转换为NaN
        document.writeln(b + 1 + "<br>");      //NaN
        document.write("<hr>" );//分割线

        var flag = +true;
        var f2 = +false;
        document.write(typeof (flag) + "<br>");//number
        document.write(flag + "<br>");// 1
        document.write(f2 + "<br>");// 0

    </script>
</head>
<body>

</body>
</html>

算数运算符

加减乘除取模…

赋值运算符
= += -+…
比较运算符

< 、>=、 <=、 ==、 ===(全等于)
比较方式
1. 类型相同：直接比较

  字符串：按照字典顺序比较。按位逐一比较，直到得出大小为止。

类型不同：先进行类型转换，再比较

===：全等于。在比较之前，先判断类型，如果类型不一样，则直接返回false

<script>
    document.write((3 > 4) + "<br>");//false
    document.write(("abc" < "acd") + "<br>");//true

    document.write(("123" == 123) + "<br>");//true
    document.write(("123" === 123) + "<br>");//flase，类型不一样

</script>

逻辑运算符

<script>
    /*
     * 逻辑运算符:
     *  &&: 与（短路）
     *  ||: 或 (短路)
     *  !：非
     *      * 其他类型转boolean：
     *          1. number：0或NaN为假，其他为真
     *          2. string：除了空字符串("")，其他都是true
     *          3. null&undefined:都是false
     *          4. 对象：所有对象都为true
     */
    var flag = true;
    document.write(flag+"<br>");
    document.write(!flag+"<br>");
    document.write("<hr>");
    //number
    var num = 3;
    var num2 = 0;
    var num3 = NaN;
    document.write(!!num+"<br>");//false，3=true
    document.write(!!num2+"<br>");//true，0为false
    document.write(!!num3+"<br>");//true，NaN为flase

    /*while(1){

    }*/
    document.write("<hr>");//分割线
	
	//2. string：除了空字符串("")，其他都是true
    var str1 = "abc";
    var str2 = "";
    document.write(!!str1+"<br>");//flase
    document.write(!!str2+"<br>");//true
    document.write("<hr>");


    // null & undefined：都是false
    var obj = null;
    var obj2;
    document.write(!!obj+"<br>");//flase
    document.write(!!obj2+"<br>");//false
    document.write("<hr>");

    // 所有对象都为true
    var date = new Date();
    document.write(!!date+"<br>");//true
    document.write("<hr>");

	//所有对象都为true
    obj = "123";
    if(obj != null && obj.length > 0){//防止空指针异常
        alert(123);
    }
    //js中可以这样定义，简化书写。
    if(obj){//防止空指针异常
        alert(111);
    }
</script>

三元运算符
? : 表达式

var a = 3;
var b = 4;
var c = a > b ? 1:0;//c为0

4.1.6流程控制语句：

if…else…
switch:
- 在java中，switch语句可以接受的数据类型： byte int shor char,枚举(1.5) ,String(1.7)
  
  switch(变量):case 值:
- 在JS中,switch语句可以接受任意的原始数据类型
while
do…while
for

4.1.7JS特殊语法：

<script>
    //1. 语句以;结尾，如果一行只有一条语句则 ;可以省略 (不建议)
    var a = 3;
    //alert(a);
    /*
    2. 变量的定义使用var关键字，也可以不使用
	* 用var： 定义的变量是局部变量
    * 不用var：定义的变量是全局变量(不建议)
     */
    /*   全局变量
    b = 4;
    alert(b);
    */
	//局部变量
    var b;
    function fun() {
        b = 4;//局部变量b
    }
    fun();
    alert(b);
</script>

4.1.8练习：99乘法表

在这里插入图片描述

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <title>99乘法表</title>
    <style>
        td {
            border: 1px solid;
            /*1个像素，实线*/
        }
    </style>
    <script>

        document.write("<table border='1' align='center'>");
        for (var i = 1; i <= 9; i++) {
            document.write("<tr>")
            for (var j = 1; j <= i; j++) {
                document.write("<td>")
                document.write(i + "*" + j + "=" + i * j+"&nbsp&nbsp&nbsp");
                document.write("</td>")
            }
            document.write("<br>");
            document.write("</tr>")
        }
        document.write("</table>");

    </script>
</head>
<body>

</body>
</html>

4-2基本对象：

在这里插入图片描述

Function：函数(方法)对象

创建：

var fun = new Function(形式参数列表,方法体); //忘掉吧
function 方法名称(形式参数列表){
方法体
}
var 方法名 = function(形式参数列表){
方法体
}

function fun2(a, b) {
    alert(a + b);
}

var fun3 = function (a, b) {
    alert(a + b);
}
//alert(fun3.length);length:代表形参的个数，为2
// fun3(3,4);

方法：
属性：length:代表形参的个数

特点：

方法定义是，形参的类型不用写,返回值类型也不写。
方法是一个对象，如果定义名称相同的方法，会覆盖
在JS中，方法的调用只与方法的名称有关，和参数列表无关
在方法声明中有一个隐藏的内置对象（数组）。arguments：封装所有的实际参数

/**
 * 求任意个数的和
 */
//形参的类型不用写,返回值类型也不写。方法的调用只与方法的名称有关，和参数列表无关
function add() {
    var sum = 0;
    //隐藏的内置对象（数组）
    //arguments：封装所有的实际参数
    for (var i = 0; i < arguments.length; i++) {
        sum += arguments[i];
    }
    return sum;
}
//调用：方法名称(实际参数列表);
var sum = add(1, 2, 3, 4);
alert(sum);

调用：
方法名称(实际参数列表);

匿名函数

没有名字的函数。

function(形式参数){函数体}
调用方式：将匿名函数赋值给一个变量，通过变量名调用函数
定义函数并赋值给变量：var fn = function(形式参数){函数体}
调用函数：fn(实际参数);

<script type="text/javascript">
 
    // 匿名函数 : 没有名称的函数
    var func = function(i, u) {
        alert(i + " love " + u);
    }
 
    // 调用函数 :
   func("柳岩", "小白");//显示柳岩love小白
 
</script>

Array:数组对象

创建：

var arr = new Array(元素列表);
var arr = new Array(默认长度);
var arr = [元素列表];

var arr1 = new Array(1,2,3);
var arr2 = new Array(5);
var arr3 = [1,2,3,4];

方法
join(参数)：将数组中的元素按照指定的分隔符拼接为字符串
push()：向数组的末尾添加一个或更多元素，并返回新的长度。
属性：length:数组的长度
特点：

JS中，数组元素的类型可变的。
JS中，数组长度可变的。

var arr = [1,"abc",true];
document.write(arr +"<br>");//1,abc,true

document.write(arr[0] +"<br>");
document.write(arr[1] +"<br>");
document.write(arr[2] +"<br>");

//document.write(arr[10] +"<br>");
arr[10] = "好好学习，天天向上";
document.write(arr[10] +"<br>");//好好学习，天天向上
document.write(arr[9] +"<br>");//undefined

//alert(arr.length);//length:数组的长度，11
//join(参数)：将数组中的元素按照指定的分隔符拼接为字符串
document.write(arr.join("--")+"<br>");
//1--abc--true----------------好好学习，天天向上
//push()：向数组的末尾添加一个或更多元素，并返回新的长度。
arr.push(11);
document.write(arr.join("--")+"<br>");
//1--abc--true----------------好好学习，天天向上--11

Boolean

Date：日期对象

创建：
var date = new Date();
方法：
toLocaleString()：返回当前date对象对应的时间本地字符串格式
getTime()：获取毫秒值。返回当前如期对象描述的时间到1970年1月1日零点的毫秒值差

<script>
    // 定义一个 Date 日期对象
    var date = new Date();
    document.write("当前日期对象 : " + date + "<br />");
    document.write("日期字符串 : " + date.toLocaleString() + "<br />");
    document.write("当前年月日 : " + date.toLocaleDateString() + "<br />");
    document.write("当前时分秒 : " + date.toLocaleTimeString() + "<br />");
    document.write("年 : " + date.getFullYear() + "<br />");
    document.write("月 : " + (date.getMonth() + 1) + "<br />");
    document.write("日 : " + date.getDate() + "<br />");
    document.write("时 : " + date.getHours() + "<br />");
    document.write("分 : " + date.getMinutes() + "<br />");
    document.write("秒 : " + date.getSeconds() + "<br />");
</script>

当前日期对象 : Sun Feb 23 2020 21:51:00 GMT+0800 (中国标准时间)
日期字符串 : 2020/2/23 下午9:51:00
当前年月日 : 2020/2/23
当前时分秒 : 下午9:51:00
年 : 2020
月 : 2
日 : 23
时 : 21
分 : 51
秒 : 0

Math：数学对象

创建：

特点：Math对象不用创建，直接使用。 Math.方法名();

方法：

random()：返回 0 ~ 1 之间的随机数。含0不含1
ceil(x)：对数进行上舍入。
floor(x)：对数进行下舍入。
round(x)：把数四舍五入为最接近的整数。

document.write(Math.PI +"<br>");
document.write(Math.random() +"<br>");
document.write(Math.round(3.14) +"<br>");
document.write(Math.ceil(3.14) +"<br>");
document.write(Math.floor(3.14) +"<br>");

3.141592653589793
0.025211594333936826
3
4
3
37

Number

String

RegExp：正则表达式对象

正则表达式：定义字符串的组成规则。

单个字符:[]

如： [a] [ab] [a-zA-Z0-9_]

特殊符号代表特殊含义的单个字符:
\d:单个数字字符 [0-9]
\w:单个单词字符[a-zA-Z0-9_]
量词符号：

?：表示出现0次或1次
*：表示出现0次或多次
+：出现1次或多次
{m,n}:表示 m<= 数量 <= n

m如果缺省： {,n}:最多n次
n如果缺省：{m,} 最少m次
开始结束符号

^：开始 $：结束
正则对象：
1. 创建
  1. var reg = new RegExp(“正则表达式”);
  2. var reg = /正则表达式/;
2. 方法
  1. test(参数):验证指定的字符串是否符合正则定义的规范

Global：

特点：全局对象，这个Global中封装的方法不需要对象就可以直接调用。方法名();

方法：
encodeURI():url编码
decodeURI():url解码

encodeURIComponent():url编码,编码的字符更多
decodeURIComponent():url解码

var str1 = "http://www.baidu.com?wd=好好学习";
var encode1 = encodeURIComponent(str1);
document.write(encode1 +"<br>");//%E5%A5%BD%E5%A5%BD%E5%AD%A6%E4%B9%A0

var s1 = decodeURIComponent(encode1);
document.write(s1 +"
");//好好学习
```

parseInt():将字符串转为数字

> 逐一判断每一个字符是否是数字，直到不是数字为止，将前边数字部分转为number
> isNaN():判断一个值是否是NaN
>
>    * NaN六亲不认，连自己都不认。NaN参与的==比较全部问false
>
>      ```js
>      var a = NaN;
>      document.write(a == NaN);//false
>      document.write(isNaN(a));//true
>      ```
>
>      

eval()：将JavaScript 字符串，并把它作为脚本代码来执行。

```js
var jscode = "alert('好好学习')";
eval(jscode);//好好学习

var jscode = "alert(123)";
eval(jscode);//123
```

5-BOM

6-DOM

document.write(s1 +"<br>");//好好学习
```



parseInt():将字符串转为数字

> 逐一判断每一个字符是否是数字，直到不是数字为止，将前边数字部分转为number
> isNaN():判断一个值是否是NaN
>
>    * NaN六亲不认，连自己都不认。NaN参与的==比较全部问false
>
>      ```js
>      var a = NaN;
>      document.write(a == NaN);//false
>      document.write(isNaN(a));//true
>      ```
>
>      

eval()：将JavaScript 字符串，并把它作为脚本代码来执行。

```js
var jscode = "alert('好好学习')";
eval(jscode);//好好学习

var jscode = "alert(123)";
eval(jscode);//123
```

5-BOM

6-DOM

锅巴QAQ

关注

0
点赞
踩
0

收藏

觉得还不错? 一键收藏
0
评论
JavaWeb--JavaScript基础

文章目录JavaScript：1-概念：2-功能：3-JavaScript发展史：4-ECMAScript：4-1基本语法：4-1-1与html结合方式4-1-2注释4-1-3数据类型：414变量4.1.5运算符4.1.6流程控制语句：4.1.7JS特殊语法：4.1.8练习：99乘法表4-2基本对象：Function：函数(方法)对象匿名函数Array:数组对象Date：日期对象Math：数学对象...
复制链接

扫一扫