JavaScript 简称JS

html搭建页面结构和内容   CSS美化页面    JS给页面添加动态效果或内容

JS历史

95年由网景(NetScape)公司发布LiveScript，同年更名JavaScript，实际上和Java没关系，为了蹭Java热度

JS特点

1. JS属于脚本语言，不需要编译直接解析执行
2. JS可以嵌入到html中由浏览器解析执行
3. JS属于弱类型语言
4. JS基于面向对象

如何在HTML中引入JS

• 三种引入方式：

• 内联：在标签内部，通过事件属性引入

  <input type="button" value="点我试试"
  

  onclick="alert('试试就试试！')">

• 内部： 在head标签内部添加script标签，在标签内部写js代码

  <script type="text/javascript">
      alert("第二种引入方式"); 
  </script>
  

• 外部： 在单独的js文件中写js代码，通过script标签引入

  <script type="text/javascript" src="first.js">
      //如果引入了js文件 则在标签体内不能写js代码 
  </script>
  

数据类型

• js中所有类型都是对象类型，对象类型分为三种：
• JS语言内置对象： 字符串 数组 日期 等
• 浏览器内置对象： 可能存在兼容性问题
• 自定义对象：程序员自己创建的对象

JS内置对象的几种常见类型

1. 数值类型 number
2. 字符串类型 string
3. 布尔值类型 boolean
4. 未定义类型 undefined

变量的声明和赋值

• js属于弱类型语言 var x = 18; x="abc"; var name = "张三"; var b = true/false; var z; //未定义类型 var p = new Person();

数值类型

• js中数值类型的底层都是浮点型，使用过程中会自动转换整数和小数 -java: int x = 5; int y = 2; int z = x/y; z=2 -js: var x = 5; var y = 2; var z = x/y; z=2.5 var x = 4; var y = 2; var z = x/y; z=2

• NaN: Not a Number(不是一个数)， isNaN(变量) 用于判断变量的类型是否是个数
  var s = 18; isNaN(s)=false var s="abc"; isNaN(s)=true

字符串string

• 用单引号或双引号修饰字符串 var s1 = "abc"; var s2 = 'abc';

布尔值 boolean

• var b = true; var b = false;

常见数据类型间的隐式转换

1. 数值类型：
2. 转字符串：直接转 "abc"+18 = "abc18"
3. 转布尔值: 0和NaN转false 其它转true if(18){alert('abc')}else{alert('lalala')}
4. 字符串
5. 转数值： 能转直接转 "18"->18 不能转转成NaN "abc"->NaN var x = "66"+6; 666 var y = "66"-6; 60 //只有加法是把数值转字符串，其它运算都是把字符串转成数值 任何数值和NaN进行任何运算结果都是NaN
6. 转布尔值： 空字符串""转false 其它true
7. 布尔值
8. 转字符串：直接转 "abc"+true = "abctrue"
9. 转数值： true->1 false->0
10. 未定义
11. 转字符串：直接转 "abc"+undefined="abcundefined"
12. 转布尔值：false
13. 转数值：NaN
14. null
15. 转字符串：直接转 "abc"+null = "abcnull"
16. 转布尔值：false
17. 转数值：0

运算符

• js中的运算符和Java大体相同

• ==和===，==会先统一等号两端变量的类型 然后再比较值是否相等，===会先比较类型如果类型相同再比较值是否相等
  "66"==66 true "66"===66 false -练习：创建demo02 页面中添加两个按钮，按钮1：在点击事件里面执行alert("666"==666) 按钮2：在点击事件里面执行alert("666"==666)

• typeof x ： 获取变量的类型 var x = typeof 66 + 6 结果： "number6"

语句 if else, switch case, while , for, do while

• 和Java大体相同
• 不同点：
• if条件里面的内容如果不是布尔值会自动隐式转换成布尔值
• for循环把int i改成 var i 不支持增强for循环

函数(方法)

• java方法格式：public void 方法名(参数列表){ 方法体 }
• js方法格式一：function 方法名(参数列表){方法体}
• js方法格式二：var 方法名 = function(参数列表){方法体}
• js方法格式三： var 方法名 = new Function("参数1","参数2","方法体");

页面相关方法

1. 通过id获取页面中的元素 var mydiv = document.getElementById("d1");
2. 给文本框赋值和取值 myinput.value = "abc"; //赋值 alert(myinput.value)； //取值
3. 给div、h1-h6、p、span等元素添加文本内容 mydiv.innerText = "abc"; //赋值 alert(mydiv.innerText);
4. 给元素添加html内容 mydiv.innerText = "

   abc

   ";