JavaScrit(语法)

本文详细介绍了JavaScript的基础语法,包括注释、分号的使用,标识符的命名规则,以及变量的声明与赋值。同时深入解析了JS的各种数据类型,如undefined、null、Number、String、Boolean,数值转换方法,算术、逻辑操作符,以及比较和三元操作符的使用。

摘要生成于 C知道 ,由 DeepSeek-R1 满血版支持, 前往体验 >

JS简述

JavaScrit 又称JS
JS的组成ECMAScrit(语法)和Browser Objects(DOM,BOM)(特性)组成。
DOM(文档对象模型):提供访问和操作网页内容的方法和接口。
BOM(浏览器对象模型):提供与浏览器交互的方法和接口。

1.JS 语法规则

1.1JS注释与分号

//单行注释
/**/多行注释
结束语句

1.2JS的语法和标识符

JS的语法:
ECMAScrit中的一切都要区分大小写。如:(变量,函数名和操作符)

什么是标识符
变量,函数,属性名,或者函数的参数。

标识符命名规则
1.由字母(A-Z,a-z),数字(0-9),下划线(_)或美元符号($)组成
2.不能用数字开头(0-9)
3.不能使用保留字和关键字作为标识符。

1.3变量

什么是变量
ECMAScrit的变量是松散类型。
松散类型:可以用来保存任何类型的数据(变量的类型由变量的值决定)

变量的声明
语法:var 变量名;

var name="张三";

不写var会被认定为全局变量。

name="张三";

变量的赋值
语法:

var _name="aa";

var _age;
_age=18;
var  _name,_age;
_name="aa";
_age=18;

2.JS 数据类型

2.1 typeof检测符

功能检测变量类型
语法typeof 变量 或 typeof(变量)
返回值string类型有可能是:string,number,boolean,object,undefined,function

用法:

var _name="张三";
var _agr=18;
console.log(_name);// 在空中台中打印_name 的值.
console.log(typeof _name);// 在空中台中打印_name的类型
console.log(typeof(_name));// 在空中台中打印_name的类型

2.2 undefined 类型(没有定义)

没有赋值的变量就是undefined类型。

2.2 null 类型(空)

1.null值表示一个空对象指针
2.如果定义的变量准备在将来用于保存对象那最好将变量值初始化为null。
undefined值是从null值派生出来的。undefined= =null值为true。

2.3 Number类型(整数和浮点数)

Number类型 包括 整数型,浮点型和NaN。
在数值与非数值类型的运算中的值为NaN。
Nan的操作(例如NaN/10)都是返回NaN。NaN和任何值都不相等,包括NaN本身。
isNaN() 检测是否是"非数值"。
返回值:boolean(布尔型)

 var _aaa="123";
 var _bbb=111;
 var _ccc="123a";
 console.log(isNaN(_aaa));// 在空中台中打印_aaa 是否是“非数值”
 console.log(isNaN (_bbb));// 在空中台中打印_bbb 是否是“非数值”
 console.log(isNaN(_ccc));// 在空中台中打印_aaa 是否是“非数值”

运行方法:把值转换成数值。成功输出false,失败输出true。 所以console.log(isNaN(_aaa));得出了的是false

2.4 数值转换

2.4.1 Number();
 var _aaa="123";
 console.log(Number(_aaa));

运行方法:把值转换成数值。成功输出数值,失败输出NaN。

2.4.2 parseInt( );
 var _aaa="12px";
 console.log(parseInt(_aaa,16));

运行方法:
1.忽略字符串前面的空格,直到第一个非空格的字符
2.转换空字符或第一个字符非数字字符返回NaN
3.这个函数提供第二个参数:转换时使用的基数(即多少进制)

2.4.3 parseFloat();
 var _aaa="128.123.555";
 console.log(parseFloat(_aaa));

运行方法:
1.忽略字符串前面的空格,直到第一个非空格的字符
2.转换空字符或第一个字符非数字字符返回NaN
3.只能获取到第一个小数点。

2.5 string类型

1.用于表达0-16位Unicode字符组成的字符序列,即字符串。
2.字符串可由双引号(")或者单引号(’)表示。

2.6 str.toString();(转成为本副本)

var aa=123456789;
var bb=aa.toString();//转换为本副本
console.log(bb);
console.log(typeof(bb));

2.5 boolean类型

值:

true
false

2.6 Boolean(强制转换)

var aa=1;
console.log(Boolean(aa));;//转换为本副本
console.log(typeof(Boolean(aa)));

1.除0之外的所有数字,转换为布尔都为true
2.除"" (空字符)之外的所有字符包括空格字符,转换为布尔都为true
3.null和undefined转换成布尔为false

3.JS 算数操作符

什么是表达式
将同类型的数据(如常量,变量,函数等),用运算符号按一定的规则链接起来的,有意义的式子称为表达式。

+
-
*
/
%取余
++a自身1再进行算数运算符
a++先进行算数运算符后再自身1
–a自身1再进行算数运算符
a–先进行算数运算符后再自身1
var aa=5;
var bb="5";
var cc="c";
console.log(aa+bb); //bb为 数字字符,浏览器会进行 隐式类型转换(加法只有在数值和数值之间是相加,其他情况下是连接)
console.log(aa+cc); // cc为 字符字符串, 所以值NaN。

4.JS 逻辑操作符

4.1 &&|(与)

只要有一个条件不成立,反回false。(两个值全为true,值为true)

var aa=80;
var bb=70;
var cc=60;

console.log(aa>bb && bb>cc); 
console.log(aa>bb && bb>cc && aa>cc);
console.log(aa>bb && bb>cc && cc>aa);

如果变量是数字和字符串,则进行隐式转换,且第一个值为true返回最后一个值,第一个为false的反回第一个值。如:

/*true后一个值,false第一个值*/
var aa="a";
var bb=0;
var cc="cc";

console.log(aa && cc); //第一个值隐私转换为true,所以值为cc
console.log(aa && cc && aa); //第一个值隐私转换为true,所以值为a
console.log(bb && cc && aa); //第一个值隐私转换为false,所以值为0

如果有一个值为null,NaN或undefined 那么值就是nullNaN或undefined ,如:

var bb=null;
var aa="a";
var cc;
var dd=NaN
console.log(aa && cc); //undefined 
console.log(aa && bb && aa); //null
console.log(aa && dd && aa); //NaN

4.2||(或)

只要有一个条件不成立,反回true。(有一个值为true,就为true)

var aa=80;
var bb=70;
var cc=60;

console.log(aa<bb || bb<cc); 
console.log(aa>bb || bb>cc || aa>cc);
console.log(aa>bb || bb>cc || cc>aa);

如果变量是数字和字符串,则进行隐式转换,且第一个值为true返回第一个值。如果第一个是false,则运行第二个操作数,如果值为true返回第二个值。以此类推。如:

/*false向下进行,true输出值,全是false输出最后一个值*/
	var aa="a";
	var bb=0;
	var cc="";
	console.log(aa || cc); //aa
	console.log(bb || aa || cc ); //aa
	console.log(bb || cc || aa); //aa
	console.log(bb || cc || NaN || 0);//0

只有全部为null,NaN 和undefined。结果才会是null,NaN 和undefined。

	var aa="a";
	var bb=0;
	var cc="";
	console.log(null|| null); //null
	console.log(NaN|| NaN|| cc ); //""
	console.log(undefined|| undefined|| cc); //0

4.3!(非)

true值false,false值true

	var aa="a";
	var bb=0;
	var cc="";
	console.log(!aa); //false
	console.log(!bb); //true
	console.log(!cc); //true
	console.log(!!aa); //true
	console.log(!!bb); //false
	console.log(!!cc); //false

5.其他操作符

5.1赋值操作符

简单赋值:=

复合赋值:

+=
-=
*=
/=
%=
var aa=5;
aa+=5;// aa=aa+5;
aa-=5;// aa=aa-5;
aa*=5;// aa=aa*5;
aa/=5;// aa=aa/5;
aa%=5;// aa=aa%5;

5.2比较操作符

>大于-
<小于-
>=小于等于-
<=大于等于-
==相等只比较值
===全等比较值时比较数据类型是否相等
!=不等于比较值知否不相等
!==不全等比较值时比较数据类型是否不相等

值:boolean类型

5.3三元操作符

语法:
条件?执行代码1:执行代码2
说明:
可代替简单的if语句
如果条件成立,执行代码1,否则执行代码2

var  aa=85;
   var  bb=(aa>=60)?"及格":"不及格";
   var  cc=50;
   var dd=(cc>=60)?"及格":"不及格";
   console.log(bb);
   console.log(dd); 
javascrtpt 实现窗口拖拽、移动功能、显示坐标代码如下: <!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd"> <html <head runat="server"> <title></title> [removed] var mouseX, mouseY; var objX, objY; var isDowm = false; //是否按下鼠标 function mouseDown(obj, e) { obj.style.cursor = "move"; objX = div1.style.left; objY = div1.style.top; mouseX = e.clientX; mouseY = e.clientY; isDowm = true; } function mouseMove(e) { var div = document.getElementById("div1"); var x = e.clientX; var y = e.clientY; if (isDowm) { div.style.left = parseInt(objX) + parseInt(x) - parseInt(mouseX) + "px"; div.style.top = parseInt(objY) + parseInt(y) - parseInt(mouseY) + "px"; document.getElementById("span1")[removed] = "x:" + div.style.top + " " + "y:" + div.style.left; } } function mouseUp(e) { if (isDowm) { var x = e.clientX; var y = e.clientY; var div = document.getElementById("div1"); div.style.left = (parseInt(x) - parseInt(mouseX) + parseInt(objX)) + "px"; div.style.top = (parseInt(y) - parseInt(mouseY) + parseInt(objY)) + "px"; document.getElementById("span2")[removed] = "x:" + div.style.top + " " + "y:" + div.style.left; mouseX = x; rewmouseY = y; div1.style.cursor = "default"; isDowm = false; } } [removed] </head> <body> <span id="span1"></span></br><span id="span2"></span></br> <div id="div1" Green; border: 1px solid red; height: 300px; top: 100px; left: 100px; width: 300px; position: absolute;" </div> </body> </html>
评论
添加红包

请填写红包祝福语或标题

红包个数最小为10个

红包金额最低5元

当前余额3.43前往充值 >
需支付:10.00
成就一亿技术人!
领取后你会自动成为博主和红包主的粉丝 规则
hope_wisdom
发出的红包
实付
使用余额支付
点击重新获取
扫码支付
钱包余额 0

抵扣说明:

1.余额是钱包充值的虚拟货币,按照1:1的比例进行支付金额的抵扣。
2.余额无法直接购买下载,可以购买VIP、付费专栏及课程。

余额充值