Lession01 javascript 简介
2022-08-22 本文已影响0人
任人渐疏_Must
代码注释
单行注释 //单行注释
多行注释 /*多行注释*/
书写位置
HTML页面书写
<body>
<script>
console.log("Hello world!");//在控制台输出字符串
alert("你好，世界");//弹出消息框
//可以将数据输出到页面上
document.write("我也要说一下：你好，世界！");
function getContent(){
alert("在标签中定义的方法！");
}
<script>
<!--按钮的单击事件，注意单双引号的使用-->
<button onclick="window.alert('hello world 你好，世界');">弹出警告框</button>
<!-- 按钮点击事件调用 -->
<button onclick="getContent();">第二个按钮</button>
</body>
引入外部js文件
<script src="js/myjs.js"><script>
<button onclick="getJS();"></button>
//外部js文件
function getJS(){
alert("调用外部js显示")
}
数据类型
| 基本数据类型 | 引用数据类型 | ||
|---|---|---|---|
| 数值类型 | number | 字符串类型 | string |
| 布尔类型 | Boolean | 数组类型 | Array |
| 未定义类型 | undefined | 对象类型 | Object |
| 空数据类型 | null |
<!DOCTYPE html>
<html>
<head>
<meta charset="utf-8">
<title>变量的定义</title>
</head>
<body>
<script>
var salary; //定义变量
salary = 2000; //给变量赋值
var name = "布什";
var price = 2.5;
var isFamle = true;
var obj = null;
//使用document.write()方法，可以将数据输出到页面
document.write("您的薪水是："+salary+"元！salary的类型是："+typeof(salary)+"<br>");
document.write("我的名字是："+name+"！name的的类型是："+typeof(name)+"<br>");
document.write("苹果的价格是："+price+"元！price的类型是："+typeof(price)+"<br>");
document.write("isFamle的类型是："+typeof(isFamle)+"<br>");
document.write("obj的类型是："+typeof(obj)+"<br>");
</script>
</body>
</html>
数据类型转换
<!DOCTYPE html>
<html>
<head>
<meta charset="utf-8">
<title>类型转换</title>
</head>
<body>
<script>
var address;
//变量未给初始值时，string类型为 "undefined"
document.write("address的值是："+address+"<br>");
var phone = null;
//变量为null时 ,字符串的结果是null
document.write("phone的值是："+phone+"<br>");
var sname= "HOPE";
//将变量转换成整数类型
var snameResult = parseInt(sname);
document.write("将姓名转换为数字的结果是："+snameResult+"<br>");
var age = "20";
//将变量转换成整型数字
var ageResult = parseInt(age);
document.write("将年龄转换成数字的结果是："+ageResult);
</script>
</body>
</html>
混合计算
<!DOCTYPE html>
<html>
<head>
<meta charset="utf-8">
<title>混合计算</title>
</head>
<body>
<script>
var x = 100;
var y = 10.2;
var s = "字符串";
var b = true;
var n = null;
//整数+小数=小数
//document.write(x+y);
//整数+字符串=字符串
//document.write(x+s);
//整数+布尔值=整数
//document.write(x+b);
//整数+空值=整数
//document.write(x+n);
//小数+字符串=字符串
//document.write(y+s);
//小数+布尔值=小数
//document.write(y+b);
//小数+空值=小数
//document.write(y+n);
//字符串+布尔值=字符串
//document.write(s+b);
//字符串+空值=字符串
//document.write(s+n);
//布尔值+空值=整数
document.write(b+n)
</script>
</body>
</html>
算术运算符
<!DOCTYPE html>
<html>
<head>
<meta charset="utf-8">
<title>算术运算符</title>
</head>
<body>
<script>
var x=5;
var y = 4;
document.write("和是："+(x+y)+"<br>");
document.write("差是："+(x-y)+"<br>");
document.write("积是："+(x*y)+"<br>");
document.write("商是："+(x/y)+"<br>");
document.write("余数是："+(x%y)+"<br>");
document.write((x++)+"<br>");
document.write((x)+"<br>");
</script>
</body>
</html>
比较运算符
<!DOCTYPE html>
<html>
<head>
<meta charset="utf-8">
<title>比较运算符</title>
</head>
<body>
<script>
//==是值相等，===是值和类型都相等
// if(1==="1"){
// document.write(true);
// }else{
// document.write(false);
// }
//小写字母大于大写字母
// if("a" > "A"){
// document.write(true);
// }else{
// document.write(false);
// }
// //较长的字符串 大于 较短的字符串
// if("abc" < "abcd"){
// document.write(true);
// }else{
// document.write(false);
// }
// // //先出现在字母表的字符小于后面的字符
// if("a" < "b"){
// document.write(true);
// }else{
// document.write(false);
// }
if("abc" > "abC"){
document.write(true);
}else{
document.write(false);
}
</script>
</body>
</html>
逻辑运算符和条件运算符
<!DOCTYPE html>
<html>
<head>
<meta charset="utf-8">
<title>逻辑运算符和条件运算符</title>
</head>
<body>
<script>
//逻辑或：有一个为真则为真
if(1==1 || 1==2){
document.write(true)
}else{
document.write(false);
}
//逻辑与：有一个为假则为假
if(1==1 && 1==2){
document.write(true)
}else{
document.write(false);
}
//条件运算符 （条件）? 条件真的值：条件假的值
var x="";
//获取当前小时
var time = new Date().getHours();
//document.write(time);
x=(time<18) ? "上课时间" : "休息时间";
document.write("x="+x);
</script>
</body>
</html>
