文档章节

JS入门学习笔记

久伴旧伴
 久伴旧伴
发布于 2016/12/06 17:03
字数 1285
阅读 7
收藏 0

 

1.JavaScript 是脚本语言.

2.JavaScript:写入 HTML 输出展示

            <script>

            document.write("<h1>这是一个标题的文字</h1>");

            document.write("<p>这是一段段落文字</p>");

            </script>

3.JavaScript:对事件作出反应

            <!-- 按钮的点击事件 —>

            <button type="button" onclick="alert('Welcome!')">按钮名称</button>

4.JavaScript:改变 HTML 内容

            <p id=“demo” class = “yanxue">

            JavaScript 能改变 HTML 元素的内容。{{kkk}}

            </p>

 

            <script>

            function myFunction()

            {

            x=document.getElementById("demo");  // 找到元素

            x.innerHTML="Hello JavaScript!";    // 改变内容

            }

            </script>

 

            <button type="button" onclick="myFunction()">点击这里</button>

 

isNaN(x)不是数字 

HTML 中的脚本必须位于 <script> 与 </script> 标签之间。

脚本可被放置在 HTML 页面的 <body> 和 <head> 部分中。

 

 

如果在文档已完成加载后执行 document.write,整个 HTML 页面将被覆盖

 

 

try 语句测试代码块的错误。

catch 语句处理错误。

throw 语句创建自定义错误。

调错:

<script>
var txt="";
function message()
{
try
  {
  adddlert("Welcome guest!");
  }
catch(err)
  {
  txt="There was an error on this page.\n\n";
  txt+="Error description: " + err.message + "\n\n";
  txt+="Click OK to continue.\n\n";
  alert(txt);
  }
}
</script>

 

 

 

 

通过可编程的对象模型,JavaScript 获得了足够的能力来创建动态的 HTML。

  • JavaScript 能够改变页面中的所有 HTML 元素
  • JavaScript 能够改变页面中的所有 HTML 属性
  • JavaScript 能够改变页面中的所有 CSS 样式
  • JavaScript 能够对页面中的所有事件做出反应

 

查找 HTML 元素

  • 通过 id 找到 HTML 元素       var x=document.getElementById("intro");
  • 通过标签名找到 HTML 元素      
     

    本例查找 id="main" 的元素,然后查找 "main" 中的所有 <p> 元素:

    var x=document.getElementById("main”);

    var y=x.getElementsByTagName("p”);--

  • 通过类名找到 HTML 元素

 

 

 

根据id改变了 <img> 元素的 src 属性

<img id="image" src="smiley.gif">

<script>
document.getElementById("image").src="landscape.jpg";
</script>

 

改变 元素的样式

document.getElementById(id).style.property=new style

document.getElementById("p2").style.color=“blue”;

 

 

onload 和 onunload 事件

onload 和 onunload 事件会在用户进入或离开页面时被触发。

onload 事件可用于检测访问者的浏览器类型和浏览器版本,并基于这些信息来加载网页的正确版本。

onload 和 onunload 事件可用于处理 cookie。

 

 

onchange 事件

onchange 事件常结合对输入字段的验证来使用。当用户改变输入字段的内容时。

<script>

function myFunction()

{

var x=document.getElementById("fname");

x.value=x.value.toUpperCase();

}

</script>

</head>

<body>

 

请输入英文字符:<input type="text" id="fname" onchange="myFunction()”>   输入框

<p>当您离开输入字段时,会触发将输入文本转换为大写的函数。</p>

 

 

onmouseover 和 onmouseout 事件

onmouseover 和 onmouseout 事件可用于在用户的鼠标移至 HTML 元素上方或移出元素时触发函数。

 

 

onmousedown、onmouseup 以及 onclick 事件

onmousedown, onmouseup 以及 onclick 构成了鼠标点击事件的所有部分。首先当点击鼠标按钮时,会触发 onmousedown 事件,当释放鼠标按钮时,会触发 onmouseup 事件,最后,当完成鼠标点击时,会触发 onclick 事件。

 

 

 

创建新的 HTML 元素

 

这段代码创建新的 <p> 元素:

var para=document.createElement("p");

如需向 <p> 元素添加文本,您必须首先创建文本节点。这段代码创建了一个文本节点:

var node=document.createTextNode("这是新段落。");

然后您必须向 <p> 元素追加这个文本节点:

para.appendChild(node);

最后您必须向一个已有的元素追加这个新元素。

这段代码找到一个已有的元素:

var element=document.getElementById("div1");

这段代码向这个已有的元素追加新元素:

element.appendChild(para);

 

 

 

 

使用函数来构造对象:

function person(firstname,lastname,age,eyecolor)
{
this.firstname=firstname;
this.lastname=lastname;
this.age=age;
this.eyecolor=eyecolor;
}

如果逻辑对象无初始值或者其值为 0、-0、null、""、false、undefined 或者 NaN,那么对象的值为 false。否则,其值为 true(即使当自变量为字符串 "false" 时)!

 

 

 Math 对象

Math.round(4.7)  一个数进行四舍五入

Math.random()   返回一个介于 0 和 1 之间的随机数

Math.floor(Math.random()*11)    floor() 方法和 random() 来返回一个介于 0 和 10 之间的随机数

 

算数值

JavaScript 提供 8 种可被 Math 对象访问的算数值:

  • 常数
  • 圆周率
  • 2 的平方根
  • 1/2 的平方根
  • 2 的自然对数
  • 10 的自然对数
  • 以 2 为底的 e 的对数
  • 以 10 为底的 e 的对数

这是在 Javascript 中使用这些值的方法:(与上面的算数值一一对应)

  • Math.E
  • Math.PI
  • Math.SQRT2
  • Math.SQRT1_2
  • Math.LN2
  • Math.LN10
  • Math.LOG2E
  • Math.LOG10E

 

 

Window 对象

所有浏览器都支持 window 对象。它表示浏览器窗口。

所有 JavaScript 全局对象、函数以及变量均自动成为 window 对象的成员。

全局变量是 window 对象的属性。

全局函数是 window 对象的方法。

 

 

  • window.open() - 打开新窗口
  • window.close() - 关闭当前窗口
  • window.moveTo() - 移动当前窗口
  • window.resizeTo() - 调整当前窗口的尺寸

 

  • screen.availWidth - 可用的屏幕宽度
  • screen.availHeight - 可用的屏幕高度         document.write("可用宽度:" + screen.availWidth);

 

 

location.assign() 方法加载新的文档。

 

<script>

function newDoc()

{

window.location.assign("http://www.w3school.com.cn")

}

</script>

 

 

Window History Back

history.back() 方法加载历史列表中的前一个 URL。

<script>
function goBack()
  {
  window.history.back()
  }
</script>
 

警告框:alert("文本”)

确认框:confirm("文本”)

提示框:prompt("文本","默认值")

 

计时事件:

setTimeout()      未来的某时执行代码

clearTimeout()   取消setTimeout()

t=setTimeout("timedCount()",1000)   clearTimeout(t)

 

 


 

© 著作权归作者所有

共有 人打赏支持
久伴旧伴
粉丝 4
博文 19
码字总数 6522
作品 0
沧州
程序员
私信 提问
整理了一些免费的编程中文书籍

在 github 上整理了一些免费的编程中文书籍 https://github.com/justjavac/free-programming-books-zh_CN 如果谁还有别的书籍,可在此留言。 语言无关类 WEB服务器 Nginx开发从入门到精通 (源...

justjavac
2013/11/04
1K
2
免费的编程中文书籍索引

免费的编程中文书籍索引,欢迎投稿。 国外程序员在 stackoverflow 推荐的程序员必读书籍,中文版。 stackoverflow 上的程序员应该阅读的非编程类书籍有哪些? 中文版 github 上的一个流行的编...

modernizr
2014/04/08
7.3K
24
免费的计算机编程类中文书籍

免费的编程中文书籍索引,欢迎投稿。 国外程序员在 stackoverflow 推荐的程序员必读书籍,中文版。 stackoverflow 上的程序员应该阅读的非编程类书籍有哪些? 中文版 github 上的一个流行的编...

justjavac
2014/08/13
2.8K
10
读《JavaScript高级程序设计》

1、JavaScript学习笔记1:JavaScript学前介绍 http://my.oschina.net/bluefly/blog/478575 2、JavaScript学习笔记2:JavaScript基本概念 http://my.oschina.net/bluefly/blog/484445......

slyso
2015/07/14
0
0
前端学习之路(从入门到入坑...)

学习前端两年多了,拿了阿里巴巴实现offer,想结合个人经历总结的前端入门方法,总结从零基础到具备前端基本技能的道路、学习方法、资料。由于能力有限,不能保证面面俱到,只是作为入门参考...

阿小庆
06/14
0
0

没有更多内容

加载失败,请刷新页面

加载更多

让哲学照亮我们的人生——读《医务工作者需要学点哲学》有感2600字

让哲学照亮我们的人生——读《医务工作者需要学点哲学》有感2600字: 作者:孙冬梅;以前读韩国前总统朴槿惠的著作《绝望锻炼了我》时,里面有一句话令我印象深刻,她说“在我最困难的时期,...

原创小博客
43分钟前
1
0
JAVA-四元数类

public class Quaternion { private final double x0, x1, x2, x3; // 四元数构造函数 public Quaternion(double x0, double x1, double x2, double x3) { this.x0 = ......

Pulsar-V
今天
15
0
Xshell利用Xftp传输文件,使用pure-ftpd搭建ftp服务

Xftp传输文件 如果已经通过Xshell登录到服务器,此时可以使用快捷键ctrl+alt+f 打开Xftp并展示Xshell当前的目录,之后直接拖拽传输文件即可。 pure-ftpd搭建ftp服务 pure-ftpd要比vsftp简单,...

野雪球
今天
1
0
Confluence 6 文档主题合并问答

在 Confluence 官方 前期发布的消息 中,文档主题在 Confluence 6.0 及其后续版本中已经不可用。我们知道你可能对这个有很多好好奇的问题,因此我们在这里设置了一个问答用于帮助你将这个主题...

honeymose
今天
4
0
java框架学习日志-2

上篇文章(java框架学习日志-1)虽然跟着写了例子,也理解为什么这么写,但是有个疑问,为什么叫控制反转?控制的是什么?反转又是什么? 控制其实就是控制对象的创建。 反转与正转对应,正转...

白话
今天
8
0

没有更多内容

加载失败,请刷新页面

加载更多

返回顶部
顶部