java基础

<!DOCTYPE html>
<html>
<head>
<script>
function myFunction() {
    document.getElementById("demo").innerHTML = "段落被更改。";
}
</script>
</head>

<body>

<h1>一张网页</h1>
<p id="demo">一个段落</p>
<button type="button" onclick="myFunction()">试一试</button>

</body>
</html>

js定义代码,可放在网页代码的head/body/footer任意位置。单双引号都可以。
还可以作为外部文件,让许多网页共用。

外部脚本

脚本可放置与外部文件中:

外部文件:myScript.js

如需使用外部脚本,请在 <script> 标签的 src (source) 属性中设置脚本的名称:

实例

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

可同时放几个,当前目录、外网、本网其它目录
<script src="myScript1.js"></script>
<script src="myScript2.js"></script>
<script src="https://www.w3school.com.cn/js/myScript1.js"></script>
<script src="/js/myScript1.js"></script>

JavaScript 能够以不同方式“显示”数据:

  • 使用 window.alert() 写入警告框
  • 使用 document.write() 写入 HTML 输出    出于测试目的,使用 document.write() 比较方便,注意:在 HTML 文档完全加载后使用 document.write() 将删除所有已有的 HTML :
  • 使用 innerHTML 写入 HTML 元素
  • 使用 console.log() 写入浏览器控制台

如需访问 HTML 元素,JavaScript 可使用 document.getElementById(id) 方法。

id 属性定义 HTML 元素。innerHTML 属性定义 HTML 内容:

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

<script>
 document.getElementById("demo").innerHTML = 5 + 6;
</script>
显示结果:

我的第一张网页

我的第一个段落。

11

在 HTML 中,JavaScript 语句是由 web 浏览器“执行”的“指令”。

<script>
var a, b, c;
a = 5;
b = 6;
c = a + b;
document.getElementById("demo1").innerHTML = c;
</script>

JavaScript 代码块

JavaScript 语句可以用花括号({...})组合在代码块中。

代码块的作用是定义一同执行的语句。

您会在 JavaScript 中看到成块组合在一起的语句:

实例

function myFunction() {
    document.getElementById("demo").innerHTML = "I am readming";
    document.getElementById("myDIV").innerHTML = "www.yuanscn.com";
}

JavaScript 关键词

JavaScript 语句常常通过某个关键词来标识需要执行的 JavaScript 动作。

下面的表格列出了一部分将在教程中学到的关键词:

关键词描述
break 终止 switch 或循环。
continue 跳出循环并在顶端开始。
debugger 停止执行 JavaScript,并调用调试函数(如果可用)。
do ... while 执行语句块,并在条件为真时重复代码块。
for 标记需被执行的语句块,只要条件为真。
function 声明函数。
if ... else 标记需被执行的语句块,根据某个条件。
return 退出函数。
switch 标记需被执行的语句块,根据不同的情况。
try ... catch 对语句块实现错误处理。
var 声明变量。

注释:JavaScript 关键词指的是保留的单词。保留词无法用作变量名。

var x, y;	// 声明变量
x = 7; y = 8;	// 赋值
z = x + y;	// 计算值

双斜杠 // 或 /* 与 */ 之间的代码被视为注释。

注释会被忽略,不会被执行

运算符描述
+ 加法
- 减法
* 乘法
/ 除法
% 系数
++ 递加
--

递减

 

运算符描述
== 等于
=== 等值等型
!= 不相等
!== 不等值或不等型
> 大于
< 小于
>= 大于或等于
<= 小于或等于
? 三元运算符

注释:JS 比较这一章中完整描述了比较运算符。

JavaScript 逻辑运算符

运算符描述
&& 逻辑与
|| 逻辑或
! 逻辑非



JavaScript 数据类型

JavaScript 变量能够保存多种数据类型:数值、字符串值、数组、对象等等:

var length = 7;                             // 数字
var lastName = "Gates";                      // 字符串
var cars = ["Porsche", "Volvo", "BMW"];         // 数组
var x = {firstName:"Bill", lastName:"Gates"};    // 对象


真实生活中的对象、属性和方法

在真实生活中,汽车是一个对象。

汽车有诸如车重和颜色等属性,也有诸如启动和停止的方法:

常见的 HTML 事件

下面是一些常见的 HTML 事件:

事件描述
onchange HTML 元素已被改变
onclick 用户点击了 HTML 元素
onmouseover 用户把鼠标移动到 HTML 元素上
onmouseout 用户把鼠标移开 HTML 元素
onkeydown 用户按下键盘按键
onload 浏览器已经完成页面加载



JavaScript 能够做什么?

事件处理程序可用于处理、验证用户输入、用户动作和浏览器动作:

  • 每当页面加载时应该做的事情
  • 当页面被关闭时应该做的事情
  • 当用户点击按钮时应该被执行的动作
  • 当用户输入数据时应该被验证的内容
  • 等等

让 JavaScript 处理事件的不同方法有很多:

  • HTML 事件属性可执行 JavaScript 代码
  • HTML 事件属性能够调用 JavaScript 函数
  • 您能够向 HTML 元素分配自己的事件处理函数
  • 您能够阻止事件被发送或被处理
  • 等等

 


posted @ 2019-07-02 16:54  袁氏家谱网  阅读(248)  评论(0编辑  收藏  举报