JavaScript day-01
//demo1
<!DOCTYPE html> <html> <head> <meta charset="UTF-8"> <title>Insert title here</title> <!-- 嵌入式:在script标签里写js， 该标签可以放在网页的任意位置，但 通常放在head里较多. --> <script> //js注释可以是这样的 /* 也可以是这样的 */ //function是关键字，用来声明函数。 //f2是函数名，小括号内可以声明参数。 //打括号内是函数体。 //js中函数都是公有的，不需要修饰符。 //js的函数不需要声明返回值的类型。 function f2() { //js不区分单引号和双引号 alert("范传奇"); } </script> <!-- 文件调用式:在单独的js文件内写js, 需要引入到网页上才能使用. 1)该标签必须写成双标签，哪怕没有内容. 2)该标签不能既引入js又写js. --> <script src="my.js" ></script> </head> <body> <!-- 事件：用户在作出什么操作时调用js， 它就是调用js的时机，如单击onclick、双击ondbl等 --> <!-- 1.事件定义式 :在定义事件时直接写js --> <input type="button" value="按钮1" onclick="alert('苍老师');" /> <input type="button" value="按钮2" onclick="f2();"/> <input type="button" value="按钮3" onclick="f3();"/> </body> </html>
//demo2
<!DOCTYPE html>
<html>
<head>
<meta charset="UTF-8">
<title>Insert title here</title>
<script type="text/javascript">
//1.将js封装成函数,点击某按钮时调用.
//2.不把js封装成函数,直接在此处写js,
//则这样的js在网页加载(执行)时立刻调用.
//该js的执行时机甚至比body还早.
//alert(1);
console.log("控制台打印")
//1.声明变量
var x;
console.log(x);
x = 3;
console.log(x);
var y = "hello"
console.log(y);
//2.隐式转换
var s = "hi";
var n = 3.14;
var b = true;
console.log(s+n);
console.log(s+b);
console.log(b+n);
console.log(b+b);
//3.强制转换
console.log(n.toString()+1);
console.log(parseInt(n));
console.log(parseInt("5.6"));
console.log(parseInt("abc"));
console.log(parseFloat(5.6));
//typeof
console.log(typeof(n));
console.log(isNaN("56"));
console.log(isNaN("abc"));
console.log(isNaN("a56"));
//4.运算符
console.log(5/2);
var m = "3";
var n = 3;
console.log(m==n);
console.log(m===n);
//5.条件表达式
//js中可以用任意数据作条件，
//当使用非布尔值作条件时，所有的
//空值都等价于false，非空值等于true.
//空值：null/0/""/undefined/NaN
//这样设置的目的是为了让条件表达式简单.
var k = 9;
if(k){
console.log("ok");
}
k && console,log("yes");
</script>
</head>
<body>
<p>js语法和java十分相似</p>
</body>
</html>
//demo3
<!DOCTYPE html> <html> <head> <meta charset="UTF-8"> <title>Insert title here</title> <script type="text/javascript"> function pf() { //获取文本框 var input = document.getElementById("num"); console.log(input); //获取框内的值 var n = input.value; console.log(n); //获取span var span = document.getElementById("result"); //判断该值是否为数字 if(isNaN(n)){ //不是数字,给予提示 span.innerHTML = "请输入数字"; }else { //是数字,计算平方 span.innerHTML = n*n; } } </script> </head> <body> <input type="text" id="num"/> <input type="button" value="平方" onclick="pf();"/> = <span id="result"></span> </body> </html>
//demo4
<!DOCTYPE html>
<html>
<head>
<meta charset="UTF-8">
<title>Insert title here</title>
<script type="text/javascript">
/* 网页加载时直接生成随机数，
该数在body加载前就有了，所以
用户点击猜时在对应函数内可以用*/
//0<=x<1 -> 0<=100x<100 ,0....99
var ran = parseInt(Math.random()*100);
console.log(ran);
/* 无论此函数写在前面还是写在这里,它都是
在用户点击按钮时调用的,它都比生成
随机数执行的晚.*/
function guess(){
//获取文本框里的值
var n = document.getElementById("num").value;
//获取span
var span = document.getElementById("result");
//判断该值是否为数字
if(isNaN(n)){
//不是数字，给予提示
span.innerHTML = "请输入数字";
}else {
//是数字，和随机数比较
if(n<ran){
span.innerHTML = "小了";
}else if (n>ran) {
span.innerHTML = "大了";
}else {
span.innerHTML = "dui le";
}
}
}
</script>
</head>
<body>
<input type="text" id="num"/>
<input type="button" value="猜" onclick="guess();"/>
<span id="result"></span>
</body>
</html>
<!DOCTYPE html> <html> <head> <meta charset="UTF-8"> <title>Insert title here</title> <script> function jc(){ //获取文本框里的值 var n = document.getElementById("num").value; //获取span标签 var span = document.getElementById("result"); //判断该值是不是数字 if(isNaN(n)){ span.innerHTML = "请输入数字"; }else { if(n<0){ span.innerHTML = "负数没有阶乘"; }else if(n==0){ span.innerHTML = 1; }else{ var s = 1; for(var i = n;i;i--){ //使用i可以做条件，当i递减到0的时候 //就相当于false，则循环终止 s *= i; } span.innerHTML = s; } } } </script> </head> <body> <p>n(正整数)的阶乘=1*2*3*...*n</p> <p>0的阶乘固定为1</p> <p> <input type="text" id="num"/> <input type="button" value="阶乘" onclick="jc();"/> =<span id="result"></span> </p> </body> </html>
浙公网安备 33010602011771号