XZ_JavaScript之JavaScript的基本语法

来源：互联网发布：广电网络智慧社区编辑：程序博客网时间：2024/05/18 15:23

什么是JavaScript？是一门广泛用于浏览器客户端的脚本语言，由Netspace公司设计，当时跟Sun公司合作，所以名字起得像Java。简称，JS。

JS的常见用途

HTML DOM操作（节点操作，比如，添加、修改、删除节点）；
给HTML网页增加动态功能，比如动画
事件处理：比如，监听鼠标点击、鼠标滑动、键盘输入

<script> 标签

那些老旧的实例可能会在 <script> 标签中使用 type="text/javascript"。现在已经不必这样做了。JavaScript 是所有现代浏览器以及 HTML5 中的默认脚本语言。
您可以在 HTML 文档中放入不限数量的脚本。
脚本可位于 HTML 的 <body> 或 <head> 部分中，或者同时存在于两个部分中。通常的做法是把函数放入 <head> 部分中，或者放在页面底部。这样就可以把它们安置到同一处位置，不会干扰页面的内容。
我们把 JavaScript 放到了页面<body>代码的底部，这样就可以确保在标签元素创建之后再执行脚本。

外部的 JavaScript

也可以把脚本保存到外部文件中。外部文件通常包含被多个网页使用的代码。
外部 JavaScript 文件的文件扩展名是 .js。
如需使用外部文件，请在 <script> 标签的 "src" 属性中设置该 .js 文件。
外部脚本不能包含 <script> 标签。

JavaScript对大小写敏感

JavaScript 对大小写是敏感的。
当编写 JavaScript 语句时，请留意是否关闭大小写切换键。
函数 getElementById 与 getElementbyID 是不同的。
同样，变量 myVariable 与 MyVariable 也是不同的。

空格

JavaScript 会忽略多余的空格。您可以向脚本添加空格，来提高其可读性。下面的两行代码是等效的：

varname=“Jack”;

varname="Jack”;

注释

单行注释以 // 开头。

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

声明（创建）JavaScript变量

1.使用 var 关键词来声明变量；

2.变量声明之后，该变量是空的（它没有值）。

3.如需向变量赋值，请使用等号：

varname='jack';// 字符串类型

4.当变量是字符串类型时，应该用双引号或单引号包围这个值。

5.在一条语句中声明很多变量。该语句以 var 开头，并使用逗号分隔变量即可：

varname="Gates", age=56, job="CEO”;

声明也可横跨多行：

varname="Gates",

age=56,

job="CEO”;

6.如果重新声明 JavaScript 变量，该变量的值不会丢失：

在以下两条语句执行后，变量 carname 的值依然是 "Volvo”：

varcarname="Volvo”;

varcarname;

7.JavaScript 变量均为对象。当您声明一个变量时，就创建了一个新的对象。当您声明新变量时，可以使用关键词 "new" 来声明其类型：

varcarname=newString;

varx= newNumber;

vary= newBoolean;

varcars= newArray;

varperson= newObject;

JavaScript的书写方式

JS常见的书写方式有2种

1>页内JS：在当前网页的script标签中编写，一般放在body标签中，不放在header标签中

<scripttype="text/javascript"></script>

2>外部JS

<scriptsrc="test.js"type="text/javascript"charset="utf-8"></script>

输出元素的方式

// 弹框输出

alert('hello world');

alert('你好，世界！');

// 调试输出

console.log('你好，世界!');

<scripttype="text/javascript">

1.基本语法

varage=18;// 整型

varmoney=100.99;// 浮点型

varname='jack';// 字符串类型

name2='rose';

varresult=true;// false 布尔类型

varnumber=null;// 空类型

varnumber1 =undefined;

varresult2;//result2 为 undefined,undefined 这个值表示变量不含有值。

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

2.输出

console.log(age,money,name,name2,result,number,number2);

3.变量的真实类型 typeof

console.log(typeofage,typeofmoney,typeofname,typeofname2,typeofresult,typeofnumber,typeofnumber2);

4.基本数据类型的运算

4.1 字符串的拼接

varnewName=name+'-'+name2;

console.log(newName);

4.2 题目输出结果

// 基本数据类型的运算遵循的规律:运算是从左往右;任何类型的变量与string类型的变量拼接就会被强转为string;

varstr1=10+10+'10';// 2010

varstr2='10'+10+10;// 101010

varstr3=(10+'10')+10;// 101010

console.log(str1,str2,str3);

5.数组:可以装任何东西

varnumbers=[-10,'san',name,result,number,['哈哈','呵呵']];

5.1遍历数组

for(vari=0;i<numbers.length;i++) {

console.log(numbers[i]);

}

for(variinnumbers) {

console.log(numbers[i]);

}

5.2 JS中常用的属性

数组相当于栈，删除栈元素用pop，往栈中添加元素用push

// 删除数组中最后一个内容

numbers.pop();

// 向数组末尾添加一个元素

numbers.push('zhangsan');

for(variinnumbers) {

console.log(numbers[i]);

}

6.JS 常用的类库 Math

varnumsArr=[10,212,3223,32];

varmaxNum=Math.max(10,30,20);

// 获取最大值

varNewMaxNum=Math.max.apply(this,numsArr);

console.log(NewMaxNum);

</script>

JS中常见的函数

语法

function函数名(){

// 函数体

}

function函数名(参数1，参数2){

// 函数体

}

关键词 function 必须是小写的，并且必须以与函数名称相同的大小写来调用函数。

变量

局部变量

1.在 JavaScript 函数内部声明的变量（使用 var）是局部变量，所以只能在函数内部访问它。（该变量的作用域是局部的）。

2.您可以在不同的函数中使用名称相同的局部变量，因为只有声明过该变量的函数才能识别出该变量。

3.只要函数运行完毕，本地变量就会被删除。

全局变量

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

变量的生存期

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

向未声明的变量来分配值

如果您把值赋给尚未声明的变量，该变量将被自动作为全局变量声明。

这条语句：

carname="Volvo”;

将声明一个全局变量 carname，即使它在函数内执行。

当声明函数时，把参数作为变量来声明：

1.1加法运算（两个数）

functionsum(num1,num2) {

returnnum1+num2;

}

// 如何调用？

varresult=sum(12,323);

console.log(result);

1.2万能的加法函数

functionsum2(nums) {

// 变量

varresult=0;

for(variinnums) {

result+=nums[i];

}

// 返回

returnresult;

}

// 调用；

varresult1=sum2([1,2,3,4]);

console.log(result1);

1.3匿名函数:没有函数名称,得有变量接收

varres=function() {

console.log('我是匿名函数’)；

}

// 调用匿名函数；

res();

</script>

JS中的对象

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

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

3.对象属性有两种寻址方式：

name=dog.name;

name=dog["name”];

4.JavaScript 中的所有事物都是对象：字符串、数字、数组、日期，等等。

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

<scripttype="text/javascript”>

1.创建对象，object

vardog={

name:'wangwang',

age:3,

height:0.7,

dogFriends:['lili','wangcai'],

eat:function(something) {

// this 所在的函数属于哪个对象，this就代表这个对象

console.log(this.name+'吃狗粮'+something);

run:function(somewhere) {

console.log(this.name+'跑一跑'+somewhere);

}

};

2.输出dog的类型

console.log(typeofdog);

// 2.输出狗对象的属性和行为

console.log(dog.name,dog.age);

dog.eat('喝牛奶');

dog.run('5km');

</script>

JS批量创建对象

<scripttype="text/javascript”>

// 构造函数

varDog=function() {

console.log('这是一个普通函数');

}

// 普通调用

Dog();

// 普通函数 -> 构造函数 alloc init -> new

vardog1= newDog();

vardog2= newDog();

console.log(dog1,dog2);

</script>

确实批量产生对象

<scripttype="text/javascript”>

// 创建构造函数（抽象）

varDog=function() {

this.name=null;

this.age=null;

this.dogFriends=[];

this.height=null;

this.eat=function(something) {

console.log(this.name+'eat'+something);

}

this.run=function(somewhere) {

console.log(this.name+'run'+somewhere);

}

// 批量产生对象

vardog1= newDog();

dog1.name='wangcai';

dog1.age=8;

dog1.dogFriends=['anan','daidai'];

dog1.eat(‘狗粮');

vardog2= newDog();

dog2.name='wangwang';

dog2.age=1;

dog2.eat('狗粮');

console.log(dog1,dog2);

</script>

// 创建带参数的构造函数（抽象）

varDog=function(name,age,dogFriends,height) {

this.name=name;

this.age=age;

this.dogFriends=dogFriends;

this.height=height;

this.eat=function(something) {

console.log(this.name+'eat'+something);

}

this.run=function(somewhere) {

console.log(this.name+'run'+somewhere);

}

vardog3= newDog('daidai',5,['we'],0.8);

总结

JavaScript：写入 HTML 输出

document.write('hello,world’);

document.write('<input type="file" />');

document.write('<img src="../../03-登录界面/imgs/login_QQ.png" />’);

JavaScript：对事件作出反应

<buttontype="button"onclick="alert('Welcome!')">点击这里</button>

JavaScript：改变 HTML 内容

使用 JavaScript 来处理 HTML 内容是非常强大的功能。

//查找元素

varbtn=document.getElementsByTagName('button')[0];

//修改内容

btn.innerText='隐藏’;

JavaScript：改变 HTML 图像

// 1.获取网页中的img标签

varimg=document.getElementsByClassName('icon')[0];

// 2.改变src属性

img.src="image/img_02.jpg”;

JavaScript：改变 HTML 样式

varicon=document.getElementsByClassName('icon')[0];

icon.style.display='none';

JavaScript：验证输入

ifisNaN(x) {

alert("输入正确");

}

阅读全文

0 0