JavaScript 教程一: 认识JavaScript

最新推荐文章于 2024-07-12 20:52:58 发布

技术引领者

最新推荐文章于 2024-07-12 20:52:58 发布

阅读量248

点赞数

分类专栏： JavaScript 文章标签： JavaScript

本文链接：https://blog.csdn.net/qq_37022150/article/details/77199540

版权

JavaScript 专栏收录该内容

6 篇文章 0 订阅

订阅专栏

最近百忙之中，抽点周末时间温习下JavaScript

要点一: 概念解释


JavaScript 是世界上最流行的编程语言

可用于 HTML 和 web，更可广泛用于服务器、PC、笔记本电脑、平板电脑和智能手机等设备

要点二: 如何用

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

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

<!DOCTYPE html>
<html>
<body>
.
.
<script>
document.write("<h1>This is a heading</h1>");
document.write("<p>This is a paragraph</p>");
</script>
.
.
</body>
</html>

要点三: 简单例子，HTML输出

<!DOCTYPE html>
<html>
<body>

<h1>My First Web Page</h1>

<script>
document.write("<p>My First JavaScript</p>");
</script>

</body>
</html>

要点四: JavaScript 语句，代码，代码块，大小写, 空格, 折行

语句

document.getElementById("demo").innerHTML="Hello World";

代码

document.getElementById("demo").innerHTML="Hello World";
document.getElementById("myDIV").innerHTML="How are you?";

顺序执行!!!

代码块

function myFunction()
{
document.getElementById("demo").innerHTML="Hello World";
document.getElementById("myDIV").innerHTML="How are you?";
}

大小写: 敏感

空格: 会自动忽略

折行

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

此为正确的折行

要点五: 注释

分类: 单行注释使用符号 // ; 多行注释 /* */ ；

作用: 提高代码可读性; 阻止代码运行;

要点六: 变量

定义: 变量是存储信息的容器

变量的声明语法:

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

变量的类型:

数字(就两种，带小数点与不带小数点的，除此也可以使用科学计数法)；

字符串，数组，对象

自定义对象;

变量声明:

var name="Gates", age=56, job="CEO";

以上是多行表达，也可以多行表达;

要点七: 对象

两大特性: 属性与方法；

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

方法: getName()等等;

要点八: 函数

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

JavaScript 函数语法

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

调用带参数的函数

<button οnclick="myFunction('Bill Gates','CEO')">点击这里</button>

<script>
function myFunction(name,job)
{
alert("Welcome " + name + ", the " + job);
}
</script>

带有返回值的函数

unction myFunction(a,b)
{
if (a>b)
  {
  return;
  }
x=a+b
}

要点九: 运算符

算术运算符:

运算符 	描述 	例子 	结果
+ 	加 	x=y+2 	x=7
- 	减 	x=y-2 	x=3
* 	乘 	x=y*2 	x=10
/ 	除 	x=y/2 	x=2.5
% 	求余数 (保留整数) 	x=y%2 	x=1
++ 	累加 	x=++y 	x=6
-- 	递减 	x=--y 	x=4

赋值运算符:

运算符 	例子 	等价于 	结果
= 	x=y 	  	x=5
+= 	x+=y 	x=x+y 	x=15
-= 	x-=y 	x=x-y 	x=5
*= 	x*=y 	x=x*y 	x=50
/= 	x/=y 	x=x/y 	x=2
%= 	x%=y 	x=x%y 	x=0

比较运算符

运算符 	描述 	例子
== 	等于 	x==8 为 false
=== 	全等（值和类型） 	x===5 为 true；x==="5" 为 false
!= 	不等于 	x!=8 为 true
> 	大于 	x>8 为 false
< 	小于 	x<8 为 true
>= 	大于或等于 	x>=8 为 false
<= 	小于或等于 	x<=8 为 true

逻辑运算符

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

if ...else{} 不做介绍，最基础的，顺便可以了解下三元运算符;

switch,直接看下面实例:

var day=new Date().getDay();
switch (day)
{
case 0:
  x="Today it's Sunday";
  break;
case 1:
  x="Today it's Monday";
  break;
case 2:
  x="Today it's Tuesday";
  break;
case 3:
  x="Today it's Wednesday";
  break;
case 4:
  x="Today it's Thursday";
  break;
case 5:
  x="Today it's Friday";
  break;
case 6:
  x="Today it's Saturday";
  break;
}

for循环，重点介绍

分类:

for - 循环代码块一定的次数
for/in - 循环遍历对象的属性
while - 当指定的条件为 true 时循环指定的代码块
do/while - 同样当指定的条件为 true 时循环指定的代码块

for 应用实例:

for (var i=0; i<5; i++)
  {
  x=x + "The number is " + i + "<br>";
  }

for/in 应用实例:

var person={fname:"John",lname:"Doe",age:25};

for (x in person)
  {
  txt=txt + person[x];
  }

while 应用实例:

while (i<5)
  {
  x=x + "The number is " + i + "<br>";
  i++;
  }

do/while应用实例:

do
  {
  x=x + "The number is " + i + "<br>";
  i++;
  }
while (i<5);

break：语句用于跳出循环

continue：用于跳过循环中的一个迭代

JavaScript 错误 - Throw、Try 和 Catch 不做过多介绍;

要点十: 表单验证

<html>
<head>
<script type="text/javascript">

function validate_required(field,alerttxt)
{
with (field)
  {
  if (value==null||value=="")
    {alert(alerttxt);return false}
  else {return true}
  }
}

function validate_form(thisform)
{
with (thisform)
  {
  if (validate_required(email,"Email must be filled out!")==false)
    {email.focus();return false}
  }
}
</script>
</head>

<body>
<form action="submitpage.htm" οnsubmit="return validate_form(this)" method="post">
Email: <input type="text" name="email" size="30">
<input type="submit" value="Submit"> 
</form>
</body>

</html>

邮箱验证

<html>
<head>
<script type="text/javascript">
function validate_email(field,alerttxt)
{
with (field)
{
apos=value.indexOf("@")
dotpos=value.lastIndexOf(".")
if (apos<1||dotpos-apos<2) 
  {alert(alerttxt);return false}
else {return true}
}
}

function validate_form(thisform)
{
with (thisform)
{
if (validate_email(email,"Not a valid e-mail address!")==false)
  {email.focus();return false}
}
}
</script>
</head>

<body>
<form action="submitpage.htm"οnsubmit="return validate_form(this);" method="post">
Email: <input type="text" name="email" size="30">
<input type="submit" value="Submit"> 
</form>
</body>

</html>

更多文章，请关注: http://blog.csdn.net/qq_37022150