js使用

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

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

  1.JavaScript 对大小写是敏感的。

  2.JavaScript 会忽略多余的空格。您可以向脚本添加空格,来提高其可读性。

Test:点击按钮改变标签内容

<!DOCTYPE html>
<html>
<body> <h1>My Web Page</h1> <p id="myPar">I am a paragraph.</p>
<div id="myDiv">I am a div.</div> <p>
<button type="button" onclick="myFunction()">点击这里</button>
</p> <script>
function myFunction()
{
document.getElementById("myPar").innerHTML="Hello World";
document.getElementById("myDiv").innerHTML="How are you?";
}
</script> <p>当您点击上面的按钮时,两个元素会改变。</p> </body>
</html>

  3.对代码行进行折行

您可以在文本字符串中使用反斜杠对代码行进行换行。下面的例子会正确地显示:

document.write("Hello \
World!");

不过,您不能像这样折行:

document.write \
("Hello World!");

4.JavaScript 注释

JavaScript 不会执行注释。

我们可以添加注释来对 JavaScript 进行解释,或者提高代码的可读性。

单行注释以 // 开头。

5。JavaScript 多行注释

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

6.允许在行末使用注释

————————————————————————————————————————————————————

js变量

————————————————————————————————————————————————————

  变量是存储信息的容器。

实例

<!DOCTYPE html>
<html>
<body> <script>
var x=2;
var y=3;
var z=2+3; document.write(x + "<br>");
document.write(y + "<br>");
document.write(z + "<br>");
</script> </body>
</html>

  

JavaScript 变量

与代数一样,JavaScript 变量可用于存放值(比如 x=2)和表达式(比如 z=x+y)。

变量可以使用短名称(比如 x 和 y),也可以使用描述性更好的名称(比如 age, sum, totalvolume)。

  • 变量必须以字母开头
  • 变量也能以 $ 和 _ 符号开头(不过我们不推荐这么做)
  • 变量名称对大小写敏感(y 和 Y 是不同的变量)

提示:JavaScript 语句和 JavaScript 变量都对大小写敏感。

JavaScript 数据类型

JavaScript 变量还能保存其他数据类型,比如文本值 (name="Bill Gates")。

在 JavaScript 中,类似 "Bill Gates" 这样一条文本被称为字符串。

JavaScript 变量有很多种类型,但是现在,我们只关注数字和字符串。

当您向变量分配文本值时,应该用双引号或单引号包围这个值。

当您向变量赋的值是数值时,不要使用引号。如果您用引号包围数值,该值会被作为文本来处理。

声明(创建) JavaScript 变量

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

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

var carname;

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

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

carname="Volvo";

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

var carname="Volvo";

JavaScript 数据类型

字符串、数字、布尔、数组、对象、Null、Undefined

JavaScript 布尔

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

var x=true
var y=false

JavaScript 数组

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

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

或者 (condensed array):

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

或者 (literal array):

实例

var cars=["Audi","BMW","Volvo"];

JavaScript 对象

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

var person={firstname:"Bill", lastname:"Gates", id:5566};

上面例子中的对象 (person) 有三个属性:firstname、lastname 以及 id。

空格和折行无关紧要。声明可横跨多行:

var person={
firstname : "Bill",
lastname : "Gates",
id : 5566
};

对象属性有两种寻址方式:

实例

name=person.lastname;
name=person["lastname"];

Undefined 和 Null

Undefined 这个值表示变量不含有值。

可以通过将变量的值设置为 null 来清空变量。

实例

cars=null;
person=null;

声明变量类型

当您声明新变量时,可以使用关键词 "new" 来声明其类型:

var carname=new String;
var x= new Number;
var y= new Boolean;
var cars= new Array;
var person= new Object; JavaScript 对象

JavaScript 变量均为对象。当您声明一个变量时,就创建了一个新的对象。

JavaScript 中的所有事物都是对象:字符串、数字、数组、日期,等等。

在 JavaScript 中,对象是拥有属性和方法的数据。

属性和方法

属性是与对象相关的值。

方法是能够在对象上执行的动作。

对于对象的理解

举例:汽车就是现实生活中的对象。

汽车的属性:

car.name=Fiat

car.model=500

car.weight=850kg

car.color=white

汽车的方法:

car.start()

car.drive()

car.brake()

汽车的属性包括名称、型号、重量、颜色等。

所有汽车都有这些属性,但是每款车的属性都不尽相同。

汽车的方法可以是启动、驾驶、刹车等。

所有汽车都拥有这些方法,但是它们被执行的时间都不尽相同。

在面向对象的语言中,属性和方法常被称为对象的成员。

创建 JavaScript 对象

JavaScript 中的几乎所有事务都是对象:字符串、数字、数组、日期、函数,等等。

你也可以创建自己的对象。

本例创建名为 "person" 的对象,并为其添加了四个属性:

实例

person=new Object();
person.firstname="Bill";
person.lastname="Gates";
person.age=56;
person.eyecolor="blue";

访问对象的属性

访问对象属性的语法是:

objectName.propertyName

本例使用 String 对象的 length 属性来查找字符串的长度:

var message="Hello World!";
var x=message.length;

在以上代码执行后,x 的值是:

12

访问对象的方法

您可以通过下面的语法调用方法:

objectName.methodName()

这个例子使用 String 对象的 toUpperCase() 方法来把文本转换为大写:

var message="Hello world!";
var x=message.toUpperCase();

在以上代码执行后,x 的值是:

HELLO WORLD!

JavaScript 函数

函数是由事件驱动的或者当它被调用时执行的可重复使用的代码块。

JavaScript 函数语法

函数就是包裹在花括号中的代码块,前面使用了关键词 function:

function functionname()
{
这里是要执行的代码
}

当调用该函数时,会执行函数内的代码。

可以在某事件发生时直接调用函数(比如当用户点击按钮时),并且可由 JavaScript 在任何位置进行调用。

提示:JavaScript 对大小写敏感。关键词 function 必须是小写的,并且必须以与函数名称相同的大小写来调用函数。

全局 JavaScript 变量

在函数外声明的变量是全局变量,网页上的所有脚本和函数都能访问它。

JavaScript 变量的生存期

JavaScript 变量的生命期从它们被声明的时间开始。

局部变量会在函数运行以后被删除。

全局变量会在页面关闭后被删除。

JavaScript 赋值运算符

赋值运算符用于给 JavaScript 变量赋值。

给定 x=10 和 y=5,下面的表格解释了赋值运算符:

用于字符串的 + 运算符

+ 运算符用于把文本值或字符串变量加起来(连接起来)。

如需把两个或多个字符串变量连接起来,请使用 + 运算符。

txt1="What a very";
txt2="nice day";
txt3=txt1+txt2;

在以上语句执行后,变量 txt3 包含的值是 "What a verynice day"。

要想在两个字符串之间增加空格,需要把空格插入一个字符串之中:

txt1="What a very ";
txt2="nice day";
txt3=txt1+txt2;

或者把空格插入表达式中:

txt1="What a very";
txt2="nice day";
txt3=txt1+" "+txt2;

在以上语句执行后,变量 txt3 包含的值是:

"What a very nice day"

对字符串和数字进行加法运算

请看这些例子:

x=5+5;
document.write(x); x="5"+"5";
document.write(x); x=5+"5";
document.write(x); x="5"+5;
document.write(x);

规则是:

如果把数字与字符串相加,结果将成为字符串。

如何使用

可以在条件语句中使用比较运算符对值进行比较,然后根据结果来采取行动:

if (age<18) document.write("Too young");

您将在本教程的下一节中学习更多有关条件语句的知识。

逻辑运算符

逻辑运算符用于测定变量或值之间的逻辑。

给定 x=6 以及 y=3,下表解释了逻辑运算符:

条件运算符

JavaScript 还包含了基于某些条件对变量进行赋值的条件运算符

语法

运算符 描述 例子
&& and (x < 10 && y > 1) 为 true
|| or (x==5 || y==5) 为 false
! not !(x==y) 为 true

例子variablename=(condition)?value1:value2

greeting=(visitor=="PRES")?"Dear President ":"Dear ";

如果变量 visitor 中的值是 "PRES",则向变量 greeting 赋值 "Dear President ",否则赋值 "Dear"。

js使用的更多相关文章

  1. Vue.js 和 MVVM 小细节

    MVVM 是Model-View-ViewModel 的缩写,它是一种基于前端开发的架构模式,其核心是提供对View 和 ViewModel 的双向数据绑定,这使得ViewModel 的状态改变可以自 ...

  2. js学习笔记:操作iframe

    iframe可以说是比较老得话题了,而且网上也基本上在说少用iframe,其原因大致为:堵塞页面加载.安全问题.兼容性问题.搜索引擎抓取不到等等,不过相对于这些缺点,iframe的优点更牛,跨域请求. ...

  3. js学习笔记:webpack基础入门(一)

    之前听说过webpack,今天想正式的接触一下,先跟着webpack的官方用户指南走: 在这里有: 如何安装webpack 如何使用webpack 如何使用loader 如何使用webpack的开发者 ...

  4. JS调用Android、Ios原生控件

    在上一篇博客中已经和大家聊了,关于JS与Android.Ios原生控件之间相互通信的详细代码实现,今天我们一起聊一下JS调用Android.Ios通信的相同点和不同点,以便帮助我们在进行混合式开发时, ...

  5. jquery和Js的区别和基础操作

    jqery的语法和js的语法一样,算是把js升级了一下,这两种语法可以一起使用,只不过是用jqery更加方便 一个页面想要使用jqery的话,先要引入一下jqery包,jqery包从网上下一个就可以, ...

  6. 利用snowfall.jquery.js实现爱心满屏飞

    小颖在上一篇一步一步教你用CSS画爱心中已经分享一种画爱心的方法,这次再分享一种方法用css画爱心,并利用snowfall.jquery.js实现爱心满屏飞的效果. 第一步: 利用伪元素before和 ...

  7. node.js学习(三)简单的node程序&&模块简单使用&&commonJS规范&&深入理解模块原理

    一.一个简单的node程序 1.新建一个txt文件 2.修改后缀 修改之后会弹出这个,点击"是" 3.运行test.js 源文件 使用node.js运行之后的. 如果该路径下没有该 ...

  8. JS正则表达式常用总结

    正则表达式的创建 JS正则表达式的创建有两种方式: new RegExp() 和 直接字面量. //使用RegExp对象创建 var regObj = new RegExp("(^\\s+) ...

  9. 干货分享:让你分分钟学会 JS 闭包

    闭包,是 Javascript 比较重要的一个概念,对于初学者来讲,闭包是一个特别抽象的概念,特别是ECMA规范给的定义,如果没有实战经验,很难从定义去理解它.因此,本文不会对闭包的概念进行大篇幅描述 ...

  10. JS核心系列:理解 new 的运行机制

    和其他高级语言一样 javascript 中也有 new 运算符,我们知道 new 运算符是用来实例化一个类,从而在内存中分配一个实例对象. 但在 javascript 中,万物皆对象,为什么还要通过 ...

随机推荐

  1. WebView loadData出错(奇怪的设计)

    今天遇到一个奇怪的问题. 我使用WebView加载一个网页.  方法1. 直接使用 loadUrl() 方法,没有问题.完全可以.方法2. 使用loadData()方法,出现问题,无法显示.方法3. ...

  2. log4net.dll配置以及在项目中应用 zt

    1 首先在项目中引用log4net.dll,然后项目中添加一个配置文件log4net.config <?xml version="1.0" encoding="ut ...

  3. HDOJ --- Super Jumping! Jumping! Jumping!

    Super Jumping! Jumping! Jumping! Time Limit: 2000/1000 MS (Java/Others)    Memory Limit: 65536/32768 ...

  4. Kia's Calculation(HDU 4267)

    Problem Description Doctor Ghee is teaching Kia how to calculate the sum of two integers. But Kia is ...

  5. UIView frame, bounds and center

    http://stackoverflow.com/questions/5361369/uiview-frame-bounds-and-center Since the question I asked ...

  6. advanced dom scripting dynamic web design techniques Chapter 2 CREATING YOUR OWN REUSABLE OBJECTS

    JavaScript is all about objects. Objects are the foundation of everything, so if you’re unfamiliar w ...

  7. 小物件之select单选下拉列表

    有时候在控制器中做了一个数组 然后需要在模板view中循环 同时还需要判断是否有选中的值,就会造成很多开始闭合标签 以前都是这样写 这样实在太繁琐了,不如封装一个小物件 封装函数如下: 代码如下: f ...

  8. mysql查询一天,查询一周,查询一个月的数据【转】

    转自:http://www.cnblogs.com/likwo/archive/2010/04/16/1713282.html 查询一天: select * from table where to_d ...

  9. myeclipse building workspace如何禁止及提高myeclipse速度

    大家一定对building workspace时那缓慢的速度给困扰到了吧~ 其实只要把project选项里的 building automatically前的勾去掉,就可以快很多了.. 另外大家一定对 ...

  10. get改造成post请求

    <%@ page language="java" import="java.util.*" pageEncoding="utf-8"% ...