JavaScript学习笔记第二季

最新推荐文章于 2024-10-07 21:15:54 发布
最新推荐文章于 2024-10-07 21:15:54 发布
阅读量923 收藏
点赞数 2
分类专栏： javascript
版权声明：本文为博主原创文章，遵循 CC 4.0 BY-SA 版权协议，转载请附上原文出处链接和本声明。
本文链接：https://blog.csdn.net/zhujiaxing666666/article/details/8794968
版权
document.write("<b>冯绍峰</b>");


调试：
   IE-》工具-internet选项-高级，调一下“禁止脚本调试”和“显示每个脚本错误的通知”；


定义数组：var arr=new Array(3);不是[]，而是()
arr[0]=1;
arr[1]=2;
arr[2]=2;
arr[3]=3;
arr[4]=4;
document.write(arr[4]);//4
document.write(arr.length);//5
解析：Array(3)里的3是没用的，
javascript里的数组是这样的：里面的下标“1、2、3……”是变量，后边的值
就是变量的值，比如：arr[0]=1;0是变量，1是值。


var arr=new Array(1,2,3,4,22);


var s;
s="hello boy and girl";
document.write(s.substring(4,7));//0 b
s.charAt(0);//h


var t=new Date();
var h=t.getHours();
if(h<12){document.write("morning");}
else if(h==12){document.write("noon");}
else document.write("after noon");






<html>
<head>
<script type="text/javascript">
function test(a)//弱类型的，没有返回值
{
return 2*a;
}
</script>
</head>
<body>
<script type="text/javascript">
alert(test(3));
</script>
</body>
</html>




事件处理：
onFocus:当用户为了输入而选择select、text。textarea等时；
onBlur ：在select,text,testarea失去焦点时；
onChange:在select，text，textarea的值被改变且失去焦点时；
onClick:在一个对象被鼠标点中时（button、checkbox、radio、link、reset、submit、text、、textarea）；
onLoad:出现在一个文档完成对一个窗口的载入时；
onUnload:当用户退出一个文档时；
onMouseOver:鼠标被移动到一个对象上时；
onMourseOut:鼠标从一个对象上移开时；
onSelect:当form对象中的内容被选中时；
onSubmit：提交按钮提交一个表单时；




<button οnclick=" javascript:alert('s');">sf</button>//javascript：可以不要


<html>
<head>
<form name="form1">
<input type="text" name="s" value='ss' onFocus="alert(document.form1.s.value);">
</form>
</body>
</html>


<html>
<head>
<form name="form1">
<img src="xx.jpg" οnclick="alert('a');"></img>
</form>
</body>
</html>


<html>
<head>
<body οnlοad="alert('welcom')" οnunlοad="alert('bye')">
</body>
</html>




<html>
<head>
<form name="form1">
<img src="xx.jpg" οnclick="alert('a');" οnmοuseοver="alert('over');" οnmοuseοut="alert('out');"></img>
</form>
</body>
</html>




<html>
<head>
<form name="form1">
<input type="text" οnselect="alert();" value="sdfsdfs">
</form>
</body>
</html>




<html>
<head>
<form name="form1" action="1.htm" οnsubmit="alert();">//点确定就跳转了，
//οnsubmit="false"就不会跳转，οnsubmit="true"跳转
<input type="submit" value="tiajiao"/>
</form>
</body>
</html>








<html>
<head>
<script type="text/javascript">
function test()
{
if(document.form1.n.value=="")
{
alert("不能为空");
return false;
}
else return true;
}
</script>
</head>
<body>
<form name="form1" action="1.htm" οnsubmit="return test()">
<input type="text" name="n" />
<input type="submit" value="tiajiao"/>
</form>
</body>
</html>


或者：
<html>
<head>
<script type="text/javascript">
var  test=function()
{
if(document.form1.n.value=="")
{
alert("不能为空");
return false;
}
else return true;
}
</script>
</head>
<body>
<form name="form1" action="1.htm" οnsubmit="return test()">
<input type="text" name="n" />
<input type="submit" value="tiajiao"/>
</form>
</body>
</html>




prompt的用法：
<html>
<head>
<script type="text/javascript">
var userName=prompt("请输入您的名字:");
document.write(userName);
</script>
</head>
<body>
</body>
</html>


cofirm的用法：
<html>
<head>
<script type="text/javascript">
var c=function()
{
if(confirm("确定删除吗？"))
{
document.form1.submit();
}
}
</script>
</head>
<body>
<form name="form1" action="1.htm">
<button οnclick="c()">删除</button>
</body>
</html>


8、
 Javascript的内置对象：
this：当前对象(所有的标签都是对象)
for..in：in后跟一个对象，对此对象中的所有元素循环一次
with：为一段代码建立一个缺省的对象，任何无对象的属性引用，都将使用该缺省的对象
new：用于生成一个新的对象




<html>
<head>
<script type="text/javascript">
var check=function(o)
{
if(o.value=="")
{
alert("不能为空");
}else alert(o.value);
} 
</script>
</head>
<body>
<img src="1.JPG" οnclick="alert(this.src);">
<form name="form1">
<input type="text" name="d" οnclick="check(this);">
</form>
</body>
</html>


<html>
<head>
<script type="text/javascript">
a=new Array("sf","23","nihao",13);
for(eee in a)//与java不一样,eee是属性的名字，是下标值
{
document.write(eee+"--->"+a[eee]+"<br>");
}
</script>
</head>
<body>
</body>
</html>




<html>
<head>
<script type="text/javascript">
with(document)//下边的默认的调用document对象
{
write("document的方法");
write("too");
}
</script>
</head>
<body>
</body>
</html>






2、
 窗口中的对象和元素
window:
  当前窗口；新开窗口；通过本地窗口控制新开窗口。
location：
   获取或设置现有的文档的URL
history:
   先前访问过的URL的历史列表
   常用方法：back(),go(number)
document：当前的文档对象




<html>
<head>
<script type="text/javascript">
window.status="helloFFFFFFFFFFFFFFFFFFFFFFFFFFFFFFFFF";


</script>
</head>
<body>
<button οnmοuseοver="window.status='heihei';">test</button>//观察左下方的变化
</body>
</html>






<html>
<head>
<script type="text/javascript">
while(1){//不停的弹
window.open("1.htm");}//弹出一个新窗口
</script>
</head>
<body>
</body>
</html>






********************************************************


<html>
<head>
<title>这是1.html</title>
<script type="text/javascript">
window.open("1.htm","newWin","toolbar=no,left=200,top=100,munubar=no,width=100,height=100,resizable=no");//newWin是新窗口的名字，resizable表示是否可以改变窗口大小。
</script>
</head>
<body>


</body>
</html>






<html>
<head>


<title>这是1.htm</title>
<script type="text/javascript">


</script>
</head>
<body οnunlοad="window.open('1.htm')">
哈哈
</body>
</html>
**********************************************************
<html>
<head>
<script type="text/javascript">
</script>
</head>
<body>
<button οnclick="window.close();">关闭此窗口</button>
</body>
</html>






<html>
<head>
<title>这是1.html</title>
<script type="text/javascript">
var abc=window.open("1.htm","newWin","toolbar=no,left=200,top=100,munubar=no,width=100,height=100,resizable=no");//newWin是新窗口的名字，resizable表示是否可以改变窗口大小。
</script>
</head>
<body>
<button οnclick="abc.close();">关闭子窗口</button>
</body>
</html>




<html>
<head>
<title>这是1.html</title>
<script type="text/javascript">
alert(window.location);
alert(document.location);//这两句是一样的
</script>
</head>
<body>
</body>
</html>




******************************
<html>
<head>
<title>这是a.html</title>
<script type="text/javascript">
</script>
</head>
<body>
<button οnclick="window.location='1.htm';">跳转</button>
</body>
</html>


<html>
<head>
<title>这是1.html</title>
<script type="text/javascript">
</script>
</head>
<body>
<button οnclick="history.back();">返回</button>//相当于点返回按钮
</body>
</html>


******************************

3、
  下拉列表的javascript简单实现
<html>
<head>
<title>这是a.html</title>
<script type="text/javascript">
function changeDrop2()
{
if(document.form1.drop1.selectedIndex==0)
{
document.form1.drop2.length=1;
document.form1.drop2.selectedIndex=0;
document.form1.drop2.options[0].text="您还没选择省市";
document.form1.drop2.options[0].value="----";
}
if(document.form1.drop1.selectedIndex==1)
{
document.form1.drop2.length=2;
document.form1.drop2.selectedIndex=0;
document.form1.drop2.options[0].text="广州";
document.form1.drop2.options[0].value="广州";
document.form1.drop2.options[1].text="湛江";
document.form1.drop2.options[1].value="湛江";
}
if(document.form1.drop1.selectedIndex==2)
{
document.form1.drop2.length=2;
document.form1.drop2.selectedIndex=0;
document.form1.drop2.options[0].text="开封";
document.form1.drop2.options[0].value="开封";
document.form1.drop2.options[1].text="许昌";
document.form1.drop2.options[1].value="许昌";
}
if(document.form1.drop1.selectedIndex==3)
{
document.form1.drop2.length=2;
document.form1.drop2.selectedIndex=0;
document.form1.drop2.options[0].text="武汉";
document.form1.drop2.options[0].value="武汉";
document.form1.drop2.options[1].text="黄冈";
document.form1.drop2.options[1].value="黄冈";
}
}
</script>
</head>
<body><form name="form1">
省市：<select name="drop1" size="1" οnchange="changeDrop2();">
<option value="null">选择省市</option>
<option value="广东省">广东省</option>
<option value="河南省">河南省</option>
<option value="湖北省">湖北省</option>
</select><br>
城市：<select name="drop2" size="1">
<option value="">----</option>
<option value="">----</option>
</select>
</form>
</body>
</html>


4、  
  span和div的用法，不用的用户体验
<HTML>
<head>
<script type="text/javascript">
var flag=false;


function check(ss){
if(ss.length>7||ss.length<3){
document.getElementById("usernameErrdiv").innerHTML="<font color='red'>必须是


4~6位！</font>";


document.getElementById("usernameErrspan").innerHTML="<font color='red'>必须是


4~6位！</font>";
flag=false;
}
else 
{
document.getElementById("usernameErrdiv").innerHTML="";
document.getElementById("usernameErrspan").innerHTML="";
flag=true;
}
}


function sub()
{
if(flag)return true;
else return false;
}
</script>
</head>
<body>
<form name="form1" οnsubmit="return sub();">
<input type="text" name="username" size="30" maxlength="10" οnblur="check


(this.value.toLowerCase());">
<span id="usernameErrspan"></span><!--在后边显示,一般用此法!!-->
<div id="usernameErrdiv"></div><!--在下边显示-->
<input type="submit" value="提交">
</form>
</body>
</HTML>


5、
  帧iframe:在网页内挖出一个空填放另一个网页
<HTML>
<head>
<script type="text/javascript">
</script>
</head>
<body>
<iframe name="i" width="50%" height="50%" src="1.htm"/>
</body>
</HTML>




zhujiaxing666666
关注
专栏目录
javascript学习笔记
11-24
学习JavaScript时，了解这些基础知识是至关重要的。随着深入学习，你将接触到更高级的概念，如闭包、异步编程（回调函数、Promise、async/await）、模块系统以及现代框架如React、Vue和Angular的使用。JavaScript的...
JavaScript学习笔记
08-16
### JavaScript学习笔记精要 #### 一、JavaScript概述 JavaScript是一种重要的编程语言，在现代Web开发中扮演着不可或缺的角色。它最初由Netscape公司的Brendan Eich在1995年开发完成，并且最初的名字叫做...
尚硅谷JavaScript高级学习笔记
javaThinker的专栏
03-08 1144
JavaScript中函数是对象。我们后续描述构造函数的内存模型时，会将构造函数称为构造函数对象。typeof 运算符来查看值的类型，它返回的是类型的字符串值 会做数据转换 输出： 每个函数都有一个prototype属性，它默认指向一个0bject空对象(即称为:原型对象) 给原型对象添加属性、方法，函数的所有实例对象自动拥有原型中的属性(方法) 16、显式原型和隐式原型 和 中保存的都是原型对象的地址值。Fun的prototype、f的__proto__属性什么时
Javascript入门学习笔记
weixin_61370021的博客
04-27 4679
JS入门学习笔记，JavaScript是目前web开发中不可缺少的脚本语言，js不需要编译即可运行，运行在客户端，需要通过浏览器来解析执行JavaScript代码。
javaScript学习笔记（一）js基础
热门推荐
一叶知秋
09-21 13万+
================================= 公众号 关注一波 （一叶知秋博客） 不定期分享视频资料 一、简介 1、概述： JavaScript是目前web开发中不可缺少的脚本语言，js不需要编译即可运行，运行在客户端，需要通过浏览器来解析执行JavaScript代码。 诞生于1995年，当时的主要目的是验证表单的数据是否合法。 Java...
JavaScript基础第一弹学习笔记
qq_55961367的博客
07-13 1754
JavaScript是一种运行在客户端（浏览器）的编程语言，实现人机交互效果。
《高性能JavaScript》学习笔记
Leon_Chenl的博客
05-21 1119
当DOM的变化影响了元素的几何属性（宽和高）——比如改变边框宽度或给段落增加文字，导致行数增加——浏览器需要重新计算元素的几何属性，同样其他元素的几何属性和位置也会因此受到影响。一旦空闲，队列中的下一个任务就被重新提取出来并运行。并不是所有的DOM变化都会影响几何属性，例如改变一个元素的背景色不会影响它的宽和高，这种情况下只会发生一次重绘，因为元素的布局并没有改变。对象成员包括属性和方法，当一个被命名的成员引用了一个函数，该成员就被称为一个“方法”，相反，引用了非函数类型的成员就被称为“属性”。
javascript学习笔记——上
weixin_64574004的博客
10-07 941
​ 1，HTML定义了网页的内容，CSS定义了网页的布局和网页中内容的样式，而JavaScript控制了网页的行为。​ 2，javascript是一种脚本语言。​ 3，javascript的主要使用范围​ **JavaScript：直接写入HTML输入流：**ducument.write(“HTML语句”)​ **JavaScript：对事件的反应：**onclick​ **JavaScript：改变HTML内容：**DOM。
JavaScript 学习笔记（第一天）
weixin_74155781的博客
12-30 1479
初学者学js
小白JavaScript学习笔记----JavaScript 进阶
weixin_51877011的博客
05-05 1965
垃圾回收机制(Garbage Collection) 简称 GCJS中内存的分配和回收都是自动完成的，内存在不使用的时候会被垃圾回收器自动回收。正因为垃圾回收器的存在，许多人认为JS不用太关心内存管理的问题但如果不了解JS的内存管理机制，我们同样非常容易成内存泄漏（内存无法被回收）的情况不再用到的内存，没有及时释放，就叫做内存泄漏面向过程就是分析出解决问题所需要的步骤，然后用函数把这些步骤一步一步实现，使用的时候再一个一个的依次调用就可以了。举个栗子：蛋炒饭。
JavaScript 学习笔记 超详细（b站pink老师）
weixin_59531237的博客
05-10 1万+
1. JavaScript （是什么？是一种运行在客户端（浏览器）的编程语言，实现人机交互效果。2. 作用（做什么？– 网页特效 (监听用户的一些行为让网页作出对应的反馈)– 表单验证 (针对表单数据的合法性进行判断)– 数据交互 (获取后台的数据, 渲染到前端)– 服务端编程 (node.js)3. JavaScript的组成（有什么？
Javascript学习笔记二 之 变量
12-11
一.关于Javascript变量声明 在Javascript中，声明一个变量 var a=1; 也可以直接 a=1; 这两种表达是有区别的， 一个是当前作用域的局部变量，另一个则是当前作用域的全局变量；... // error 二.Javascript变量作用域
这样覆写Object类的toString方法对吗
zhujiaxing666666的专栏
04-10 1212
这些覆写Object类的toString方法对吗？ Object.prototype.toString=function() { alert("s"); } var o=new Object(); //s o.toString(); 下边是论坛里回复我的 回复于： 2013-04-07 15:58:15 不要覆
javascript学习笔记(未完待续)
zhujiaxing666666的专栏
04-04 1158
1、因为javascript是弱类型的语言，所以不用定义类型。 2、定义函数的方法：   第一种：    function add(x,y){return x+y;}    第二种：定义匿名函数（主流的方法）    function(x,y){return x+y;} 例：     var myfun=function(x,y){return x+y;} /
没有document.getElementByName
zhujiaxing666666的专栏
08-19 899
首先声明的是： document.getElementByName方法没有。document.getElementsByName得到的是标签的数组 document.getElementId得到的是某一个标签 <form name="form_write"> <input name="content" type="text"> 然而可以用很浅显
JavaScript-Garden/
zhujiaxing666666的专栏
04-16 757
http://bonsaiden.github.io/JavaScript-Garden/
基于java的贝儿米幼儿教育管理系统答辩PPT.pptx
最新发布
11-04
基于java的贝儿米幼儿教育管理系统答辩PPT.pptx
JavaScript学习笔记：从基础到DOM编程
"这是一份全面的JavaScript学习笔记，涵盖了从CSS样式表基础到JavaScript语法、DOM编程等多个方面，旨在帮助读者深入理解并掌握JavaScript语言。" 在这份笔记中，作者首先介绍了CSS样式表的基本概念，包括什么是CSS...
评论
添加红包

请填写红包祝福语或标题

个

红包个数最小为10个

元

红包金额最低5元

当前余额3.43元 前往充值 >
需支付：10.00元
成就一亿技术人!
领取后你会自动成为博主和红包主的粉丝 规则
hope_wisdom
发出的红包
实付元
使用余额支付
点击重新获取
扫码支付
钱包余额 0

抵扣说明：

1.余额是钱包充值的虚拟货币，按照1:1的比例进行支付金额的抵扣。
2.余额无法直接购买下载，可以购买VIP、付费专栏及课程。

余额充值