认识JS
JavaScript用来干什么?
是浏览器中运行的脚本(用户交互,数据处理)JAVA需要编译,而JSP是解释性语言,源码掺在HTML里面,和HTML【一起从服务器端下载下来】
浏览器会在读取代码的时候,逐行执行脚本语言;而传统的编程语言,会在执行前对所有代码进行编译
怎么在HTML中加入JS?
- 在标签里面加入on..时候的动作,比如<body onload="alert('hello!')">这样的
- 在HTML里面放<script>【这是最简单的方法:<script>....</script>。可以放在head里也可以放在body里。head里面是函数和变量的定义,在body里面是让它做实际的动作】
杂项
-document指的是浏览器页面
-注释用// 或者/**/来写
-末尾不写分号 ; 也是可以哒
-JS对大小写敏感
-反斜杠 \ 可以对代码进行折行而不影响执行。但要注意添加 \ 的地方。添得不对的话代码不能正常执行(总是就是还是别用它了= =)
-调用外部js文件:在body中加入
<script src="/js/example_externaljs.js">
</script>
<script src="/js/example_externaljs.js">
</script>
-消息框:
都是在head里面写函数,在body的input button的onclick属性调用这个函数
警告框:alert(){...} 带折行的话,在{ }中加“”+‘\n’+“”
确认框:var r=confirm("PRESS A BUTTON")
if(r==true)
{alert(....)}
else
{alert(....)}
提示框:var r=prompt("PLEASE INPUT YOUR NAME", "luoshalin")//后面的是文本框里的默认值
if(r != "")
document.write("hello "+r+" how r u")
警告框:alert(){...} 带折行的话,在{ }中加“”+‘\n’+“”
确认框:var r=confirm("PRESS A BUTTON")
if(r==true)
{alert(....)}
else
{alert(....)}
提示框:var r=prompt("PLEASE INPUT YOUR NAME", "luoshalin")//后面的是文本框里的默认值
if(r != "")
document.write("hello "+r+" how r u")
基本语法
输出
alert("!!!");
document.write("string");
document.write("<p>this is a paragraph.<p>");
document.write("<h"+i+">this is header "+i+"</h"+i+">" )
变量和数据类型
-所有变量都统一用var声明:
var x = 2;
var name = "Bill Gates";
-示例:(将变量carname放入id="demo"的HTML段落中)
<p id="demo"></p>var carname = "volvo";document.getElementById("demo").innerHTML = carname;
-JS中有如下数据类型:
- 字符串//用单引号或双引号//var name = 'Bill Gates'
- 数字//JS中只有一种数字类型,数字可以带小数点,也可不带//var x1 = 3.30;//科学技术法:var y = 123e5//12300000
- 布尔值//var x = true; var y = false;
- Undefined 和 Null//Undefined 表示变量不含有值;可以通过将变量的值设为null来清空变量
-JS中的变量对大小写敏感;可以用字母或$或_开头;字符串用单引号或双引号包围(JS中,单引号双引号是一样的。两层双引号会引起辨识困难,所以里面最好用单引号);最好在代码开始处 【统一】对需要的变量进行声明
-如果只声明不赋值的话(比如var carname;)则carname的值为undefined
-如果重新声明JS变量,该变量的值不会丢失(比如如下两条语句:var carname="volvo"; var carname; 执行完以后carname的值仍然是"volvo")
运算符
好像没什么特别的= =。
- 像java一样,字符串可以直接相加;字符串和数字相加,结果会变成字符串:document.write("5"+5); 结果是55
- 比较运算符: 不等于:!= 全等:===(这个表示值和类型都完全相同)
- 条件运算符:greeting = (visitor == 'PRES') ? 'Dear President' : 'Dear'; //如果visitor=='PRES'成立,则将‘Dear President’赋给greeting
基本结构语句
- 条件分支
if...else ——没什么特别的。switch ——JS里面的switch和C一样的,只有定义变量的时候用的是var v,switch(v),但是在C里面switch里面只能是整形的
大概的结构:switch(var) {case 1: ... break; case2: ... break; default: ...}
- 循环
也是while/do-while/for三种循环break: 跳出循环,离开,剩下的几轮全不做了continue:这个循环体剩下的语句不做了,做下一轮
数组
var cars = new Array();cars[0] = 'Audi';cars[1] = 'BMW';cars[2] = 'Volvo';
或var cars = new Array('Audi', 'BMW', 'Volvo');
或var cars = ['Audi', 'BMW', 'Volvo'];
函数
- 举个栗子:
<html><head><script>function myFunction(){
alert('hello world!');
}</script></head>
<body><button onclick = "myFunction">点击这里</button></body></html>//在点击写有“点击这里”的button时,触发muFunction函数,弹出警告框
- 带参函数+带返回值的函数
function f(i, j){
return i*j ;
}
document.getElementById('demo').innerHTML = myFunction(4, 3);
//将id为demo中的HTML内容更改为myFunction(4, 3)的执行结果。4,3为传入的参数。
-局部变量在函数运行以后被删除;全局变量在页面关闭以后被删除
-如果把值赋给未声明的变量,这个变量将被自动作为全局变量,比如:carname = 'volvo'; //没有用var carname; 语句声明过变量
异常
- try-catch
<!DOCTYPE html>
<html>
<head>
<script>
var txt="";
function message()
{
try
{
adddlert("Welcome guest!");//写错了,应该是alert,产生一个err异常
}
catch(err)
{
txt="There was an error on this page.\n\n";
txt+="Error description: " + err.message + "\n\n";
txt+="Click OK to continue.\n\n";
alert(txt);
}
}
</script>
</head>
<body>
<input type="button" value="View message" οnclick="message()">
</body>
</html>
- try-throw-catch
<script>
function myFunction()
{
try
{
var x=document.getElementById("demo").value;
if(x=="") throw "empty";//按情况抛出不同的异常
if(isNaN(x)) throw "not a number";
if(x>10) throw "too high";
if(x<5) throw "too low";
}
catch(err)
{
var y=document.getElementById("mess");//在网页末端的mess段落中显示错误信息
y.innerHTML="Error: " + err + ".";//输出错误类型err
}
}
</script>
<h1>My First JavaScript</h1>
<p>Please input a number between 5 and 10:</p>
<input id="demo" type="text">
<button type="button" οnclick="myFunction()">Test Input</button>
<p id="mess"></p>//用于输出错误信息的段落