javaScript
概述
JavaScript一种直译式脚本语言，用来为网页添加各式各样的动态功能 （javaScript可以操作网页内容），不需要编译可直接通过浏览器解释运 行，通常JavaScript脚本是通过嵌入在HTML中来实现自身的功能的。
脚本语言
是不需要编译的语言，eg：sql、python、html、css、javaScript...
直接有某种引擎解释执行，逐行向下按行执行。
关系
html是结构，css是样式，javaScript是行为
历史
javaScript原名为LiveScript，由美国网景公司开发。是一种脚本语言，在网页中使用运行。
网景和SUN合作，改名为javaScript。
基本语法
<!DOCTYPE html>
<html>
<head>
<meta charset="utf-8" />
<title></title>
<!-- 导入外部的js文件 -->
<script src="js/index.js"></script>
<script>
// 调用对话框函数
// alert("sb");
// 自定义函数
function test(){
alert("sb");
}
</script>
</head>
<body>
<input type="button" value="点击" onclick="test()"/>
</body>
</html>
变量_数据类型
<!DOCTYPE html>
<html>
<head>
<meta charset="utf-8">
<title></title>
<script>
//变量声明
// var a;
// a=10;//数值
// alert(a);
// a="asd";//字符串
// alert(a);
//数值、布尔、字符串、undefined、object
数值num(整数、浮点数)
var a=10;
var b=9.5;
alert(typeof(a));
alert(typeof(b));
//布尔bollean
var c=true;
var d=false;
alert(a==b);
//字符串(单双引号都表示字符串)
var e="asdfghjkl";
var f='asdfghjkl';
alert(typeof(e));
//undefined
var g;
alert(g);
//对象类型
var date=new Date;
alert(date.getFullYear());
alert(date.getMonth()+1)
alert(date.getDate());
</script>
</head>
<body>
</body>
</html>运算符
<!DOCTYPE html>
<html>
<head>
<meta charset="utf-8">
<title></title>
<script>
//算术运算符 + - * / % ++ --
//+:加法 字符串连接
var a='10';
var b=5;
var c=10;
var d='a';
// alert(a+b);//字符串连接
// alert(b+c);//加法
// alert(a-b);//5
// alert(c-b);//5 (字符串[数字]-数值=数值)
// alert(c-d);//NaN (not a number)
//...
//赋值运算符 += -= /= %= *=
//比较运算符 = == === != > >= < <=
alert(a==c)//值比较
alert(a===c)//值型比较
//逻辑运算符 && || !
//三目运算符 var result = (条件表达式)?结果1:结果2
</script>
</head>
<body>
</body>
</html>函数
<!DOCTYPE html>
<html>
<head>
<meta charset="utf-8">
<title></title>
<script>
// function fun(){
// alert("sb");
// }
// // fun();
// function test(a,b){
// alert(a+":"+b)
// }
// var now='NOW';
// test(now,new Date());
//全局函数
/*
把括号内的内容转换成整数之后的值。如果括号内是字符串，
则字符串开头的数字部分被转换成整数，如果以字母开头，则返回"NaN"
*/
var a=123.321;
// alert(parseInt(a));
var b=5;
var c="10asd";
// alert(b+parseInt(c));
/*
把括号内的字符串转换成浮点数之后的值，字符串开头的
数字部分被转换成浮点数，如果以字母开头，则返回“NaN”
*/
// alert(parseFloat(c));
/*
返回括号中值的数据类型。
*/
// alert(typeof(a));
// alert(typeof(c));
/*
可以计算某个字符串
把传入的字符串当作js脚本运行
*/
var d="(2*4*8*16*32)/(2**15)";
alert(eval(d));
</script>
</head>
<body>
</body>
</html>DOM
<!DOCTYPE html>
<html>
<head>
<meta charset="utf-8">
<title></title>
<script>
/*
javaScript认为每个标签都是对象
在js中称其为html dom对象
在网页加载完后，在js中生成一个document对象(表示整个html文档)
里面提供了一个方法getElementById()
*/
function test(){
var tobj=document.getElementById("test1");//通过标签id获得标签对象
var yobj=document.getElementById("test2");
//操作标签属性
alert(tobj.value);
yobj.value=tobj.value;
tobj.value="";
tobj.type="button";
}
function fun(){
var tdivobj=document.getElementById("id1");
var ydivobj=document.getElementById("id2");
//innerText可以获得标签的文本内容
//innerHTML可以获得标签的所有内容
ydivobj.innerHTML=tdivobj.innerHTML;
}
function run(){
var rdivobj=document.getElementById("id3");
//改变标签style
rdivobj.style.backgroundColor="green";
rdivobj.style.width="200px";
rdivobj.style.height="200px";
}
function lick(){
//getElementsByTagName 返回的是一个标签对象的集合，只有一个标签
// var divobjs=document.getElementsByTagName("div");
// var divobjs=document.getElementsByClassName("box");
var divobjs=document.getElementsByName("a");
for (var i=0;i<divobjs.length;i++){
divobjs[i].innerHTML="a"+i;
divobjs[i].style.width="250px";
}
}
</script>
</head>
<body>
<input type="text" id="test1" value=""/>
<input type="text" id="test2" value=""/>
<input type="button" onclick="test()" value="飞"/>
<br />
<div id="id1">html dom对象</div>
<div id="id2"></div>
<input type="button" onclick="fun()" value="飞"/>
<br />
<div id="id3" style="background-color: aquamarine;">asd</div>
<input type="button" onclick="run()" value="飞"/>
<br />
<div class="box" name="a" style="background-color: aquamarine;width: 100px;height: 100px;"></div>
<br />
<div class="box" name="a" style="background-color: aquamarine;width: 100px;height: 100px;"></div>
<br />
<div class="box" name="a" style="background-color: aquamarine;width: 100px;height: 100px;"></div>
<input type="button" onclick="lick()" value="飞"/>
</body>
</html>内置对象
<!DOCTYPE html>
<html>
<head>
<meta charset="utf-8">
<title></title>
<script>
// Date
var date=new Date();
console.log(date.getDate());
console.log(date.getFullYear());
console.log(date.getMonth());
console.log(date.getDay());
console.log(date.getHours());
console.log(date.getMinutes());
console.log(date.getSeconds());
//...
// Math
Math.abs(-6);// 绝对值计算；
Math.pow(2,3);// 数的幂；x的y次幂
Math.sqrt(16);// 计算平方根；
Math.ceil(4.4);// 对一个数进行上舍入
Math.floor(4.4);// 对一个数进行下舍入。 Math.round(x) 把一个数四舍五入为最接近的整数
Math.random();// 返回 0 ~ 1 之间的随机数
Math.max(1,5);// 返回 x 和 y 中的最大值
Math.min(1,5);// 返回 x 和 y 中的最小值
//字符串
var str="asdfghjkl";
console.log(str.length);//返回该字符串的长度
console.log(str.charAt(3));//返回该字符串位于第n位的单个字符
console.log(str.indexOf("g"));//返回指定char首次出现的位置
console.log(str.lastIndexOf("g"));//返回指定char从后往前第一次出现的位置
console.log(str.substring(1,3));//返回从开始位置的索引到结束位置索引前一个位置的一段字符串
console.log(str.substr(1,3));//返回以开始位置起长为length的一段字符串
console.log(str.split(""));//返回一个数组
//数组
//法一
var arr=new Array();
arr[0]=1;
arr[1]=2;
arr[2]=true;
arr[3]="asd";
//法二
var arr=new Array(1,2,true,"asd");
//法三
var arr=[1,2,true,"asd"];
//数组循环输出
for(var i=0;i<arr.length;i++){
console.log(arr[i]);
}
var arr=[1,2,true,"asd"];
var a=arr.join(":");//把数组转换为字符串，并指定一个连接符号
arr.reverse();//数组逆序
//数组字符排序
var arr=["b","d","a","c"];
arr.sort();
console.log(arr);
//数组数字排序
var arr=[2,,9,15,3,5,1];
arr.sort(numSort);//将自定义排序函数当作参数传入
console.log(arr);
//自定义排序函数
function numSort(a,b){
return a-b;
}
</script>
</head>
<body>
</body>
</html>控制语句
<!DOCTYPE html>
<html>
<head>
<meta charset="utf-8">
<title></title>
<script>
//与java基本一致
//选择 if if/else switch
//循环 for while do/while break continue
</script>
</head>
<body>
</body>
</html>事件
<!DOCTYPE html>
<html>
<head>
<meta charset="utf-8">
<title></title>
<script>
function test(){
console.log("sb");
}
</script>
</head>
<body>
<!-- onclick 单击左键触发 -->
<input type="button" value="点击" onclick="test()"/>
<!-- onblur 失去焦点时触发 -->
<input onblur="test()"/>
<!-- onfocus 获得焦点时触发 只触发一次 -->
<input onfocus="test()"/>
<!-- onmouseover 鼠标移入标签时触发 -->
<!-- onmouseout 鼠标移出标签时触发 -->
<input onmouseover="test()" onmouseover="test()"/>
<!-- onload 当网页内容加载完后触发 -->
<!-- onchange 失去焦点且内容改变时触发 -->
<input onchange="test()"/>
</body>
</html>计时事件
<!DOCTYPE html>
<html>
<head>
<meta charset="utf-8">
<title></title>
<script>
function hello(){
alert("sb");
}
var t;
var u;
function stratTime(){
t=setInterval("hello()",3000);
// u=setInterval("hello()",5000);
}
function stopTime(){
clearTimeout(t);
// clearTimeout(u);
}
</script>
</head>
<body>
<input type="button" value="strat" onclick="stratTime()"/>
<input type="button" value="stop" onclick="stopTime()"/>
</body>
</html>本站资源均来自互联网，仅供研究学习，禁止违法使用和商用，产生法律纠纷本站概不负责！如果侵犯了您的权益请与我们联系！
转载请注明出处： 免费源码网-免费的源码资源网站 » 前端初学日记 （三） JS
发表评论 取消回复