javascript编程基础1
Posted 0点0度
tags:
篇首语：本文由小常识网(cha138.com)小编为大家整理，主要介绍了javascript编程基础1相关的知识，希望对你有一定的参考价值。
1，javascript能干什么？
直接写入html中：
<script> document.write("<h1>这是一级标题</h1>") //输出加大加黑的文本 </script>
可以定义某个页面对事件的反应：
<body> <button type="button" onclick="alert(‘欢迎!‘)">点我!</button> //点击以后出现提示窗口，提示：欢迎！ </body>
改变html本页的某些内容：
<body> <p id="demo"> JavaScript 能改变 HTML 元素的内容。 </p> <script> function myFunction() { x=document.getElementById("demo"); // 函数首先获得元素 x.innerHTML="Hello JavaScript!"; // 然后函数把该元素的文本换一下，编程hello javascript } </script> <button type="button" onclick="myFunction()">点击这里</button> //定义了一个按钮，一点击就运行函数，然后改变id=demo的元素的内容 </body>
<button onclick="this.innerHTML=Date()">现在的时间是?</button> //定义了一个按钮，按下会改变自己按钮上的内容，注意this
改变html图像：
<script> function changeImage() { element=document.getElementById(‘myimage‘) //获取id，确定要对哪个元素下手 if (element.src.match("bulbon")) //获取元素src属性，这个属性相当于文件的url，如果从src属性中匹配到‘bulbon’，那就用bulboff这张图 { element.src="/images/pic_bulboff.gif"; } else //如果匹配不到，那就用bulbon这张图 { element.src="/images/pic_bulbon.gif"; } } </script> <img id="myimage" onclick="changeImage()" src="/images/pic_bulboff.gif" width="100" height="180">
亲测有效，厉害了！注意，当改动了图以后，图像的src属性也改了，所以再次点击，会再一次变换图片
js可以改变html样式：
<body> <p id="demo"> JavaScript 能改变 HTML 元素的样式。 </p> //今天改的就是你了 <script> function myFunction() { x=document.getElementById("demo") // 找到元素，此时x相当于id=”demo“的元素 x.style.color="#ff0000"; // 改变样式，改变该样式style中的color属性，注意，用句号连接。 } </script> <button type="button" onclick="myFunction()">点击这里</button> //设置触发事件 </body>
可以验证输入：
<body> <h1>我的第一段 JavaScript</h1> <p>请输入数字。如果输入值不是数字，浏览器会弹出提示框。</p> <input id="demo" type="text"> //这是接收用户输入的文本框 <script> function myFunction() { var x=document.getElementById("demo").value; //获得id="demo”的文本框的内容，注意后缀的：.value 语句，不仅仅是或者某个id的位置 if(x==""||isNaN(x)) //注意，||和shell编程一样，表示or，如果x为空或者x不是数字 { alert("不是数字"); //用单独的浮动窗口提示：不是数字 } } </script> <button type="button" onclick="myFunction()">点击这里</button> //按钮激发事件 </body>
2，用法规则
HTML 中的脚本必须位于 <script> 与 </script> 标签之间。脚本可被放置在 HTML 页面的 <body> 和 <head> 部分中。javascript也可以被放在外部，用的时候指定它是外来的就行了
外部js程序示例：
<!DOCTYPE html> <html> <body> <script src="myScript.js"></script> //亲测有效，灰常厉害，src表示文件的url </body> </html>
事件就是某个操作执行时候，我们可以激发我们的程序。比如，点击的时候
js输出数据的方式：
- 使用 window.alert() 弹出警告框。实际上单用alert也行。
- 使用 document.write() 方法将内容写到 HTML 文档中。
- document.getElementById("demo") 是使用 id 属性来查找 HTML 元素
- innerHTML = "xxx" 是用于修改元素的 HTML 内容
- 使用 innerHTML 写入到 HTML 元素。比如：<script> document.write(Date());</script> 直接输出中国时区的时间。
- 使用 console.log() 写入到浏览器的控制台，chrome中，控制台为shift+ctrl+j，打开以后能看到：11
js字面量：一般固定值成为字面量，整数、小数、科学计数，字符串，数组，对象，函数。
js的一些重要关键字：
以下是 JavaScript 中最??重要的保留字（按字母顺序）：
| abstract | else | instanceof | super |
| boolean | enum | int | switch |
| break | export | interface | synchronized |
| byte | extends | let | this |
| case | false | long | throw |
| catch | final | native | throws |
| char | finally | new | transient |
| class | float | null | true |
| const | for | package | try |
| continue | function | private | typeof |
| debugger | goto | protected | var |
| default | if | public | void |
| delete | implements | return | volatile |
| do | import | short | while |
| double | in | static | wit |
js注释：
单行注释：//，//后面的内容就不会再执行了
多行注释：/* */，被注释的行和块就不会再执行了。
3，变量
js中变量一般是可变的，字面量是一个值。
js中声明变量就像这样： 变量必须以字母开头（$和_可用于标志特殊变量），对大小写敏感，使用关键字var来声明变量
var x=2; //也可以只声明不赋值，比如：var carname; 变量 carname 的值将是 undefined：
var y=3;
var z=x+y; //第一次声明的时候使用var，往后就不用了
var name="Gates", age=56, job="CEO";
//一下子声明很多变量也是可以的，也支持重新声明变量
//如果您把值赋给尚未声明的变量，不管是在函数内部还是脚本内部，该变量将被自动作为全局变量声明。
js常用的变量类型：数字和字符串，文本外要加单双引号，数字不用加引号
<p id="demo"></p>
<script> var carname="Volvo"; document.getElementById("demo").innerHTML=carname;
</script>
// 创建了名为 carname 的变量，向其赋值 "Volvo"，然后把它放入 id="demo" 的 HTML 段落
注意：一个好的编程习惯是，在代码开始处，统一对需要的变量进行声明
4，js数据类型
字符串（String）、数字(Number)、布尔(Boolean)、数组(Array)、对象(Object)、空（Null）、未定义（Undefined）。
JavaScript 拥有动态类型。这意味着相同的变量可用作不同的类型
var x // x 为 undefined var x = 6; // x 为数字 var x = "Bill"; // x 为字符串
- js字符串和一般字符串一样的，不多说。学名：String
- js只有一种数字类型，带不带小数点都可以，支持科学计数法。学名：Number
- js布尔值，ture和false，学名：Boolean
- js数组和php数组差不多，学名：Array
var cars=new Array(); //声明一个变量cars，用”new“表明了类型，是数组。实际上相当于实例化一个class cars[0]="Audi"; //然后开始向数组中加数据，注意js中的数组的下标从0开始 cars[1]="BMW"; cars[2]="Volvo";
var cars=["Saab","Volvo","BMW"]; //这样创建数组也可以，它按照下标来说事，叫：literal array
- js的Undefined数据类型就是声明了但是未赋值，所以它不含有值。
- js的变量Null表示空，可以通过将变量的值设置为 null 来清空变量。
- js对象（Object）：对象由花括号分隔。在括号内部，对象的属性以名称和值对的形式 (name : value) 来定义。属性由逗号分隔，花括号内部空行和折行都没关系
<script>
var person={ //属性名称和值用冒号分隔，属性和属性用逗号分隔。
firstname : "Bill",
lastname : "Gates",
id : 5566
};
document.write(person.lastname + "<br />"); //对象属性有两种寻址方式，对象.属性 这种方法我比较喜欢
document.write(person["lastname"] + "<br />");
</script>
//访问对象属性：语法：objectName.propertyName
//访问对象方法：语法：objectName.methodName()
声明变量类型：
var carname=new String; var x= new Number; var y= new Boolean; var cars= new Array; var person= new Object;
5，js对象object
JavaScript 对象是拥有属性和方法的数据。js中，几乎所有的事物都是对象。js中对象是变量的容器。js对象是属性和方法的容器。
对象定义：
<script>
var person = {
firstName: "John",
lastName : "Doe",
id : 5566, //前三个是对象的属性
fullName : function() //这个定义了对象的方法，注意格式，
{
return this.firstName + " " + this.lastName; //对象的fullName方法会把firstname和lastname加起来返回。”this“估计是约等于python中的self
}
};
document.getElementById("demo").innerHTML = person.fullName(); //向id等于demo的元素输出fullName结果。
</script>
//访问对象属性：name=person.lastName; 或者 name=person["lastName"]
//访问对象的方法：name=person.fullName(); 括号必不可少
写法类似于python中的字典，php中的关联数组
6 函数
函数可以应用在网页的html语言上，无缝衔接，比较重要
<!DOCTYPE html>
<html>
<head>
<script>
function myFunction()
{
alert("Hello World!"); //函数打印”hello world"
}
</script>
</head>
<body>
<button onclick="myFunction()">点击这里</button> //定义了一个按钮，点击的时候执行函数，通过提示窗口的方式显示函数执行结果
</body>
</html>
函数可以带参数：
<script>
function myFunction(name,job)
{
alert("Welcome " + name + ", the " + job);
}
</script>
<button onclick="myFunction(‘Bill Gates‘,‘CEO‘)">点击这里</button> //按钮中传参进去
函数可以return
function myFunction(a,b)
{
return a*b;
}
document.getElementById("demo").innerHTML=myFunction(4,3); //这句话在<script>内，在函数定义之外
注意：return在函数中也有break的作用，return以后，函数停止，返回结果，如果函数以外还有命令，则继续执行其他命令，仅仅希望退出函数的时候也可以使用return语句，后面不要加返回值。
function myFunction(a,b) { if (a>b) { return; //如果a>b那就退出函数 } x=a+b }
注意：
函数外声明的是全局变量，函数内部声明的变量是局部变量，只有函数内部可以访问。局部变量只作用于函数内，所以不同的函数可以使用相同名称的变量。局部变量在函数开始执行时创建，函数执行完后局部变量会自动销毁。
如果把值赋给尚未声明的变量，该变量将被自动作为 window 的一个属性。也就是全局变量。（全局变量，在函数外声明并且赋值的变量，函数内部没有声明直接赋值的变量，js中的全局变量都是window变量，都可以用window.globalname; 来访问。）
7，事件
HTML 事件是发生在 HTML 元素上的事情。当在 HTML 页面中使用 JavaScript 时， JavaScript 可以触发这些事件。事件可以是用户的或者是浏览器的行为。
事件实例：
- HTML 页面完成加载
- HTML input 字段改变时
- HTML 按钮被点击
常见的html事件：
| 事件 | 描述 |
|---|---|
| onchange | HTML 元素改变 |
| onclick | 用户点击 HTML 元素 |
| onmouseover | 用户在一个HTML元素上移动鼠标 |
| onmouseout | 用户从一个HTML元素上移开鼠标 |
| onkeydown | 用户按下键盘按键 |
| onload | 浏览器已完成页面的加载 |
js可以做什么？
事件可以用于处理表单验证，用户输入，用户行为及浏览器动作:
- 页面加载时触发事件
- 页面关闭时触发事件
- 用户点击按钮执行动作
- 验证用户输入内容的合法性
8 字符串（此处说的是纯字符串，不是字符串对象，字符串对象如:var name= new String("john"）可以理解为创建了一个字符串实例）
字符串支持索引：
var carname="hello world"; var character=carname[7]; //取到o，字符串的索引是从0开始 var a="it ‘ s alright"; //得到：it‘s alright,转义符号不见了，而且转单引号就得到单引号，转双引号得到双引号。当要字符串内包含的引号和外部冲突了，可以转义
var slen=carname.length; //得到11，空格也算一个字符
字符串中如果需要下列字符，那请先转义：
| 代码 | 需要的符号 |
|---|---|
| ‘ | 单引号 |
| " | 双引号 |
| \ | 反斜杠 |
| 换行 | |
| 回车 | |
| tab(制表符) | |
| 退格符 | |
| f | 换页符 |
注意：
我们也可以使用 new 关键字将字符串定义为一个对象：
var x = "John"; var y = new String("John"); typeof x // 返回 String，注意typeof,相当于pythonn中的type（） typeof y // 返回 Object //注意： var x = "John"; var y = new String("John"); (x === y) // 结果为 false，因为 x 是字符串，y 是对象，这两者不同
9 运算符
等于号赋值，加号合并字符串或者累加数字。
算术运算符：y=5
| 运算符 | 描述 | 例子 | 结果 |
|---|---|---|---|
| + | 加 | 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+1 | x=++y | x=6 |
| -- | 递减，可理解为x=y-1 | x=--y | x=4 |
赋值运算符：
x=10,y=5
| 运算符 | 例子 | 等价于 | 结果 |
|---|---|---|---|
| = | 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=5 + "5" 得到”55“，数字与字符串相加，结果将成为字符串！要注意，不然以后要犯错的。
顺便说一句：document.write(x) ,在js中是原地直接打印输出的意思
比较运算符
假设x等于5：
| 运算符 | 描述 | 例子 |
|---|---|---|
| == | 等于 | x==8 为 false |
| === | 全等（值和类型） | x===5 为 true；x==="5" 为 false |
| != | 不等于 | x!=8 为 true |
| > | 大于 | x>8 为 false |
| < | 小于 | x<8 为 true |
| >= | 大于或等于 | x>=8 为 false |
| <= | 小于或等于 | x<=8 为 tr |
逻辑运算符
假定x=6，y=3，和shell编程里运算符差不多
| 运算符 | 描述 | 例子 |
|---|---|---|
| && | and | (x < 10 && y > 1) 为 true |
| || | or | (x==5 || y==5) 为 false |
| ! | not | !(x==y) 为 true |
and 和or别混了，老铁！
条件运算符（个人觉得这更像是if条件的特殊写法）
greeting=(visitor=="PRES")?"Dear President ":"Dear "; //visitor等于“PRES”吗？如果是的话，greeting等于"Dear President",不是的话，greeting等于"Dear"
9，条件运算符
if...else...
<!DOCTYPE html>
<html>
<body>
<p>点击这个按钮，获得基于时间的问候。</p>
<button onclick="myFunction()">点击这里</button> //定制一个网页上的按钮，按下的时候会运行页面底部的函数
<p id="demo"></p>
<script>
function myFunction()
{
var x="";
var time=new Date().getHours(); //new 运算符是用来实例化一个类，所以Date（）是一个内部定义好了的类，getHours（）是一个方法
if (time<20) //注意格式，花括号在下一行，上括号和下括号都单独占一行，和php不同，php上括号顶着function写
{
x="Good day";
}
else // if ...else if...else...格式都是一样的
{
x="Good evening";
}
document.getElementById("demo").innerHTML=x;
}
</script>
</body>
</html>
还有个语句叫if...else if...else...,写法是一样的。
switch基于不同的条件来执行不同的动作
<!DOCTYPE html> <html> <body>
<button onclick="myFunction()">点击这里</button> <p id="demo"></p> <script> function myFunction() { var x; //声明一个变量，没有被赋值 var d=new Date().getDay(); //实例化一个Date对象，并且使用其getDay（）的方法，赋值给d。 switch (d) //按照d的值来决定执行哪个case语句，今天是周天，sunday在这里是0，所以会执行第一个case语句 { case 0: x="Today it‘s Sunday"; //在这里x被赋值 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; } document.getElementById("demo").innerHTML=x; //x的值将会在指定的id=demo的位置输出 } </script> </body> </html>
需要注意的是default： default 关键词来规定匹配不存在时做的事情，约等于else
<html>
<body>
<button onclick="myFunction()">点击这里</button>
<p id="demo"></p>
<script>
function myFunction()
{
var x;
var d=new Date().getDay(); //实例，获取当前的星期数
switch (d) //把星期数作为判断执行哪个语句的标准，
{
case 6: //这个语句会在d等于6的时候执行
x="Today it‘s Saturday";
break;
case 0: //这个语句会在d等于0的时候执行
x="Today it‘s Sunday";
break;
default: //这个语句会在d不等于6和0的时候执行，作用类似于条件判断语句中的else。
x="Looking forward to the Weekend";
}
document.getElementById("demo").innerHTML=x;
}
</script>
</body>
</html>
for循环迭代
循环i
<!DOCTYPE html>
<html>
<body>
<script>
cars=["BMW","Volvo","Saab","Ford"];
for (var i=0;i<cars.length;i++) //迭代i，从i=0一直迭代到小于cars.length,每次加1。括号内的条件判断语句可以省略，但是分号不可以省略
{
document.write(cars[i] + "<br>");
}
</script>
</body>
</html>
循环数组：
<script>
function myFunction()
{
var x;
var txt="";
var person={fname:"Bill",lname:"Gates",age:56};
for (x in person) //注意，此处迭代的是person的值，不是键，这和php不一样
{
txt=txt + " "+person[x];
}
document.getElementById("demo").innerHTML=txt; // 返回：Bill Gates 56
}
</script>
while循环
<script>
function myFunction()
{
var x="",i=0;
while (i<5) //注意格式就可以了
{
x=x + "The number is " + i + "<br>";
i++;
}
document.getElementById("demo").innerHTML=x;
}
</script>
do...while循环实际上和while循环差不多，只不过判定语句在执行以后
do
{
x=x + "The number is " + i + "<br>";
i++;
}
while (i<5);
注意别写无限循环就行了
10，循环控制语句：
break 语句用于跳出循环。
for (i=0;i<10;i++)
{
if (i==3) //if和x=x+...这一句是平级的，i==3的时候，跳出的循环是for循环，if是条件判断，不属于循环，谨记
{
break;
} //if语句可以简写：if (i==3) break; 注意，php和js条件语句后面不加分号这一点是一样的。
x=x + "The number is " + i + "<br>";
}
continue 用于跳过循环中的一个迭代。
for (i=0;i<=10;i++)
{
if (i==3) continue; //i==3的时候，就不打印x了，直接调到for语句，i++变成4
x=x + "The number is " + i + "<br>";
}
break在js中还有一个用，指定跳出一个标签，就是指定停止一个东西的意思
cars=["BMW","Volvo","Saab","Ford"];
list:
{
document.write(cars[0] + "<br>");
document.write(cars[1] + "<br>");
document.write(cars[2] + "<br>");
break list;
document.write(cars[3] + "<br>");
document.write(cars[4] + "<br>");
document.write(cars[5] + "<br>");
}
//结果是：cars[0],cars[1],cars[2]可以被打印出来，break list；以后的语句不会被执行。
11，错误
try 语句允许我们定义在执行时进行错误测试的代码块。
catch 语句允许我们定义当 try 代码块发生错误时，所执行的代码块。
try
{
//在这里运行代码
}
catch(err)
{
//在这里处理错误
}
//类似于python中的try...excet...
throw 语句允许我们创建自定义错误。
正确的技术术语是：创建或抛出异常（exception）。
<!DOCTYPE html>
<html>
<body>
<script> //这个例子好好看一下，灰常值得学习
function myFunction()
{
try
{
var x=document.getElementById("demo").value;
if(x=="") throw "值为空";
if(isNaN(x)) throw "不是数字";
if(x>10) throw "太大";
if(x<5) throw "太小";
}
catch(err) //如果try有问题，那就从‘mess’处得到值
{
var y=document.getElementById("mess");
y.innerHTML="错误：" + err + "。";
}
}
</script>
<h1>我的第一个 JavaScript 程序</h1>
<p>请输入 5 到 10 之间的数字：</p>
<input id="demo" type="text"> //定义了一个文本框，id是‘demo’，类型是text，js通过getElementById（)赋值给x
<button type="button" onclick="myFunction()">测试输入值</button> //定义一个按钮，按下的时候执行函数
<p id="mess"></p>
</body>
</html>
以上是关于javascript编程基础1的主要内容，如果未能解决你的问题，请参考以下文章