Javascript的使用
```
<body>
<!--javascript : 基础语法(ecmascript), DOM(动态改变标记的属性,样式,内容), BOM(操作浏览器) -->
<!--language属性可以省略,默认就是javascript-->
<script language="JavaScript">
//1. 获得当前系统时间
var a = new Date(); //类型推导
//2. 判断小时<12, 上午, 否则下午
var hour = a.getHours();
if(hour <12)
{
document.write("上午好");
document.write("<br/>");
}
else
{
document.write("下午好");
document.write("<br/>");
}
</script>
hello china
<script language="JavaScript">
document.write("hello you");
</script>
</body>
```
javascript变量和数据类型
```
<script>
//变量的数据类型
//js 跟 java 比, 弱类型的语言
//Number(整数,小数), String(''或""定界都可以), 布而类型(true,false),未定义(undefined),空类型(null)
var a = 2; //Number
var b = 2.5; //Number
var c = "h"; //String
var d = "hello" //String
var e = 'hello world' //String
var f = true; //boolean
var g = false; //boolean
var i;
var j = null;
//数组,对象类型
var x = [1,2,3,4]; //object
var y = new Date(); //object
//函数类型
var z = function(){alert("hello")}; //function
//调用函数
z();
//typeof函数用来判断变量的数据类型
document.write(typeof(a)+"<br/>");
document.write(typeof(b)+"<br/>");
document.write(typeof(c)+"<br/>");
document.write(typeof(d)+"<br/>");
document.write(typeof(e)+"<br/>");
document.write(typeof(f)+"<br/>");
document.write(typeof(g)+"<br/>");
document.write(typeof(i)+"<br/>");
document.write(typeof(j)+"<br/>");
document.write(typeof(x)+"<br/>");
document.write(typeof(y)+"<br/>");
document.write(typeof(z)+"<br/>");
</script>
```
表达式和控制流程
```
<script>
//表达式 a+b
//运算符
// 算术运算符 + - * / % ++ -- -
var a = 5;
var b = 2;
var c = a/b; //2.5
// 赋值运算符 = += -= *= /= a+=b;
// 比较运算符 == >= <= > < !=
// 逻辑运算符 && || !
//控制流程
// 顺序执行 分支(if if else, if elseif else, switch case), 循环(for while, do-while)
//在页面上输出九九乘法表
for(var i=1; i<=9; i++)
{
for(var j=1; j<=i;j++)
{
document.writeln(i+"*"+j+"="+i*j+" ");
}
//打印换行
document.write("<br/>");
}
//打印8*8的# -方法1
for(var i=0; i<8;i++)
{
for(var j=0; j<8;j++)
{
document.write("#");
}
//打印换行
document.write("<br/>");
}
//打印8*8的# -方法2
for(var i=1; i<=64;i++)
{
document.write("#");
if(i%8==0)
{
//打印换行
document.write("<br/>");
}
}
</script>
```
函数:
```
<script>
//函数的定义
// 函数没有返回值声明;
// 函数入参, 不能有var
//没有入参,没有返回值
function jiujiu()
{
//在页面上输出九九乘法表
for(var i=1; i<=9; i++)
{
for(var j=1; j<=i;j++)
{
document.writeln(i+"*"+j+"="+i*j+" ");
}
//打印换行
document.write("<br/>");
}
}
//有入参,没有返回值
//在js里没有函数重载的概念
function max(a, b)
{
console.log(a>b?a:b);
return;
}
//有入参,有返回值的
function sum(a, b)
{
return a+b;
}
</script>
```
自运行函数(三种写法)
```
//自运行函数
//1. 匿名
//2. 声明以后立即运行
(function(){
//在页面上输出九九乘法表
for(var i=1; i<=9; i++)
{
for(var j=1; j<=i;j++)
{
document.writeln(i+"*"+j+"="+i*j+" ");
}
//打印换行
document.write("<br/>");
}
})();
(function(){
//在页面上输出九九乘法表
for(var i=1; i<=9; i++)
{
for(var j=1; j<=i;j++)
{
document.writeln(i+"*"+j+"="+i*j+" ");
}
//打印换行
document.write("<br/>");
}
}());
!function(){
//在页面上输出九九乘法表
for(var i=1; i<=9; i++)
{
for(var j=1; j<=i;j++)
{
document.writeln(i+"*"+j+"="+i*j+" ");
}
//打印换行
document.write("<br/>");
}
}();
```
回调函数(入参里的函数-> 回调函数
)
```
function yea()
{
console.log("oh yea!");
}
function jiujiu(fun)
{
//在页面上输出九九乘法表
for(var i=1; i<=9; i++)
{
for(var j=1; j<=i;j++)
{
document.writeln(i+"*"+j+"="+i*j+" ");
}
//打印换行
document.write("<br/>");
}
//调用传入的函数
fun();
}
//注意,传入的是函数名,不能有""定界符
jiujiu(yea);
```
常用系统函数(parseInt, parseFloat, Number, isNaN, eval):
```
<script>
//1. parseInt 字符串 -> 整数
//2. parseFloat 字符串 -> 小数
//3. Number("2")-> 2, Number("2.2") ->2.2 Number("2a") -> NaN
//4. eval(str) -> 把入参字符串当成表达式运算.
//5. isNaN() -> 判断入参是不是NaN
//所有从页面上收集上来的数都是字符串
function calculate()
{
//1. 得到第一个数
var num1 = document.getElementById("num1").value;
//2. 得到第二个数
var num2 = document.getElementById("num2").value;
//2.5 判断输入的合法性
if(isNaN(Number(num1)))
{
//输入非法;
alert("输入非法");
return;
}
if(isNaN(Number(num2)))
{
//输入非法;
alert("输入非法");
return;
}
//3. 求和
var operator = document.getElementById("operator").value;
/*var sum =0;
switch(operator)
{
case "+":
sum = Number(num1) + Number(num2);
break;
case "-":
sum = Number(num1) - Number(num2);
break;
case "*":
sum = Number(num1) * Number(num2);
break;
case "/":
sum = Number(num1) / Number(num2);
break;
}*/
var sum = eval(num1 + operator + num2);
//4. 把和放在第三个文本框里
document.getElementById("sum").value = sum;
}
</script>
</head>
<body>
<input id="num1" type="text">
<select id="operator">
<option>+</option>
<option>-</option>
<option>*</option>
<option>/</option>
</select>
<input id="num2" type="text"> = <input id="sum" type="text">
<button onclick="calculate();">求和</button>
</body>
```
常用系统函数(setTimeout, clearTimeout, setInterval, clearInterval):
```
<body>
<span id="now"></span>
<script>
//setTimeout() -> 延时一段时间再执行
//setInterval() -> 每个一段时间执行
//在页面上输出当前系统时间.
//js es5 -> ecmascript5 es6, es7
//js es5 变量的作用域分为2种,一种是函数级(var),一种是全局(不写var).
//es6 let声明变量 块级作用域
var taskid;
function showDate()
{
document.getElementById("now").innerHTML = new Date();
taskid = setTimeout(showDate,1000);
}
//1. 入参1 函数名, 入参2 毫秒数
//setTimeout("showDate()",1000);
//setTimeout(showDate,1000);
/*setTimeout(function(){
document.write(new Date());
},1000);*/
//在页面上实时显示系统时间
showDate();
function stoptime()
{
clearTimeout(taskid);
}
//var 定义的变量是函数级别的.
function test()
{
a = 10;
if(true)
{
var b = 20;
}
console.log(b);
}
</script>
<script>
test();
console.log(a);
</script>
<button onclick="stoptime()">让时光停止吧</button>
</body>
```
```
<body>
<span id="now"></span>
<button onclick="stoptime()">让时光停止吧</button>
<button onclick="starttime()">走你</button>
<script>
var taskid;
function showDate()
{
document.getElementById("now").innerHTML = new Date();
}
function starttime()
{
showDate();
//初始执行也有延迟
taskid = setInterval(showDate,1000);
}
starttime();
function stoptime()
{
clearInterval(taskid);
}
</script>
</body>
```
