初识JavaScript

JavaScript实现

JavaScript 函数和事件
        通常,我们需要在某个事件发生时执行代码,比如当用户点击按钮时。如果我们把 JavaScript代码放入函数中,就可以在事件发生时调用该函数。
外部的 JavaScript
        也可以把脚本保存到外部文件中。外部文件通常包含被多个网页使用的代码。外部 JavaScript 文件的文件扩展名是 .js。
例如:

<script src="myScript.js"></script>```
##JavaScript 输出
**操作 HTML 元素**
&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;如需从 `JavaScript `访问某个 `HTML` 元素,您可以使用`document.getElementById(id)` 方法。
&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;请使用 "`id`" 属性来标识` HTML` 元素:

<p id="demo">My First Paragraph</p>
<script>
document.getElementById("demo").innerHTML="My First JavaScript";
</script>```
        JavaScriptweb 浏览器来执行。在这种情况下,浏览器将访问 id="demo"HTML 元素,并把它的内容(innerHTML)替换为 "My First JavaScript"

  • 下面的例子直接把<p> 元素写到 HTML 文档输出中:
<script>
document.write("<p>My First JavaScript</p>");
</script>```
**注意**
&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;请使用 `document.write() `仅仅向文档输出写内容。
&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;如果在文档已完成加载后执行 `document.write`,整个 `HTML` 页面将被覆盖。

##JavaScript 语句
&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;JavaScript 语句向浏览器发出的命令。语句的作用是告诉浏览器该做什么。
&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;`JavaScript` 代码(或者只有 `JavaScript`)是 `JavaScript `语句的序列。
浏览器会按照编写顺序来执行每条语句。
- JavaScript 对大小写是敏感的
&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;函数 `getElementById` 与` getElementbyID `是不同的。同样,变量 `myVariable `与` MyVariable `也是不同的。
- 空格
&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;`JavaScript `会忽略多余的空格。您可以向脚本添加空格,来提高其可读性。
- 对代码行进行折行
&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;您可以在文本字符串中使用反斜杠对代码行进行换行。例如:

document.write("Hello
World!");


**注意**
&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;`JavaScript `是脚本语言。浏览器会在读取代码时,逐行地执行脚本代码。而对于传统编程来说,会在执行前对所有代码进行编译。
##JavaScript 变量
&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;`JavaScript` 语句和 `JavaScript `变量都对大小写敏感。
&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;未使用值来声明的变量,其值实际上是 `undefined`。
&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;如果重新声明 `JavaScript `变量,该变量的值不会“丢失”;
##JavaScript 数据类型
- `JavaScript `拥有动态类型
&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;`JavaScript `拥有动态类型。这意味着相同的变量可用作不同的类型 ,例如:

var x // x 为 undefined
var x = 6; // x 为数字
var x = "Bill"; // x 为字符串```

  • JavaScript 数字
            JavaScript只有一种数字类型。数字可以带小数点,也可以不带,例如:
var x1=34.00;      //使用小数点来写
var x2=34;         //不使用小数点来写```
&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;极大或极小的数字可以通过科学(指数)计数法来书写,例如:

var y=123e5; // 12300000
var z=123e-5; // 0.00123```

  • JavaScript 数组
            下面的代码创建名为cars 的数组:
var cars=new Array();
cars[0]="Audi";
cars[1]="BMW";
cars[2]="Volvo";
或者 
var cars=new Array("Audi","BMW","Volvo");```


##JavaScript 对象
&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;对象由花括号分隔。在括号内部,对象的属性以名称和值对的形式 `(name : value)` 来定义。属性由逗号分隔
`var person={firstname:"Bill", lastname:"Gates", id:5566};`
- `Undefined` 和` Null`
&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;`Undefined` 这个值表示变量不含有值。可以通过将变量的值设置为`null`来清空变量。
- 在面向对象的语言中,属性和方法常被称为对象的成员。
&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;`JavaScript` 中的几乎所有事务都是对象:字符串、数字、数组、日期、函数,等等。
- 访问对象的方法
`objectName.methodName()`
&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;使用 `String` 对象的 `toUpperCase()` 方法来把文本转换为大写:

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

JavaScript 函数

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

  • JavaScript 函数语法
            函数就是包裹在花括号中的代码块,前面使用了关键词 function
function functionname()
{
这里是要执行的代码
}```
- 调用带参数的函数
&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;在调用函数时,您可以向其传递值,这些值被称为参数。
&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;这些参数可以在函数中使用。
&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;您可以发送任意多的参数,由逗号 (,) 分隔。
`myFunction(argument1,argument2)`
- 带有返回值的函数
&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;有时,我们会希望函数将值返回调用它的地方。通过使用` return `语句就可以实现。
&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;在使用 `return` 语句时,函数会停止执行,并返回指定的值。例如:

function myFunction()
{
var x=5;
return x;
} ```

  • JavaScript变量的生存期
            JavaScript变量的生命期从它们被声明的时间开始。
            局部变量会在函数运行以后被删除。
            全局变量会在页面关闭后被删除。

JavaScript 运算符

  • 用于字符串的+运算符
    + 运算符用于把文本值或字符串变量加起来(连接起来)。
            如需把两个或多个字符串变量连接起来,请使用+ 运算符。或者把空格插入表达式中。
txt1="What a very";
txt2="nice day";
txt3=txt1+txt2;
在以上语句执行后,变量 txt3 包含的值是 "What a verynice day"。```
-` JavaScript `比较和逻辑运算符
&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;比较和逻辑运算符用于测试 `true` 或 `false`。
-  `JavaScript Switch `语句
&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;`switch `语句用于基于不同的条件来执行不同的动作。

switch(n)
{
case 1:
执行代码块 1
break;
case 2:
执行代码块 2
break;
default:
n 与 case 1 和 case 2 不同时执行的代码
}```

  • default 关键词
            使用default关键词来规定匹配不存在时做的事情。

JavaScript For 循环

不同类型的循环

  • JavaScript 支持不同类型的循环:
    for - 循环代码块一定的次数
    for/in - 循环遍历对象的属性
    while - 当指定的条件为 true 时循环指定的代码块
    do/while - 同样当指定的条件为 true 时循环指定的代码块
var person={fname:"John",lname:"Doe",age:25};
for (x in person)
  {
  txt=txt + person[x];
  }```


##JavaScript While 循环
&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;`While` 循环会在指定条件为真时循环执行代码块。
- `do/while` 循环
&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;`do/while` 循环是 `while` 循环的变体。该循环会执行一次代码块,在检查条件是否为真之前,然后如果条件为真的话,就会重复这个循环。

##JavaScript Break 和 Continue 语句
&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;`break` 语句用于跳出循环。
&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;`continue` 用于跳过循环中的一个迭代。

for (i=0;i<=10;i++)
{
if (i==3) continue;
x=x + "The number is " + i + "
";
}
此循环跳过了值 3```

JavaScript 错误 - Throw、Try 和 Catch

        try 语句测试代码块的错误。
        catch 语句处理错误。
        throw语句创建自定义错误。

try
  {
  //在这里运行代码
  }
catch(err)
  {
  //在这里处理错误
  }```
- `Throw` 语句
&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;`throw` 语句允许我们创建自定义错误。
&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;正确的技术术语是:创建或抛出异常`(exception)`。
&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;如果把 `throw` 与 `try` 和 `catch` 一起使用,那么您能够控制程序流,并生成自定义的错误消息。

##JavaScript 表单验证
&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;`JavaScript `可用来在数据被送往服务器前对` HTML` 表单中的这些输入数据进行验证。
被 `JavaScript `验证的这些典型的表单数据有:
&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;用户是否已填写表单中的必填项目?
&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;用户输入的邮件地址是否合法?
&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;用户是否已输入合法的日期?
&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;用户是否在数据域` (numeric field) `中输入了文本?
最后编辑于
©著作权归作者所有,转载或内容合作请联系作者
  • 序言:七十年代末,一起剥皮案震惊了整个滨河市,随后出现的几起案子,更是在滨河造成了极大的恐慌,老刑警刘岩,带你破解...
    沈念sama阅读 205,386评论 6 479
  • 序言:滨河连续发生了三起死亡事件,死亡现场离奇诡异,居然都是意外死亡,警方通过查阅死者的电脑和手机,发现死者居然都...
    沈念sama阅读 87,939评论 2 381
  • 文/潘晓璐 我一进店门,熙熙楼的掌柜王于贵愁眉苦脸地迎上来,“玉大人,你说我怎么就摊上这事。” “怎么了?”我有些...
    开封第一讲书人阅读 151,851评论 0 341
  • 文/不坏的土叔 我叫张陵,是天一观的道长。 经常有香客问我,道长,这世上最难降的妖魔是什么? 我笑而不...
    开封第一讲书人阅读 54,953评论 1 278
  • 正文 为了忘掉前任,我火速办了婚礼,结果婚礼上,老公的妹妹穿的比我还像新娘。我一直安慰自己,他们只是感情好,可当我...
    茶点故事阅读 63,971评论 5 369
  • 文/花漫 我一把揭开白布。 她就那样静静地躺着,像睡着了一般。 火红的嫁衣衬着肌肤如雪。 梳的纹丝不乱的头发上,一...
    开封第一讲书人阅读 48,784评论 1 283
  • 那天,我揣着相机与录音,去河边找鬼。 笑死,一个胖子当着我的面吹牛,可吹牛的内容都是我干的。 我是一名探鬼主播,决...
    沈念sama阅读 38,126评论 3 399
  • 文/苍兰香墨 我猛地睁开眼,长吁一口气:“原来是场噩梦啊……” “哼!你这毒妇竟也来了?” 一声冷哼从身侧响起,我...
    开封第一讲书人阅读 36,765评论 0 258
  • 序言:老挝万荣一对情侣失踪,失踪者是张志新(化名)和其女友刘颖,没想到半个月后,有当地人在树林里发现了一具尸体,经...
    沈念sama阅读 43,148评论 1 300
  • 正文 独居荒郊野岭守林人离奇死亡,尸身上长有42处带血的脓包…… 初始之章·张勋 以下内容为张勋视角 年9月15日...
    茶点故事阅读 35,744评论 2 323
  • 正文 我和宋清朗相恋三年,在试婚纱的时候发现自己被绿了。 大学时的朋友给我发了我未婚夫和他白月光在一起吃饭的照片。...
    茶点故事阅读 37,858评论 1 333
  • 序言:一个原本活蹦乱跳的男人离奇死亡,死状恐怖,灵堂内的尸体忽然破棺而出,到底是诈尸还是另有隐情,我是刑警宁泽,带...
    沈念sama阅读 33,479评论 4 322
  • 正文 年R本政府宣布,位于F岛的核电站,受9级特大地震影响,放射性物质发生泄漏。R本人自食恶果不足惜,却给世界环境...
    茶点故事阅读 39,080评论 3 307
  • 文/蒙蒙 一、第九天 我趴在偏房一处隐蔽的房顶上张望。 院中可真热闹,春花似锦、人声如沸。这庄子的主人今日做“春日...
    开封第一讲书人阅读 30,053评论 0 19
  • 文/苍兰香墨 我抬头看了看天上的太阳。三九已至,却和暖如春,着一层夹袄步出监牢的瞬间,已是汗流浃背。 一阵脚步声响...
    开封第一讲书人阅读 31,278评论 1 260
  • 我被黑心中介骗来泰国打工, 没想到刚下飞机就差点儿被人妖公主榨干…… 1. 我叫王不留,地道东北人。 一个月前我还...
    沈念sama阅读 45,245评论 2 352
  • 正文 我出身青楼,却偏偏与公主长得像,于是被迫代替她去往敌国和亲。 传闻我的和亲对象是个残疾皇子,可洞房花烛夜当晚...
    茶点故事阅读 42,590评论 2 343

推荐阅读更多精彩内容