持续更新ing……
JavaScript基础
输出
用.html文件写:
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<meta http-equiv="X-UA-Compatible" content="IE=edge">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<title>javascript基础</title>
</head>
<body>
<!-- html标签,css样式 JavaScript语法
jQuery
后端服务器 nodeJS
Vue rerect angular -->
</body>
<!-- 加载JavaScript的标签 -->
<script>
/* 变量
按照语言特性可以分为两类:1.面向对象; 2.面向过程
js是一门弱语义的编程语言 */
var age = 21;
var name = "张三";
var sex = true; //布尔值,true代表男生,false代表女生
var height = 1.83, weight = 65; //身高,体重
/* console:控制台 log:输出打印 */
//console.log(name);//运行后在浏览器按F12,可以在Console中看到输出的内容
/* 提示框 */
//alert(age);
/* 在页面中输出 */
//document.write(sex);
/* 分支语句 > < >= <= == */
var sexStr = "";
if(sex == true){
sexStr = "男";
}
else{
sexStr = "女";
}
var BMI = weight / Math.pow(height, 2);//BMI
//toFixed 保留n位小数
console.log(BMI.toFixed(2));
document.write("一个叫做:"+name+"的"+sexStr+"老师,今年"+age+"岁了");
</script>
</html>
输入
用.js文件写:
//js文件不能单独运行,需要借助HTML文件来加载
//可以让用户输入内容,当用户点击“确定”的时候会把内容返回出来
var age1 = prompt("请输入你的年龄:");
if(age1 < 18){
console.log("未成年人");
}
else if(age1 >= 18 && age1 < 30){
console.log("青年");
}
else if(age1 >= 30 && age1 < 50){
console.log("中年");
}
else{
console.log("老年");
}
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<meta http-equiv="X-UA-Compatible" content="IE=edge">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<title>js逻辑运算</title>
</head>
<body>
</body>
<!-- script src:引入外部的index.js -->
<script src="./index.js"></script> //index.js是上面文件的文件名
</html>
四则运算
用.js文件写,后续用.html文件来加载:
//四则运算
//多个变量可以同时定义,用“,”分隔开
var a = 10, b = 5;
console.log(a + b);
console.log(a - b);
console.log(a * b);
console.log(a / b);
// ++代表自增 ++a表示先自增再使用,a++表示先使用再自增
console.log(++a);
DOM节点操作,函数
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<meta http-equiv="X-UA-Compatible" content="IE=edge">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<title>Document</title>
</head>
<body>
<p id="p1">今天阴天了</p>
<!-- button按钮
onclick属性表示按钮按下时调用的方法是哪个 -->
<button onclick="btnClick()">点击修改p标签的内容</button>
</body>
<script>
/* 1.先要查找到p标签
document 文档 get拿 Element元素 */
var p1=document.getElementById("p1");
//p1.innerHTML ="今天天晴了";
// 函数
// function 声明一个函数 work代表的是函数名
function work(){
console.log("学习是学生的本职工作");
}
// 需要调用函数才会执行
work();
function btnClick(){
p1.innerHTML = "今天天晴了";
}
var name = "张三";
function Setname(){
console.log("他的名字叫"+name);
}
Setname();
function add(a, b){
return a + b;
}
var c = add(1, 2);
console.log(c);
</script>
</html>
input输入框(BMI计算)
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<meta http-equiv="X-UA-Compatible" content="IE=edge">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<title>Document</title>
</head>
<body>
<!-- label标签,显示内容 -->
<label for="weight">体重</label>
<!-- 输入框 type代表的是输入框的类型 text文本输入框 password密码输入框 value -->
<input type="text" placeholder="请输入体重" id="weight">
<br>
<br>
<label for="height">身高</label>
<input type="text" placeholder="请输入身高" id="height">
<br>
<br>
<button onclick="btnClick()">提交</button>
<!-- 结果展示 -->
<p id="result"></p>
</body>
<script>
var input1 = document.getElementById("weight");
var input2 = document.getElementById("height");
var p = document.getElementById("result");
function btnClick(){
/* value表示input当前输入的内容 */
var heigh = input2.value * 1;
var weigh = input1.value * 1;
var bmi = weigh / (heigh * heigh);
bmi = bmi.toFixed(2);
var result ="";
if (bmi <= 18.4) {
result="您的bmi值为:"+bmi+"增肥";
}
else if (bmi >= 18.5 && bmi <= 23.9) {
result="您的bmi值为:"+bmi+"正常";
}
else if (bmi >= 24.0 && bmi <= 27.9) {
result="您的bmi值为:"+bmi+"过重";
}
else {
result="您的bmi值为:"+bmi+"肥胖";
}
p.innerHTML = result;
}
</script>
</html>