JavaScript 概述

最新推荐文章于 2023-04-30 10:52:14 发布

秋绛冰

最新推荐文章于 2023-04-30 10:52:14 发布

阅读量450

点赞数

分类专栏： web前端文章标签： javascript

本文链接：https://blog.csdn.net/taojingbing/article/details/17394647

版权

web前端专栏收录该内容

1 篇文章 0 订阅

订阅专栏

JavaScript 概述

JavaScript是基于对象和事件驱动的脚本语言，主要应用在客户端。

特点：

1. 交互性（它可以做的就是信息的动态交互）

2. 安全性（不允许直接访问本地硬盘）

3. 跨平台性（只要是可以解释Js的浏览器都可以执行，和平台无关）

JavaScript与Java不同

1. JS是Netscape公司的产品，前身是LiveScript;Java是Sun公司的产品，现在是Oracle公司的产品。

2. JS是基于对象，Java是面向对象。

3. JS只需解释就可以执行，Java需要先编译成字节码文件，再执行。

4. JS是弱类型，Java是强类型。

JavaScript与Html的结合方式

想要将其他代码融入到Html中，都是以标签的形式。

1. JS代码存放在标签对<script> js code．．．</script>中。

2. 当有多个html页面使用到相同的JS脚本时，可以将js代码封装到一个文件中，只要在script标签的src属性引入一个js文件。（方便后期维护，扩展）

注意：如果在script标签中定义了src属性，那么标签中的内容不会被执行。

例：<script src=”test.js” type=”text/javascript”></script>

注：规范中script标签早期有一个属性language,而现在使用type属性。

JavaScript语法

每一种语言都有自己的语法规则，JS语法与Java很像，所以学习起来比较容易。JS中也一样有变量，语句，函数，数组等常见语言组成元素。

1. 变量

通过关键字var来定义，弱类型既是不用指定具体的数据类型。

例：var x = 3; x = “hello”;

注：JS中特殊的常量值：undefined，当变量没有初始化就被使用，该变量的值就是undefined（未定义）。

注意：Javascript的语句在结尾处是可以不用分号结束的，非严谨语言的特点。

但为了符合编程规范，需要象java一样定义结束符。

而且有些情况是必须写分号的，如：var x = 3 ; var y =5 如果两条语句写在同一行，就需要分号隔开。

2. 运算符

Javascript中的运算符和Java大致相同。

只是运算过程中需要注意几点：

1， var x = 3120/1000*1000; x = 3120;而不是3000。

2， var x = 2.4+3.6 ; x = 6;而不是6.0

3， var x = “12” + 1; x = “121”; x = “12” – 1 ; x = 11;

加号对于字符串是连接符.减号是数字相减

4， && || 是逻辑运算符 & | 是位运算符。

& &&区别，前面用0或1表示，后面用true false表示。|| |同理

5，位运算符 & |

6，也支持三元运算符

7，特殊运算符 typeof : 返回一个操作表达式的数据类型的字符串。

var x = 3;

var y = “123”;

var z = false;

typeof(x); //number

typeof(y); //string。注意，此处是小写的。跟java不一样

typeof(z); //boolean

7，javascript中，非0非null用true表示，默认可以参运算。false代表0或则null；

3. 语句(与Java语句格式相同)

1. 判断结构(if语句)

注：var x = 3;

if(x==4)//可以进行比较运算。

if(x=4)//可以进行赋值运算，而且可以同样进行判断。不报错。

因为在Js中0或者null就是false，

非0或者非null就是true（通常用1表示）。

所以if(x=4)结果是true；

建议通过if(4==y)来解决该问题。因为4=y不会进行判断，而是会报错。

2. 选择结构(switch语句)

与java不同的是：因为弱类型，也可以对字符串进行选择。

3. 循环结构(while语句，do…while语句，for语句)。

注：不同的是，没有了具体数据类型的限制，使用时要注意。

<body>

//需求/一：创建并添加节点在节点1 :div_1中加入文字

function crtAddNode2(){

//1：创建文本节点，通过document的createTextNode方法

var textNode = document.createTextNode("好诗啊");

//2：获取div_1节点

var divNode = document.getElementById("div_1");

//3：使用div节点的方法完成节点的添加

divNode.appendChild(textNode);

//添加一个按钮

//1创建一个按钮

var butNode = document.createElement("input");

//2使用input节点的type属性来指定该input是一个按钮

butNode.type = "button";

butNode.value = "新的按钮来啦";

divNode.appendChild(butNode);

}

//另一种添加节点的方法

function crtAddNode(){

var divNode = document.getElementById("div_1");

//使用该节点的innerHTML属性即可(覆盖式的，可以添加html文本)

divNode.innerHTML = "<input type = 'button' value = '按钮又来啦'>";

}

//需求/二：演示删除节点div_2

function delAddNode(){

//获取要删除的节点

var divNode = document.getElementById("div_2");

// divNode.removeNode(true);

//方法2找父节点从父节点上删除，较为常用

divNode.parentNode.removeChild(divNode);

}

//需求/三：演示更新节点,替换3

function updNode(){

var divNode = document.getElementById("div_3");

var butNode = document.createElement("input");

//2使用input节点的type属性来指定该input是一个按钮

butNode.type = "button";

butNode.value = "新的按钮来啦";

// divNode.replaceNode(butNode);

// 方法二

divNode.parentNode.replaceChild(butNode,divNode);

}

//需求/四:用div2替换div4

function updNode2(){

var divNode2 = document.getElementById("div_2");

var divNode4 = document.getElementById("div_4");

//保留div2，div4替换成div2，需要对div2节点进行复制

var divNode2_copy = divNode2.cloneNode(true);

divNode4.parentNode.replaceChild(divNode2_copy,divNode4);

}

</script>

<hr />

窗前明月光；

</div>

div_2：疑是地上霜；

</div>

div_3：谁知盘中餐；

</div>

div_4：花落知多少；

</div>

</body>

</html>

4. 函数

1. 一般函数

格式：

function 函数名(形式参数...)

{

执行语句；

return 返回值；

}

函数是多条执行语句的封装体，只有被调用才会被运行。

注意：调用有参数的函数，但没有给其传值，函数一样可以运行，或者调用没有参数的函数，给其传值，该函数也一样运行。

说的简单点：只要写了函数名后面跟了一对小括号，该函数就会运行。那么传递的参数呢？

其实，在函数中有一个参数数组对象（arguments），该对象将传递的参数都封装在一个数组中。

例：

function demo()//定义函数。

{

alert(arguments.length);

}

demo(“hello”,123,true);//调用函数。

那么弹出的对话框结果是3，如果想得到所有的参数值，可以通过for循环遍历该数组。

for(var x=0; x<arguments.length; x++)

{

alert(arguments[x]);

}

为了增强阅读性，最好按照规范，按定义好的形式参数传递实际参数。

函数在调用时的其他写法：

var show = demo();//show变量接收demo函数的返回值。

var show = demo;//这种写法是可以的，意为show和demo代表同一个函数。

//那么该函数也可以通过show()的方式运行。

— 动态函数

通过Js的内置对象Function实现。

例：var demo = new Function(“x,y”;”alert(x+y);”);

demo(4,6);

如同：

function demo(x,y)

{

alert(x+y);

}

demo(4,6);

不同的是，动态函数，参数以及函数体都可以通过参数进行传递，可以动态指定。

— 匿名函数

格式：function(){...}

例：var demo = function(){...}

demo();

通常在定义事件属性的行为时较为常用。

例：

function test()

{

alert(“load ok”);

}

window.onload = test;

可以写成匿名函数的形式：

window.onload = function()

{

alert(“load ok”);

}

匿名函数就是一种简写格式。

5. 数组

方便操作多元素的容器，可以对其中的元素进行编号。

特点：可以存任意元素，长度是可变的。

格式：

var arr = new Array();

arr[0] = “hello”;

arr[1] = 123;

var arr = [‘hello’,123,true,”abc”];

通过遍历即可对数组进行基本操作。

for(var x=0; x<arr.length; x++)

{

alert(arr[x]);

}

6. 对象

Js除了已经提供的内置对象外，也可以自定义对象。

例：

function Person()//很象java中的构造函数。P不一定要大写。

{

}

var p = new Person();

p.name = “zhangsan”;//定义成员变量。

p.age = 20;

//定义成员函数。

p.run = function()

{

alert(“run”);

}

p.run();

或：

function Person(name,age)

{

this.name = name;

this.age = age;

}

var p = new Person(“zhangsan”,20);

Js用于操作对象的语句

— with语句。

格式：

with(对象)

{

}

应用：当调用一个对象中多个成员时，为了简化调用，避免”对象.”这种格式的重复书写。

var p = new Person(“zhangsan,20);

alert(p.name+”,”+p.age);

可以写成：

var p = new Person(“zhangsan”,20);

with(p)

{

alert(name+”,”+age);

}

with语句定义了某个对象的作用域，在该域中可以直接调用该对象的成员。

— for...in语句

用于遍历对象属性。

例：

var p = new Person(“zhangsan”,20);

for(x in p)

{

alert(x);//结果是两个对话框，一个是name，一个是age。

alert(x+”:”+p[x]);//可以得到属性与属性的值。p[x]:p对象就是个数组，要通过指定的元素名获取元素的值。

}

秋绛冰

关注

0
点赞
踩
0

收藏

觉得还不错? 一键收藏
0
评论
JavaScript 概述

JavaScript 概述JavaScript是基于对象和事件驱动的脚本语言，主要应用在客户端。特点：1. 交互性（它可以做的就是信息的动态交互）2. 安全性（不允许直接访问本地硬盘）3. 跨平台性（只要是可以解释Js的浏览器都可以执行，和平台无关）JavaScript与Java不同1. JS是Netscape
复制链接

扫一扫

专栏目录