自学JavaScript第一课

0.JavaScript 是什么?

JavaScript 是世界上最流行的编程语言。这门语言可用于 HTML 和 web,更可广泛用于服务器、PC、笔记本电脑、平板电脑和智能手机等设备。

JavaScript 是脚本语言

JavaScript 是一种轻量级的编程语言。

JavaScript 是可插入 HTML 页面的编程代码。

JavaScript 插入 HTML 页面后,可由所有的现代浏览器执行。

JavaScript 很容易学习。

1.本课内容

写入HTML输出

document.write("string");

对事件做出反应

onclick="Function()";

改变HTML内容和属性

document.getElementById("ID name");

元素对象innerHTML属性;

验证输入

isNaN(var name);

2.写入HTML输出

可以将需要写的HTML语句放入document.write()函数中来实现将需要的HTML语句输出(提示:您只能在 HTML 输出中使用 document.write()。如果您在文档加载后使用该方法,会覆盖整个文档。),如:

<html>
<head>
<meta http-equiv="Content-Type" content="text/html; charset=utf-8" />
<title>unique蚊子</title>
</head>
<body>
<h1>今日课程</h1>
<script>
document.write("<p>自学JavaScript第一课</p>");
</script>
</body>
</html>

3.对事件做出反应

可以应对形形色色的网页事件(如对某个按钮元素点击)调用不同的脚本函数从而实现诸如改变HTML内容,样式等,如:

<html>
<head>
<meta http-equiv="Content-Type" content="text/html; charset=utf-8" />
<title>unique蚊子</title>
<script>
function MyFunction(){
alert("你点击了按钮");
}
</script>
</head>
<body>
<button type="button" onclick="MyFunction()">点击</button>
</body>
</html>

alert() 函数在 JavaScript 中并不常用,但它对于代码测试非常方便。

onclick 事件只是您即将在本课程中学到的众多事件之一。

4.改变HTML内容

可以通过document.getElementById()函数找到某个元素,在需要时(如发生了某个事件)改变其内容,如:

<html>
<head>
<meta http-equiv="Content-Type" content="text/html; charset=utf-8" />
<title>unique蚊子</title>
<script>
function MyFunction(){
var x = document.getElementById("label");
x.innerHTML="我很喜欢学JavaScript!";
}
</script>
</head>
<body>
<p id="label">我一点也不喜欢学JavaScript!</p>
<button type="button" onclick="MyFunction()">点击改变内容</button>
</body>
</html>

(您会经常看到 document.getElementByID("some id")。这个方法是 HTML DOM 中定义的,DOM(文档对象模型)是用以访问 HTML 元素的正式 W3C 标准。)

你也可以改变其属性来达到改变样式的效果,这时候需要如:

<html>
<head>
<meta http-equiv="Content-Type" content="text/html; charset=utf-8" />
<title>unique蚊子</title>
<script>
function MyFunction(){
var x = document.getElementById("label");
x.style.color="red";
}
</script>
</head>
<body>
<p id="label">我一点也不喜欢学JavaScript!</p>
<button type="button" onclick="MyFunction()">点击改变内容</button>
</body>
</html>

5.验证输入

JavaScript常常用来验证用户的输入是否正确,如:

<html>
<head>
<meta http-equiv="Content-Type" content="text/html; charset=utf-8" />
<title>unique蚊子</title>
<script>
function MyFunction(){
var x = document.getElementById("textArea").value;
if(x==""||isNaN(x)){
alert("输入有误,请输入数字!");
}
}
</script>
</head>
<body>
<input id="textArea" type="text"></input>
<button type="button" onclick="MyFunction()">点击验证</button>
</body>
</html>

Tips:JavaScript 与 Java 是两种完全不同的语言,无论在概念还是设计上。

Java(由 Sun 发明)是更复杂的编程语言。

ECMA-262 是 JavaScript 标准的官方名称。

JavaScript 由 Brendan Eich 发明。它于 1995 年出现在 Netscape 中(该浏览器已停止更新),并于 1997 年被 ECMA(一个标准协会)采纳。

想知道更多的,请看课外阅读。

课外阅读

JavaScript历史:http://www.w3school.com.cn/js/pro_js_history.asp

JavaScript实现:http://www.w3school.com.cn/js/pro_js_implement.asp

自学JavaScript第一课,布布扣,bubuko.com

时间: 2024-11-19 22:14:53

自学JavaScript第一课的相关文章

C++自学教程第一课——你好世界,我是柠檬鲸。

大家好啊,一年一度的柠檬节——额,好像不止一度的柠檬节,它又到了!在这个悲伤的日子,我决定开启一个C++的教程,主要是为了复习自己的C++知识,另外顺便给新手们一个了解C++的方向. 本教程主要面向C++初学者,如果你先前学过C语言或者Java,学起来将会比较轻松一点. C++是C语言的继承,它既可以进行C语言的过程化程序设计,又可以进行以抽象数据类型为特点的基于对象的程序设计,还可以进行以继承和多态为特点的面向对象的程序设计. 在我真正接触编程之前,我向往的一直是Java,因为当时喜欢玩Min

新手自学java第一课

# 学习JAVA第一课 如何编写博客 细则 字体 heoll 周毅 方法(星号+内容+星号) heloo周毅 方法(2星号+内容+2星号) heloo周毅 方法(3星号+内容+3星号) heloo周毅 方法(2波浪号+内容+2波浪号) 引用 选择java,走向人生巅峰 方法(小于号+空格)如: 周毅将来一定会成功 分割线 方法(3个---即可) 图片 超链接 点击跳转到周毅的博客 列表 A B C (这是有序列表,方法--1.空格) A B C (这是无序列表,方法:.空格) 表格 姓名 性别

javascript第一课

JavaScript 一個完整的JavaScript實現由以下三個不同的部分組成 ECMAScript(ECMA歐洲計算機製造商協會):規定了這門語言的語法,類型,語句,關鍵字,保留字,操作符,對象等. Dom:(Document Object Model)文檔對象模型,DOM把整個頁面映射爲一個多層次的節點結構.HTML頁面中的每個組成部分都是某種類型的節點.比如下面的HTML頁面. <html> <head> <title></title> </h

【记录】自学JavaScript第一周

自选JavaScript的第一周,还没有学到多少,但是也记录一下: 在JavaScript中的声明比c#中要随意得多,函数使用上大致相同,下面这个代码块就是一个数组的声明及遍历的一种方法,不过以两种方式写了出来. <script>   var n=[1,2,3,4,5,6];   for(var l=0;l<n.length;l++){    document.write(n[l]+",");   }//写法二:var l=0;//   for (;l<n.le

JavaScript 第一课

今天进入到了js的阶段,了解到了JavaScript是一个很重要的阶段,所以要好好的理清每一个知识点 JavaScript的使用:   在<head>标签里应用<script> <!DOCTYPE html> <html> <head> <meta charset="utf-8" /> <title></title> <!--页内引用样式--> <script type=&

EasyUI入门第一课

首先下载easyUI,最好是最新的,然后新建一个空web程序或是网站,不废话,代码如下: <%@ Page Language="C#" AutoEventWireup="true" CodeBehind="WebForm1.aspx.cs" Inherits="JqueryEasyUI.WebForm1" %> <!DOCTYPE html> <html xmlns="http://ww

【Web探索之旅】第二部分第一课:客户端语言

内容简介 1.第二部分第一课:客户端语言 2.第二部分第二课预告:服务器语言 第二部分:Web编程语言和工具 大家好.上一个部分我们学习了Web的一些基本概念: 什么是Web? Internet和Web的区别 Web的历史 第二部分我们会正式进入Web学习的主题了.我们会带大家了解一个我们平时访问的网站(Web site)是如何运作的.首先我们来看看Web开发使用到的编程语言和数据库,一些框架和内容管理系统,还有响应式设计.这一部分会有不少原理,概念比较重要,不过我们会用形象地比喻来阐明. 第二

2015.7.6 第一课 课程重点(html、列表、表格、相对路径、超链接)

2015.7.6 第一课 课程重点(html.列表.表格.相对路径.超链接) 1.html(超文本标记语言)结构: <html> <head> <title>标题</title> </head> <body> 主体 </body></html> 2.版面控制标记: 换行:<br/> 段落:<p></p> 水平线:<hr> (  粗细: size: 宽度:width

尚学堂Java第一课

今天是北京尚学堂郑州分校开课的第一天,小班面授教学. 我很兴奋,是一个小白对IT大神渴求传道授业解惑的兴奋. 杨老师还是一贯耐心详细的手敲了第一堂课的完整大纲,必须给杨老师赞赞赞!!! 从幽默的制定班规,到教我们用4W1H的方法写博客,并传授我们他身经多年的优质的学习方法和学习方式,再到最后的职业规划. 尤其杨老师的学习方法和学习方式,超级认同,我也会在接下来的学习中以此自律. 最后分享下杨老师的第一课: 班规: 1.保证出勤率上午:9:00~12:00下午:14:00~18:00 晚自习:19