javascript初步了解

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 >

确认框

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 >

<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>

时间: 2024-10-15 06:54:46

javascript初步了解的相关文章

JavaScript初步认识

一 . JavaScrip的嵌入方式: ----- <li onclick="alert('Hello')">条目一</li>         内嵌在html中 ------<li onclick="init()">条目一</li> <script> function init(){ alert("Hello"): } </script>                  

HTML 5 JavaScript初步 编译运行.doc

编译运行 解释运行 JavaScript:只有一种变量类型,var.数据类型:整型,小数,字符串,布尔型 1.如何把数值型字符串变成数字型: parseInt("字符串")——把字符串变成整型 parseFloat("字符串")——把字符串变成小数 2.如何判断一个变量是不是个数字? var a = isNaN(b);

JavaScript初步+基本函数

JavaScript基本写法 <script type="text/javascript">function rec(){ //函数定义var mymessage=confirm("你是女人嘛") ;if(mymessage==true){document.write("你是女士!");}else{document.write("你是男士!");}} </script> 函数使用的一种方法 <bo

JavaScript初步入门

大写函数:".toUpperCase();" "My name is hheehehehh".toUpperCase(); PS:比C++容易多了!!! 输入输出样例: 布尔运算符(判断真假)如: 具体代码如下: var isWeekend = true; var needToShowerToday = !isWeekend; needToShowerToday; 为数组加入元素: var animals = []; animals.push("cat&q

麦子学院-Web前端开发工程师系列培训教程

HTML+CSS基础入门1.课程介绍2.html的语法3.html的基本结构4.html的文档设置标记上(格式标记)5.html的文档设置标记下(文本标记)6.html图像标记img7.html超链接的使用8.html表格相关的标记9.html表格实战<简单的网页布局>10.html框架详解与框架布局实战11.HTML表单设计(上)12.HTML表单设计(下)13.使用CSS样式的方式14.定义CSS样式(CSS选择器)15.CSS常用属性(颜色属性)16.css常用属性(字体相关属性)17.

Python开发学习路线

Python , 是一种面向对象的解释型计算机程序设计语言,具有丰富和强大的库,Python 已经成为继JAVA,C++之后的的第三大语言. 特点:简单易学.免费开源.高层语言.可移植性强.面向对象.可扩展性.可嵌入型.丰富的库.规范的代码.大这里给家列出从Python入门到实战学习路线. 一.入门教程 1.Python 面向对象编程 2.jquery入门 3.HTML+CSS基础入门 4.Javascript初步 5.Python语言编程基础 二.初级教程 1.Git 与 GitHub 2.P

python学习之旅

一.入门 1.Python 面向对象编程 2.jquery入门 3.HTML+CSS基础入门 4.Javascript初步 5.Python语言编程基础 二.初级阶段 1.Git 与 GitHub 2.Python 爬虫基础 3.django进阶 4.django项目部署 5.ajax入门 6.django基础 7.Mysql基础 三.中级阶段  1.Linux基础 2.Python :socket and threading 3.使用pyqt开发windows gui程序及打包 4.Pytho

初学者如何迅速学习Python开发

首先告诉你的是,零基础学习开始学习Python 肯定难,Python的专业程度本身就不简单,学习这事本来就是一件非常煎熬的事情,人都不愿意学习,可是没办法,为了生存掌握一个技能,你必须学,如果你认真的对待,你就找不到高薪水的工作,所以首先学习Python意志,坚持非常重要,很多人放弃的原因根本就是缺乏这些素质. 零基础学习Python必须明确的几点: 1.明确你将来是做什么工作的,需要掌握哪些技能,很多人连这个就不知道就盲目的学,你首先清楚,现在公司需要什么人才,你应该奔着什么目标努力. 2.系

初步总结javascript中学习DOM之前的知识

嘿嘿,又到了周末时间,周六其实就是总结这周的学习的,记得周二周三刚开始接触javascript时间,还是不知道怎么学习的,就感觉找不到方向,那时间学习的只是总结了一些简单的定义或者是学习结构,今天就把这些重新练习了一下,感觉还是蛮容易找到学习的兴趣的,顿时就默默的开始了今天的练习过程.今天就总结下初步认识javascript时间的一些实例,记得前面总结的并不完全,所以在这里总结一下基本概念. 一.基本的认识一些类型和方法 <script> var colors = new Array(3);