javascript编程基础1

时间 2019-11-29

原文原文链接

1，javascript能干什么？

直接写入html中：javascript

<script>
document.write("<h1>这是一级标题</h1>")    //输出加大加黑的文本
</script>

能够定义某个页面对事件的反应：php

<body> 
<button type="button" onclick="alert('欢迎!')">点我!</button>    //点击之后出现提示窗口，提示：欢迎！
</body>

改变html本页的某些内容：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图像：java

<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属性也改了，因此再次点击，会再一次变换图片python

js能够改变html样式：chrome

<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>

能够验证输入：shell

<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) 来定义。属性由逗号分隔，花括号内部空行和折行都不要紧

//访问对象属性：语法：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对象是属性和方法的容器。

对象定义：

//访问对象属性：name=person.lastName; 或者 name=person["lastName"]
//访问对象的方法：name=person.fullName(); 括号必不可少

js是基于对象的语言，因此不少功能都是经过对象来实现的：

js中对象和函数的关系比较微妙，全部的函数都是一个对象，全部的对象均可以用构造函数建立：

我理解的正常建立对象：

//这种建立对象的方法叫：  对象字面量，这种写法的缺点在于每次建立一个新对象都须要写出完整的定义语句，不利于继承
var obj1 = {    //定义一个obj1的对象，对象下有name和age属性
    name : '手速快',//属性
    age :  27,//属性
    fun :function () {//obj1下有一个fun方法，这个方法其实是一个函数，每次调用这个方法都会打印这个对象的name属性
    alert (this.name); 
   }
}
console.log(obj1);    //打印pbj1这个对象到调试器

固然也有一种先定义空对象，而后添加属性、方法的对象字面量方法：

var person = {};
person.name = 'zqq';
person.age = 28;
person.say = function(){
    return "hello";
}

可是js有一种非正常的建立对象的方法：叫构造函数，就很难以理解了。

也不知道理解得对不对，不过无论对仍是不对，js中的函数和对象的分界线实在是不很明显，若是对的话，对象和实例的分界线也不明显，父类和子类的分界也并不明显，尤为是，js中很为一个对象建立子类，也很难为它的子类建立子类的子类。

<script>
function Test (name,age) {
    this.name = name;
    this.age = age;
    this.sayName = function () {
        alert(this.name);
    }
}
console.log(typeof Test)   //获得function
var baby = new Test('mike','18'); //baby继承了test的属性和方法，能够baby.name打印试试
console.log(typeof baby)    //获得object
var ababy=new baby("jack","5")    //报错
//那么，new究竟干了什么？
//1，建立了一个对象：var baby={}
//2，而后把this指向了baby（本来的this指向window），因而baby拥有了和Test同样的name属性
//3，Test会自动添加一个prototype原型对象，因此Test本身是function，它同时有一个prototype原型对象，（暂时理解成它有函数和对象这俩属性）他的属性和方法全部实例共享
//4，在建立baby对象的时候，为它添加了一个__proto__内置原型对象，这个对象指向Test的原型对象，暂时理解成Test是baby的类或者父类
//总结：new其实是在没改变函数的状况下为它建立了一个对象，而且声明了这个对象的实例。
</script>

参考：https://www.cnblogs.com/liveoutfun/p/8735992.html

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，空格也算一个字符

字符串中若是须要下列字符，那请先转义：

代码	须要的符号
\'	单引号
\"	双引号
\\	反斜杠
\n	换行
\r	回车
\t	tab(制表符)
\b	退格符
\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>

1. JavaScript编程语言基础（1）
2. JavaScript编程基础
3. javascript基础教程（1）
4. JavaScript基础 - 1
5. javascript基础1
6. 1、JavaScript基础
7. JavaScript 基础1
8. javascript-基础1
9. JavaScript基础1
10. 林大妈的JavaScript基础知识（三）：JavaScript编程（1）对象
更多相关文章...
• Kotlin 基础语法 - Kotlin 教程
• Scala 基础语法 - Scala教程
• Kotlin学习（二）基本类型
• ☆基于Java Instrument的Agent实现