前端初学日记（三） JS

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));//布尔bolleanvar c=true;var d=false;alert(a==b);//字符串(单双引号都表示字符串)var e="asdfghjkl";var f='asdfghjkl';alert(typeof(e));//undefinedvar 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");//改变标签stylerdivobj.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>

本文来自互联网用户投稿，该文观点仅代表作者本人，不代表本站立场。本站仅提供信息存储空间服务，不拥有所有权，不承担相关法律责任。如若转载，请注明出处：http://www.mzph.cn/pingmian/39512.shtml

如若内容造成侵权/违法违规/事实不符，请联系多彩编程网进行投诉反馈email:809451989@qq.com，一经查实，立即删除！