JS基础
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<!--当浏览器不支持js的时候会显示该提示信息！-->
<noscript>
浏览器js功能被禁用
</noscript>
<title>JS入门</title>
</head>
<body>
<!--js的组成部分
1：es js的语法部分
2：dom 文档对象模型（html内容，js可以通过dom结构，去修改html内容）
3：bom 浏览器对象模型（js不光可以操作html，还可以操作浏览器）
-->
<!--js的使用方法（与css类比）：
1：行内js
2：内部js
3：外部js
-->
<!--1:行内js-->
<!--<button onclick="javascript:alert(‘HelloWorld‘)">HelloWorld</button>-->
<!--2:内部js-->
<button onclick="showHello()">HelloWorld</button>
</body>
<!--<script>
function showHello() {
alert("洒驴！")
}
</script>-->
<!--3：外部js-->
<script src="../../js/First.js"></script>
</html>
命名规则： 以字母、数字、下划线、$组成，但是不能以数字开头
数据类型：/*undefined类型*/var i;alert(i);
/*null*/var o = null;
/*boolean类型*/var b = true;var b2 = false;
/*number*/var i = 10;
/*string*/var s = "ccy";
/*object*/var obj = {}
TYPE OF:
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<title>TypeOf</title>
</head>
<body>
</body>
<script>
/*undefined*/
var i;
// alert(typeof i);
/*boolean*/
var b = true;
// alert(typeof b);
/*String*/
var s = "ccy";
// alert(typeof s);
/*Number*/
var i = 3;
// alert(typeof i);
var obj = {
name: "ccy",
age: "保密"
};
// alert(typeof obj);
function show() {
alert("hello");
}
alert(typeof show);
alert(3 + 2);
</script>
</html>
输出函数类型。
数据转换：
/*parseInt：吧字符串类型的数字，转换成整形*/var s1 = "123.6";var i = 123;s1 = parseInt(s1);var reselt = i + s1;alert(reselt); /*parseFloat：吧字符串类型的数字，转换成浮点型*/var s1 = "123.6";var i = 123;s1 = parseFloat(s1);var reselt = i + s1;alert(reselt);
驼峰命名规则：
<!--国际通用的命名规则： 驼峰法则：
<一：变量> 1:单个单词的全小写 var name = "ccy"; 2：多个单词 第一个单词全小写，其余单词首字母大写 var myName = "ccy"; var showHelloWorld = "HelloWorld"; <二：类> 3：全部单词的首字母都要大写 PersonName Part1； <三：常量> 4：所有单词的字母全大写； COUNTRYNAME;-->
Prompt:功能：接受输入的数据
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<title>Prompt</title>
</head>
<body>
</body>
<script>
prompt("请输入用户姓名:", "张三");
var name = prompt("请输入用户姓名:");
alert(name);
</script>
</html>
在输入框中输入“李四”，点击确定。
一个小练习：
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<title>作业</title>
</head>
<body>
</body>
<script>
var name = prompt("请输入姓名：");
var no = prompt("请输入学号：");
var cls = prompt("请输入班级：");
var add = prompt("请输入地址：");
alert("您的姓名为：" + name + ",学号:" + no + ",班级：" + cls + ",地址：" + add + "");
</script>
</html>
在输入框中依次输入“大雕萌妹”后的结果，哈哈。
自增自减：
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<title>自增自减</title>
</head>
<body>
<!-- ++自增运算
1：++在运算数的前面： 先+1 再运算
2：++在运算数的后面： 先运算 再+1
-->
<!-- --自减运算
1：--在运算数的前面： 先-1 再运算
2：--在运算数的后面： 先运算 再-1
-->
</body>
<script>
var i = 2;
j = ++i;
alert(j);
alert(i);
var i = 2;
j = i++;
alert(j);
alert(i);
</script>
</html>
运行结果是页面依次显示3；3；2；3.
水仙花数：
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<title>水仙花数</title>
</head>
<body>
</body>
<script>
var num = 153;
var i1 = parseInt(153 / 100);
var i2 = parseInt(153 / 10 % 10);
var i3 = parseInt(153 % 10);
// var reselt = Math.pow(i1,3)+Math.pow(i2,3)+Math.pow(i3,3);
var reselt = i1 * i1 * i1 + i2 * i2 * i2 + i3 * i3 * i3;
if (num === reselt) {
alert("水仙花数！！");
} else {
alert("非水仙花数！！");
}
</script>
</html>
运行结果自然是水仙花数；
如果定义num接受数据自然数；
可以用上述代码检测其是否为水仙花数。
判断是否闰年的代码：
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<title>判断闰年</title>
</head>
<body>
</body>
<script>
var i = prompt("请输入年份：");
i % 400 == 0 || (i % 4 == 0 && i % 100 != 0)?alert("闰年"):alert("不是闰年")
</script>
</html>
赋值运算符：
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<title>赋值运算符</title>
</head>
<body>
</body>
<script>
var i = 5;
i = i + 5; //等效 i+=5; 效率高
alert(i);
var i2 = 10;
i2 = i2 - 7; //i2-=7;
var i3 = 6;
i3 = i3 * 6; //i3*=6;
var i4 = 3;
i4 = i4 * 6; //i4/=3;
var i5 = 16;
i5 = i5 % 6; //i5 %=6;
</script>
</html>
实现计算器功能：
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<title>计算器</title>
</head>
<body>
</body>
<script>
var result = 0;
var a = parseInt(prompt("请输入数字"));
var h = prompt("请输入运算符");
var b = parseInt(prompt("请输入数字"));
/*if (h === "+") {
result = a + b;
}
if (h === "-") {
result = a - b;
}
if (h === "*") {
result = a * b;
}
if (h === "/") {
result = a / b;
}
alert(result);*/
result1 = a + b;
result2 = a - b;
result3 = a * b;
result4 = a / b;
result = h === "+" ? result1 : (h === "-" ? result2 : (h === "*" ? result3 : (h === "/" ? result4 : (false))));
alert(result)
</script>
</html>
通过上述代码即可在页面中实现计算器功能。
嵌套IF语句：
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<title>嵌套if结构</title>
</head>
<body>
</body>
<script>
var score = parseInt(prompt("请输入您的成绩："));
var daily = parseInt(prompt("请输入考核成绩："));
if (score > 60 && daily > 75) {
alert("毕业")
} else {
if (daily < 75 && score < 60) { //将这个判断放在前边是因为他的要求最多。
alert("成绩和考勤都不及格")
} else if (daily < 75) {
alert("考勤不及格")
} else if (score < 60) {
alert("成绩不及格")
}
}
</script>
</html>
效果自行想象，相信你。
switch语句：
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<title>switch语句</title>
</head>
<body>
<!--1：点型问题用switc
2：块状分布用if语句
-->
</body>
<script>
var month = parseInt(prompt("请输入月份："));
switch (month) {
case 1:
case 2:
case 3:
alert("一季度");
break;
case 4:
case 5:
case 6:
alert("二季度");
break;
case 7:
case 8:
case 9:
alert("三季度");
break;
case 10:
case 11:
case 12:
alert("四季度");
break;
default:
alert("大雕萌妹");
}
</script>
</html>
switch语句判断季度。
时间： 2024-10-05 20:47:47