javascript学习笔记

28次阅读
2024年09月09日 10:21:20

共计 9405 个字符，预计需要花费 24 分钟才能阅读完成。

在HTML中的引用方式

javascript是脚本语言，需要引入到页面执行。

JavaScript在HTML的引用共有4种：

  • 页头引入(head标签内).
  • 页中引入(body标签内).
  • 元素事件中引入(标签属性中引入).
  • 引入外部JS文件.

变量

标识符：在JavaScript中，变量和函数等都需要定义一个名字，这个名字就可以称为“标识符”。

JavaScript语言中标识符最重要的3点就是：

  • 第一个字符必须是字母，下划线（_）或美元符号这3种其中之一，其后的字符可以是字母，数字或下划线，美元符号.
  • 变量名不能包含空格，加号，减号等符号.
  • 标识符不能和JavaScript中用于其他目的的关键字同名.

数据类型

JavaScript数据类型有2大分类：一是“基本数据类型”，二是“特殊数据类型”。

其中，基本数据类型包括以下3种：

  • 数字型（Number型）
  • 字符串型（String型）
  • 布尔型（Boolean型）

特殊数据类型有3种：

  • 空值（null型）
  • 未定义值（undefined型）
  • 转义字符

webstorm：快捷键使用收集

注释：

  • 单行注释：ctrl + /
  • 块注释：ctrl + shift + /
  • 选中块代码：ctrl + shift + ]/[

运算符

JavaScript的运算符按运算符类型可以分为以下5种：

  • 算术运算符；
  • 比较运算符；
  • 赋值运算符；
  • 逻辑运算符；
  • 条件运算符；

一、算术运算符

算数运算符有:加(+),减(-),乘(*),除(/),自增运算符(++),自减运算符(–).

1、自增运算符

“++”是自增运算符，它指的是在原来值的基础上加1，i++表示“i=i+1”。该运算符有2种情况：

（1）i++

“i++”指的是在使用i之后，使i的值加1。

举例：

i=1;
j=i++;

上面执行的结果：j的值为1，i的值为2。

其实上面代码等价于下面这一段代码：

i=1;
j=i;
i++;

（2）++i

“++i”指的是在使用i之前，先使i的值加1。

举例：

i=1;
j=++i;

上面的执行结果：j的值为2，i的值为2。

其实上面代码等价于下面这一段代码：

i=1;
i++;
j=i;

最后我们做个实验：

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <title>test</title>
</head>
<body>
<script>
   var a=1;
   var b=a++;
   document.write('b='+b+'<br>');
   document.write('a='+a+'<br>');

    var i = 1;
    var j=++i;

    document.write('j='+i+'<br>');
    document.write('i='+i+'<br>');
</script>
</body>
</html>

浏览器输出的结果是这样的：

javascript学习笔记

2、自减运算符

“–”是自减运算符，它指的是在原来值的基础上减1，i–表示“i=i-1”。该运算符同样有2种情况：

（1）i–
（2）–i

举例：

i=6;j=i--;//j的值为6，i的值为5
i=6;j=--i;//j的值为5，i的值为5

举例：JavaScript算术运算符

<!DOCTYPE html> 
<html xmlns="http://www.w3.org/1999/xhtml">
<head>
    <title></title>
    <script type="text/javascript">
        var n1=6,n2=7;
        var m1=n1+n2;
        var m2=n1*n2;
        var m3=n1++;
        var m4=--n2;
        document.write("m1="+m1+"<br/>");
        document.write("m2="+m2+"<br/>");
        document.write("m3="+m3+"<br/>");
        document.write("m4="+m4+"<br/>");
    </script>
</head>
<body>
</body>
</html>
javascript学习笔记

二、比较运算符

比较运算符其实就是判断大(>),小(<),等于(==),不等于(!=),恒等于(===)的运算符.如果判断结果是成立的那么反馈是true,判断结果是不成立的,反馈的是flase.

举例：

<!DOCTYPE html> 
<html xmlns="http://www.w3.org/1999/xhtml">
<head>
    <title></title>
    <script type="text/javascript">
        var age=12;
        document.write("age>20："+(age>20)+"<br>");
        document.write("age<20："+(age<20)+"<br>");
        document.write("age!=20："+(age!=20)+"<br>");
        document.write("age<=20："+(age<=20)+"<br>");
    </script>
</head>
<body>
</body>
</html>
javascript学习笔记

三、赋值运算符

JavaScript中的赋值运算有2种:简单赋值运算和复合赋值运算.

简单赋值运算是将赋值运算符（=）右边表达式的值保存到左边的变量中.

复合赋值运算结合了其他操作和赋值操作.

举例：

sum=sum+i;//简单赋值运算;
sum+=i;//复合赋值运算，等价于sum=sum+i;
=	author="hello"
+=	a+=b等价于a=a+b
-=	a-=b等价于a=a-b
*=	a*=b等价于a=a*b
/=	a/=b等价于a=a/b
%=	a%=b等价于a=a%b
&=	a&=b等价于a=a&b（&是逻辑与运算）
|=	a|=b等价于a=a|b（|是逻辑或运算）
^=	a^=b等价于a=a^b（^是逻辑异或运算）

四、逻辑运算符

逻辑运算符通常用于执行布尔运算,常常和比较运算符一起使用来表示复杂比较运算,这些运算涉及的变量通常不止一个,而且常用于if,while和for语句中.

JavaScript中常用的算术运算符

运算符 描述 示例
&& 逻辑与，若两边表达式的值都为true，则返回true；任意一个值为false，则返回false (8>5)&&(4<6)，返回true；(8<5)&&(4<6)，返回false
|| 逻辑或，只有表达式的值都为false，才返回false，其他情况返回true (8<5)||(4<6)，返回true；(8<5)&&(4>6)，返回false
! 逻辑非，若表达式的值为true，则返回false；若表达式的值为false，则返回true !(9>2)，返回false；!(9<2)，返回true

举例：

<!DOCTYPE html> 
<html xmlns="http://www.w3.org/1999/xhtml">
<head>
    <title></title>
    <script type="text/javascript">
        document.write((8 > 5) && (4 < 6)+"<br>");
        document.write((8 < 5) || (4 < 6)+"<br>");
        document.write(!(9 > 2));
    </script>
</head>
<body>
</body>
</html>
javascript学习笔记

总结：

  • （1）true的!为false，false的!为true；
  • （2）a&&b，a、b全为true时，表达式为true，否则表达式为false；
  • （3）a||b：a、b全为false时，表达式为false，否则表达式为true；

五、条件运算符

条件运算符是JavaScript支持的一种特殊的运算符。

语法：

条件 ? 表达式1 : 表达式2;

说明：

如果“条件”为true，则表达式的值使用“表达式1”的值；如果“条件”为false，则表达式的值使用“表达式2”的值。

例如：

<!DOCTYPE html>
<html>
<head>
    <meta charset="UTF-8">
    <title></title>
    <script type="text/javascript">
        var a=3;
        var b=5
        var c=(a<b)? "正确":"错误";
        document.write(c);
    </script>
</head>
<body>
</body>
</html>

返回的结果是”正确”.

六、typeof运算符

typeof运算符简介：在JavaScript中,typeof运算符用于返回它的操作数当前所容纳的数据的类型,这对于判断一个变量是否已被定义特别有用.

举例：

<!DOCTYPE html>
<html>
<head>
    <meta charset="UTF-8">
    <title></title>
    <script type="text/javascript">
        document.write(typeof(1)+ "<br>");
        document.write(typeof("javascript")+ "<br>");
        document.write(typeof(null)+ "<br>");
        document.write(typeof(undefined)+ "<br>");
    </script>
</head>
<body>
</body>
</html>

分析：

很多人对typeof(null)返回的类型为是object觉得很疑惑!疑惑是很正常的.

表达式

在JavaScript中，常见的表达式有4种：

  • 赋值表达式；
  • 算术表达式；
  • 布尔表达式；
  • 字符串表达式；

一、赋值表达式

在JavaScript种,赋值表达式的语法格式一般如下：

变量 赋值运算符 表达式;

赋值表达式在计算过程中是按照从右向左结合的.其中有简单的赋值表达式,如x=1;也有定义变量时,给变量赋初始值的赋值表达式,如var str=”鹿泽笔记”;还有使用比较复杂的赋值运算符连接的赋值表达式,如a+=6;

举例：

<!DOCTYPE html>
<html>
<head>
    <meta charset="UTF-8">
    <title></title>
    <script type="text/javascript">
        var n=4;
        n+=6;
        document.write(n);
    </script>
</head>
<body>
</body>
</html>

二、算术表达式

算术表达式就是用算术运算符连接的JavaScript语句.如a+b+c,20-12、m*n,m/n,sum%3等,都是合法的算术运算符的表达式.

算术运算符的两边必须都是数值,若在“+”运算中存在字符或字符串,则该表达式将是字符串表达式,这一点大家要记住.因为JavaScript会自动将数值型数据转换成字符串型数据.

举例：

<!DOCTYPE html>
<html>
<head>
    <meta charset="UTF-8">
    <title></title>
    <script type="text/javascript">
        var a=123;
        var str="鹿泽笔记"+a;
        document.write(str);
    </script>
</head>
<body>
</body>
</html>

分析：

“鹿泽笔记”是一个字符串型数据,a时数值型数据,如果两个相加的话,JavaScript会自动将数值型数据转换成字符串型数据,因此输出结果就是“鹿泽笔记123”.

三、布尔表达式

布尔表达式一般用来判断某个条件或者表达式是否成立,，其结果只有true或false.

举例：

<!DOCTYPE html>
<html>
<head>
    <meta charset="UTF-8">
    <title></title>
    <script type="text/javascript">
        var a=50;
        var b=60;
        if(a>b)
        {
            document.write("鹿泽笔记1！");
        }
        else
        {
            document.write("鹿泽笔记2，= =!~");
        }
    </script>
</head>
<body>
</body>
</html>

四、字符串表达式

字符串表达式指的就是操作字符串的语句.

在此重申一点,“数字+字符串”返回值一定是字符串,因为JavaScript会自动将数值型数据转换成字符串型数据.这一点我们在“算术表达式”中已经说过了.

举例：

<!DOCTYPE html>
<html>
<head>
    <meta charset="UTF-8">
    <title></title>
    <script type="text/javascript">
        var a="鹿泽";
        var b="JavaScript";
        var c="笔记";
        var str = a+b+c;
        document.write(str);
    </script>
</head>
<body>
</body>
</html>

类型转换

一、类型转换简介

所谓的类型转换，就是将一种数据类型转换为另外一种数据类型，例如上一部分说到的，如果一个数字与一个字符串相加，JavaScript会自动将数字转换为字符串，然后再与另外一个字符串相加（隐式类型转换）。

我们都知道，JavaScript是一种弱类型的语言，这一点区别于传统编程语言（如C和Java）。虽然在运算时，JavaScript会自动进行类型转换，但是为了避免自动转换或不转换产生的不良后果，有时候我们需要进行显式的类型转换。

隐式类型转换指的是JavaScript自动进行的类型转换，显式类型转换指的是我们手动用代码强制进行的类型转换。

1、字符串型转换为数值型

在JavaScript中，将字符串型数据转换为数值型数据有parseInt()和parseFloat()这2种方法。其中，parseInt()可以将字符串转换为整型数据；parseFloat()可以将字符串转换为浮点型数据。

语法：

parseInt()  //将字符串型转换为整型
parseFloat()  //将字符串型转换为浮点型

说明：

将字符串型转换为整型，前提是字符串一定要是数值字符串。那什么叫数值字符串呢？“123”、“3.1415”这些只有数字的字符串就是数值字符串，而“鹿泽123”、“567鹿泽”等就不是数值字符串。

举例：

<!DOCTYPE html>
<html>
<head>
    <meta charset="UTF-8">
    <title></title>
    <script type="text/javascript">
        var m=parseInt("3.14")+10;
        var n=parseFloat("3.14")+10;
        document.write(m+"<br/>");
        document.write(n);
    </script>
</head>
<body>
</body>
</html>

分析：

parseInt(“3.14”)的结果是3，而parseFloat(“3.14”)的结果是3.14。大家好好理解一下。

2、数值型转换为字符串型

在JavaScript中，将数值型数据（整型或浮点型）转换为字符串，都是使用toString()方法。

语法：

.toString()

举例：

<!DOCTYPE html>
<html>
<head>
    <meta charset="UTF-8">
    <title></title>
    <script type="text/javascript">
        var n=3.1415;
        var str=n.toString()+926;
        var num=n+926;
        document.write(str+"<br/>");
        document.write(num);
    </script>
</head>
<body>
</body>
</html>

分析：

这个例子虽然简单，不过涉及知识也不少。大家好好琢磨一下，也是非常值得思考的一个例子。

记住，算术运算符的两边必须都是数值，若在“+”运算中存在字符或字符串，则该表达式将是字符串表达式。因为JavaScript会自动将数值型数据转换成字符串型数据。

类型转换虽然内容比较少，但是在实际开发中，我们会经常要用到的。

JS中的单引号和双引号

JS里面的单引号和双引号可以同时使用,但是要遵循一定的准则.

最外面用了双引号了,那么里面就不能再用双引号了,因为引号是成双对的,浏览器读到一个双引号后,到第2个双引号时才算结束;同理,浏览器读到一个单引号后,必须要读到第二个单引号才算结束.不管是单引号还是双引号,里面都可以套相反的引号,但是不可以双引号里面套单引号,这个单引号再套双引号,这是不行的.

如果在引号里面使用相同的引号,需要用 \ 转义.

单引号转义为\’

单引号转义为\”

单引号和双引号之间的字符串可以相加

‘af’+”bvvv”+’dd’

输出 “afbvvvdd”

还有一种情况,这里的单引号也是字符串的一部分

“<div class=’con”+”tent’></div>”

输出 “<div class=’content’></div>”

从代码编译的角度说的话,单引号在JS中被浏览器（IE，Chrome，Safari）编译的速度更快（在FireFox中双引号更快）.

来看一些案例

首先,单引号和双引号在各自单独用时是木有什么区别的,都可以,比如：

var a=”你好”;//双引号,变量a的内容是字符串 你好

var b=’你好’;//单引号,变量b的内容是字符串 你好

console.info(a===b);//输出true，它们本质都是一样的字符串

其次:单引号和双引号混合使用时,这时候要特别注意了，这种情况一般出现在js拼接字符串里面，或者html元素的属性里面，就以JS为例吧，都是一样的规则：单引号和双引号必须成双成对的出现，可以单引号在外面，也可以双引号在外面：

var a=”‘你好’”;//这里变量a的内容就是字符串’你好’,这里的单引号也是字符串的一部分

var b=’”你好”‘;//这里变量b的内容就是字符串”你好”,这里的双引号也是字符串的一部分

console.info(a===b);//输出false，它们不是一样的字符串

接下来来个稍微复杂点的，我们来看下字符串拼接：

var _html=”<div class=’content’></div>”;/*

这里是最外面用了双引号了，那么里面就不能再用双引号了，因为引号是成双对的，浏览器读到一个双引号后，到第2个双引号时才算结束；同理，浏览器读到一个单引号后，必须要读到第二个才算结束*/

//上面的代码也可以写作：

_html='<div class=”content”></div>’;

//如果只想用一种引号的话，你级需要对里面的引号进行**转义处理**，告诉浏览器里面的引号是一个字符串，而不是引号结束符，比如：

_html='<div class=\’content\’></div>’;

再来个拼接字符串的：

var data={name:”鹿泽”,age:18};

var _html=”<div class=’info’>我的名字叫”+data.name+”,我今年”+data.age+”岁了<div>”

console.info(_html);//我的名字叫鹿泽，我今年18岁了

//很明显了，按照之前说的，引号在读到首个双引号字符串的时候，把它当做这个变量的

//内容开始处理，然后到第二个双引号那里结束，即： “<div class=’info’>我的名字叫”

/*然后通过加号拼接变量 data.name，  拼接好了后继续用加号拼接字符串 “,我今年”

以此类推。。。

一个特别复杂的例子

想要输出这段HTML

<template v-for="aodo in aodos">
<li class="mui-table-view-cell" v-bind:fundcodeli="aodo.assetCode">
<span class="column-a" v-text="aodo.assetName.substring(0,6)"></span>
<span class="column-b" v-text="aodo.setupDate.substring(0,4)+'-'+aodo.setupDate.substring(4,6)+'-'+aodo.setupDate.substring(6,8)"></span>
<span class="column-c" v-text="aodo.investType.substring(0, aodo.investType.length - 2)"></span>
<span class="column-d mui-icon mui-icon-closeempty"></span>
</li>
</template>

JS里面必须这样写：

var str="<template v-for='aodo in aodos'>
<li class='mui-table-view-cell' v-bind:fundcodeli='aodo.assetCode'>
<span class='column-a' v-text='aodo.assetName.substring(0,6)'></span>
<span class='column-b' v-text='aodo.setupDate.substring(0,4)"+'+"-"+'+"aodo.setupDate.substring(4,6)"+'+"-"+'+"aodo.setupDate.substring(6,8)'></span>
<span class='column-c' v-text='aodo.investType.substring(0, aodo.investType.length - 2)'></span>
<span class='column-d mui-icon mui-icon-closeempty'></span>
</li>
</template>";
fundListUl.innerHTML = str;

总结下：

引号（同类型的引号,单引号和双引号是不同类型）是成双对的，在读第一个引号时开始，读到第二个结束，遇到第三个又开始，第四个又结束。。。；

不同类型引号之间可以嵌套，最多2层（当然通过转义可以继续往下套，但是因为可读性太差，不要这样做）；

语法特点

javascript语言有几个特别的地方.

一、执行顺序

JavaScript程序按照在HTML文档中出现的顺序逐行执行。如果需要在整个HTML文件中执行，最好将其放在HTML文件的标签中。某些代码，如函数体内的代码，不会被立即执行，只有当所在的函数被其他程序调用时，该代码才会被执行。

二、区分大小写

JavaScript是严格区分大小写的。

举例：

var tr;
var Tr;

其中tr和Tr是两个完全不同的变量.

三、分号和空格

在JavaScript中，语句的分号“;”是可有可无的。

举例：

var a=3
var b=4
var c=a*b

上面这段代码等价于下面这段代码：

var a=3;
var b=4;
var c=a*b;

但是我们强烈要求大家在每一句语句后面加一个分号“;”，这是一个非常重要的代码编写习惯。

另外，JavaScript会忽略多余的空格，用户可以向脚本添加空格，来提高代码的可读性，说白了就是让代码“漂亮点”，读得舒服一点。

例如：

var str="鹿泽笔记";
var str = "鹿泽笔记";  //这一行代码读起来舒服一点

三、javascript注释

//单行注释内容
/*
多
行
注
释
内
容
*/
正文完
JavaScript
发表至： 产品项目
2024年9月9日 10:21:20
 0
鹿泽
版权声明：本站原创文章，本文由 鹿泽 于 2024年9月9日 10:21:20 发表，共计 9405 字。
转载说明：除特殊说明外本站文章皆由CC-4.0协议发布，转载请注明出处。
本站所有文章，如无特殊说明或标注，均为本站原创发布。任何在未征得本站同意时，禁止复制、盗用、采集、发布本站内容到任何网站、书籍等各类媒体平台。
如若本站内容侵犯了原著者的合法权益，可联系我们邮箱：526009505@qq.com进行处理。
最新文章
WordPress SEO 优化之标签优化技巧

WordPress SEO 优化之标签优化技巧

今天我们来说一下 WordPress 文章标签优化的事情。在很多 WordPress SEO 优化教程中，都会...
WordPress SEO 之站外链接建设方法和技巧

WordPress SEO 之站外链接建设方法和技巧

站外链接（简称外链）是 WordPress SEO 过程中必不可少的一项工作，怎么做外链，从哪些方面着手，很多...
一次性删除WordPress文章所有评论的方法

一次性删除WordPress文章所有评论的方法

不少小伙伴在建设WordPress站点的时候都会开启文章评论等，作为网站良好的一个互动。但是这也给了很多垃圾评...
WordPress前台显示登录用户注册时间的方法

WordPress前台显示登录用户注册时间的方法

正常WordPress前台和后台都不会显示用户的注册时间，有时需要在前台显示登录用户的注册时间，可以用下面的代...
WordPress加个评论关闭时间提示的方法

WordPress加个评论关闭时间提示的方法

为了阻止垃圾评论，我们可以进入WP后台 → 设置 → 讨论，在讨论设置面勾选“自动关闭发布 14天后的文章上的...
一个好的手机网站该如何设计呢？它有什么好处呢？
2020搜索规则解读
如何全面诊断自己的阿里店铺？
差异化主图打造