0.1   <script> 和 </script> 会告诉 JavaScript 在何处开始和结束。

<script> 和 </script> 之间的代码行包含了 JavaScript:

那些老旧的实例可能会在 <script> 标签中使用 type="text/javascript"。现在已经不必这样做了。JavaScript 是所有现代浏览器以及 HTML5 中的默认脚本语言。

0.2 脚本可位于 HTML 的 <body> 或 <head> 部分中,或者同时存在于两个部分中。

通常的做法是把函数放入 <head> 部分中,或者放在页面底部。这样就可以把它们安置到同一处位置,不会干扰页面的内容。

<!DOCTYPE html>
<html>
<body>

<h1>My Web Page</h1>

<p id="demo">A Paragraph</p>

<button type="button" onclick="myFunction()">Try it</button>
<script>
function myFunction()
{
document.getElementById("demo").innerHTML="My First JavaScript Function";
}
</script>

</body>
</html>
<!DOCTYPE html>
<html>
 
<head><script>
function myFunction()
{
document.getElementById("demo").innerHTML="My First JavaScript Function";
}
</script>
</head>
 
<body>
 
<h1>My Web Page</h1>
 
<p id="demo">A Paragraph</p>
 
<button type="button" onclick="myFunction()">Try it</button>
 
</body>
</html>

我们把 JavaScript 放到了页面代码的底部,这样就可以确保在 <p> 元素创建之后再执行脚本。

都是点击按键后,将A Paragraph替换为My First JavaScript Function

0.3   注释和C语言相同

0.4 在 JavaScript 中,用分号来结束语句是可选的。

0.5 JavaScript 对大小写是敏感的。函数 getElementById 与 getElementbyID 是不同的。

0.6当您向变量分配文本值时,应该用双引号或单引号包围这个值。

1 文本document.write("<h1>Hello World!</h1>")

2 提醒框<script type="text/javascript">

function message()

{

alert("该提示框是通过 onload 事件调用的。")

}

</script>

</head>

<body onload="message()">

确认框

function show_confirm()

{

var r=confirm("Press a button!");

if (r==true)

{

alert("You pressed OK!");

}

else

{

alert("You pressed Cancel!");

}

}

提示框

function disp_prompt()

{

var name=prompt("请输入您的名字","Bill Gates")

if (name!=null && name!="")

{

document.write("你好!" + name + " 今天过得怎么样?")

}

}

警告框经常用于确保用户可以得到某些信息。当警告框出现后,用户需要点击确定按钮才能继续进行操作。alert("文本")

确认框用于使用户可以验证或者接受某些信息。当确认框出现后,用户需要点击确定或者取消按钮才能继续进行操作。如果用户点击确认,那么返回值为 true。如果用户点击取消,那么返回值为 false。confirm("文本")

提示框经常用于提示用户在进入页面前输入某个值。

当提示框出现后,用户需要输入某个值,然后点击确认或取消按钮才能继续操纵。

如果用户点击确认,那么返回值为输入的值。如果用户点击取消,那么返回值为 null。

prompt("文本","默认值")

3 调用外部js,外部脚本不能包含 <script> 标签。

<script src="/js/example_externaljs.js"></script>

4 得到按键值通过ID值为demo的,输出到html中carname的值

document.getElementById("demo").innerHTML=carname;

5 函数

5.1 带参数的

<script type="text/javascript">

function myfunction(txt)

{

alert(txt)

}

</script>

</head>

<body>

<form>

<input type="button" onclick="myfunction('您好!')" value="调用函数">

</form>

6 出错报警

try 语句允许我们定义在执行时进行错误测试的代码块。

catch 语句允许我们定义当 try 代码块发生错误时,所执行的代码块。

JavaScript 语句 try 和 catch 是成对出现的。

<!DOCTYPE html>

<html>

<head>

<script>

var txt="";

function message()

{

try

{

adddlert("Welcome guest!");//alert写错

}

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>

</head>

<body>

<input type="button" value="View message" onclick="message()">

</body>

</html>

7 图像映射

<html>

<head>

<script type="text/javascript">

function writeText(txt)

{

document.getElementById("desc").innerHTML=txt

}

</script>

</head>

<body>

<img src="/i/eg_planets.jpg" border="0" usemap="#planetmap" alt="Planets" />

<map name="planetmap" id="planetmap">

<area shape="circle" coords="180,139,14"

onMouseOver="writeText('直到 20 世纪 60 年代,金星一直被认为是地球的孪生姐妹,因为金星是离我们最近的行星,同时还由于两者拥有很多共同的特征。')"

href ="/example/html/venus.html" target ="_blank" alt="Venus" />

<area shape="circle" coords="129,161,10"

onMouseOver="writeText('从地球上是很难研究水星的,这是由于它和太阳的距离总是很近。')"

href ="/example/html/mercur.html" target ="_blank" alt="Mercury" />

<area shape="rect" coords="0,0,110,260"

onMouseOver="writeText('太阳和类似木星这样的气态行星是到目前为止太阳系中最大的物体。')"

href ="/example/html/sun.html" target ="_blank" alt="Sun" />

</map>

<p id="desc"></p>

</body>

</html>

8 无穷尽的计时

function timedCount()

{

document.getElementById('txt').value=c

c=c+1

t=setTimeout("timedCount()",1000)//1000为1s显示一次

}

如果想停止,就在加一个函数,将值清空。

function stopCount()

{

c=0;

setTimeout("document.getElementById('txt').value=0",0);

clearTimeout(t);

}

显示时间

<html>

<head>

<script type="text/javascript">

function startTime()

{

var today=new Date()

var h=today.getHours()

var m=today.getMinutes()

var s=today.getSeconds()

// add a zero in front of numbers<10

m=checkTime(m)

s=checkTime(s)

document.getElementById('txt').innerHTML=h+":"+m+":"+s

t=setTimeout('startTime()',500)

}

function checkTime(i)

{

if (i<10)

{i="0" + i}

return i

}

</script>

</head>

<body onload="startTime()">

<div id="txt"></div>

</body>

</html>

9 创建对象模板

<script type="text/javascript">

function person(firstname,lastname,age,eyecolor)

{

this.firstname=firstname

this.lastname=lastname

this.age=age

this.eyecolor=eyecolor

}

myFather=new person("John","Adams",35,"black")

document.write(myFather.firstname + " 的年龄是 " + myFather.age + " 岁。")

</script>

javascript初步了解的更多相关文章

  1. python成长之路【第十五篇】:JavaScript初步认识

    JavaScript是一门编程语言,浏览器内置了JavaScript语言的解释器,所以在浏览器上按照JavaScript语言的规则编写相应代码之,浏览器可以解释并做出相应的处理. 一.如何编写 1.J ...

  2. Javascript——初步

    1.基本概念 Javascript是一门脚本语言,它是一门解释性的语言.网页和用户之间实时.动态的进行交互. 2.特点 简单性:没有严格的数据类型.语句简单而紧凑. 安全性:仅仅能通过浏览器实现浏览和 ...

  3. HTML 5 JavaScript初步 编译运行.doc

    编译运行 解释运行 JavaScript:只有一种变量类型,var.数据类型:整型,小数,字符串,布尔型 1.如何把数值型字符串变成数字型: parseInt("字符串")——把字 ...

  4. JavaScript初步

    隐式转换 其他类型转换成布尔类型: undefined --> false null --> false 0或者0.0或者NaN --> false 字符串长度为0 --> f ...

  5. JavaScript 初步认识

    首先呢 要成为WEB全栈工程师呢 JavaScript 是必须要会的 高级技术看自身兴趣爱好,但是基础必须掌握 因为有良好的基础学习jQuery会比较轻松. js是一门轻量的脚本语言 我学它主要目的是 ...

  6. JavaScript初步学习----基本使用,简单事件,修改样式,数据类型

    JavaScript基本使用 JavaScript原名叫livescript,是一门动态类型,弱类型基于原型的脚本语言   用于页面特效,前后交替,后台开发(node)   JavaScript写在s ...

  7. JavaScript基于对象编程

    js面向对象特征介绍 javascript是一种面向(基于)对象的动态脚本语言,是一种基于对象(Object)和事件驱动(EventDirven)并具有安全性能的脚本语言.它具有面向对象语言所特有的各 ...

  8. Python基础+Pythonweb+Python扩展+Python选修四大专题 超强麦子学院Python35G视频教程

    [保持在百度网盘中的, 可以在观看,嘿嘿 内容有点多,要想下载, 回复后就可以查看下载地址,资源收集不易,请好好珍惜] 下载地址:http://www.fu83.cc/ 感觉文章好,可以小手一抖 -- ...

  9. div模拟selection标签 下拉列表

    <!doctype html> <html lang="en"> <head> <meta charset="UTF-8&quo ...

随机推荐

  1. 【刷题】BZOJ 2754 [SCOI2012]喵星球上的点名

    Description a180285幸运地被选做了地球到喵星球的留学生.他发现喵星人在上课前的点名现象非常有趣. 假设课堂上有N个喵星人,每个喵星人的名字由姓和名构成.喵星球上的老师会选择M个串来点 ...

  2. [POI2012]OKR-A Horrible Poem hash

    题面:洛谷 题解: 首先我们需要知道一个性质,串s的最小循环节 = len - next[len].其中next[len]表示串s的一个最长长度使得s[1] ~ s[next[len]] == s[l ...

  3. 洛谷 P3802 小魔女帕琪 解题报告

    P3802 小魔女帕琪 题目背景 从前有一个聪明的小魔女帕琪,兴趣是狩猎吸血鬼. 帕琪能熟练使用七种属性(金.木.水.火.土.日.月)的魔法,除了能使用这么多种属性魔法外,她还能将两种以上属性组合,从 ...

  4. 【线段树】【CF19D】 Points

    传送门 Description 在一个笛卡尔坐标系中,定义三种操作: \(add(x,y)\),将点\((x,y)\)标记在坐标系上 \(find(x,y)\),查询点\((x,y)\)严格右上方中, ...

  5. laravel调试神器tinker

    一直以来,想调试框架中的某些东西,如想知道 Elpquent 的 create 方法返回值是个什么东西, 以前的话,应该就是在 create 方法调用之后,使用 dd 或者 var_dump 之类的函 ...

  6. MyEclipse解决Launching xx on MyEclipse Tomcat has encountered a problem

    单击工具栏Run,选中Run Configurations... 将MyEclipse Server Application里面的工程右击选择Delete就好了.

  7. UITableView .grouped 类型去除顶部间距

    在设置 UITableView 的 style 为 .grouped 类型的时候,发现第一个 cell 的顶部存在大段的间距,而改为 .plain 类型则没有这个间距,效果如下: 设置了 conten ...

  8. php7.1安装

    找到对应的镜像,右键复制链接地址这里下载的镜像是PHP7http://cn2.php.net/get/php-7.1.0.tar.gz/from/this/mirror 最后通过wget下载这个地址里 ...

  9. HDU 6158 笛卡尔定理 几何

    LINK 题意:一个大圆中内切两个圆,三个圆两两相切,再不断往上加新的相切圆,问加上的圆的面积和.具体切法看图 思路:笛卡尔定理: 若平面上四个半径为r1.r2.r3.r4的圆两两相切于不同点,则其半 ...

  10. 【转】ubuntu 11.04使用apt-get安装软件时一直提示E:unable to locate package

    问题: VMware虚拟机安装了ubuntu 11.04,在使用apt-get安装软件时一直提示E:Unable to locate package. 百度了原因,说是要更新源,使用命令:sudo a ...