一、为什么要学习javascript
-
了解js的特性(优势)
-
解释性
-
js是一种解释性语言,源代码不需要经过编译,直接在浏览器上运行时被解释
-
目前所有的浏览器都支持javaScript语言,并且是默认的
-
-
基于对象和事件驱动
-
js可以直接对用户或客户的输入做出响应,无需经过web服务器
-
js对客户的响应,是以事件驱动的方式进行的
-
所谓事件驱动,指的是在页面中执行了某种操作所产生的动作,此动作称为事件,比如点击按钮、失去光标等等
-
-
-
跨平台
-
js依赖于浏览器本身,和操作系统无关,只要能运行浏览器的计算机,并且支持JavaScirpt的浏览器都可以正确执行
-
-
-
JavaScript能干什么
-
实现页面动态效果,让你的页面动起来,拥有于用户交互的功能,比如层的切换、树形菜单、弹出框等等
-
表单页面的各种验证,减轻服务器的压力,比如注册表单验证
-
动态改变页面内容,动态创建页面元素,动态改变表格内容等
-
二、js脚本的基本结构
-
<script language="JavaScript">//language="javaScript"可以省略 //使用JavaScript脚本循环输出HelloWorld for (let i = 0; i < 5; i++) { document.write("<h1>HelloWorld</h1><br>") } </script>
-
JavaScript脚本可以插入到<head>或<body>标签中,被包含在<script>标签中
-
第一部分:<script language="JavaScript">告诉浏览器下面是JavaScript脚本,开头使用<script>标签,表示这是一个脚本的开始,
language="JavaScript"是JavaScript告诉浏览器用的是哪种脚本语言
-
第二部分是JavaScript的脚本,实现具体的功能
-
第三部分是</script>,代表脚本语言结束
-
document.write("向页面写东西"):JavaScript语言有大量的内置对象,不需要自己创建,需要的时候直接使用
-
JavaScript是基于对象的语言,标识符大小写敏感,每句代码以分号结束
-
注释:和java一样,单行注释//,多行注释/* */
三、html文档中引用JavaScript脚本的三种方式
-
回顾:html中引用css的三种方式
-
行内样式:
<span style="color:red;font-size:16px">一句话</span>
-
内部样式:在head标签中写在style标签内
-
外部样式:<link rel="" href="">
-
-
html页面内嵌js代码
-
在head或body标签中添加script标签,在script标签中写js脚本
-
-
行内使用
-
<button οnclick="alert('就是这样行内使用js')">点击</button>
-
-
引用外部的js文件
-
在当前页面的外部定义一个js文件,后缀名是.js,里面直接编写js脚本
-
在页面的head或body标签中通过script标签的src属性引入
-
<script src="util.js"></script>
-
注意: 内部如果再写script代码 页面不执行
-
四、变量的声明和赋值
//先声明后赋值
let num;
num = 10;
//边声明边赋值
let name = "张三"
let sex = "男"
document.write(name + "性别是:" + sex)
//不声明,直接赋值(这种方式不推荐使用)
str = "hello"
alert(str)
-
JavaScript是一个弱语言,使用let关键字来声明变量,声明变量时,不需要指明是什么数据类型,根据所赋的值来决定是什么数据类型,使用变量前要先声明
五、数据类型
-
基本类型
//数值型:number,包含整数和小数 let i = 10;//定义了一个数值型变量 let f = 5.2; //定义了一个浮点型的数值型变量 let num = NaN;//定义了一个not a number,当计算结果不是数值时的数据类型 let num2 = Infinity;//定义了一个无限大的数值 //typeof():判断数据类型 alert(typeof num2) //字符串类型:string,以双引号或者是单引号括起来的任意文本 let name = "刘备"; let sex = '男'; alert(typeof sex) //布尔类型:boolean,值只有true和false let flag = true;
-
特殊类型
-
//未定义的数据类型:undefined,声明了变量未赋值 let a; alert(typeof a); //undefined
-
复杂类型
//复杂类型:object //声明对象 let student = { name: "小乔", age: 18 }; let emp = new Object();//声明了一个空对象 emp.empno = 1;//给对象赋值 emp.ename = "大乔"; alert(typeof student); //声明数组 let arr1 = [];//声明了一个数组 arr1[0] = "a"; arr1[1] = "b"; let arr2 = [1,2,3];//声明数组并赋值 let arr3 = new Array();//声明数组 arr3[0] = "李明";//给数组赋值 arr3[1] = "王浩"; alert(typeof arr2)//object //声明日期 let date = new Date() alert(typeof date);//object let b = null; alert(typeof b);//object
-
判断数据类型的方法typeof,返回值有
-
number:数值型
-
string:字符串类型
-
boolean:true或false
-
undefined:声明但是未赋值
-
object:JavaScript中的对象、日期、数组和null
-
-
数据类型之间的隐式转换
let num = 100; let str = "hello"; let f1 = true; let f2 = false; //数值型+字符串型:转化为字符串类型 alert(num + str);//100hello //数值型+布尔类型:布尔的值true转化为1,false转化为0,再和数字相加 alert(num + f1);//101 alert(num + f2);//100 //字符串类型+布尔类型:布尔的值转化为字符串true或false,再和字符串相连 alert(str + f1);//hellotrue alert(str + f2);//hellofalse //布尔类型+布尔类型:布尔的值true转化为1,false转化为0,再相加 alert(f1 + f2) //1
六、运算符(基本和java中一样)
-
算数运算符:+ - * / % ++ --
-
比较运算符:> < >= <= != ==(值相等即为true) ===(当值和数据类型都相等才为true)
let num = 20; let str = "20"; let str2 = "20"; alert(num == str);//true alert(num === str);//false alert(str === str2);//true
-
逻辑运算符:&& || !
-
三目(三元)运算符:? :
-
赋值运算符:= += -=
七、流程控制语句(和java一样)
-
if
-
if - else
-
if - else if - ...else
-
switch - case
-
fori
-
while
-
do-while
-
break
-
continue
八、各种弹出框
-
alert("提示信息"):只有一个确定按钮的警示或警告框
-
confirm("提示信息"):带有确定和取消按钮的提示框,返回值为boolean类型,点击确定返回true,点击取消返回false
let flag = confirm("确定删除吗?"); if (flag) { alert("删除成功") } else { alert("取消删除") }
-
prompt("提示信息","输入框中的默认信息"),返回值为输入框中的内容
let num = prompt("你想输出几次hello?",5); for (let i = 0; i < num; i++) { document.write("hello ") }