JS学习笔记_基础篇

el/2024/7/17 22:24:40

var globe = "全局变量"; //globe是全局变量,不管加不加var
test();
function test()//js 方法写法:function(固定)+方法名字
{
var local = "局部变量"; //local是局部变量
//如果在函数中声明时不加var 也会变成全局变量。 js的诡异
document.writeln(globe);//将变量值写到页面上
document.writeln(local);
}

document.writeln(globe);
document.writeln(local);

function test2(){
var i = 3;
alert(i);
i=true;//js是弱类型
alert(i);
}




with (document) {//后面的 write都是 document对象下的方法,用了with不用挨个 document.write()...
write("<ul>");
write("<li>hello</li>");
write("<li>world</li>");
write("<li>hello world</li>");
write("</ul>");
}


function member(name, gender) //可以看成构造函数(可以new,生成的都是方法的实例,没有class概念),也可以看成普通函数 不能指定参数的类型,直接写参数名字
{
this.name = name;
this.gender = gender;
}

function showProperty(obj, objString)
{
var str = "";

for(var i in obj)//遍历对象里面的每个属性,obj 传进来是一个对象
{
str += objString + "." + i + " = " + obj[i] + "<br>";
}

return str;//带返回值
}

var obj = new member("蛋蛋", "男"); //建立对象实例

document.writeln(showProperty(obj,"person"));


var date = new Date();//Date 内置对象
var day = date.getDay();//0-6 0表示星期天
if(0 == day)
{
day = "日";//星期0 改为星期天
}//date.getMonth()//返回的是0-11 表示月份
//date.getYear() 是减去1900后的
document.writeln("现在时刻: " + (date.getYear() + 1900) + "年 " + (date.getMonth() + 1) + "月" +
date.getDate() + "日" + " 星期" + day + " " + date.getHours() + ":" + date.getMinutes() + ":" + date.getSeconds())
// document.writeln(date)


//var fruit = new Array("苹果", "鸭梨", "橙子");

//var fruit = ["苹果", "鸭梨", "橙子"]; //推荐使用,没有new Array() 直接赋值

var fruit = new Array();//数组对象Array JS内置,可自由扩容,里面放的数据类型可以不同
//new Array(); 调用无餐的构造方法,括号可以不写,但是调用有参数的构造方法必须写括号
fruit.push("苹果");//数组可以当作队列或者栈来用,让数组里逐个增加元素,下标也是0开始的
fruit.push("鸭梨");
fruit.push("橙子");
fruit.push("香蕉");
fruit.push("西瓜");

for(var i = 0; i < fruit.length; i++)
{
document.writeln("fruit[" + i + "] = " + fruit[i] + "<br />")
}


var fruit = ["苹果", "香蕉", "桔子"];
fruit.pop();//从队尾去掉一个元素
with(document)
{
write("<ul>");
write("<li>" + fruit.join() + "</li>");//苹果,香蕉,桔子(默认逗号分割)
write("<li>" + fruit.join(":") + "</li>");//苹果:香蕉:桔子
write("<li>" + fruit.toString() + "</li>");//苹果,香蕉,桔子
write("<li>" + fruit.reverse().join() + "</li>");//桔子,香蕉,苹果
write("<li>" + fruit.valueOf() + "</li>");//桔子,香蕉,苹果(数组引用,前面已经倒序过了)
write("</ul>");
}


var fruit = new Array(3);
fruit[0] = new Array("苹果", 2);//二维数组
fruit[1] = new Array("桔子", 3);
fruit[2] = new Array("西瓜", 4);
for(var i = 0; i < fruit.length; i++)
{
for(var j = 0; j < fruit[i].length; j++)
{
document.write("fruit[" + i + "][" + j + "] = " + fruit[i][j] + "<br>");
}

document.write("<br>");
}


var str = "javascript";
var num = 1234;

with(document)
{
write(str.toUpperCase() + "<br>");//转成大写
write(num.toString().charAt(2), "<br>", "<br>");//取索引2的字符,任何元素都有toString()
write(str.substring(0,4), "<br>");//0(包含)截取到4(不包含)的位置,write方法:逗号和加号都是拼接
}


function isEmail()
{
//var emailValue = document.getElementsByName("email")[0].value; 也可以用下面那种方式取值
emailValue = document.getElementById("emailId").value;
if(emailValue.indexOf("@") == -1)//返回字符串的索引位置,没有就返回-1
{
alert("请填写正确的Email地址");
}
else
{
alert("ok");
}
}


function member(name, gender)
{
this.name = name;
this.gender = gender;
}

var m1 = new member("zhangsan", "m");//实例一个对象
var m2 = new member("lisi", "m");
var m3 = new member("wangwu", "f");

with(document)
{
write(m1.name + ":" + m1.gender + "<br>");
write(m2.name + ":" + m2.gender + "<br>");
write(m3.name + ":" + m3.gender + "<br>");
}


function member(name, gender) {
this.name = name;
this.gender = gender;
this.display = display; //指定member对象的display方法,相当于一个成员方法
}

function display() {
var str = this.name + " : " + this.gender;
document.writeln(str + "<br>");
}

var m1 = new member("zhangsan", "f");//定义对象的一种方式
var m2 = new member("lisi", "f");//加不加分号都可以,但是最佳实践加上!
var m3 = new member("wangwu", "m");

m1.display();
m2.display();
m3.display();


<script type="text/javascript">
function mOver(object) {
object.color = "red";
}

function mOut(object) {
object.color = "blue";
}
</script>
</head>
<body>
<!--
style="cursor:hand 内联样式,优先级最高"
window:整个浏览器对象,里面方法可以直接用 例如alert
onclick="window.location.href='http://www.google.com'" :外面是双引号,里面就用单引号指定
onmouseover:鼠标滑倒上面的时候
onmouseout:鼠标离开的时候
this:font对应的那个元素的对象,就是当前font对象
-->
<font style="cursor:hand"
onclick="window.location.href='http://www.google.com'"
onmouseover="mOver(this)" onmouseout="mOut(this)">欢迎访问</font>


//JS总的就两个定时器 一个 setTimeout
//setTimeout在指定时间之后执行指定的动作(JS的函数),JS内置函数
function count() {
setTimeout(sayhello(), 1000);
}

function sayhello(){
alert("a");
}
<input type="button" value="计时开始" onclick="count();">



//第二种定时器 setInterval 每隔一段时间执行动作
var sec = 0;
var timeId = setInterval("count();", 1000);//每隔1s,执行count(),在页面一加载就执行,因为是成员变量
//innerHTML : 获得元素的html文本
function count() {
document.getElementById("num").innerHTML = sec++;
}

//关窗口,刷新页面,clearInterval函数 只有这3中能使 Interval终止执行
function stopCount() {
clearInterval(timeId);//终止定时器,参数:setInterval的返回值
}
<font color="red" id="num">0</font>秒钟
<input type="button" value="停止" onclick="stopCount();">


<head>
<script type="text/javascript">
function checkPassword(object) {
if (object.value.length <= 4) {
alert("密码长度过短");

object.focus();//把鼠标焦点从新定位到输入域
object.select();//将已有的内容选中 firefox不支持
}
}
</script>
</head>
<body>
<!--
JS内置对象(基于浏览器的,不同浏览器提供的功能不一样):图像对象 导航对象(window) 窗口对象 屏幕对象 事件对象 历史对象
文件对象 描点对象 连接对象 框架对象 表单对象 位置对象
重点: 文件对象 表单对象
-->
密码:<!-- onblur:鼠标离开当前输入域 -->
<input type="password" onblur="checkPassword(this)">
</body>


//点确定就返回真,取消就返回假
if (confirm("你想继续么?"))//confirm 内置函数,这函数的返回值决定后续流程
{
window.location.href = "http://www.google.com";
} else {
alert("Bye");
}


with(document)
{
write("屏幕设定值<br>");
write("实际高度:" ,screen.availHeight, "<br>");//728 减去任务栏的高度
write("实际宽度:" ,screen.availWidth, "<br>");//1366
write("屏幕区域高度: " , screen.height, "<br>");//768
write("屏幕区域宽度:", screen.width, "<br>");//1366
}


function getEvent(event)
{
alert("事件类型: " + event.type);
}

document.write("单击...");
//document.onmousedown 整个文档对象 的 鼠标点击事件
document.onmousedown = getEvent;
</script>
<input type="button" value="我是一个按钮" id="button1">
<script type="text/javascript">

var v = document.getElementById("button1");
alert(v);
v.onclick = clickHandler;//只能写名字 不能加括号

function clickHandler()//IE:方法里不写event参数也行,firefox不行,firefox会生成一个事件对象(名字任意)
//IE:用本身产生的对象event(名字固定)
{
alert(event.type);
}


<head>
<script type="text/javascript">

var timerId;

function loadPage()
{
//setInterval:执行多次只能用setInterval
timerId = setInterval('countDown()', 1000);
}

</script>

</head>

<!-- onload:页面整体结构加载完才执行,下面的countDown() 也加载完毕 所以可以执行 -->
<body onload="loadPage();">

<script type="text/javascript">

var sec = 10;

function countDown()
{
if(sec > 0)
{
document.getElementById("num").innerHTML = sec--;
}
else
{
clearInterval(timerId);
//window下的对象 不用写 window前缀
location.href = "http://www.google.com";
}
}

</script>

<br>
<font id="num" size="7">10</font>秒钟后前往
</body>


<script type="text/javascript">

function linkGetter()
{
//links 属性: 返回当前文档的所有链接
//alert(document.links.length + "个搜索引擎");
for(var i = 0; i < document.links.length; i++)
{
alert(document.links[i]);
}
}
</script>
</head>

<body>

<h1>常用的搜索引擎</h1>

<a href="http://www.google.com">Google</a><br>
<a href="http://www.baidu.com">Baidu</a><br>
<a href="http://www.yahoo.com">Yahoo</a><br>
<a href="http://www.sogou.com">Sogou</a><br>
<a href="http://www.bing.com">Bing</a><br>

<input type="button" value="Address" onclick="linkGetter();">
</body>

  <head>
<script type="text/javascript">

function moveNext(object, index)
{
if(object.value.length == 4)
{
//form只有5个元素
//第四个输入域好后 焦点就在现在的button上面
document.forms[0].elements[index + 1].focus();
}
}

function showResult()
{
//拿到第一个form
var f = document.forms[0];

var result = "";

for(var i = 0; i < 5; i++)
{
result += f.elements[i].value;
}

alert(result);

}


</script>


</head>

<!-- document.forms[0].elements[0].focus(); 第一个form 的第一个元素 得到焦点 -->
<body onload="document.forms[0].elements[0].focus();">

<form>

<!--onkeyup:键盘事件 按下松开后触发 -->
<input type="text" size="3" maxlength="4" onkeyup="moveNext(this, 0);">-
<input type="text" size="3" maxlength="4" onkeyup="moveNext(this, 1);">-
<input type="text" size="3" maxlength="4" onkeyup="moveNext(this, 2);">-
<input type="text" size="3" maxlength="4" onkeyup="moveNext(this, 3);">

<input type="button" value="显示" onclick="showResult();" >
</form>
</body>

		<script type="text/javascript">

var today = new Date();

var expireDay = new Date();

//31天的毫秒
var msPerMonth = 24 * 60 * 60 * 1000 * 31;

//重新设置时间 当前的时间 加 一个月的时候. 也就是31天后的时间.
//cookie保存31天 31天不用重新登陆
expireDay.setTime(today.getTime() + msPerMonth);

//expireDay.toGMTString(): 返回cookie要求的时间格式. 内置方法
//这样就把cookie写到硬盘上了
document.cookie = "name=zhang;expires=" + expireDay.toGMTString();

document.writeln("cookie已经写到硬盘上了");

document.writeln("内容是:" + document.cookie);

document.writeln("有效日期是:");

document.writeln(expireDay.toGMTString());
</script>


//函数的本源是一个对象.

//如果此时传两个参数 则一一对应,第二个参数不接收
function add(number)
{
alert(number + 20);
}

/* 这种写法和上面的写法等价.
* 上面的写法会转换成这种.
* add 指向对象的引用(函数)
*
* 很多框架中都用这种方式定义.
* JS中因为没有方法的重载
var add = function(number)
{
alert(number);
}
*/

function add(number, number1)
{
alert(number);
alert(number1);//传一个参数的时候 会打印:Undefined 类型 值为undefined(Undefined类型只有一种值,类似boolean只有两种)
alert(number+20);
}

/*
* 这种写法和上面的写法等价
* 上上的add 的引用就替换成此时的add了.
* 两个参数的方法,可以用一个参数调用,一一对应,传一个参数就和第一个位置的参数对应
var add = function(number, number1)
{
alert(number + 30);
}
*/
add(10);//只执行最后一个add方法.


<script type="text/javascript">
//add(20);

//Function对象(F大写):接收参数是不定长的,对于Function对象,所有的参数都是字符串类型,最后一个参数为方法体,前面的为参数

//自定义函数的本质:声明一个Function对象,函数的 名字 指向对象的引用
var add = new Function("number", "number1", "alert(number + number1);");

//add 指向新的引用
var add = new Function("number", "alert(number + 20);");

add(10, 30);
</script>


function add(number1, number2)
//每个函数都有隐式的对象 arguments
{
alert(arguments.length);//实际赋参的个数.
alert(arguments[0]);//实际传的值 与 方法头的形参没关系
alert(arguments[1]);
alert(arguments[2]);
}
//add(2, 3, 4);

function add2()
{
//很多框架都通过这种方式 实现重载
if(1 == arguments.length)
{
alert(arguments[0]);
}
else if(2 == arguments.length)
{
alert(arguments[0] + arguments[1]);
}
else if(3 == arguments.length)
{
alert(arguments[0] + arguments[1] + arguments[2]);
}
}


add2(3);
add2(3, 4);
add2(3, 4, 5);

  <head>
<script type="text/javascript">
function validate()
var num = document.getElementsByName("number")[0];

if(num.value.length < 1)
{
alert("输入不能为空!");

num.focus();

return false;
}

//判断每一个是否都数字
for(var i = 0; i < num.value.length; i++)
{
var param = "0123456789";
//param.indexOf 全局函数
if(param.indexOf(num.value.charAt(i)) == -1)
{
alert("输入必须为数字");

num.focus();

return false;
}
}

//parseInt:全局函数
if(parseInt(num.value) < 5 || parseInt(num.value) > 15)
{
num.value = 10;
}

return true;
}



</script>

</head>

<body>
<!-- onsubmit:提交的时候做检查 -->
<form action="end.jsp" name="form1" method="post" onsubmit="return validate();">
请输入数字 (5——15)<input type="text" name="number"><br>
<input type="submit" value="submit">
</form>
</body>


var value = <%= request.getParameter("number")%>;//看执行时机 tomcat解析jsp的时候把值直接放在var value = 后面
//传递到客户端再执行下面的alert
alert(value);

function checkAll()
{
//获得所有复选框
var s = document.getElementsByName("check");
//获得全选的复选框(就上面那个框)
var m = document.getElementsByName("all")[0];

//如果上面那个框选中,下面就让全部选中
if(m.checked)
{
for(var i = 0; i < s.length; i++)
{
s[i].checked = true;
}
}
else
{
//上面那个不选 下面都不选
for(var i = 0; i < s.length; i++)
{
s[i].checked = false;
}
}
}


//基于事件,每单击展开或收缩就产生一个事件
function turn()
{
with(document)
{
//获得按钮
var m = getElementById("change");
//获得表格对象
var n = getElementById("table");

if(m.value == "收缩")
{
//要把表格收起来,
//操作的对象.style(属性).对象可用的样式
n.style.display = "none";//表格不显示出来
m.value = "展开";//把按钮名字改为展开
}
else
{
n.style.display = "block";//展开
m.value = "收缩";
}
}
}

 <table border="1" align="center" width="60%">

<tr>
<td>
<input type="checkbox" name="all" onclick="checkAll();">全选
</td>

<td>
<input type="button" value="收缩" id="change" onclick="turn();">
</td>

</tr>

</table>

<% int number = Integer.parseInt(request.getParameter("number")); %>

<table border="1" align="center" width="60%" id="table">

<% for(int i = 1; i <= number; i++)
{%>

<tr>
<td>
<input type="checkbox" name="check">
</td>

<td>
<%= i %>
</td>
</tr>
<%} %>

</table>

http://www.ngui.cc/el/4893643.html

相关文章

JS学习笔记_基础篇_2

var add function(num, num2, num3) { alert(num num2 num3); } //add 指向函数对象的引用. add.lenth:期望接收的参数个数. arguments.length:实际接收的参数个数 alert(add.length); add(1, 2, 3); //此时希望接收参数个数为0 var add2 function() { …

Ajax_原生

var xmlHttpRequest null; //声明一个空对象以接收XMLHttpRequest对象 function ajaxSubmit() { //如果不为null 或者不为 Undefined 就为true if(window.ActiveXObject) // IE浏览器,当初微软先在IE中非标准实现(ActiveX实现,ActiveX IE特有),后来其他浏览器用标准的方式实…

阿呆,生日快乐

今天阿呆生日 幸福 快乐 坚信会有一天阳光下微笑的 [img]http://dl.iteye.com/upload/attachment/531011/e91c7cec-f203-3466-ab5b-b3e594f97287.png[/img] 通过陈同学认识了阿呆&#xff0c;第一次的聊天 [img]http://dl.iteye.com/upload/attachment/531013/5d0147bc-d4a8-3…

Google MapSite

公司要做SEO 研究了一下mapsite HttpServletResponse response ServletActionContext.getResponse(); Document document DocumentHelper.createDocument(); Element rootElement null; if(this.spider 0){//百度不需要namespace rootElement document.addElement(&q…

jQuery_基础2

if(document.getElementById("hello")) { document.getElementById("hello").style.color "red";//如果没上面的if判断 ,没对应的id 会报错,get不到dom对象 } <script type"text/javascript"> alert("test!!");…

jQuery_基础3

<script type"text/javascript" src"jquery-1.4.4.js"></script> <script type"text/javascript"> $(function() { var p $("p");//有这样一种命名规范:jquery对象命名 $p 加一$符号 表示jquery对象 不加表示…

吃“软饭”的兄弟,你们过得好吗?(转)

看到此标题&#xff0c;是不是雷着了兄弟&#xff0c;此“软饭”非彼“软饭”。------软件行业 又一次夜深&#xff0c;困&#xff0c;睡不着。爬起来&#xff0c;打开电脑。写下了这些东西。以此纪念&#xff0c;缅怀那些曾经的过往。都说男人也有生理周期&#xff0c;每个月也…

Spring_定时任务_转

这几天因为工作的需要&#xff0c;用到了spring的定时任务的功能&#xff0c;网上查资料&#xff0c;并且实际运用了一下&#xff0c;觉得spring还是很智能化的,只需要配置一下配置文件就可以了&#xff0c;下面的这篇文章我觉得还是很好的&#xff0c;摘录下来&#xff0c;供以…

HTML_Css_张龙篇

css.css文件: /*p元素用classright 靠右对齐 p元素用classcenter 局中对齐*/p.right {text-align: right}p.center {text-align: center}/*对所有的p只用left对齐**/p {text-align: left}/*所有的h1-h6:用蓝色样式*/h1,h2,h3,h4,h5,h6 { color: blue }/*页面中所有classcent…

精通CSS.DIV网页样式与布局_第二章

<html><head><title>class选择器</title><style type"text/css"><!--.one{ color:red; /* 红色 */ font-size:18px; /* 文字大小 */}.two{ color:green; /* 绿色 */ font-size:20px; /* 文字大小 */}.three{ color:cyan; /*…