学习JavaScript
1.验证用户输入的内容
2.有效的组织网页内容
3.动态的显示网页内容,动画显示
4.弥补静态网页不能实现的功能
JavaScript简介
JavaScript是一种基于对象的脚本语言,是网景公司(Netscape)最初在它的Navigator2.0产品上设计并实现的,其前身叫做LiveScript。语法上,JavaScript和C#、java等编程语言类似。
JavaScript是客户端脚本语言,也就是说,JavaScript是在客户的浏览器上运行的,不需要服务器的支持。
JavaScript是一种解释语言,其源代码在客户端执行之前不需要经过编译,而是将文本格式的字符代码在客户端由浏览器解释执行。这就是说,JavaScript需要浏览器支持。
JavaScript语言特点
<1>脚本语言 <2> 解释性 <3>用于客户端 <4>基于对象
1.用户输入 →IE等浏览器(解析HTML标签和JavaScript)→2.发送请求→客户端请求含JS的页面→服务器→3.返回响应→从服务器端下载含JavaScript的页面
JavaScript编写规范
<1>一般放在<head>...</head>中间
<2>逐行被执行,越短越好
<3>大小写敏感
<4>语句是基本单位,通常以(分号) ; 表示语句结束
<5>多行语句可以作为一块,使用{}
<6>多使用注释(单行注释/多行注释)
编写JavaScript的基本流程
布局 :HTML/ASPNET+CSS 向页面输出内容 : document.write(文本内容)
属性 :确定要修改哪些属性 弹出警告框 : alert(文本内容)
事件 :确定用户进行哪些操作? 编写 :在事件中,用JavaScript来完成用户需求 输入语句 : 1.prompt(“标题”"默认值”),不建议使用 2.通过表单元素进行输入
编写js代码,必须使用script标签 在HTML中使用JavaScript有两种方法: (1)把JavaScript代码写在<script>……</script>标签中,将标签插入到网页中 (2)由在<script>标签中使用的src属性指定使用外部脚本文件(.js)
<!DOCTYPE html>
<html>
<head>
<meta charset="utf-8">
<title></title>
</head>
<body>
<!-- 编写js代码,必须使用script标签 -->
<script type="text/javascript">
//弹出对话框
alert("Hello Word!")
</script>
</body>
<!-- 用于引入外部的js文件 -->
<script type="text/javascript" src="js/HelloWord.js">
//以下代码不会被执行
alert("我是用来引入外部样式js文件的script标签")
</script>
</html>
js编写的位置以及注意事项
1.js代码写在script标签内,script标签可以放在head、body标签内,也可以写在body外、html标签外,但是建议写在body标签的最下面
2.可以使用script标签引入一个外部的js文件,同时要注意在该标签内是不能写js代码的,即使写了也不会执行
JavaScrip的核心构成
变量 数据类型 表达式 语句 函数 内置对象 注释
JavaScript的数据类型( 使用typeof运算符可以查看变量的数据类型 )
输出变量的数据类型到页面:document.write(typeof 变量名)
输出变量的内容到控制台: console.log(x,y,z)
输出变量混合后数据类型到控制台: console.log(typeof(a+b))
基本数据类型
数值数据类型(number)
布尔类型(boolean)
未定义数据类型(undefined) 一个变量被声明了,但是未赋值。
空数据类型(null)
引用数据类型
字符串类型(string)
Array 数组类型
对象类型(Object)
变量的声明和赋值
声明一个变量,需要使用一个关键词var,变量的数据类型是由变量后面赋的值的数据类型来决定的 语法格式: var 变量名=变量的值
1.先声明变量,然后赋值
2.同时声明和赋值变量
3.声明多个变量,使用逗号
混合计算数据类型
整数与小数=小数 小数与布尔型=小数
整数与字符串=字符串 小数与空值=小数
整数与布尔型=整数 字符串与布尔型=字符串
整数与空值=整数 字符串与空值=字符串
小数与字符串=字符串 布尔型与空值=整数
document.write("<br />")换行
<!DOCTYPE html>
<html>
<head>
<meta charset="utf-8">
<title></title>
</head>
<body>
<script type="text/javascript">
//多种数据类型之间进行运算,计算结果的数据类型都是什么
console.log(typeof(12 + 0.5)) //number
console.log(typeof("张三" + 0.5)) //string
console.log(typeof("张三" + "性别:男")) //string
console.log(typeof(10 + true)) //number
console.log(typeof(10 + null)) //number
console.log(typeof(0.5 + false)) //number
console.log(typeof(0.5 + null)) //number
console.log(typeof("张三" + null)) //string
console.log(typeof("张三" + true)) //string
console.log(typeof(true + null)) //number
</script>
</body>
</html>
数据类型的转换
parselnt(string):将字符串转为整型数字,取整;将字符串转化成整数,会将小数点后面的数字给去掉,不会进行四舍五入
parseFloat(string):将字符串转换为浮点型数字
<script type="text/javascript">
//数据类型转换
//将字符串转化成整数,parseInt(),会将小数点后面的数字给去掉,不会进行四舍五入
var c ="12.5"
console.log(parseInt(c))
var d =10
var e = parseInt(c)+parseInt(d)
console.log(e)
//parseFloat():将一个字符串转换成浮点型
console.log(parseFloat(c))
</script>
表达式与运算符
表达式是对一个或多个变量或值(操作数)进行运算,并返回一个新值
运算符可分为以下类别:
赋值运算符 =
算术运算符 +、-、*、/、%(取余)、++(自增)、--、-(求反) (++自增运算:当++在后面时,先使用再自增;当++在前面时,先自增后使用) 结合运算符*=/=+=-=%=
比较运算符 ==、!=、>、>=、<、<=、===、!== 逻辑运算符 &&、I|、!
<script type="text/javascript">
// == === 区别:==表示值相等 ===表示值相等,数据类型也必须相等
var b = 12
var c = "10"
console.log(x == y) //true
console.log(x === y) //false
</script>
<script type="text/javascript">
//逻辑运算符 && || !
var d = 11,e = 12
console.log((d + e) > 20 && d > 11) //false
console.log((d + e) > 20 || d > 11) //true
console.log(!(d + e) > 20) //false
//console.log(d>5 && d++>11)//d++未执行 d=12
console.log(d > 5 || d++ > 11) //d++执行 d=11
console.log(d)
</script>
字符串运算 + (字符串拼接)
<script type="text/javascript">
//从键盘输入两个数字,进行加法运算
var num1 = prompt("请输入第一个数:")//从键盘输入一个数字,并将该数字赋值给变量num1
var num2 = prompt("请输入第二个数:")
var num3 = num1+num2
//字符串拼接
console.log(num3)
//数据类型转换
console.log(parseInt(num1)+parseInt(num2))
var a = 10,b=12
//先将变量的数据类型转换成字符串
console.log(a.toString()+b.toString())
var isfalse = false
console.log(typeof isfalse.toString())
</script>
绝对等于:数据类型一致,数值相等 不绝对等于:数据类型不一致或者数值不相等
1.数据类型不一致
2.数值不相等
3.数据类型不一致,数值也不相等
三元运算符 条件表达式?真:假
<script type="text/javascript">
//三元运算符 条件表达式?真:假
//求三个数中的最大值
var x=10,y=20,z=30
var result = 0//用来存储最大值
result = x>y?x:y,
result = result>z?result:z,
console.log(result)
</script>