JavaScript01

JavaScript01 js的使用方式: 方式1:js的内部方式

script的type属性可以不写,如果要写的话使用type=”text/javascript”

方式2:外部方式  实际开发中(前端开发人员开发使用的)

需要在js文件夹中单独创建一个后缀名为.js的文件

书写js代码,在当前html页面中奖js文件导入即可

导入外部js文件

注释:

//单行注释

/* 多行注释*/

Js常见的函数

在浏览器打印内容,类似于Java中的控制台输出语句

document.write(“hello,JavaScript我来了!”);

在浏览器中控制台中打印内容

console.log(“hello,JavaScript我来了”);

在浏览器中d出一个提示框

Window对象时浏览器中顶级对象,可以省略不写!

window.alert(“helloworld”);

简写为:

alert(“helloworld”);

JavaScript中的变量以及数据类型

定义变量的注意事项

在js中定义变量,使用var来定义,把var可以省略不写(刚开始,建议写上)JavaScript是弱类型语言,它的语法结构不严谨!可以重复定义变量的,后面的变量值将前面的变量值覆盖掉查看js的变量的数据类型,使用一个函数 typeof(变量名);var 可以任意数据类型!

Js的基本数据类型 无论是整数还是小数,都是number类型.----js引擎会自动提升为Number对象类型无论是字符串还是字符,都是string类型----js引擎会自动提升为String对象类型boolean类型 (创建一个对象) ---js引擎会自动提升为Boolean对象类型object类型(创建一个对象)----js引擎会自动提升为Object对象类型

在Js中,Object对象代表所有js对象的模板!

underfind类型:未定义类型(这种没有意义),因为没有赋值

Js的运算符

Js是弱类型,语法结构不严谨

true,false在运算的时候都自己默认值 true是1,false是0

实际开发中,不会这样去做的,boolean类型值都是直接进行逻辑判断!

算术运算符

+ ,  -  ,  *  ,  /  ,  % ,

++ , -- ,

赋值运算符

= :基本赋值

+=,  -=,  *=,   /=,  %=

比较运算符

实际开发中:逻辑双与&&,逻辑双或||

&&:左边的表达式为false,则右边不执行了,具有短路效果

||:左边的表达式为true,则右边不执行了,具有短路效果

三目运算符

(表达式)?执行true的结果:false的结果;

Js中的流程控制语句 三大类: 顺序结构:js代码从上而下依稀执行选择结构

If结构

If(表达式){

语句

}

if(表达式){

}else{

}

if(表达式1){

语句1;

}else if(表达式2){

语句2;

...

...

}else{

语句n;

}

因为js是弱类型语言

.如果if里面一个非0的整数,条件是成立的;.如果是非空字符串,条件成立;.如果是非null对象,条件成立的;

switch语句

switch(表达式){

case 可以变量/也可以是常量:

语句1;

break;

...

...

default:

语句n;

break;

}

switch语句的结束条件

.遇见break结束.程序默认执行到末尾

case语句后面没有break,会造成”case穿透现象”

case后面跟java语言的case 语言不一样的地方就是这个case 后面可以是变量!

而在java中只能是常量

循环结构

for(使用居多),while(其次while),do-while

for循环

for(初始化语句;条件表达式;控制语句){

循环体语句;

}

while循环

初始化语句;

while(条件表达式){

循环体语句;

控制题语句;

}

do-while循环

初始化语句;

do{

循环体语句;

控制体语句;

}while(条件表达式);

和for,while相比循环体至少执行一次

Js事件编程三要素 ,事件源--- 就是html标签的单击,双击....,编写事件监听器---就是编写一个函数 function函数名称(){},绑定事件监听器---就在事件源上加上onXXX属性=”函数名称()”

练习:

Js中创建一个数组

方式1: var 数组对象 = new Array(); //不指定长度

方式2: var 数组对象 = new Array(长度);  //指定长度

方式3:静态初始化

arrayObj = new Array([element0[, element1[, ...[, elementN]]]]);

简写:

var 数组对象名称 = [元素1,元素2,元素3,....];

for-in语句

for-in类似于增强for循环

应用场景:

,遍历数组,遍历对象的属性

for-in语句的格式

for(var 变量名 in 数组或者对象名称){

使用变量名;

}

练习:

var arr = [10,20,30,"hello",'A',true,3.14] ;

//普通for

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

document.write(arr[i]+"  ") ;

}

document.write("

---

") ;

//for-in语句的格式

/*

for(var 变量名 in 数组或者对象名称){

使用变量名;

}

*/

   for(var i in arr){

   document.write(arr[i]+"  ") ;

   }

Js中的函数定义以及调用

定义函数的    格式1

function 函数名称(参数名称1,参数名称2,...){

函数的里面业务逻辑;

直接在这输出document.write(“XXXX”);

}

格式1的调用:

单独调用

函数名称(实际参数列表);

格式2:(推荐)

Function 函数名称(参数名称1,参数名称2,...){

函数的里面业务逻辑;

return 结果;

}

格式2调用:

赋值调用

var 最终结果变量 = 函数名称(实际参数列表);

定义函数的注意事项:

js是弱类型语言,定义函数的时候,参数名称不能携带varjs定义时候,没有返回值类型,但是函数可以携带return 语句,代表方法结束!Js中没有函数重载的概念,如果方法名相同,后面定义的函数将前面定义的函数覆盖了实际参数列表<形式参数列表,函数依然会调用,不过值是”NaN”,有一个形式参数没有赋值

实际参数列表 >形式参数列表,将实际参数的赋值给形式参数,多余的实际参数,直接省略不计

隐藏一个数组名称:arguments,作用:将实际参数绑定给形式参数

练习:

*/

//定义函数,两个数据求和

//格式1的写法

//function sum(var a, var b ){//不能带var

/* function sum( a,  b ){

var c = a+b ;

document.write("c:"+c);

}

//调用

sum(10,20) ; */

//格式2的写法

/* function sum(a,b){

var c =a+b ;

return c;

} */

function sum(a,b,c){ //a=10,b=15,c=20

//隐藏一个数组名称:arguments

//作用:将实际参数绑定给形式参数

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

document.write(arguments[i]+"  
");

}

var d = a+b+c ;

return d ;

}

//赋值调用

var result = sum(10,15,20) ;

document.write("result:"+result) ;

Js内置对象Date

Js内置对象:Date日期,String字符串,Array数组,正则表达式对象...

浏览器解析JavaScript的时候,能够识别这个对象,使用里面的方法

//日期对象的基本使用 :dateObj = new Date()

//创建一个日期对象

var date = new Date() ;

//输出

//document.write(date) ;//Mon May 09 2022 16:40:31 GMT+0800 (中国标准时间)  原生Date格式

//获取年份

//getYear() :当前的年份与 1900 年之间的差距

//改用getFullYear()

//var year = date.getYear() ;

var year = date.getFullYear() ;

document.write(year+"年") ;

//获取月份

//getMonth() :返回一个处于 0 到 11 之间的整数

var month = date.getMonth()+1 ;

document.write(month+"月") ;

//月中的日期 getDate( ): 1 到 31 之间的整数

var monthWithDate = date.getDate() ;

document.write(monthWithDate+"日  ") ;

//getHours() 获取小时值

document.write(date.getHours()+":") ;

//getMinutes():获取分钟值

document.write(date.getMinutes()+":") ;

//getSeconds() :getSeconds()

document.write(date.getSeconds()) ;