JS基础
命名规则
数据类型 type of
数据转换
驼峰命名规则
prompt
赋值运算符
if语句
switch语句
及一些小练习
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>
通过上述代码即可在页面中实现计算器功能。
<!--1：点型问题用switc
2：块状分布用if语句
-->
嵌套IF语句：
阶梯式if-self-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语句判断季度。