js-day01

04.01 javascript简介

概述:

  • 1995年网景公司与sun公司合作开发。
  • 是基于对象和事件驱动的脚本语言,应用在客户端,简称js。
  • 基于对象:提供很多的对象,直接拿过来使用。
  • 事件驱动:html做网站静态效果
  • 客户端:专门指浏览器

js的作用:

  • 操作html和css

特点:

  • 交互性:上西安信息的动态交互
  • 安全性:不可以直接访问磁盘上的信息。
  • 跨平台:只要是可以解析js的浏览器都可以使用。

java和js的关系

  • 没有任何关系,属于两门编程语言
  • 开发公司:
    • java:sun
    • js:网景公司
  • 对象:
    • java:面向对象
    • js:基于对象
  • 数据类型:
    • java:强类型语言【每个变量必须指定具体的数据类型】 int i=10
    • js:弱类型语言【变量的数据类型由值决定】 var i = 10     python中:i = 10

js的组成:

  • ECMAScript:
    • ECMA:欧洲计算机协会
    • 由ECMA组织指定js的一些列的语法
  • BOM:Broswer Object Model,浏览器对象模型
  • DOM:Docement Object Model文档杜希昂模型

04.02  js和html的结合方式

方式一:直接使用标签

<script  type = "text/javascript">js代码</script>

方式二:使用script标签,引入外部文件

script标签可以可以出现多次,可以出现在html文件的任意位置,但建议写在<head></head>之间

js代码和html代码执行的顺序:从上向下依次执行

04。03   js中的注释

js中:

单行注释 ://      快捷键:ctrl+c

多行注释:/ xxxxxx/     快捷键:ctrl+shift+c

python中:

单行注释:#    快捷键:ctrl+c

多行注释:"""注释文字"""

04.04 js中的变量

定义变量:

  使用关键字var

变量的命名规则:

  • 可以由数字、字母、下划线、美元符号$组成
  • 不能由数字开头
  • 不能包含空格和中文
  • 不能使用保留字和关键字
  • 严格区分大小写,大小写不同会产生不同的变量
  • 遵循驼峰原则

04.05 js的数据类型

五大基本数据类型和一种复杂数据类型。

五大基本数据类型:

  • Number
  • String
  • Boolean
  • null
  • undefined

一种复杂数据类型:

Object

Object分为:

  • Function(函数类型)
  • Array(类似于python中的列表类型)
  • RedExp:正则表达式

注:当定义了一个变量之后,但这个变量没有任何指向,则他的类型就是null

使用typeof操作符判断null获取的结果是Object

undefined:定义一个变量,但是没有赋初始值

NaN:not a Number,不是一个数字

04.06  js中的运算符

算术运算符:

  ++:自增运算符

  --:自减运算符

逻辑运算符:

  python中:and(&)   or(|)  not

  js:&&  ||  !

关系运算符(和python中一样):

  =:赋值运算符

  +=:加等于

  -=:

三元运算符:

  格式:关系表达式?表达式1[变量1或常量1]:表达式2[变量1或者常量1];

  工作原理:如果关系运算符不成立,则返回表达式1的值

==和===之间的区别:

  ==:比较字面值,不关心数据类型

  ===:比较字面值和数据类型

04.07 js的选择和循环语句

顺序语句,分支语句,循环语句

  python中的语句:

  分支语句:if,if-else,if-elif-else

  循环语句:while,for-in

js中的语句:

  分支语句:if,if-else,if-else-if-else,swith-case

  循环语句:while,do-while,for

04.08  if语句

单分支:

if(条件表达式){

  满足条件执行的语句

}

双分支语句:

if(条件表达式){

  满足条件执行的语句

}else{

  不满足条件执行的语句

  }

多分支语句:

if(条件表达式){

  满足条件执行的语句

}else if(条件表达式2){

  满足条件2执行的语句

}else if(....){

满足条件..执行的语句

}else{

  不满足条件执行的语句

}

嵌套if:

if(条件表达式){

  满足条件1执行的语句

  if(条件表达式2){

    满足条件2执行的语句

  }

}

04.09  swich语句

  语法格式:

    swich:选择结构

    case:满足条件对应的分支

    break:swich语句结束

    default:默认,如果前面的都没有匹配上就执行这一句

swich表达式:

swich(表达式或者变量){

  case 常量值1:{

    语句1;

    break;

    }

  case 常量值2:{

    语句2;

    break;

    }

  case: 常量值3{

    语句3;

    break;

    }

  ...

  default:{

    默认:如果前面的都没有匹配上就执行这一句

    }

}

工作原理:可以实现多选一的操作,效果类似于if语句的多分枝

  根据表达式或者变量值进行匹配,

  如果case分支后面的常量匹配上

  从上向下依次进行匹配,当所有的case分支都没有匹配上的时候,则执行default分支

switch案例:

需求:有人加你为好友,如果是女的,欣然同意,男的,拒绝。

代码:

<script type="text/javascript">
var str = "g";
switch (str){
case "b":{
document.write("拒绝");
break;
}
case "g":{
document.write("欣然同意");
break;
}
default:{
document.write("性别不明");
break;
}
}
</script>

04.10while语句

while语句:

while(条件表达式){

  循环体

}while(条件表达式)

while和do-while

需求:打印数字1~5

代码:

var num1 = 1;
while (num1 <= 5){
document.write(num1);
num1++;
document.write("<br />")
}

do-while语句:

代码:

var num1 = 1;
do{
document.write(num1);
num1++;
document.write("<br />");
}while(num1<=5);

04.11 for语句

语法:

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

  循环体

}

说明:

表达式1:初始化表达式

表达式2:条件表达式

表达式3:循环结束之后的操作表达式

原理:表达式1--->表达式2---->循环体 ---->表达式3---->表达式2---->循环体----->表达式3.....

其中,表达式1只会被执行依次,表达式2和表达式3会被执行多次[跟while中的用法完全相同]

九九乘法表:

打印九九乘法表:

for (var i=1;i<=9;i++) {
for (var j=1;j<=i;j++) {
document.write(j,"×",i,"=",j*i)
}
document.write("<br />")
}

04 12 break和continue

break:表示跳出循环或者switch语句

  a 可以使用在分支语句switch中

  b 可以使用在训话中

c continue结束当次循环,继续下一次循环

  只能用在循环语句中

04.13 js中的函数

python函数:

方式一:标准写法:

def 函数名(参数列表):

  函数体

方式二:匿名函数

add = lambda a,b:a+b

add(2,3)

js中的函数

方式一:使用function关键字

function 函数名(参数列表){

  函数体

  返回值(可有可无)

  }

具有返回值的函数

function add1(a,b,c){

  var sum1 = a + b + c;

  return sum1;

  }

方式二:匿名函数

var 函数名[变量名] = functin(参数列表){

  函数体

  返回值

  }

var add2 = function(a,b){

  var sum;

  sum = a + b;

  return sum;

  }

方式三 :动态函数,使用js中内置对象Function[动态函数,使用较少,作为了解]

语法格式:var 函数名[变量名] = new Function(”参数列表“,"函数体和返回值");

var

猜你喜欢

转载自www.cnblogs.com/mylove-821717420/p/9827272.html