Javascript

1.

JavaScript:对事件的反应

< button type = " button " onclick = " alert('欢迎!') " >点我!</ button >


2.

JavaScript 用法


HTML 中的脚本必须位于 <script> 与 </script> 标签之间。

脚本可被放置在 HTML 页面的 <body> 和 <head> 部分中。


<script> 标签

如需在 HTML 页面中插入 JavaScript,请使用 <script> 标签。

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

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

<script>
alert("我的第一个 JavaScript");
</script>
3.我们把一个 JavaScript 函数放置到 HTML 页面的 <head> 部分。

也可以把一个 JavaScript 函数放置到 HTML 页面的 <body> 部分

外部的 JavaScript

也可以把脚本保存到外部文件中。外部文件通常包含被多个网页使用的代码。

外部 JavaScript 文件的文件扩展名是 .js。

如需使用外部文件,请在 <script> 标签的 "src" 属性中设置该 .js 文件:

4.会经常看到 document.getElementById("id")

这个方法是 HTML DOM 中定义的。

DOM (Document Object Model)(文档对象模型)是用于访问 HTML 元素的正式 W3C 标准。

格式<script>

那些老旧的实例可能会在 <script> 标签中使用 type="text/javascript"。

现在已经不必这样做了。

JavaScript 是所有现代浏览器以及 HTML5 中的默认脚本语言。

脚本位置

在 <head> 或者 <body> 的JavaScript

外部脚本不能包含 <script> 标签。

输出数据

window.alert() 弹出警告框。

document.write() 方法将内容写到 HTML 文档中。

innerHTML 写入到 HTML 元素。

console.log() 写入到浏览器的控制台。

输出内容

使用 document.write() 向文档输出写内容。

如果在文档已完成加载后执行 document.write,整个 HTML 页面将被覆盖

写到控制台(调试模式)

使用 console.log() 方法在浏览器中显示 JavaScript 值。

F12 启用调试模式, 在调试窗口中点击 "Console" 菜单。

5.

数组(Array)字面量 定义一个数组:

[40, 100, 1, 5, 25, 10]

对象(Object)字面量 定义一个对象:

{firstName:"John", lastName:"Doe", age:50, eyeColor:"blue"}

函数(Function)字面量 定义一个函数:

function myFunction(a, b) { return a * b;}


JavaScript 变量

在编程语言中,变量用于存储数据值。

JavaScript 使用关键字 var 来定义变量, 使用等号来为变量赋值:

var x, length

x = 5

length = 6

6.

JavaScript 关键字必须以字母、下划线(_)或美元符($)开始。

JavaScript 语句可以写在函数内,函数可以重复引用:

引用一个函数 = 调用函数(执行函数内的语句)。

function myFunction(a, b) {
    return a * b;                              // 返回 a 乘于 b 的结果
}

后续的字符可以是字母、数字、下划线或美元符(数字是不允许作为首字符出现的,以便 JavaScript 可以轻易区分开关键字和数字)。

7.

JavaScript 可以分批地组合起来。

代码块以左花括号开始,以右花括号结束。

代码块的作用是一并地执行语句序列。

本例向网页输出一个标题和两个段落:

实例

function myFunction ( ) { document . getElementById ( " demo " ) . innerHTML = " 你好Dolly " ; document . getElementById ( " myDIV " ) . innerHTML = " 你最近怎么样? " ; }
8.

单行注释以 // 开头。多行注释以 /* 开始,以 */ 结尾。


如果用户不能确定浏览器是否支持JavaScript脚本,那么可以应用HTML提供的注释符号进行验证。HTML注释符号是以 <-- 开始以 --> 结束的。如果在此注释符号内编写 JavaScrip t脚本,对于不支持 JavaScript 的浏览器,将会把编写的 JavaScript 脚本作为注释处理。

使用 JavaScript 脚本在页面中输出一个字符串,将 JavaScript 脚本编写在 HTML 注释中,如果浏览器支持 JavaScript 将输出此字符串,如果不支持将不输出此字符串,代码如下:

<script>
<!--
document.write("您的浏览器支持JavaScript脚本!");
//-->
</script>

9.

声明(创建) JavaScript 变量

在 JavaScript 中创建变量通常称为"声明"变量。

我们使用 var 关键词来声明变量:

var carname;

变量声明之后,该变量是空的(它没有值)。

如需向变量赋值,请使用等号:

carname="Volvo";

不过,您也可以在声明变量时对其赋值:

var carname="Volvo";

在下面的例子中,我们创建了名为 carname 的变量,并向其赋值 "Volvo",然后把它放入 id="demo" 的 HTML 段落中:

<p id="demo"></p>
var carname="Volvo";
document.getElementById("demo").innerHTML=carname;
10.JavaScript 只有一种数字类型。数字可以带小数点,也可以不带:

JavaScript 布尔

布尔(逻辑)只能有两个值:true 或 false。

varx=true;
var y=false;

布尔常用在条件测试中。您将在本教程稍后的章节中学到更多关于条件测试的知识。


JavaScript 数组

下面的代码创建名为 cars 的数组:

var cars=new Array();
cars[0]="Saab";
cars[1]="Volvo";
cars[2]="BMW";

或者 (condensed array):

var cars=new Array("Saab","Volvo","BMW");

或者 (literal array):

11.

JavaScript 对象

对象由花括号分隔。在括号内部,对象的属性以名称和值对的形式 (name : value) 来定义。属性由逗号分隔:

var person={firstname:"John", lastname:"Doe", id:5566};

12.

JavaScript对象:属性和方法的容器;

对象的属性之间一定要用逗号隔开;

对象的方法定义了一个函数,并作为对象的属性存储。

对象方法通过添加 () 调用 (作为一个函数)。

比如:

var person={
"name":"小明",
"age":"18",
"like":function(){
            return "喜欢打篮球,弹吉他"
      }
}

javaScript对象也可以先创建,再添加属性和属性值,比如:

var person=new Object();
person.name='小明'
person.sex='男'
person.method=function(){
  return this.name+this.sex;
}
13.

JavaScript 作用域

在 JavaScript 中, 对象和函数同样也是变量。

在 JavaScript 中, 作用域为可访问变量,对象,函数的集合。

JavaScript 函数作用域: 作用域在函数内修改。

局部变量:在函数中通过var声明的变量。

全局变量:在函数外通过var声明的变量。

没有声明就使用的变量,默认为全局变量,不论这个变量在哪被使用。

14.

HTML 事件

HTML 事件可以是浏览器行为,也可以是用户行为。

以下是 HTML 事件的实例:

  • HTML 页面完成加载
  • HTML input 字段改变时
  • HTML 按钮被点击

通常,当事件发生时,你可以做些事情。

在事件触发时 JavaScript 可以执行一些代码。

HTML 元素中可以添加事件属性,使用 JavaScript 代码来添加 HTML 元素。

单引号:

< some-HTML-elementsome-event= ' JavaScript 代码 '>

双引号:

< some-HTML-elementsome-event= " JavaScript 代码 ">

在以下实例中,按钮元素中添加了 onclick 属性 (并加上代码):

实例

< button onclick = " getElementById('demo').innerHTML=Date() " >现在的时间是?</ button >




JavaScript 可以做什么?

事件可以用于处理表单验证,用户输入,用户行为及浏览器动作:

  • 页面加载时触发事件
  • 页面关闭时触发事件
  • 用户点击按钮执行动作
  • 验证用户输入内容的合法性
  • 等等 ...

可以使用多种方法来执行 JavaScript 事件代码:

  • HTML 事件属性可以直接执行 JavaScript 代码
  • HTML 事件属性可以调用 JavaScript 函数
  • 你可以为 HTML 元素指定自己的事件处理程序
  • 你可以阻止事件的发生。
  • 等等 ...
15.

特殊字符

在 JavaScript 中,字符串写在单引号或双引号来中。

因为这样,以下实例 JavaScript 无法解析:

 "We are the so-called "Vikings" from the north."

字符串 "We are the so-called " 被截断。

如何解决以上的问题呢?可以使用反斜杠 (\) 来转义 "Vikings" 字符串中的双引号,如下:

 "We are the so-called \"Vikings\" from the north."

 反斜杠是一个转义字符。 转义字符将特殊字符转换为字符串字符:

转义字符 (\) 可以用于转义撇号,换行,引号,等其他特殊字符。

16.

JavaScript == 与 === 区别

1、对于 string、number 等基础类型,== 和 === 是有区别的

  • a)不同类型间比较,== 之比较 "转化成同一类型后的值" 看 "值" 是否相等,=== 如果类型不同,其结果就是不等。
  • b)同类型比较,直接进行 "值" 比较,两者结果一样。

2、对于 Array,Object 等高级类型,== 和 === 是没有区别的

进行 "指针地址" 比较

3、基础类型与高级类型,== 和 === 是有区别的

  • a)对于 ==,将高级转化为基础类型,进行 "值" 比较
  • b)因为类型不同,=== 结果为 false

4、!= 为 == 的非运算,!== 为 === 的非运算

17.

  1. 常见的不同类型运算的转换方式:

    1.字符串和数字相加,数字转成字符串.

    var one="This is a test";
    var two=123;
    var three=one+two;
    
    // 结果:three:This is a test123

    2.数字和布尔值相加,布尔值 false 转成 0,true 转成 1

    var one=13;
    var two=true;
    var three=one+two;
    // 结果 three:14

    3.字符串与布尔值相加,布尔值转化成字符串。

    GermanView`

       GermanView`

  2.   

    取模运算的结果符号只与左边值的符号有关:

    var x = 7 % 3; // 结果为 1
    var y = 7 % (-3); // 结果为 1
    var z = (-7) % 3; // 结果为 -1


  3. 数字与 null(空值) 相加,null 转化为数字 0:

    var car=null+3+4;    // 结果为7

    字符串与 null(空值) 相加,null 转化为字符串:

    var car=null+"a";    // 结果为 nulla
18.

作原理:首先设置表达式 n(通常是一个变量)。随后表达式的值会与结构中的每个 case 的值做比较。如果存在匹配,则与该 case 关联的代码块会被执行。请使用 break 来阻止代码自动地向下一个 case 运行。

19.

JavaScript 循环

如果您希望一遍又一遍地运行相同的代码,并且每次的值都不同,那么使用循环是很方便的。

我们可以这样输出数组的值:

一般写法:

document . write ( cars [ 0 ] + " <br> " ) ; document . write ( cars [ 1 ] + " <br> " ) ; document . write ( cars [ 2 ] + " <br> " ) ; document . write ( cars [ 3 ] + " <br> " ) ; document . write ( cars [ 4 ] + " <br> " ) ; document . write ( cars [ 5 ] + " <br> " ) ;

使用for循环

for ( var i = 0 ; i < cars . length ; i ++ ) { document . write ( cars [ i ] + " <br> " ) ; }

20

ypeof 操作符

你可以使用 typeof 操作符来检测变量的数据类型。

实例

typeof "John"                 // 返回 string
typeof 3.14                   // 返回 number
typeof false                  // 返回 boolean
typeof [ 1, 2, 3, 4]              // 返回 object
typeof {name: 'John', age:34}  // 返回 object

21.

Typeof 操作符

你可以使用 typeof 操作符来检测变量的数据类型。

实例

typeof "John"                 // 返回 string
typeof 3.14                   // 返回 number
typeof false                  // 返回 boolean
typeof [ 1, 2, 3, 4]              // 返回 object
typeof {name: 'John', age:34}  // 返回 object

22.

  • 0
    点赞
  • 0
    收藏
    觉得还不错? 一键收藏
  • 0
    评论
评论
添加红包

请填写红包祝福语或标题

红包个数最小为10个

红包金额最低5元

当前余额3.43前往充值 >
需支付:10.00
成就一亿技术人!
领取后你会自动成为博主和红包主的粉丝 规则
hope_wisdom
发出的红包
实付
使用余额支付
点击重新获取
扫码支付
钱包余额 0

抵扣说明:

1.余额是钱包充值的虚拟货币,按照1:1的比例进行支付金额的抵扣。
2.余额无法直接购买下载,可以购买VIP、付费专栏及课程。

余额充值