news 2026/4/15 18:04:22

JavaScript学习笔记 (一):变量、数据类型与三大运算

作者头像

张小明

前端开发工程师

1.2k 24
文章封面图
JavaScript学习笔记 (一):变量、数据类型与三大运算

一、为什么要学习javascript?

(1)、javascript基本介绍:

1.JS是用于WEB开发的脚本语言。

脚本语言是什么?

①脚本语言往往不能独立使用,它经常和html/php/asp/jsp/asp.net配合使用

②脚本语言有自己的变量、函数、控制语句(顺序控制、分支控制、循环控制)

③脚本语言实际上是解释性语言(即在执行时,直接对原码进行执行)

④JS由浏览器来解释执行

2.JS在客户端的浏览器上执行

当通过服务器访问有JS代码的网页时,不弹出提示信息;当在本机通过打开文件的方式运行有JS代码的网页时会弹出提示信息。

如何解除在本机运行JS的提示信息?

internet选项->高级->允许活动内容在我的计算机上的文件中运行

3.不同的浏览器可能对JS的支持不一样
4.JS的开发工具

1.先用记事本、editplus,

2.以后再用高级开发工具:eclipse(或myeclipse)

案例1打开网页后显示“hello word”.

window.alert("hello world");

5.js 要放在什么位置?

①js的代码一般是放在head标签之间,也可以放在别的位置

②JS位置可以随意

③JS必须用<script language="javascript"> 和 <script>包起来。

④在一个网页文件中,可以出现多对<script>片段,浏览器会按照先后顺序依次执行。

案例2对前面程序,改进成一个简单的加法运算程序

JS中变量的定义(在JS中变量用var声明,不管什么数据类型,也不需要指明变量的数据类型)

var num1=45;

var num2=50;

var result=num1+num2;

alert("结果是"+result);

二、JS中的变量

1、JS的变量类型究竟怎么决定的?

①JS是弱数据类型语言。

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

②JS中变量的数据类型是由JS引擎决定的

2、JS中的标识符

标识符是指JS中定义的符号,如:变量名、函数名、数组名等。

JS的命名规范(变量/函数):

1. 标识符可以由任意顺序的大小写字母、数字、下划线和美元符号组成

2. 标识符不能以数字开头

3. 不能是JS中的保留字和关键字

4.JS严格区分大小写(标记语言不区分大小写,如html

3、JS程序代码的格式

每条功能执行语句的最后必须用 分号 结束,每个词之间用空格、制表符、换行符或大小括号这样的分隔符隔开。

语句块使用 { }表示。

JS程序的注释:

/*….*/ 中可以嵌套 // 注释,但不能嵌套 /*….*/

三、JS的数据类型(三大类):基本数据类型、复合数据类型、特殊数据类型

1、基本数据类型:数值型(整型,实型)、字符串型、布尔型

2、复合数据类型:数组、对象

3、特殊数据类型:null、undefine

如: alert(tt); ->会弹出undefine,因为没有定义

var tt;

alert(tt); ->也会弹出undefine,因为没赋值

通过typeof可以看到变量的具体数据类型是什么,如:

var a1="abc";

var a2=89;

alert("a1是"+typeof a1+ "a2是"+typeof a2);

a1=100;

alert("a1是"+typeof a1);//JS的变量类型是可以动态变化的

特殊数值NaN(不是一个数)、Infinity(无穷大)、IsNaN()、isFinite()

如:alert(parseInt("abc")); 得到 NaN (不是一个数not a number)

alert(6/0) 得到Infinity(无穷大)

IsNaN() : 检查某个值是否是数字

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

字符串可以用双引号,也可以用单引号标示:

var a="abc";

var b= 'abc';

当字符串中有特殊字符时,可以用\转义,如字符串中需要显示引号时:

var a="abc\"d"

字符串中的特殊字符,需要以反斜杠 \ 后面跟一个普通字符来表示,如:

\r、 \n、 \t 、\b 、\'、\"、 \\xxx

4、JS数据类型的转换

如何将字符转换成数字?

var a="123";

var b=parseInt(a);

var c=parseFloat("26.9");

①自动转换

var a=123; //a是数值

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

var b=90; //b是数值

b=b+"ab"; //b就是字符串了

②强制转换

var b=parseInt("569"); //使用系统函数强制转换

四、JS中的三大运算

1、算术运算

JS的算术运算符:+ - * / %(取模:得到两数相除的余数,通常用于判断两个数是否能够整除)

取模主要用于整数之间

++ 自加

-- 自减

var a=90;

a++; //相当于 a=a+1

a--; //相当于 a=a-1

再看一个案例:

var a=56;

var b=++a;

alert(b); //b为57

alert(a); // a为57

var a=56;

var b=a++;

alert(b); //b为56

alert(a); // a为57

b=++a <=> a=a+1; b=a; // 前++

b=a++ <=> b=a; a=a+1;//后++

前减减后减减意思一个样

var a=90;

a+=10; => a=a+10;加等于

a-=10 => a=a-10;减等于

var b=20;

b+=a=> b=b+a

2、关系运算

① == 等于 ② > 大于 ③ < 小于 ④ <= 小于等于

⑤ >= 大于等于 ⑥ !=不等于

window.prompt()命令的使用:

prompt()方法用于显示可提示用户进行输入的对话框。

如果用户单击提示框的取消按钮,则返回 null。如果用户单击确认按钮,则返回输入字段当前显示的文本。

如:

var val=window.prompt("请输入值"); //val是个字符串

var val2=window.prompt("请再一个输入值"); //val2是个字符串

document.write("两值相加是" +(parseFloat(val)+parseFloat(val2)));

如果直接把val与val2相加,得到的是字符串的连接

案例:编写一种程序,可以接收两个数(可以是整数,也可以是小数),并判断两数的大小

var num1=window.prompt("请输入一个数");

var num2=window.prompt("请输入另一个数");

num1=parseFloat(num1);

num2=parseFloat(num2);

if(num1> num2){

alert("num1> num2");

}elseif(num1==num2){

alert("num1==num2");

}else{

alert("num1<num2");

}

3、逻辑运算

① && 与 ② || 或 ③ ! 非

案例1

var a=90;

var b=10;

if (a>b&&a++>100){

}

alert(a); //结果a91因为虽然a++>100条件不满意,但a++的计算已经完成了。

…………………………..

var a=90;

var b=10;

if (a<b&&++a>100){

}

alert(a); //结果a90,与(&&)判断中,当前一个条件不成立时,后面一个条件不再执行

案例2

var a=90;

var b=10;

if (a>b||++a>100){

}

alert(a);//结果a90( || )判断中,当前一个条件成立时,后面一个条件不再执行。

var a=90;

var b=10;

if (a<b||++a>100){

}

alert(a); //结果a91

if(!逻辑表达式){

}

如果逻辑表达式为true,则!逻辑表达式为false.

如果逻辑表达式为false,则!逻辑表达式为true.

★在逻辑运算中,0falsenullundefinedNaN""均表示false

在JS中非0的数、非空的字符串都为true

如:

var a=0;

if(!a){

alert("ok");

}

JS||究竟返回什么?

★结论||将返回第一个不为false的那个值(对象亦可),或者返回最后一个值(如果全都是false的话),

||返回的结果不一定是布尔值

比如:

var a=4;

var b=20;

alert(a || b)' =>得到4

………………………

var a=null;

var b=20;

alert(a || b); =>得到20

…………………………

var a=0;

var b="";

var c=false;

alert(a || b ||c); =>得到false

alert(a || c ||b); =>得到 ""

……………………….

JS中的位运算和移位运算,其规范和java一致。(实际开发中很少用)

var a=4>>2;

alert(a); =>结果为1

此PHP笔记中也有介绍


计算机科学与技术 & 计算机网络技术:双专业课程体系完全导航指南

下一章:JavaScript学习笔记 (二):流程控制、函数与自定义函数

版权声明: 本文来自互联网用户投稿,该文观点仅代表作者本人,不代表本站立场。本站仅提供信息存储空间服务,不拥有所有权,不承担相关法律责任。如若内容造成侵权/违法违规/事实不符,请联系邮箱:809451989@qq.com进行投诉反馈,一经查实,立即删除!
网站建设 2026/4/14 18:26:28

如何快速掌握WarcraftHelper:魔兽争霸III优化的完整指南

如何快速掌握WarcraftHelper&#xff1a;魔兽争霸III优化的完整指南 【免费下载链接】WarcraftHelper Warcraft III Helper , support 1.20e, 1.24e, 1.26a, 1.27a, 1.27b 项目地址: https://gitcode.com/gh_mirrors/wa/WarcraftHelper 还在为《魔兽争霸III》在现代电脑…

作者头像 李华
网站建设 2026/4/15 14:48:42

番茄小说下载神器:打造个人数字图书馆的终极方案

番茄小说下载神器&#xff1a;打造个人数字图书馆的终极方案 【免费下载链接】Tomato-Novel-Downloader 番茄小说下载器不精简版 项目地址: https://gitcode.com/gh_mirrors/to/Tomato-Novel-Downloader 你是否曾经为了找到心仪的小说而辗转多个平台&#xff1f;是否梦想…

作者头像 李华
网站建设 2026/4/15 14:49:58

Applite终极指南:告别命令行的Mac软件管理神器

还在为复杂的终端命令而头疼吗&#xff1f;Applite这款专为Mac用户设计的图形化Homebrew Cask管理工具&#xff0c;将彻底改变您的软件管理方式。通过直观的界面操作替代繁琐的命令行&#xff0c;让软件安装、更新和卸载变得像点击按钮一样简单。 【免费下载链接】Applite User…

作者头像 李华
网站建设 2026/4/11 4:04:22

多平台直播难题如何解决?三步诊断法让全网同步推流变得简单

多平台直播难题如何解决&#xff1f;三步诊断法让全网同步推流变得简单 【免费下载链接】obs-multi-rtmp OBS複数サイト同時配信プラグイン 项目地址: https://gitcode.com/gh_mirrors/ob/obs-multi-rtmp 还在为直播观众分散在不同平台而苦恼吗&#xff1f;想要一次性覆…

作者头像 李华
网站建设 2026/4/7 16:59:33

DS4Windows配置全攻略:让PlayStation手柄在PC上大放异彩

还在为PC游戏无法完美支持PlayStation手柄而烦恼吗&#xff1f;&#x1f914; 今天我要为你介绍一款神器——DS4Windows&#xff0c;它能将你的PS4、PS5手柄变成PC游戏的完美伴侣&#xff01;无论你是想用DualShock 4重温经典&#xff0c;还是用DualSense体验次世代震动&#x…

作者头像 李华