javascript基础笔记

最新推荐文章于 2024-10-09 00:58:21 发布

gaoge19861207

最新推荐文章于 2024-10-09 00:58:21 发布

阅读量711

点赞数

分类专栏： javascript 文章标签： javascript button 浏览器 input function date

本文链接：https://blog.csdn.net/gaoge19861207/article/details/4709725

版权

javascript 专栏收录该内容

2 篇文章 0 订阅

订阅专栏

一：javascript语法三种
1:基本语法
2:DOM：Document Object Model 把html文档当成一个界面
3:BOM：Browse Object Model 把浏览器当成一个界面

二：
1:
<script Language="JavaScript">
document.write("<br>会加粗的字体</br>");
</script>
//先将字符串原封不动的打印出来，然后再交给浏览器解析，所以字体就会被加粗。
2:多段javascript代码变量可以共用：如
<script Language="JavaScript">
var greeting;
greeting = "welcome to the js";
</script>
<script Language="JavaScript">
document.write(greeting);
</script>

3:
IE javascript调试设置
打开IE-工具—Internet选项-高级：
禁用脚本调试不打勾
显示每个脚本错误的通知打勾

4：javascript变量，数组的定义和使用
<script Language="JavaScript">
var arr = new Array(3);
arr[0] = 1;
arr[1] = 2;
arr[2] = 3;
arr[3] = 4;//可以访问到第四个元素
</script>

5:javascript逻辑运算符
<script Language="JavaScript">
var result1,result2,result3;
result1 = true && false;
result2 = true || false;
result3 = !true;
</script>

6:javascript链接运算符(+)

7:javascript substring函数
<script Language="JavaScript">
var h ="welcome to the JS";

</script>

8:javascript 三目运算符
<script Language="JavaScript">
var result1 = (3>4) ?　”Y“　：　”N“；

</script>

9:javascript Date(javascript的内置对象)
<script Language="JavaScript">
var today = new Date();
var hour = today.getHours();//Date类的方法
if(hour<12)
{
  document.write("good morning");
}else if(hour == 12)
{
  document.write("good noon");
}else
{
  document.write("good afternoon");
}

</script>

10:javascript while循环
<script Language="JavaScript">
var i = 1;
while(i<10)
{
document.write(i+"<br>");
i++;
}
</script>

11:javascript switch case 语句
<script Language="JavaScript">
var i = 1;
switch(i)
{
  case 1:
   document.write("1");
   break;
  case 2:
   document.write("2");
   break;
  default:
   document.write("default");
   break;
}
</script>

12:javascript for 语句
<script Language="JavaScript">
var arr = new Array(1,2,3,4);
for(i=0;i<arr.lengt;i++)
{
document.write(arr[i] + "<br>");
}
</script>

13:javascript 字符串长度
<script Language="JavaScript">
var str = "Hello World";
var i =0;
while(i<str.length)
{
document.write(str.charAt(i) + "<br>");
i++;
}

</script>

三：javascript事件处理
1：onFocus事件:当表单元素如text ,select,textarea等获得焦点的时候
<form name="test">
<input type="text" name="username" value="SXT"
onFocus="JavaScript:alert(document.test.username.value)">
</form>

2：onBlur事件:当表单元素如text ,select,textarea等失去焦点的时候
<form name="test">
<input type="text" name="username" value="SXT"
onFocus="JavaScript:alert(document.test.username.value)">
</form>

3：onChange事件:当表单元素如text ,select,textarea的值被改变且失去焦点的时候
<form name="test">
<input type="text" name="username" value="SXT"
onFocus="JavaScript:alert(document.test.username.value)">
</form>

4：onclick事件:当鼠标点击某个元素的时候
<form name="test">
<img src="xsd.jpg" οnclick="alert('Ok')"><img>
</form>

5：onLoad 和 onUnload事件，onLoad是当一个document被加载的时候触发该事件，onUnload是当一个document要消失的时候出发事件
<body onLoad="javascript:alert('hello');" onUnload="javascript:alert('bye-bye');">
</body>

6：onmouseover 和 onmouseout事件，onmouseover 是当一个鼠标进入某个对象的时候触发该事件，onmouseout是当一个鼠标移动某个对象的时候触发该事件
<img src="xsd.jpg" onmouseover ="javascript:alert('over');" οnmοuseοut="javascript:alert('out');">
</img>

7:onSelect事件，当form表单中的元素被选中的时候，如当文本框中的值被选中的时候触发该事件

8:onSubmit事件，当点击form表单中的提交按钮的时候出发该事件
<form name="test" action="1.htm" οnsubmit="alert('form表单下一步提交')">
<input type="submit" value="OK">
</form>

四：javascript的三种对话框
javascript
1:警示框 alert
2:询问框

3:确认框

if(confirm("你确认删除文件吗？"))
{
document.testa.sumbit();
}
}

</script>

五：javascript的内置对象

1：this(指的是当前标签)

if(obj.value=="")
{
alert("空值");
}
else
{
alert(obj.value);
}

}
</script>

<img src="xsd.jpg" οnclick="javascript:alert(this.src);">//这里的this指的是<img签

2:for in对象
<script Language="JavaScript">
a = new Array("alex","mark","sean");
for(eee in a)
{
document.write(eee + "--");//打印结果是0--
document.write(a[eee] + "<br>");//打印结果是alex
}
}
</script>

3：with对象

4:new对象
<script Language="JavaScript">
var today = new Date();
alert(today.getDate());
</script>

六：窗口中的对象和元素
widow内置对象（window对象指的是当前的浏览器窗口）
1:
<script Language="JavaScript">
window.status = "hello,here";//status指的是当前窗口的最下方的状态栏
</script>

2:
<script Language="JavaScript">
//window.open("1.htm","newWin","toolbar=no,left=200,top=100,menubar=no,width=100,height=100,resizable=no");//newWin新窗口的名字，toolbar是浏览器上的工具栏(没有),menubar是浏览器上的菜单栏（没有）
window.open("1.htm");
</script>

3：在父窗口中关闭子窗口
<script Language="JavaScript">
var abc = window.open("1.htm","newWin","toolbar=no,left=200,top=100,menubar=no,width=100,height=100,resizable=no");

</script>
<input type="button" οnclick="javascript:abc.close();" value="关闭">

4:
window.location 和 document.location(两者指的都是浏览器中地址栏的内容)
<script Language="JavaScript">
alert(window.location);
alert(document.location);

</script>

5:
32.htm
<script Language="JavaScript">
function goTo()
{
window.location="33.htm";
}

</script>
<input type="button" value="转向" οnclick="javascript:goTo();">

33.htm
<script Language="JavaScript">
function goBack()
{
history.back();//返回上一页(即32.htm)，相当于浏览器工具栏中的后退按钮,history就是浏览历史
}

</script>