javascript学习笔记

最新推荐文章于 2024-08-02 22:18:58 发布

Creabine

最新推荐文章于 2024-08-02 22:18:58 发布

阅读量1.5k

点赞数

分类专栏：学习笔记 JavaScript/jQuery

本文链接：https://blog.csdn.net/Creabine/article/details/50140409

版权

本文详细介绍了JavaScript的基础知识，包括脚本语言的特点、在客户端执行的优势与问题，以及开发工具的选择。通过实例展示了如何在HTML中使用JavaScript，讲解了变量、数据类型、运算符、控制语句、函数等核心概念。此外，还提到了变量命名规范、数据类型的转换以及逻辑运算符的用法。最后，探讨了JavaScript中的位运算、循环结构、条件判断以及对象、数组的使用。文章适合JavaScript初学者阅读，帮助理解语言基础与实践应用。

摘要由CSDN通过智能技术生成

◆javascript的基本介绍

1.js 是用于web开发的脚本语言

脚本语言是什么？

1）脚本语言往往不能独立使用，它和html/jsp/php/asp/asp.net配合使用

2）脚本语言有自己的变量，函数，控制语句（顺序，分支，循环）

3）脚本语言实际上是解释性语言（即在执行的时候直接对源码进行执行）

4）java程序：java--->class--->jvm js--->浏览器（js引擎来解释执行）

2.js 在客户端（浏览器）执行

客户端向服务器发送请求，下载html和js文件，然后在客户端执行操作。

3.因为js是有浏览器来解释执行的，因此这里有个问题，不同类型的浏览器可能对js的支持不一样。

◆js的开发工具选择

1.记事本

2.eclipse（myeclipse）

注意：javascript严格区分大小写，每一句语句最后一定要以 ; 结尾

案例1

需求：打开网页后，显示hello world

<html>
<head>

<script language="javascript">
window.alert("hello!");
</script>
</head>
<body>
</body>
</html>

问题

1.js代码可以放在head里，也可以放在body里

2.js必须用

js代码

</script>

注意：如果没有用script包起来，浏览器会将其视为普通文本。

3.在一个html文件中（jsp/php/asp）可以出现多对<script>片段，浏览器将会按照先后顺序依次执行

案例2：

对前面的程序，改进成一个简单的家法运算程序

<html>
<head></head>
<body>

<script language="javascript">
//js中变量的定义（在js中变量用var表示，不管实际类型）
var num1=456;
var num2=89;
var result=num1+num2;
window.alert("结果是"+result);//alert函数，是

</script>

</body>
</html>

◆js的变量的类型究竟怎样决定：

1.js是弱数据类型语言（即定义变量的时候无需指定类型）

即：在定义变量的时候，统一使用var表示，甚至可以去掉var这个关键字

2.js中的变量的数据类型，是由js引擎来决定的。

var name="creabine"; //name是字符串类型

var kk=2 //kk是数字类型

var yy //yy是undefined

如果name="233" //这时name自动变成数字类型

◆即，js引擎可以根据数据的值来判断数据类型

◆js的命名规范（变量，函数的命名）

1.使用大小写字母，数字，_，$，可以命名

2.不能以数字开头

3.不能使用js的关键字和保留字

4.区分大小写

5.单行注释使用 // 多行注释使用 /**/

◆js的数据类型

1.基本数据类型，分为：

（1）Number 数值

1）.整形常量（十进制、八进制、十六进制）

注意此例：

var a=123;
var b=034;//十进制中不以0开头，而这里的034以0开头，js将认为034为八进制数，此八进制数转换为十进制数（4*8^0+3*8^1+0*8^2=28）的结果为28，故c=a+b=123+28=151。
var c=a+b;
window.alert(c);

2）.实型常量

12.32、19.458、5E3(即5*10^3，这里的e大小写都可以，也可以写作5e3）

var a=12.32;

特殊数值：

1.NaN （not a number）

例：

var a="abc";

window.alert(parseInt(a)); //parseInt(a)这个函数为：解析一个字符串并转为整数。这里的变量a=abc，a并不是数值类型，故无法转为整数，会报错为NaN。也可以用这个技巧去判断一个值是不是数字。

2.infintiy(无穷大)

例：

window.alert(6/0); //6/0就是无穷大

◆有两个函数可以用于判断NaN，infinity，分别是

isNaN() 检查某个值是不是数字

isFinite() 检查某个值是否为有穷大的数

下面只举例isNaN：

window.alert(isNaN("abc")); //判断abc是否不是数字，确实不是数字，返回true

window.alert(isNaN("123")); //判断123是否不是数字，是数字，返回false

（2）String 字符串型

"a book of JavaScript" 、 "a" 、 "dkfjkd"fdf "fd f"

例：

var a="abc";

var b="abcddd";

car c="fdskfjkls\"gfg\"faksjf"; //字符串类型的值，要用“”包起来，而当值中有“”引号时，用反斜杠\ 来转意，这时输出的时候，并不会输出反斜杠\，会输出它旁边的双引号，

window.alert(c);

（3）Boolean 布尔型：即true和false

举例：

var a=true;

var b=false;

js中非0的数，都为true，包括小数;js中字符串也是true。

if(1.1){

window.alert('ok');

}

通过typeof可以看到变量的具体数据类型是什么，举例：

<html>
<head>
<script language="javascript">
var v1="abc";
var v2=890;
window.alert("v1是"+typeof v1);
window.alert("v2是"+typeof v2);

v1=567;//js是动态语言，变量类型是可以动态变化的，这里赋值567，v1又变成了数字类型。
window.alert("v1是"+typeof v1);
</script>
</head>
<body>
</body>
</html>

2.复合类型，分为

（1）数组

（2）对象

3.特殊类型

1.null 空值

var a=null;

2.undefine 未定义

var tt;
window.alert(tt);//弹框说明未定义

◆js数据类型的转换

1.自动转换

var a=123; //a是数值

var a="hello"； /a是字符串

2.强制转换 parseInt() parseFloat()

如：

var a=12345;

a=parseInt(a); //使用系统函数强制转换，转为Int，整数。

var b=90; //b是数值

b=b+""; // b+“”空值，把b转为字符串

◆js的运算符

+ - * / %（取模，即两数相除取余，常用于判断两个数是否能够整除）

例：

var a=80;
var b=30;
var c=a%b;
window.alert(a%b);//取模主要用于整数型，小数会不明确
if (c==0){
window.alert("a能被b整除");
}else{
window.alert("a不能被b整除");
}

◆注意：++运算符 --运算符的意义

举例：举了++，--同理。

var a=57;
var b=++a;//b=++a 等价于 [a=a+1；b=a]; 而 b=a++ 等价于[b=a;a=a+1;] 简单来说，就是++在前，就是a先自加再赋值；++在后，就a先赋值，a再自加。两种处理得到的b的值是不同的
window.alert(b);
window.alert(a);

◆ +=左加 -+左减 /=左除 %=左取模

例子：

var a=56; var b=90;
a-=34;//a=a-34; a=22
b%=a;//b=b%a; 此时b=90,a=22,取模结果为2
window.alert(b);
window.alert(a);

介绍 window.prompt() 和 document.writeln() 两个函数

var val=window.prompt('请输入值');//该函数为弹出一个框输入值
var val2=window.prompt('请再输入一个值');

document.writeln('你的输入是'+(val+val2));//这里是字符串拼接
document.writeln('你的输入是'+(parseFloat(val)+parseFloat(val2)));//这里把字符串转为数值，然后进行加法运算。

◆关系运算符

== 等于 >大于 < 小于 >=大于等于 <= 小雨等于 != 不等于

案例：

◆逻辑运算符

1.与 &&

重要的案例：

var a=90;
var b=9;
if(a>b && a++>90){//这里a>b为true，故继续执行a++>90,等价于[a>90; a++],而a>90为false，所以输出no；a++之后a=91，所以输出a=91.
window.alert('ok');
}else{
window.alert('no');
}
window.alert('a='+a);

案例说明：

if（逻辑表达式1 && 逻辑表达式2）{

}

如果逻辑表达式1为true，则会继续执行逻辑表达式2

如果逻辑表达式1为false，则不会执行逻辑表达式2（因为与需要1、2同时为true才为true，1为false，没必要判断2了）

2.或 ||

if（逻辑表达式1||逻辑表达式2）{

}

如果，逻辑表达式1为true，则不再执行逻辑表达式2（因为只要1为true，就为true了，没必要判断2）

如果，逻辑表达式1为false，才会执行逻辑表达式2

案例1：

var a=90;
var b=9;
if(a>b || a++>90){//修改a b之间的大于小于号，可以测试a++的执行与否
window.alert('ok');
}else{
window.alert('no');
}
window.alert('a='+a);

这里有一个非常重要的知识点：

//在js中||究竟返回什么值
//结论：|| 将返回第一个不为false的值（对象亦可），或者返回最后一个值（若全部都是false的话）

//返回的结果，不一定是布尔值，也可能是对象

案例：
var a=4;//js中，非0的数字即为true,按上述结论，即返回4
var b=90;
window.alert(a||b);
var d=0;
window.alert(d||b);//此时d为false，b为true, b是第一个不为false的值，所以返回90
var f=null;
window.alert(d||f);//此时d,f都为false，返回最后一个值，即f的值，0

var obj=new Object();//这里说明，||所返回的值，不一定是布尔型，还可能为对象
var g=d||f||obj;
window.alert(g+"类型"+typeof g);

3.非 !

if(! 逻辑表达式){

}

如果逻辑表达式为true，【！逻辑表达式】为false，

如果逻辑表达式为false，【！逻辑表达式】为true。

特别说明：在逻辑运算中，0、“”、false、null、undefined、NaN均表示false；其他都认为是true。

例如：

var a=0;//这里的0换成 “”、false，null，undefined，NaN,均一样。

if(a){//这里a=0，表示false，即不执行window.alert('ok') 语句；若改为if(!a),则为true，执行window.alert('ok')语句。

window.alert('ok')

}