Javascript入门

最新推荐文章于 2024-03-04 01:36:32 发布

7watermelon

最新推荐文章于 2024-03-04 01:36:32 发布

阅读量505

点赞数

本文链接：https://blog.csdn.net/watermelon7/article/details/78429633

版权

1、JavaScript介绍

Javascript语言诞生主要是完成页面的数据验证。因此它运行在客户端，需要运行浏览器来解析执行JavaScript代码。

特点：

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

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

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

JavaScript与Java不同

1. JS是Netscape公司的产品，前身是LiveScript;Java是Sun公司的产品，现在是Oracle公司的产品。JScript微软 w3c ECMA组织 ECMAScrip jQuery

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

3. JS只需解释就可以执行，Java需要先编译成字节码文件，再执行。 JS代码有错误，浏览器一般不会提示错误。

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

2、JavaScript和html代码的结合方式

2.1、第一种方式使用script标签嵌入js代码

需要在html文件中嵌入JavaScript代码时，需要在html文件中使用script标签完成。

<!--

js和html结合的第一种方式：

格式：

js代码

</script>

-->

alert("框框");

</script>

2.2、第二种方式外部引入js文件

我们可以单独的建立一个文件保存js代码，然后在需要的html页面引入这个js代码

<!--

js和html结合的第二种方式：引入外部js文件

格式:

<scripttype="text/javascript" src="外部js文件路径">

</script>

通过这种方式引入外部文件的话，那么script标签中是不能写js代码的。

-->

<scripttype="text/javascript"src="1.js">

</script>

<scripttype="text/javascript">

alert("你好世界");

</script>

3、JS中的注释

java中的注释： // /**/ /** */

js中的注释有2种： // /**/

<scripttype="text/javascript">

//alert("ss");

alert("ss");

</script>

4、关键字、标识符

关键字：被JS赋予了特定含义的单词或者字母的组合。

var if switch do while for continue break 等

标识符：开发者根据自己的需求定义的一个符号，这些符号可以由字母数字下划线 $ 符号，开始不能是数字。

5、常量

Java中的常量：

整数、小数、字符、布尔值、null、字符串。

Java中的数据类型：

整数：byte short int long

小数：float double

字符：char

布尔：boolean

字符串：String

Js中的常量：

数值：整数和小数

字符串：在js中使用单引号或者双引号引用起来的全部都是字符串

‘a’ “a”

布尔：true false

在js中零，null、undefined等可以理解成false，所有非零、非null、非undefined值都可以理解成true。

null：null

undefined：undefined

JS中的数据类型：

数值型：number

字符串：string

布尔：boolean

对象类型：Object

在JS中也有二进制、八进制、十进制、十六进制。运算规则和Java一致。

6、变量

变量：表示的是一个内存空间。可以保存常量数据。

Java中如何定义一个变量：

数据类型变量名 ; 数据类型变量名 = 初始值;

JS中定义变量：

var变量名； var 变量名 = 初始值;

JS是弱数据类型

案例：

// 1. 定义一个变量名，使用typeof检测类型

// 2. 给变量赋值数值型，使用typeof检测类型

// 3. 给变量赋值字符串型，使用typeof检测类型

java中的变量定义方式：

数据类型变量名；

js中变量的定义方式：

格式： var 变量名；

1.如果没有给变量赋值的话，那么变量是没有数据类型，undefined(未定义的)

2.变量的数据类型是根据变量的值的变化而变化的。

3.var 关键字定义的变量是可以接受任何数据类型的值的。

var aaa;

// 1. 定义一个变量名，使用typeof检测类型

// 2. 给变量赋值数值型，使用typeof检测类型

aaa = 1;

// 3. 给变量赋值字符串型，使用typeof检测类型

aaa = 'a';

alert(typeof(aaa));

</script>

7、运算符：

7.1、算术运算：

+ - * / % ++ --

猜结果：

alert(4321 / 1000 * 1000);

alert(“12” + 34);

var a = “12” - 6;

alert(a);

var b = “aa” - 8;

alert(b);

js中的算数运算：

1.js中只有 number类型，包括了小数和整数，它存在整数除以整数还是小数的情况

2.一个字符串和一个数值做+运算，得到的是一个更长的字符串。

3.一个字符串和一个数值做-运算，先将字符串转换成数值类型，然后再做-运算。

4.因为字符串不能转换成数值类型，所以的到的结果是NaN not a number

alert(4321/1000*1000);//4321

alert("12"+34);//1234

var a = "12" - 6;//6

alert(a);

var b = "aa" - 8;//undefined

alert(b);

</script>

7.2、赋值运算

= 把右侧结果赋值给左侧空间。

var x = 123；

+= -= *= /= %= 和Java运算一致

7.3、关系（比较）运算

> >= < <= != == ===(绝对等恒等)

js中的比较运算

1.比较运算的结果是一个布尔值

2.js是弱数据类型,一个字符串和数值做==运算，那么会先将字符串转换成数值，然后再做比较。

3.===不光比较数值的大小，还会比较数据的类型

// alert(6>7);//false

// alert('44'==44);//true

alert("44"===44);//false

</script>

7.4、逻辑运算(重点)

Java中的逻辑运算符号：

&& || !

JS中的逻辑运算符号：

&& || !

如何理解javascript的false 和 true？

false （理解）：0 null undefined

true （理解）：非0 非null 非undefined

// 猜结果：

alert( 8 < 7&& 3 < 4 );

alert( -2&& 6+6 );

alert(0&& 12);

alert( -1 || 4 +9);

alert(0 || 23);

alert(!0);

alert(!null);

alert(!10);

逻辑运算：

零，null，undefined理解成false，其他都理解成true

true&&true true

true&&false false

false&&true false

false&&false false

左边为true 结果看右边

左边为false 结果看左边

true||true true

true||false true

false||true true

false||false false

左边为true 结果看左边

左边为false 结果看右边

// 猜结果：

// alert( 8 < 7 && 3< 4 ); //false

// alert( -2 && 6+6 );// 12

// alert(0 && 12);// 0

// alert( -1 || 4 +9 );//-1

// alert(0 || 23);// 23

alert(!0);//true

alert(!null);//true

alert(!10);//false

if(-2 && 6+6 ){

alert("sssss");//会打印

}

</script>

7.5、位运算

位运算：二进制数位运算。

& | ^ ~ << >> >>>

8&2=0

1000

0010

0000

7.6、三元运算

格式：表达式1 ？表达式2 ：表达式3

如果表达式1 为true，就把表达式2 作为三元运算的结果，

如果表达式1 为false，就把表达式3作为三元运算的结果

0 null undefined 理解成 fasle

非0 非null 非undefined 理解成 true

注意：

js中零，null，undefined理解成false，其他都理解成true

alert(1?22:"aa");//22

</script>

8、语句

if switch forwhild do while

JS中的语句：

判断、分支、循环结构。

8.1、判断结构：

第一种：

if( 判断的条件表达式 ){

判断成立后执行的语句;

}

第二种：

if( 判断的条件表达式 ){

判断成立后执行的语句;

}

else {

判断不成立后执行的代码;

}

第三种：

if(判断的条件表达式){

判断成立后执行的语句;

} else if(判断的条件表达式) {

判断成立后执行的语句;

} else if(判断的条件表达式) {

判断成立后执行的语句;

}

。。。。。

else{

判断不成立后执行的代码;

}

//需求：根据指定的数据，判断当前对应的星期几

//需求：根据指定的数据，判断当前对应的星期几

var date = 8;

if(date==1){

alert("星期一");

}else if(date==2){

alert("星期二");

}

else if(date==3){

alert("星期三");

}

else if(date==4){

alert("星期四");

}

else if(date==5){

alert("星期五");

}

else if(date==6){

alert("星期六");

}

else if(date==7){

alert("星期日");

}else {

alert("数据不合法");

}

</script>

8.2、switch分支结构

格式：

switch( 表达式 ){ // 表达式必须可以计算出一个确定的结果

case 常量1:

语句;

break;

case 常量2:

语句;

break;

case 常量3:

语句;

break;

。。。。

default:

语句;

break;

}

<scripttype="text/javascript">

var _date = 9;

switch(_date){

case 1:

alert("星期一");

break;

case 2:

alert("星期二");

break;

case 3:

alert("星期三");

break;

case 4:

alert("星期四");

break;

case 5:

alert("星期五");

break;

case 6:

alert("星期六");

break;

case 7:

alert("星期天");

break;

default:

alert("数据非法");

break;

}

</script>

8.3、while和do-while

while格式：

while( 循环条件 )

{

循环体;

}

需求：计算1~10的和

<scripttype="text/javascript">

//需求：计算1~10的和

var i=1;

var sum = 0;

while(i<=10){

sum+=i;

i++;

}

alert(sum);

</script>

do-while循环

格式：

{

循环体;

}while( 循环条件 );

8.4、for循环

格式：

for( 表达式1 ; 表达式2 ; 表达式3 ){

循环体;

}

表达式1：一般是循环的初始语句。

表达式2：必须循环的判断表达式

表达式3：一般是循环变量的更新语句

// 需求：统计1~100 之间能够被3和7整除的数字个数

// 需求：统计1~100 之间能够被3和7整除的数字个数

varcount=0;

for(var i=1;i<101;i++){

if(i%3==0&&i%7==0){

count++;

}

alert(count);

</script>

8.5、循环嵌套

含义：循环中嵌套着其他的循环

循环嵌套的执行顺序：

外循环执行一次，内循环要从头到尾执行一遍；

内循环没有执行完时，表示外循环的循环体没有结束，是不能进入下次外循环。

只有内循环彻底执行完，才代表外循环一次结束。

js中有个已经创建好的document对象，里面有个write方法，可以直接把数据写到html页面上

例如：document.write("<hr/>");

需求：循环嵌套完成九九乘法表，并将其打印到页面上

1 * 1 = 1

2 * 1 = 2 2 * 2 = 4

3 * 1 = 3 3 * 2 = 6 3 * 3 = 9

.....

//document.write(str);向页面输出内容,输出的标签浏览器依然能够解析执行

// document.write("<a href='http://www.baidu.com'>百度</a>");

需求：打印乘法表

document.write("<table>");

for(var i = 1;i<10;i++){

document.write("<tr>")

for(var j=1;j<=i;j++){

document.write("<td>");

document.write(i+"*"+j+"="+i*j+"  ");

document.write("</td>");

}

document.write("</tr>")

}

document.write("</table>");

</script>

8.6、语句控制

在JS中也有break 和 continue 关键字。

9、JS中的消息框

’

<scripttype="text/javascript">

确认框有一个返回值，当点击确认的时候，返回值是true

当点击取消的时候，返回值是false

var res = confirm("确认付款吗？");

alert(res);

</script>

警告框

// alert("不要看小电影，有毒");

确认框，有一个返回值。当点击确认的时候，返回true。取消返回false。

// var res = confirm("确定付款吗？2000块");

// alert(res);

提示框，有一个返回值。返回值是用户输入的值。

var res = prompt("请输入一个值：");

alert(res);

</script>

10、函数(★★★★★)

函数：可以独立封装一段代码，当需要使用被封装的功能时，可以去调用这个函数。

Java中方法的定义格式：

public static voidmain(String args[]){

}

方法修饰符返回值类型方法名( 形参类型变量名 , 形参类型变量名 ......){

方法体；

}

10.1、第一种定义函数的格式

格式：

function 函数名( 参数列表 )

{

函数体;

}

函数的细节：

1 函数只有被调用后才会被执行

2 如果函数需要返回值,直接使用return返回即可, 不需要考虑返回值类型

3 函数中没有重载的概念,如果出现重载,后面的函数会把前面的覆盖掉

4 如果函数需要传递参数,不需要指定参数的类型,直接使用变量名即可

5 如果函数需要传递参数,但是使用函数不传递参数任然可以调用, 但是参数值为undefined

6 如果函数不需要传递参数,但是我就给他传递,不会报错

7 既然可以给无参数的函数传递参数, 可以使用arguments对象取得参数的值

8 给特别长的函数起个别名

js中函数定义的第一种方式：

格式

function 函数名 (参数列表){

函数体；

}

1.js中的函数必须被调用才能执行。

2.如果函数需要返回值，直接return就行，不需要声明返回值类型

3.如果函数需要传入参数，那么之间写变量名，不需要声明变量的类型

4.js中不存在函数的重载，如果2个函数名一样，那么后面出现的函数会覆盖前面的函数。

5.如果函数不需要传入参数，而我们传入了参数，函数照样执行。

6.如果函数需要传入参数，而我们没有传入参数，函数照样执行，参数是undefined.

7.既然函数可以传入参数，所以可以通过arguments来获取传入的参数。arguments是专门用来存放参数的数组。

8.可以给函数取个别名，通过别名调用函数。

function demo1(){

alert("demo1");

}

// demo1();

function demo2(){

return 2;

}

// alert(demo2());

function demo3(a){

alert(a);

}

// demo3(4);

function demo3(){

alert("555");

}

// demo3(111);

function demo5(){

alert("demo5");

}

// demo5(111);

function demo6(a){

alert(a);

}

// demo6();

function demo7(){

alert(arguments[0]);

alert(arguments[1]);

}

// demo7(5,6);

function afasdfafsdafadfa(){

alert("demo8");

}

var demo8=afasdfafsdafadfa;

demo8();

</script>

11.2、第二种定义函数的格式(了解)

格式：

var 函数名 = new Function( “接受数据的变量名”,”函数体的代码” );

<scripttype="text/javascript">

js函数定义的第二种方式：

格式

var函数名 = new Function("参数","方法体");

var demo = new Function("x","alert(x);");

demo(3);

</script>

11.3、第三种定义函数的格式

第三种定义方式：匿名函数

格式：

function(){

函数体;

}

函数定义的第三种方式：

匿名函数的定义

格式：

function(){

函数体；

}

var demo = function(){

alert("匿名函数");

}

demo();

// window.onload = function(){

// alert("匿名函数");

// }

</script>

12、数组

Java中的数组：可以保存多种类型相同的数据。在Java中数组的长度是固定的，类型也固定的。

JS中的数组：可以保存不同类型的数据，同时长度不固定。可以把其理解成Java中的ArrayList。

12.1、数组第一种定义方式

Java数组的定义方式：

数据类型[] 数组名 = new 数据类型[ 数组长度 ];

数据类型[] 数组名 = {1,2,3,4,5};

JS中的数组定义方式：

var 数组名 = [具体的值];

12.2、数组练习：

// 需求1、定义多种类型的数组。

// 需求2、手动遍历，并且打印到浏览器中。

// 需求3、越界定义数组的元素，查看数组长度。

// 需求4、使用for循环遍历数据。

java中数组的定义：

数据类型[] 变量名 ={}

js中数组的定义：

格式：

var 数组名 = [];

1.js中的数组可以接收多种类型的数据

2.js中的数组长度是变化的。可以理解成java中的arraylist。

// 需求1、定义多种类型的数组。

// 需求2、手动遍历，并且打印到浏览器中。

var array = [1,"aa",true];

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

// alert(array[i]);

// }

array[5]=123;

alert(array.length);

for(var i=0;i<array.length;i++){

alert(array[i]);

}

// 需求3、越界定义数组的元素，查看数组长度。

// 需求4、使用for循环遍历数据。

</script>

12.3、数组第二种定义方式

在JS中有个Array对象，使用这个对象可以直接创建一个数组。

注意:

1、创建无参数数组，默认长度为零。

2、创建多个参数的数组，这些参数都是数组的元素。

3、创建只有一个整数参数的数组，这个整数就是数组的长度。

js中数组定义的第二种方式：

格式：

var 数组名 = new Array();

1.如果不添加任何参数创建数组，那么数组的长度是0；

2.如果创建数组时传入多个参数，那么这个参数就是数组的内容

3.如果传入的是单个的整数，那么这个整数指的是数组的最大下标。

// var array = new Array();

// alert(array.length);

// var array = newArray(1,true,"ss");

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

// alert(array[i]);

// }

var array = new Array(5);

for(var i=0;i<array.length;i++){

alert(array[i]);

}

</script>

14、JS中的对象

Date对象

var date = new Date();

//返回当前时间

// alert(date.toLocaleString());

// 2017/01/0716:25:30

//返回1970年1月1日到现在的毫秒值

alert(date.getTime());

</script>

RegExp对象，正则对象，正则表达式的书写规则和Java也一致：

. 当前可以是任意字符

? 表示零次或一次

* 表示零次或多次

+ 表示一次或多次

() 对某个存在的正则进行分组组的使用 \组号 $组号

{} 当前的规则可以出现的次数

{m} 正好 m次 {m,} 最少m次 {m,n} 最少m次最多n

[] 当前位置上可以是中括号中某个字符

[abc] [^abc]

\\d 当前位置上可以数字

\\w 当前位置上可以是字母数字下划线

\b 单词边界

^ 行开始

$ 行结尾

//验证用户名4到8位的字符数字下划线组成

RegExp.test(string);

如果验证成功，返回true

如果失败，返回false

注意：正则表达式不要忘了^ 和 $.

var regExp = new RegExp("^\\w{4,8}$");

var username = "aaaaaaaaaaa";

var res = regExp.test(username);

alert(res);

String对象

String.match(RegExp regExp);正则表达式验证字符串

1.如果验证失败，那么返回值是null

2.如果验证成功，那么返回值是字符串本身。

var str = "aaaaa";

var res = str.match(new RegExp("^\\w{4,8}$"));

alert(res);

</script>

Math对象和Java中的基本一致

15、JS中的全局函数

在JS中有上述的函数，可以直接在js代码中使用，不需要通过任何对象来调用。

需求：

// 1、对含有中文参数的URL进行编码和解码

// 2、使用eval将字符串转成js代码执行

需求：对学生成绩划分，使用switch完成：

90~100 A 90~99 / 10 9

80~89 B 80~89 / 10 8

70~79 C

60~69 D

0~59 E

encodeURI();对字符串编码

decodeURI();对编码后的字符串解码

eval(str);将字符串转换成代码执行。

实际应用：将json字符串转换成json对象。

// var str = "aaa中文";

// var enURI = encodeURI(str);

// var deURI = decodeURI(enURI);

// alert(deURI);

// eval("alert('ss')");

/* 需求：对学生成绩划分，使用switch完成：

90~100 A 90~99 / 10 9

80~89 B 80~89 / 10 8

70~79 C

60~69 D

0~59 E

var score = 59;

var leval = parseInt(score/10);

switch (leval) {

case 10:

case 9:

alert("A");

break;

case 8:

alert("B");

break;

case 7:

alert("C");

break;

case 6:

alert("D");

break;

default:

alert("E");

break;

}

</script>

掌握：

1、js和Java的不同之处。

2、函数的定义和使用第一种和第三种

3、掌握 js中的数组操作

15、JS中的自定义对象：

<scripttype="text/javascript">

1.js中通过function来定义对象

2.this关键字定义公有变量

3.js中的对象可以临时定义方法和变量

function Person(name){

this.name = name;

this.getName = function(){

return this.name;

};

this.setName = function(name){

this.name = name;

}

var person = new Person("张三");

// alert(person.name);

person.setName("李四");

// alert(person.getName());

person.age=23;

alert(person.age);

person.getAge= function(){

return this.age;

}

person.setAge= function(age){

this.age = age;

}

person.setAge(38);

alert(person.getAge());

</script>

7watermelon

关注

0
点赞
踩
3

收藏

觉得还不错? 一键收藏
0
评论
Javascript入门

1、JavaScript介绍Javascript语言诞生主要是完成页面的数据验证。因此它运行在客户端，需要运行浏览器来解析执行JavaScript代码。特点：1. 交互性（它可以做的就是信息的动态交互）2. 安全性（不允许直接访问本地硬盘）3. 跨平台性（只要是可以解析Js的浏览器都可以执行，和平台无关） JavaScript与Ja
复制链接

扫一扫