网站首页 > 技术文章 正文
https://www.w3school.com.cn/js/index.asp
1.javascript 运算符
JavaScript 使用（=）复制运算符。
JavaScript 使用算数运算符（+ - * / % ++ --）来计算值。
<!DOCTYPE html>
<html>
<head>
<meta charset="utf-8">
<title></title>
<script type="text/javascript">
function suanshu(){
//声明变量
var num1=10;
var num2=3;
document.getElementById("h1").innerHTML=num1+"+"+num2+"="+(num1+num2);
document.getElementById("h1").innerHTML=num1+"-"+num2+"="+(num1-num2);
document.getElementById("h1").innerHTML=num1+"*"+num2+"="+(num1*num2);
document.getElementById("h1").innerHTML=num1+"/"+num2+"="+(num1/num2);
document.getElementById("h1").innerHTML=num1+"%"+num2+"="+(num1%num2);
//++[自动加1]
//变量++ 【先用后加】
//num1++； //10
//document.getElementById("h6").innerHTML=num1; //11
// ++变量 [先加后用]
//++num1; //11
//document.getElementById("h6").innerHTML=num1; //11
// -- [自动减1]
// 变量-- [先用后减]
//num1-- ; //10
//document.getElementById("h6").innerHTML=num1; //9
// -- 变量
--num1; // 9
document.getElementById("h6").innerHTML=num1; //9
}
</script>
</head>
<body>
<input type="button" name="" id="" value="测试算数运算符" onclick="suanshu()" /><br>
<h1 id="h1"></h1>
<h1 id="h2"></h1>
<h1 id="h3"></h1>
<h1 id="h4"></h1>
<h1 id="h5"></h1>
<h1 id="h6"></h1>
</body>
</html>
JavaScript 使用（> < == >= <= !=）比较运算符运算符。
比较运算符的结果一定是布尔值【true/false】
<!DOCTYPE html>
<html>
<head>
<meta charset="utf-8">
<title>javascript中的比较运算符</title>
<script>
//测试比较运算符的函数
function test1(){
//定义参与运算的变量
var num1=10;
var num2=3;
document.getElementById("h1").innerHTML=num1+">"+num2+" = "+(num1>num2);//true
document.getElementById("h2").innerHTML=num1+"<"+num2+" = "+(num1<num2);//false
document.getElementById("h3").innerHTML=num1+">="+num2+" = "+(num1>=num2);//true
document.getElementById("h4").innerHTML=num1+"<="+num2+" = "+(num1<=num2);//false
document.getElementById("h5").innerHTML=num1+"=="+num2+" = "+(num1==num2);//false
document.getElementById("h6").innerHTML=num1+"!="+num2+" = "+(num1!=num2);//true
}
</script>
</head>
<body>
<input type="button" value="测试比较运算符" onclick="test1();" />
<h2 id="h1"></h2>
<h2 id="h2"></h2>
<h2 id="h3"></h2>
<h2 id="h4"></h2>
<h2 id="h5"></h2>
<h2 id="h6"></h2>
</body>
</html>
JavaScript 使用(|| && ! )逻辑运算符运算符。
|| [逻辑或] ?true || false --> true
?????false || true --> true
?????true || true --> true
?????false || false --> false
?????只要有true结果就是true
&& [逻辑与]? true && false --> false
????&emspfalse && true --> false
????&emspfalse && false --> false
????&emsptrue && true --> true
????&emsp只要有false结果就是false
![取反] ?!ture–>false
????!false->true
逻辑运算符的运算值和运算结果一定是布尔值【true/false】
<!DOCTYPE html>
<html>
<head>
<meta charset="utf-8">
<title></title>
<script type="text/javascript">
测试逻辑运算符
function test1(){
var num1=10;
var num2=3;
document.getElementById("h1").innerHTML="("+num1+">"+num2+") || ("+num1+"<"+num2+")=="+((num1>num2)||(num1<num2));
//(10>3) || (10<3)== true
document.getElementById("h2").innerHTML="("+num1+">"+num2+") && ("+num1+"<"+num2+")=="+((num1>num2)&&(num1<num2));
//(10>3) && (10<3)== false
document.getElementById("h3").innerHTML="!(("+num1+">"+num2+") && ("+num1+"<"+num2+"))=="+!((num1>num2)&&(num1<num2));
//!((10>3) && (10<3))== true
}
</script>
</head>
<body>
<input type="button" value="测试逻辑运算符" onclick="test1();" />
<h2 id="h1"></h2>
<h2 id="h2"></h2>
<h2 id="h3"></h2>
</body>
</html>
比较与逻辑运算符通常都是用来做判断的。
- JavaScript 数据类型
字符串值，数值，布尔值，数组，对象。
字符串值–“hello”
var zf=”hello”;
数值[整数和小数]—123 ， 12.5
var sz=123; var sz=12.5;
布尔值–[true/false]
var be=true; var be=false;
数组–可以保存一组值
var array=[“hello”,123,12.5,true,false];
对象
var student={stuid:1001,stuname:”zhangsan”,stuage:23,stuaddress:”西安”};
student.stuid===>1001 - JavaScript 函数
JavaScript 函数是被设计为执行特定任务的代码块【{}】。
实例:
function myFunction(p1, p2) {
return p1 * p2; // 该函数返回 p1 和 p2 的乘积
}
JavaScript 函数通过 function 关键词进行定义.
myFunction–函数名称
“()”—参数列表【可以没有参数,也可以有多个】
参数接收函数之外的数据值进入本函数进行运算【找帮手】
p1, p2—参数【变量名称，不需要定义】接收函数之外的数据值进入本函数
{}—代码块
return — 返回函数的执行结果 - 函数没有执行结果，不需要出现return xxxx
- 函数有执行结果,需要在最后出现return xxxxx
- 有没有名称
有名称的函数
function test1(){
alert(“有名称的函数”);
}
没有名称的函数【匿名函数】
window.onload=function(){
alert(“匿名函数”);} - 有没有参数
- 有参数的函数
function test2(info){
alert(info);
}
在使用的时候需要传递进入参数值 - 没有参数的函数
function test1(){
alert(“没有参数的函数”);
} - 有没有结果
- 有结果的函数
function test3(){
return “有结果”;
} - 没有结果的函数
function test3(){
}
例如：`
function test4(num1,num2){
var res=num1*num2;
return res;
}
function test5(){
var res=test4(100,123);
alert("res=="+res);
}
`4.JavaScript 对象
对象也是变量。但是对象包含很多值。
对象包含很多值1.属性 2.方法
对象就是用来描述具有相同属性和方法的变量。
属性----变量 【var】【属性名称:属性值】
方法----函数 【function】 【方法名称:function(){}】
格式:
var 对象名称={属性:属性值,…,
方法名称:函数}；
例如:
<!DOCTYPE html>
<html>
<head>
<meta charset="utf-8">
<title>创建并使用对象</title>
<script>
//创建一个汽车对象
var car={
carName:"bmw",
carcolor:"红色",
start:function(){
alert("启动--"+car.carcolor+","+car.carName+"汽车");
},
stop:function(){
alert(this.carcolor+","+this.carName+"汽车停止了");
}
};
function startcar(){
car.carName="奔驰";
car.start();
}
function stopcar(){
car.carcolor="蓝色";
car.stop();
}
</script>
</head>
<body>
<input type="button" value="启动" onclick="startcar();"/><br>
<input type="button" value="停车" onclick="stopcar();"/><br>
</body>
</html>
var str=”hello”; 字符串
var num1=123; 数字
var num2=”123”; 字符串
var boo=true; 布尔
function test1(){ }–函数
用javascript表示一个学生
var student={
name:”zhangsan”,
age:23,
addres:”西安”,
sex:true,
xuexi:function(){
alert(“我是学生，我在学习!!!”);
}}
student.name=”lisi”; //修改对象的属性值
student.name; //获取对象的属性值。
student[“name”]
student.xuexi(); //访问学生的学习方法
通过对象的名称就可以访问对象中保存的变量和方法。
<!DOCTYPE html>
<html>
<head>
<meta charset="utf-8">
<title></title>
<script>
//创建一个学生对象
var student={
stuid:1001,
stuname:"zhangsan",
stuage:23,
stuaddress:"西安",
getInfo:function(){
return student.stuid+"-"+student.stuname;
},
getInfo2:function(id,name){
student.stuid=id;
student.stuname=name;
return student.stuid+"-"+student.stuname;
}
};
var person={
personname:"wangwu",
mystudent:{
stuid:1001,
stuname:"zhangsan",
getInfo:function(){
return person.mystudent.stuid+"-"+person.mystudent.stuname;
}
}
}
function test1(){
var info1=student.getInfo();
alert(info1);
}
function test2(){
var info2=student.getInfo2(1002,"lisi");
alert(info2);
}
function test3(){
var name=person.personname;
//person.mystudent.stuid=1002;
//person.mystudent.stuname="lisi";
var info=person.mystudent.getInfo();
alert(name+"----"+info);
}
</script>
</head>
<body>
<input type="button" value="测试学生对象的getInfo方法" onclick="test1();"/>
<input type="button" value="测试学生对象的getInfo2方法" onclick="test2();"/>
<input type="button" value="测试Person对象" onclick="test3();"/>
</body>
</html>
请将下面的汽车做成一个对象
猜你喜欢
- 2024-10-21 HTML制作网页先熟悉CSS（用html和css做网页教程）
- 2024-10-21 HTML简单介绍及常见元素（html的元素组成部分有哪些?）
- 2024-10-21 Go Web 框架 Gin 学习2 - 模板渲染的2种方式
- 2024-10-21 HTML自定义组件（html 组件）
- 2024-10-21 Html小知识总结（html基础总结）
- 2024-10-21 你的HTML页面书写规范吗?必须知道的HTML书写规范
- 2024-10-21 用C++写出HTML，使用web服务，可以免费搭建个人博客
- 2024-10-21 【JavaScript】将执行上下文、作用域、闭包串联起来
- 2024-10-21 7.HTML中的列表、引用和代码的使用
- 2024-10-21 小白必看!Django 模板语言基础来啦
- 最近发表
-
- 聊一下 gRPC 的 C++ 异步编程_grpc 异步流模式
- [原创首发]安全日志管理中心实战(3)——开源NIDS之suricata部署
- 超详细手把手搭建在ubuntu系统的FFmpeg环境
- Nginx运维之路(Docker多段构建新版本并增加第三方模
- 92.1K小星星，一款开源免费的远程桌面，让你告别付费远程控制!
- Go 人脸识别教程_piwigo人脸识别
- 安卓手机安装Termux——搭建移动服务器
- ubuntu 安装开发环境(c/c++ 15)_ubuntu安装c++编译器
- Rust开发环境搭建指南:从安装到镜像配置的零坑实践
- Windows系统安装VirtualBox构造本地Linux开发环境
- 标签列表
-
- cmd/c (90)
- c++中::是什么意思 (84)
- 标签用于 (71)
- 主键只能有一个吗 (77)
- c#console.writeline不显示 (95)
- pythoncase语句 (88)
- es6includes (74)
- sqlset (76)
- apt-getinstall-y (100)
- node_modules怎么生成 (87)
- chromepost (71)
- flexdirection (73)
- c++int转char (80)
- mysqlany_value (79)
- static函数和普通函数 (84)
- el-date-picker开始日期早于结束日期 (76)
- js判断是否是json字符串 (75)
- c语言min函数头文件 (77)
- asynccallback (87)
- localstorage.removeitem (77)
- vector线程安全吗 (73)
- java (73)
- js数组插入 (83)
- mac安装java (72)
- 无效的列索引 (74)