1、JavaScript:写入Html进行输出
document.write("<h1>我是Jason,Js输出测试成功!</h1>");
ps:您只能在 HTML 输出中使用 document.write。如果您在文档加载后使用该方法,会覆盖整个文档。
解释:
<html>
<meta charset='utf-8'>
<body>
<p>helloworld</p>
<button onclick='javascript:myFunction()'>hello</button>
<script>
function myFunction(){
document.write('这下应该会清除了吧?');
}
</script>
</body>
</html>
document.write('这下应该会清除了吧?');
}
</script>
</body>
</html>
点击“hello”按钮,原“helloworld”文字被覆盖!
2、JavaScript:对事件作出反应
<button onclick="alert('Welcome to Jason World')">点击</button>
alert('Welcome to Jason World')">点击</button>
3、JavaScript:改变 HTML 内容
function changeContext(){
x=document.getElementById("demo");//寻找元素
x.innerHTML="Dasiy";//改变内容,innerHTML中的‘HTML’必须全为大写
}
</script>
<div id="demo">Jason</div>
<button type="button" onclick="changeContext()">点击</button>
x.innerHTML="Dasiy";//改变内容,innerHTML中的‘HTML’必须全为大写
}
</script>
<div id="demo">Jason</div>
<button type="button" οnclick="changeContext()">点击</button>
4、JavaScript:改变 HTML 图片
<script>
function changeImage(){
element = document.getElementById("myimage");
if(element.src.match('bulbon')){//match,字符串中检索指定的值
element.src = "/i/eg_bulboff.gif";
}else{
element.src = "/i/eg_bulbon.gif";
}
</script>
<img id="myimage" onclick="changeImage()" src="/i/eg_bulboff.gif">
element.src.match('bulbon')){//match,字符串中检索指定的值
element.src = "/i/eg_bulboff.gif";
}else{
element.src = "/i/eg_bulbon.gif";
}
</script>
<img id="myimage" οnclick="changeImage()" src="/i/eg_bulboff.gif">
5、JavaScript:改变HTML样式
<p id="demo">JavaScript 能改变 HTML 元素的样式。</p>
<script>
function myFunction(){
element=document.getElementById("demo") // 找到元素
element.style.color="#ff0000"; // 改变样式
}
</script>
<button type="button" onclick="myFunction()">点击</button>
element.style.color="#ff0000"; // 改变样式
}
</script>
<button type="button" οnclick="myFunction()">点击</button>
6、JavaScript:验证输入
<input id="demo" type="text">
<script>
function myFunction(){
element = document.getElementById("demo");
inputVal = element.value;
if(inputVal=="" || isNaN(inputVal)){
alert("Not Numeric");
}
}
</script>
<button onclick="myFunction()">点击</button>
inputVal = element.value;
if(inputVal=="" || isNaN(inputVal)){
alert("Not Numeric");
}
}
</script>
<button οnclick="myFunction()">点击</button>
7、外部引入js脚本,不能加入<script></script>标签
<script src="./test.js"></script>
<input id="demo" type="text">
<button onclick="myFunction()">点击</button>
8.JavaScript对大小写敏感!!!!
9、对代码进行拆行处理
<script>
document.write("Hello \
World!");
</script>
10、JavaScript 变量
①变量必须以字母开头
②变量也能以 $ 和 _ 符号开头阿(不过我们不推荐这么做)
③变量名称对大小写敏感(y 和 Y 是不同的变量)
提示:JavaScript 语句和 JavaScript 变量都对大小写敏感。
11、JavaScript 数据类型
当您向变量分配文本值时,应该用双引号或单引号包围这个值。
当您向变量赋的值是数值时,不要使用引号。如果您用引号包围数值,该值会被作为文本来处理。
12、声明变量
var carname或者var carname="Volvo";
一条语句,多个变量
var name="Gates", age=56, job="CEO";
重新声明 JavaScript 变量
var carname="Volvo";
var carname;
如果重新声明 JavaScript 变量,该变量的值不会丢失:carname的值仍然是Volvo
提示:一个好的编程习惯是,在代码开始处,统一对需要的变量进行声明。
13、JavaScript数据类型:
布尔:
var x=true
var y=false
数组:
var cars = new Array();
cars[0] = 'Audi';
cars[1] = 'Dz';
cars[2] = 'Stn';
或者:var cars = new Array('Ad','Dz','Stn');
或者:var cars = ['Ad','Dz','Stn'];
对象:
var person={firstname:"zhou",lastname:"yong",id:123}
对象属性的两种寻址方式(获取属性的值):
name = person.firstname;
name = person['firstname'];
Undefined和Null
Undefined这个值表示变量不含有值;
可以通过将变量的值设置为null来清空变量
声明变量类型:
var carname = new String;
var x = new Number;
var y = new Boolean;
var cars = new Array;
var person = new Object;
14、JavaScript 中的所有事物都是对象:字符串、数字、数组、日期;对象是拥有属性和方法的数据
举例:
var txt = "zhou";
属性:txt.length
方法:txt.indexOf();txt.replace();txt.search();......
创建JavaScript对象:
person = new Object();
person.firstname = 'zhou';
person.lastname = 'yong';
person.id = 123;
访问对象的属性:
语法:objectName.propertyName
eg:var message = 'hello world';
var x = message.length;
访问对象的方法:
语法:objectName.methodName()
eg:var message = 'hello world';
var x = message.toUpperCase();
15、函数:声明的变量时局部变量
结构:
function functionname(p1,p2)
{
这里是要执行的代码
}
带有返回值的函数:return
function myFunction()
{
var x=5;
return x;
}
函数调用被返回值取代:
var x = myFunction();
document.getElementById("demo").innerHTML=myFunction();//调用函数,并将值嵌入Html页面中
JavaScript变量的生命期:
局部变量会在函数运行以后被删除;
全局变量会在页面被关闭后被删除
PS:将值赋给尚未声明的变量,该变量将被自动作为全局变量声明,即使在函数内执行
<script>
carname = 'zhou';
function get(){
//carname = 'sss';//声明变量,则返回“sss”,不声明变量,返回"zhou"
return carname;//carname使用的是全局变量
}
alert(get());
</script>
16、JavaScript运算符
①算术运算符:执行变量与/或值之间的算术运算
运算符 | 描述 | 例子 | 结果 |
---|---|---|---|
+ | 加 | x=y+2 | x=7 |
- | 减 | x=y-2 | x=3 |
* | 乘 | x=y*2 | x=10 |
/ | 除 | x=y/2 | x=2.5 |
% | 求余数 (保留整数) | x=y%2 | x=1 |
++ | 累加 | x=++y | x=6 |
-- | 递减 | x=--y | x=4 |
②赋值运算符:给变量赋值
运算符 | 例子 | 等价于 | 结果 |
---|---|---|---|
= | x=y | x=5 | |
+= | x+=y | x=x+y | x=15 |
-= | x-=y | x=x-y | x=5 |
*= | x*=y | x=x*y | x=50 |
/= | x/=y | x=x/y | x=2 |
%= | x%=y | x=x%y | x=0 |
③“+”运算符:用于将文本或者字符串拼接起来
txt1="What a very";
txt2="nice day";
txt3=txt1+txt2;
txt3=txt1+" "+txt2;//拼接空格
④对字符串和数字进行加法运算
x=5+5;//10
x="5"+"5";//55
x=5+"5";//55
x="5"+5;//55
PS:如果把数字与字符串相加,结果将成为字符串
17、JavaScript比较和逻辑运算符
①比较运算符
运算符 | 描述 | 例子 |
---|---|---|
== | 等于 | x==8 为 false |
=== | 全等(值和类型) | x===5 为 true;x==="5" 为 false |
!= | 不等于 | x!=8 为 true |
> | 大于 | x>8 为 false |
< | 小于 | x<8 为 true |
>= | 大于或等于 | x>=8 为 false |
<= | 小于或等于 | x<=8 为 true |
②逻辑运算符
运算符 | 描述 | 例子 |
---|---|---|
&& | and | (x < 10 && y > 1) 为 true |
|| | or | (x==5 || y==5) 为 false |
! | not | !(x==y) 为 true |
③条件运算符
语法:
variablename=(condition)?value1:value2
18、JavaScript:循环
for/in循环遍历对象:
var person={fname:"John",lname:"Doe",age:25};
for (x in person){
txt =txt + person[x];
}
19、JavaScript标签
continue 语句(带有或不带标签引用)只能用在循环中。
break 语句(不带标签引用),只能用在循环或 switch 中。
通过标签引用,break 语句可用于跳出任何 JavaScript 代码块。
cars=["BMW","Volvo","Saab","Ford"];
list:{document.write(cars[0] + "<br>");
document.write(cars[1] + "<br>");
document.write(cars[2] + "<br>");
break list;
document.write(cars[3] + "<br>");
document.write(cars[4] + "<br>");
document.write(cars[5] + "<br>");
}
20、错误
<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");
y.innerHTML="Error: " + err + ".";
}
}
</script>
<input id="demo" type="text">
<button type="button" onclick="myFunction()">Button</button>
<p id="mess"></p>
21、验证
Email:
apos=value.indexOf("@")
dotpos=value.lastIndexOf(".")
if (apos<1||dotpos-apos<2) {
//输入的数据必须包含 @ 符号和点号(.)。同时,@ 不可以是邮件地址的首字符,并且 @ 之后需有至少一个点号
//todo
}