一、js基本添加语法
<html>
<head>
<!--引入外部的js文件（以.js结尾的文本文件）-->
<script type="text/javascript" src="hello.js"></script>
<!--js可以写在html文档的任何一个位置，head或body中，与html代码混合，执行顺序按照从上到下的顺序-->
<!--根据执行顺序，注意在处理页面元素的时候判断元素是否已经加载入客户端-->
<script language="javascript">
alert("in head");
</script>
</head>
<body>
<script type="text/javascript">
alert("before 正文1");
</script>
正文1<br/>
<script type="text/javascript">
alert("after 正文1");
</script>
正文2
</body>
</html>1.系统对象
<html>
<head>
<script type="text/javascript">
//系统对象：
//数组 ---- 相当于js中的集合类
var arr = [1,2,3,4];
arr = new Array(1,2,3,4);
//通过下标操作数组元素，下标从0开始
arr[2] = 20;
for(var i=0;i<arr.length;i++){
//alert(arr[i]);
}
//js中数组的长度是可变的
//alert(arr.length); //4
//arr[5] = 50;
//alert(arr.length); //6
//arr.length = 6;
//alert(arr.length);
//arr[50] = 50;
//alert(arr.length); //51
arr.pop(); //删除最后一个元素
arr.unshift(0); //向数组的开头添加一个或更多元素，并返回新的长度
var s = arr.join(); //把数组中的所有元素放入一个字符串
// alert(s); //0,1,2,20
//日期Date
var date = new Date();
//alert(date);
var str = date.toLocaleDateString(); //2015/9/8
//alert(str);
//获取年一定要使用getFullYear()
var year = date.getFullYear(); //2015
var month = date.getMonth()+1; //月份从0开始
var day = date.getDate();
var time = date.getTime(); //时间的毫秒
//alert(year+"---"+month+"---"+day+"---"+time);
//字符串 --- 建议测试字符串的方法
var s = new String("hello");
//alert(s.length); //5
s.toUpperCase();
// alert(s); //hello
//Math
var dou = Math.random();
var i = Math.round((Math.random()*100));
alert(i);
</script>
</head>
<body>
正文
</body>
</html><html>
<head>
<script type="text/javascript">
//自定义对象
//1.构造方法（函数）
function Person(name,age,sex){
this.name = name;
this.age = age;
this.sex = sex;
this.show = function(){
alert("name:"+this.name+"---age:" + this.age);
};
}
var per = new Person("zhangsan",20,"男");
// alert(per.name);
// per.show();
//2.文字记号方式 --- json基础
var stu = {
"stuno":"010102",
"stuname":"lisi",
"age":20,
"study":function(){
alert(this.stuname + " studying...");
}
};
// alert(stu.stuno);
// stu.study();
// stu.sex = "男";
// alert(stu.sex);
var obj = {};
obj = new Object();
//js中的对象可以后续添加属性或方法的
obj.name = "刘昊然";
obj.printName = function(){
alert(this.name);
};
// obj.printName();
//3.原型方式 -- 用类型的prototype(构造函数扩展，所有的该类型的对象共享)
function Dog(){}
var dog1 = new Dog();
var dog2 = new Dog();
// dog1.name = '小白狗'; //给对象dog1扩展一个属性
// alert(dog1.name); //小白狗
// alert(dog2.name); //undefined
Dog.prototype.name = "小白"; //为类型Dog扩展属性，所有该类型的对象都扩展
// alert(dog1.name); //小白
// alert(dog2.name); //小白
// dog1.name = '小黄';
// alert(dog1.name); //小黄
// alert(dog2.name); //小白
//原型模式可应用在系统对象或自定义对象
var s1 = new String("abc");
var s2 = new String("a22");
// alert(s1 == s2); //false
//利用原型为String扩张equals方法
String.prototype.equals = function(s){
var flag = true;
if(this.length != s.length){
flag = false;
}else{
for(var i=0;i<this.length;i++){
if(this.charAt(i) != s.charAt(i)){
flag = false;
break;
}
}
}
return flag;
};
var flag = s1.equals(s2);
// alert(flag);
// alert(dog1['name']);
//如果某个对象的属性是不确定的
for(var proName in stu){
// alert(proName+":"+stu[proName]);
}
/* with(stu){
alert(stuno);
alert(stuname);
study();
}
*/
</script>
</head>
<body>
正文
</body>
</html>1.系统函数
<html>
<head>
<script type="text/javascript">
//系统函数
//isNaN --- 判断某个内容是不是非数字的，如果不是数字的返回true
var str = "abc";
var flag = isNaN(str); //true
str = "123";
flag = isNaN(str); //false
if(!isNaN(str)){
//转成数字
var i = parseInt(str);
alert(i + "--" + typeof(i)); //number
}
str = "3.14";
if(!isNaN(str)){
var i = parseFloat(str);
alert(i);
}
</script>
</head>
<body>
正文
</body>
</html>2.自定义函数
<html>
<head>
<script type="text/javascript">
//自定义函数
//function 方法名字(参数列表,值包括形参名字){实现体，可以有return}
//函数一定调用后才会执行
//不建议使用重载
//没有参数，没有返回值
function hello(){
alert("hello world!");
}
// hello();
//有参数，没有返回值
function hello2(name){
alert("hello," + name);
}
// hello2("zhangsan");
//有参数，有返回值
function add(a,b){
var sum = a + b;
return sum;
}
var result = add(2,3);
// alert(result);
//如果方法没有返回值，结果是undefined
//如果undefined参与算数运算，结果是NaN
//在调用函数的时候，实参列表可以与形参列表不一致
//在函数中可使用arguments获取实参列表，arguments相当于数组
function add2(){
var sum = 0;
for(var i=0;i<arguments.length;i++){
sum += arguments[i];
}
return sum;
}
result = add2(2,3,4,5);
// alert(result);
//js中，函数是可以传递的，注意函数后不能加()
var myAdd = add2; //myAdd的功能与add2一致
// alert(myAdd(2,3,4,5,6));
</script>
</head>
<body>
正文
</body>
</html>1.定义变量
<html>
<head>
<script type="text/javascript">
//数据类型，定义变量
//js是一种弱类型的语言
//js中使用var声明变量
//变量的类型不是在声明的时候确定的，在赋值的时候确定,同一个变量可以赋值为不同类型的数据
var i = 10;
alert(i);
i = "string";
alert(i);
</script>
</head>
<body>
正文
</body>
</html>2.六种数据类型
<html>
<head>
<script type="text/javascript">
//根据函数typeof获取到的六种数据类型：
//undefined object number string boolean function
var i ;
//alert(i); //undefined --- 一个变量在没有赋值的时候默认值undefined
//alert("type---" + typeof(i)); //undefined
i = null;
//alert("type--" + typeof(i)); //Object
i = 10;
//alert("type--" + typeof(i));
i = 10.123;
//alert("type--" + typeof(i));
//在js中可使用单引号或双引号来定义字符串
i = "string";
//alert("type--" + typeof(i));
i = 'a';
//alert("type--" + typeof(i)); //string
i = true;
//alert("type--" + typeof(i));
i = alert;
//alert("type---"+typeof(i));
//i("hello");
//i = [43,654,76];
// alert("type---"+typeof(i)); //object
//报错：js中的变量区分大小写
//alert(I);
</script>
</head>
<body>
正文
</body>
</html>3.变量范围
<html>
<head>
<script type="text/javascript">
//变量的作用范围：在声明变量的{}中
//直接定义在script标记下的变量是全局变量,定义在{}里面的是局部变量
//在{}中不使用var定义的变量作为全局变量
var g = 10; //全局变量
function t(){
var local = 20;
lo2 = 20 ; //全局变量
alert("in function---" + g);
alert("function local--" + local);
}
t();
alert(g);
alert(lo2);
</script>
</head>
<body>
正文
</body>
</html>五、JS运算
1.算数
<html>
<head>
<script type="text/javascript">
//算数运算 + - * / %
var i1 = 10;
var i2 = 3;
var i3 = i1/i2;
//alert(i3); //3.333333333...
//i3 = i1%i2;
//alert(i3); //1
//赋值运算 = += *= -= /= %=
i2 /= i1; //i2=l2/i1
//alert(i2);
// ++ --
alert(i1++); //10
alert(++i1); //12
alert(i1--); //12
alert(--i1); //10
</script>
</head>
<body>
正文
</body>
</html><html>
<head>
<script type="text/javascript">
//条件运算符------?:
var i1 = 10;
var i2 = 3;
var i3 = i1>i2?i1:i2; //10
alert(i3);
i1>i2?alert("i1较大"):alert("i2较大");
</script>
</head>
<body>
正文
</body>
</html><html>
<head>
<script type="text/javascript">
//比较运算：> < >= <= != == === !==
//== 内容相同----------------------!=
//=== 内容相同，类型相同----------!==
var i1 = 10;
var i2 = 3;
var i3 = i1>=i2;
//alert(i3); //true
i1 = "10";
i2 = 10;
i3 = i1 == i2; //true
//alert(i3);
i3 = i1===i2; //false
//alert(i3);
i1 = 10;
i2 = "10.0";
//alert(i2==i1); //true ---- 将字符串转成数字
//alert(i1===i2); //false
i1 = "a";
i2 = new String("a");
//alert(i1==i2); //true
//alert(i1===i2); //false
alert(typeof(i1)); //string
alert(typeof(i2)); //object
</script>
</head>
<body>
正文
</body>
</html><html>
<head>
<script type="text/javascript">
//逻辑运算： && || ! & |
//&& 和||有截断功能
//布尔值参与逻辑运算结果还是布尔值
var i1 = true;
var i2 = false;
var i3 = i1 && i2;
//alert(i3); //false
i3 = i1 || i2;
//alert(i3); //true
//js中非布尔值也可以参与逻辑运算，结果也不是布尔值
//如果&&前面是代表true的值，那么结果由&&后面的值确定，否则由&&前面的值确定的
//如果||前面代表true的值，那么结果由||前面的值确定，否则由||后面的值确定
//非空值代表true.空值代表false,包括：undefined null "" '' 0
i1 = 10;
i2 = 3;
i3 = i1 && i2;
//alert(i3); //3
i3 = i1 || i2;
//alert(i3); //10
var i4;
i2 = 3;
i3 = i2 && i4; //undefined
i3 = i4 && i2; //undefined
i4 = null;
i3 = i4 || i2; //3
i4 = 0;
i2 = 3;
i3 = i4 || i2; //3
alert(i3);
</script>
</head>
<body>
正文
</body>
</html><html>
<head>
<script type="text/javascript">
//正则表达式
var reg = /\d+/; //匹配1个或多个数字
//reg = new RegExp("\d+");
var str = "xcsd53";
//test方法结果代表字符串中是否包含正则表达式匹配的内容
//var flag = reg.test(str); //true
//alert(flag);
//如果需要匹配完整的字符串，需要约束开头和结尾（^ $）
reg = /^\d+$/; //匹配以数字开头并且以数字结尾的数字字符串
str = "fhdy5643";
var flag = reg.test(str); //false
//alert(flag);
//约束：i表示忽略大小写 g表示全局查找
//标识符：数字、字母、下划线、$，以字母开头，长度1-20
reg = /^[a-z][\w$]{0,19}$/i;
//reg = new RegExp("\d+","i");
str = "SEd74iu";
flag = reg.test(str); //true
//alert(flag);
//全局查找 --- 使用字符串的方法match
reg = /\d+/g;
str = "hfdyew64r3fdew7546347fgdaser4637qfgdsa4673rtyfdw47";
var arr = str.match(reg);
var s = arr.join();
//alert(s);
var arr2 = s.split(",");
//alert(arr2);
</script>
</head>
<body>
正文
</body>
</html>1.JS Window
<html>
<head>
<script type="text/javascript">
//window对象是顶层对象，默认使用的方法或属性就是window对象的
//window可以省略
function myAlert(){
window.alert("infomation");
}
function myInput(){
//点击确定获取输入内容，点击取消返回null
var info = window.prompt("请输入名字","zhangsan"); //信息提示 默认值
alert(info);
}
function myConfirm(){
//点击确定返回true，点击取消返回false
var flag = window.confirm("确定删除吗？");
alert(flag);
}
function myclose(){
window.close();
}
function myTimeout(){
//1秒后执行代码
setTimeout("alert('hello')",1000);
}
var eId = null;
function myInterval(){
//每隔一秒执行代码
eId = setInterval("alert('hello')",1000);
}
function myClear(){
clearInterval(eId);
}
//在p当中动态显示当前时间,格式yyyy-MM-dd hh:mm:ss
function printTime(){
//var time = getCurrTime();
//document.getElementById("currTime").innerHTML = time;
setInterval("getCurrTime()",1000);
}
function getCurrTime(){
var date = new Date();
var year = date.getFullYear();
var month = date.getMonth() + 1;
var day = date.getDate();
var hours = date.getHours();
var min = date.getMinutes();
var sec = date.getSeconds();
var result = year + "-" + month + "-" + day + " " + hours +":" + min + ":" + sec;
document.getElementById("currTime").innerHTML = result;
}
</script>
</head>
<body >
<input type="button" value="信息框" οnclick="myAlert()"><br/>
<input type="button" value="输入框" οnclick="myInput()"><br/>
<input type="button" value="确认框" οnclick="myConfirm()"><br/>
<input type="button" value="关闭窗口" οnclick="myclose()"><br/>
<input type="button" value="timeout" οnclick="myTimeout()"><br/>
<input type="button" value="interval" οnclick="myInterval()"><br/>
<input type="button" value="取消interval" οnclick="myClear()"><br/>
<input type="button" value="显示时间" οnclick="printTime()"><br/>
<p id="currTime"></p>
</body>
</html>2.JS Location
<html>
<head>
<script type="text/javascript">
function refresh(){
location.reload(); //刷新当前页面
}
function jump(){
//通过修改location下的href属性达到跳转的效果
//alert(location.href);
location.href="http://douban.com";
}
function newDoc(){
window.location.assign("http://www.w3school.com.cn")
}
</script>
</head>
<body οnlοad="alert('hello');">
<input type="button" value="刷新当前单页面" οnclick="refresh()"/><br/>
<input type="button" value="跳转到豆瓣" οnclick="jump()"/><br/>
<input type="button" value="加载新文档" οnclick="newDoc()"><br/>
</body>
</html><html>
<head>
<script>
function goBack(){
window.history.back()
}
function goForward(){
window.history.forward()
}
</script>
</head>
<body>
<input type="button" value="Back" οnclick="goBack()">
<input type="button" value="Forward" οnclick="goForward()">
</body>
</html><html>
<body>
<div id="example"></div>
<script>
txt = "<p>Browser CodeName: " + navigator.appCodeName + "</p>";
txt+= "<p>Browser Name: " + navigator.appName + "</p>";
txt+= "<p>Browser Version: " + navigator.appVersion + "</p>";
txt+= "<p>Cookies Enabled: " + navigator.cookieEnabled + "</p>";
txt+= "<p>Platform: " + navigator.platform + "</p>";
txt+= "<p>User-agent header: " + navigator.userAgent + "</p>";
txt+= "<p>User-agent language: " + navigator.systemLanguage + "</p>";
document.getElementById("example").innerHTML=txt;
</script>
</body>
</html><html>
<head>
<script type="text/javascript">
function updateText(){
//alert("修改了text内容");
//1.获取相应的input元素
var input = document.getElementById("username");
//2.获取input元素的值 ------ 对于表单元素这种有value属性的可使用.value的形式修改值
var username = input.value;
//3.获取要修改的p元素
var p = document.getElementById("usernameInfo");
//4.修改p元素的内容 ---- 起始标签和结束标签之间的内容处理使用innerHTML
p.innerHTML = username;
}
function updateSelect(){
//alert("修改了select的内容");
//1.获取select选中的内容
var home = document.getElementsByName("home")[0].value;
//2.修改p的内容
document.getElementsByName("homeInfo")[0].innerHTML = home;
}
function updateDesc(){
//特殊的元素textarea:textarea的内容是放在其实标记和结束标记之间的，但是是以.value的形式获取这个内容
var desc = document.getElementsByName("desc")[0].value;
document.getElementById("descInfo").innerHTML = desc;
}
function getFocus(){
document.getElementsByName("desc")[0].value = "";
}
</script>
</head>
<!--当发生加载事件时，调用方法myload来处理这个事件-->
<!--onload是在页面加载完以后立即执行的-->
<body >
<form>
username:<input type="text" name="username" id="username" value="zhangsan" οnchange="updateText()"/><br/>
home:<select name="home" id="home" οnchange="updateSelect()">
<option>杭州</option>
<option>温州</option>
<option>萧山</option>
</select><br/>
description:<textarea name="desc" rows="5" cols="10" οnchange="updateDesc()" οnfοcus="getFocus()">自我描述</textarea>
</form>
<hr/>
username：<p id="usernameInfo"></p>
home:<p name="homeInfo"></p>
description:<p id="descInfo"></p>
</body>
</html>6.鼠标事件
<html>
<head>
<script type="text/javascript">
function myclick(){
alert("hello world!");
}
function myOver(){
var p1 = document.getElementById("p1");
//修改P1的文字大小
p1.style.color = "red";
//p1.style.fontSize = "30px";
p1.style.zoom = 2;
}
function myout(){
var p1 = document.getElementById("p1");
//修改P1的文字大小
p1.style.color = "black";
//p1.style.fontSize = "10px";
p1.style.zoom = 1;
}
</script>
</head>
<body >
<input type="button" value="点击我试试看！" οnclick="myclick()"><br/>
<p id="p1" οnmοuseοver="myOver()" οnmοuseοut="myout()">这是段落元素，添加鼠标放在元素上的事件</p>
</body>
</html><html>
<head>
<script type="text/javascript">
//使用this指向当前对象
function myKeyup(text){
//var text = document.getElementsByTagName("input")[0];
alert(text.value);
}
</script>
</head>
<body >
<input type="text" οnkeyup="myKeyup(this)">
</body>
</html>
扫一扫
345
被折叠的 条评论
为什么被折叠?
到【灌水乐园】发言
