JavaScript(一)

(一)概述

一. JavaScript简介

1.HTML代码—页面结构
CSS代码—页面样式
JavaScript代码—页面行为(动态效果)

2.JavaScript是一种基于对象(注意:是基于对象,不是面向对象!)和事件驱动并具有安全性能的脚本语言.

3.JavaScript和Java的区别:
JS一种计算机客户端脚本语言,主要Web浏览器解释执行.(程序在客户端浏览器执行,不需要进行编译)
Java要在一定的环境下(例如jdk环境,java虚拟机等)运行,需要进行编译.

4.JavaScript的作用:
浏览器中JavaScript,用于与用户交互,以及实现页面中各种动态特效.

二JavaScript优缺点

• JavaScript的优点

• 动态类型 不用给变量指定数据类型

• 弱类型 一个变量可以赋不同类型的值

• 简单性 解释性语言,不需要编译,方便调试

• 跨平台性 依赖浏览器本身,与操作环境无关

• 必要性 主流浏览器统一支持的语言

• JavaScript的缺点

• 因为依赖于浏览器执行,所以受浏览器影响,兼容性差

三JavaScript基本用法

1.HTML文件内部JavaScript代码

• 在HTML文件中,任何JavaScript代码必须放在

2.外部JavaScript文件

• 好处
  有利于页面行为和结构的分离

• 把JavaScript代码放到外部文件,在HTML代码中直接引入该文件

• 外部文件

• 1.外部文件定义为*.js;

• 2.外部文件在HTML中的head或body中引入

• 3.一次定义可以重复使用

• 外部文件注意事项

• 1.外部脚本文件中,不能含有

四JavaScript开发工具

• JavaScript程序运行器

• 谷歌浏览器

• 火狐浏览器

• IE浏览器

• 开发工具

• Sublime Text

• 浏览器开发者工具

(二)JavaScript基础语法

1.JavaScript语法概述
语法特点:
弱类型:变量的数据类型可以任意转换
动态类型:变量声明创建时不用指定数据类型

2.JavaScript基础语法

• JavaScript语句

• 语句以分号结束; 语句就是命令,它告诉浏览器要做什么

• JavaScript语句块

• 多个语句可以放在"{“和”}"内,形成一个语句块

• JavaScript输出内容的3种方式

• document.write() 页面输出

• console.log() 控制台输出

• alert() 弹出框输出

• JavaScript注释

• 单行注释: //

• 多行注释: /* */

• 注释的好处:提高代码的可读性

• JavaScript不会执行注释

3.JavaScript变量及内置数据类型
x=1;
y=3;
sum=x+y;

变量是存储信息的容器; 在JS中把字母称为变量
(1)变量的声明和赋值

• 变量的声明
  使用关键字var创建变量
  JS为动态类型语言,声明变量时,不需指明数据类型
• 变量赋值
  使用"=“为变量赋值
  值为字符串时需要用’ ’ 或者” " 引用起来
• 变量命名
  变量名区分大小写
  变量名以字母或’ _’ 或$开头
  变量名不能是关键字,保留字

(2)JavaScript原始数据类型

• 5种原始数据类型Number,String,Boolean,Undefined,Null

• 判断变量在某一时刻的数据类型,使用typeof运算符

• typeof 变量名

• JS是弱类型语言
  弱类型是指不同类型的变量之间可以相互赋值,但在某一时刻,一个变量只存在一种数据类型

• Number类型

• 1,3.14159,1e6,NaN…

• String类型

• 用’ ’ 或者" " 引起一组字符

-Boolean类型
true或者false

-Undefined类型
只有一个值Undefined
指声明了但未赋值的变量,如var a;
Undefined不等于Undefined(两个声明了未赋值的不确定的数,不能判断相等不相等)

-Null类型
只有一个值null,表示值为空
null不等同于空的字符串(" ")或者0

删除线格式 删除线格式 删除线格式 删除线格式 删除线格式 删除线格式 删除线格式

• 认识NaN(Not a Number)
• 表示一个没有意义的,不正确的数值
• console.log(NaN)-----Number
• 与自身不相等----NaN!=NaN
• 认识isNaN() 函数
• 用来检测参数是否为NaN值
• 参数是NaN时返回true,否则返回false
• isNaN(123abc)----true

(3)运算符

• 字符串拼接+
  原则:+两边没有出现字符串,该怎么运算就怎么运算(加法); +两边有一个字符串或者两个字符串,就是字符串的拼接

• 比较运算符

• == : 值相等则为true

• ===: 类型和值都相等则为true

-条件运算符(三目运算符)
条件 ? a : b
跟if-else结构相似,如果条件为真执行a,否则执行b

• 运算符优先级
  通过( ) 改变优先级

(4)数据类型转换

• 隐式转换

• 转换为String类型:用+ 连接

• var String = “img”+3+".jpg";

• 转换为Boolean类型:变量前面加!!

• 显示转换(强制转换)

• 全局函数

• parseInt(),String()

• 转换为布尔类型规则

• 数值转换为布尔类型

• 0, 0.0,-0,NaN—>false

• 其他数值1,5,-5—>true

• Undefined转换为布尔类型

• undefined—>false

• null转换为布尔类型

• null —>false

• 字符串转换为布尔类型

• 空字符串" "—>false

• 非空字符串---->true

• 强制转换为Boolea类型:Boolean()

总结:转换为布尔类型,当变量为其他数值或者非空字符串时为true.

• 转换为数值类型规则
• 布尔类型转换为数值类型
• false—>0
• true —>1
• undefined转换为数值类型
• undefined—>NaN
• null转换为数值类型
• null—>0
• 字符串内容为纯数字
• “123”—>123数字本身
• 字符串内容为非纯数字
• “1a2b3c”—>NaN
• 强制转换为Number类型
• parseInt() parseFloat(),Number()

总结:转换为数值类型,false和null为0;undenfied和字符串内容非纯数字为NaN;true为1;字符串内容为纯数字为数字本身

• 转换为字符串类型规则
• 数值类型转换为字符串类型
• 转换为数值本身
• 123—>“123”
• NaN—>“NaN”
• 布尔类型转换为字符串类型
• true–>“true”
• false–>“false”
• undefined类型转换为字符串类型
• undefined—>“undefined”
• null类型转换为字符串类型
• null—>“null”
• 强制转换为字符串类型
• String()

总结:转为字符串类型,用" " 引起来即可

(5)运算符左右数据类型转换规则
+左右出现字符串时,作为字符串拼接运算符使用

• */%左右出现字符串类型或者布尔类型时,将其转换为数值类型再做运算
• 比较运算符左右出现出现字符串类型或者布尔类型,会被转为数值类型在做运算
• 逻辑运算符会将数据类型转换为布尔类型在做运算

4.流程控制结构
程序 = 数据+算法
基本程序逻辑:顺序,分支,循环

• 分支语句

• if-else语句

• switch-case语句

• 循环语句

• for语句

• while语句

• 如何终止循环

• 终止循环:break

• 跳出本次循环:continue