WEB前端（第二章）·JavaScript学习笔记

JavaScript

一、作用：给页面添加动态效果。
注意：和Java，没有任何关系。
二、语言特点：属于脚本语言，不需要编译直接执行。
属于弱类型语言
强类型int x = 10; String name=“X”;
弱类型var x = 10;var name=“X”
安全性高：js语言只能访问浏览器内部的数据不能访问浏览器以外的数据。
交互性高：js语言可以直接嵌入到HTML页面，可以让用户脱离后端服务器和页面内容进行交互(简单的来说就是，先访问一个网页，然后把网断开，其下拉列表等一些js特效可以继续使用）
引入方式：
1.内联引入方式:在标签的事件属性中添加JS代码，当事件触发时执行
2.内部引入方式：在html内部的任意位置添加script标签（一般写在body标签内部的最底端），在标签体内写js代码
3.外部引入方式：在单独的js文件中写JavaScript代码，在html中通过script的src属性引入,工作中使用的最多，好处是可以多个页面复用而且可以将JS代码和HTML代码分离便于维护和升级
三、JavaScript语法：
1.数据类型：
javascript语言中只有对象类型
常见的对象类型
数值：number相当于Java中所有数值类的总和
字符串string 可以用单引号和双引号修饰
布尔值Boolean true/false
未定义类型：undefined 当变量之声明不赋值的时候，此变量的类型为未定义类型
2.变量声明和赋值
JavaScript语言属于弱类型语言
如何声明变量
对比：
Java中： int x=10; String s=“abc”; x=“asca”(报错)
JavaScript中：使用let或var声明变量，二者作用域有所不同
var:
for(var i = 0 ;i<10;i++){
alert(i);
}
alert(i)
在此位置也可以使用变量i,var可以理解为是声明了一个全局变量
let:
for(let i=0;i<10;i++){
alert(i)
}
alert(i)
使用let,在声明变量的作用域以外是不能访问的（建议使用let）
此位置不能访问变量i,
3.运算符
+， -， *， /， %， >， <， >=， <=， = ，!=， ==， ===，
和Java大体相同
== 和 ===, ==是先统一等号两边变量的类型 再比较值, ===先比较类型,如果类型相同再去比较值.
“666”==666 true
“666”===666 false
typeof x; 获取变量的类型
typeof 66 + 6 = “number” + 6 = number6;
4.语句
if else for while swtich case
和Java中大体相同
在for中Java定义使用的是数据类型；这里使用的是var或let，这里建议使用let
例如
Java中for( int i; ; )
js中for(let i; ; )
5.方法声明
Java方法声明: public void 方法名(参数列表){方法体}
JS方法声明: function 方法名(参数列表){方法体}
a.声明常见的四种方法:
1.无参无返回值
2.无参有返回值
3.有参无返回值
4.有参有返回值
b.三种声明方法的方式
1.function 方法名(参数列表){方法体}
2.let 方法名= function(参数列表){方法体}
3.let 方法名 = new Function(“参数1”,“参数2”,“方法体”);
6.和页面相关的方法
1.通过元素id获取元素对象
let d = document.getElementById(“id”);
2.获取和修改元素的文本内容
d.innerText //获取
d.innerText = “xxx”; //修改
3.获取和修改元素的html内容
d.innerHTML //获取
d.innerHTML=“xxx”; //修改
4.获取和修改文本框的值
let i = document.getElementById(“i1”);
i.value //获取
i.value=“xxx”;// 修改