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 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初步了解的更多相关文章
- python成长之路【第十五篇】：JavaScript初步认识
JavaScript是一门编程语言,浏览器内置了JavaScript语言的解释器,所以在浏览器上按照JavaScript语言的规则编写相应代码之,浏览器可以解释并做出相应的处理. 一.如何编写 1.J ...
- Javascript——初步
1.基本概念 Javascript是一门脚本语言,它是一门解释性的语言.网页和用户之间实时.动态的进行交互. 2.特点 简单性:没有严格的数据类型.语句简单而紧凑. 安全性:仅仅能通过浏览器实现浏览和 ...
- HTML 5 JavaScript初步 编译运行.doc
编译运行 解释运行 JavaScript:只有一种变量类型,var.数据类型:整型,小数,字符串,布尔型 1.如何把数值型字符串变成数字型: parseInt("字符串")——把字 ...
- JavaScript初步
隐式转换 其他类型转换成布尔类型: undefined --> false null --> false 0或者0.0或者NaN --> false 字符串长度为0 --> f ...
- JavaScript 初步认识
首先呢 要成为WEB全栈工程师呢 JavaScript 是必须要会的 高级技术看自身兴趣爱好,但是基础必须掌握 因为有良好的基础学习jQuery会比较轻松. js是一门轻量的脚本语言 我学它主要目的是 ...
- JavaScript初步学习----基本使用，简单事件，修改样式，数据类型
JavaScript基本使用 JavaScript原名叫livescript,是一门动态类型,弱类型基于原型的脚本语言 用于页面特效,前后交替,后台开发(node) JavaScript写在s ...
- JavaScript基于对象编程
js面向对象特征介绍 javascript是一种面向(基于)对象的动态脚本语言,是一种基于对象(Object)和事件驱动(EventDirven)并具有安全性能的脚本语言.它具有面向对象语言所特有的各 ...
- Python基础+Pythonweb+Python扩展+Python选修四大专题 超强麦子学院Python35G视频教程
[保持在百度网盘中的, 可以在观看,嘿嘿 内容有点多,要想下载, 回复后就可以查看下载地址,资源收集不易,请好好珍惜] 下载地址:http://www.fu83.cc/ 感觉文章好,可以小手一抖 -- ...
- div模拟selection标签 下拉列表
<!doctype html> <html lang="en"> <head> <meta charset="UTF-8&quo ...
随机推荐
- Alpha 冲刺 —— 十分之一
队名 火箭少男100 组长博客 林燊大哥 作业博客 Alpha 冲鸭! 成员冲刺阶段情况 林燊(组长) 过去两天完成了哪些任务 协调各成员之间的工作,对多个目标检测及文字识别模型进行评估.实验,选取较 ...
- thusc2018酱油记
day-1 打点行囊,从学校出发去火车站 day0 在火车上一觉醒来便快到了北京,直接前往了宾馆安置 下午报道,一脸向往地第一次走入清华园,感觉十分的梦幻,心里一直喃喃:"希望以后也能经常在 ...
- luoguP5105 不强制在线的动态快速排序
emm 可重集合没用用.直接变成不可重复集合 有若干个区间 每个区间形如[L,R] [L,R]计算的话,就是若干个连续奇数的和.拆位统计1的个数 平衡树维护 加入一个[L,R],把相交的区间合并.之后 ...
- uoj 36 玛里苟斯
[清华集训2014]玛里苟斯 - 题目 - Universal Online Judge k=1,2,3,4,5各占20pts是提示 应当分开考虑 k=1 拆位,如果第i位有1,则有1/2的概率xor ...
- 网络编程----socketserver多并发实现、FTP上传多并发、udp协议套接字多并发
一.socketserver多并发 基于tcp的套接字,关键就是两个循环,一个 ...
- Extjs treePanel过滤查询功能【转】
Extjs4.2中,对于treeStore中未实现filterBy函数进行实现,treestore并未继承与Ext.data.Store,对于treePanel的过滤查询功能,可有以下两种实现思路: ...
- laravel5.1 使用中间表的多对多关联
用户表user 标签表tag 中间表user_tag(user_id,tag_id) 在user模型中定义tags关联如下: public function tags() { return $this ...
- 对SLIP，PPP，PPPoE，EtherNet的理解。[zz]
经常看到PPP,PPPoE这些名词,当时也查了不少的资料,但是一直不太理解这是什么东西,干什么用的,今天静下心来,多看了点资料,有了一些初步理解,记录下来,以后有了新的理解再修改. 首先,SLIP ...
- Python与R的争锋：大数据初学者该怎样选？
在当下,人工智能的浪潮席卷而来.从AlphaGo.无人驾驶技术.人脸识别.语音对话,到商城推荐系统,金融业的风控,量化运营.用户洞察.企业征信.智能投顾等,人工智能的应用广泛渗透到各行各业,也让数据科 ...
- Bolt XML和JQBolt Lua代码自动补全插件配置教程
Bolt没有提供官方IDE,缺少强大的代码提示和自动补全,Notepad++写起界面和脚本来比较费劲. Notepad++有个QuickText插件,支持多语言的自动补全,进行简单的配置就可以支持Bo ...