JavaScript ｜ 青训营笔记

Trust会长
64 阅读6分钟

这是我参与「第四届青训营 」笔记创作活动的第6天

JavaScript

js语法

可以写在head标签，也可以写在body标签。

javascript是弱类型语言（java是强类型语言）。变量是什么类型由后面的值决定。typeof可以得到类型。

<script language="javascript">
	// language属性可以省略
    
    // 定义变量
    var str = "hello world";
	str = true;

	alert(typeof str); // 浏览器弹出窗口，输出str的类型
</script>

js数据类型和方法(函数)

  • 基本数据类型

    • 数值型：包括整数、浮点数等等。

    • 字符串

    • 布尔型：

      • 在JavaScript中所有的变量都可以作为一个boolean类型的变量去使用。
      • 非零的数值、非空的字符串、非空的对象都表示true。
      • 零、空("")、null、未定义都表示false。

  • 引用数据类型

    • new声明对象
    • []声明数组
    • {}声明对象
    var person = new Object();
person.name = "小明";

  • 方法（函数）：有没有参数随意，有没有返回值随意，几个参数，调用的时候传几个都随意，直接调用。

    function hello(name) {
	return "hello to" + name;
}

关系（比较）运算

和Java不同的地方：

  • 等于：== 简单的做字面值的比较
  • 全等于：=== 除了做字面值的比较，还会比较数据类型

逻辑运算

和java不同的地方：

  • &&（与运算）有两种情况：

    • 当表达式全为真的时候，返回最后一个表达式的值。
    • 当表达式中有一个为假的时候，返回第一个为假的表达式的值。

  • ||（或运算）有两种情况

    • 当表达式全为假的时候，返回最后一个表达式的值。
    • 有一个为真的时候，就会返回第一个为真的表达式的值。

  • 这两个运算也有短路情况。

var a = "abc";  // true
var b = true;   // true
var c = false;	// false
var d = null;	// false

var re = a && b;	// re = b = true
re = a && c;		// re = c = false
re = c && d;		// re = c = false

re = c || d;		// re = d null
re = b || d;		// re = b = true 
re = a || b;		// re = a = "abc"

js中错误检查

  • ide集成开发工具
  • 浏览器f12（检查），控制台

js数组

  • js中数组的定义：
var arr = [];
arr[0] = 10;
arr[10] = "abc";
alert( arr.length );	// 结果：11
// 未赋值的：未定义

// 定义的时候赋值
var arr2 = [10, "abc", false];

// 另一种定义方式
var arr2 = new Array(1, 2, 3);
var arr3 = new Array();
arr3[0] = 'a';
arr3[1] = 'b';

函数（方法）

  • 定义和调用

    // 第一种定义方式
function name() {
	
}

// 调用
name();

// 第二种定义方式
var name = function(a, b) {
    alert(a + b);
}

// 调用
name(a, b);

  • js中没有方法重载。会覆盖上一次的定义。

function fun() {
    alert("无参");
}
function fun(a, b) {
    alert("有参");
}
fun();	// 调用的是有参
fun(1, 2);	// 调用的是有参

隐形参数

  • 像JavaSE的可变长参数。可变长参数的源代码其实是数组。
  • 在函数中不需要定义，可以用来直接获取所有参数的变量。arguments
function name() {
    // 和数组操作一样
    var = arguments.length;
    var = arguments[0];
    var = arguments[1];
}
name(1, 2, 3, 4, 5, 6);

对象

  • 第一种形式
var name = new Object();
name.one = "aabc";
name.two = false;
name.method = function() {
    var temp = 10;
    alert(temp);
}
// 访问
alert(name.one);
name.method();
  • 第二种形式
var objectName = {};	// 定义了一个空对象
// 定义对象属性
objectName = {
    name:10,
    ssex:"haoye",
    method:function() {
        alert("我是方法（函数）");
    }
}

Js中的this

  1. 在对象的方法中，this是当前对象

    var student = {
    name: 'xiaoming',
    age: 18,
    hello: function() {
        console.log(this.name + "," + this.age);
    }
}

student.hello();

  2. 单独使用的时候，this是全局对象，浏览器中的全局对象是window

    console.log(this)

  3. 在函数中的this，非严格模式下是全局对象，严格模式下是undifine

    function thisTest() {
    console.log(this)
}

thisTest();

  4. 事件中的this，是事件发生的对象

    <button onclick="test(this)">点我</button>
<script>
    function test(e) {
        console.log(e);
    }
</script>

js中的事件

事件：电脑输入设备与页面进行交互的响应。

常用的事件：

  • onload：加载完成事件 页面加载完成后，常用于做页面js代码的初始化操作。
  • onclick：点击事件 常用于按钮点击响应操作。
  • onblur：失去焦点事件 常用于输入框，离开（失去焦点后）验证其输入内容是否合法。
  • onchange：内容改变事件 常用于下拉框、下拉列表和输入框内容改变后操作。
  • onsubmit：表单提交事件 常用于表单提交前验证所有表单项是否合法。

事件：点击

事件源：按钮

监听器：代码

绑定（注册）：事件源发生事件后执行代码。

事件的注册（绑定）

  • 静态注册事件：通过html标签的事件属性直接赋予事件响应后的代码。

  • 动态注册时间：先通过js代码得到标签的dom对象，然后通过dom对象.事件名 = function() {} 这种形式赋予事件响应后的代码，叫动态注册。

    • 动态注册基本步骤：

      • 获取标签对象
      • 标签对象.事件名 = function() {}

onload事件注册

  • 静态注册
<body onload="alert("onload事件")">
</body>

<!-- 定义成一个函数 -->
<head>
    <script type="text/javascript">
		function onLoadFun() {
            alert("onload事件");
        }
    </script>
</head>
<body onload = "onLoadFun();">
    
</body>
  • 动态注册(固定写法)
<head>
    <script type="text/javascript">
		window.onload = function() {
            alert("onload动态注册");
        }
    </script>
</head>

下面的其他所有事件动态注册时候都要在onload里面写，因为onload发生表明页面加载完毕，要先加载好页面才能获取到标签。

onclikc事件注册

  • 静态注册

  • 动态注册

    • 获取标签的dom对象。

    • 获取的对象.事件名 = function() {}

      // 在页面加载完成的时候获取
window.onload = function() {
    // document是JavaScript语言提供的一个对象。
    // 表示整个页面
    // 它的getElementById()方法可以根据id获取元素（标签）
    var obj = document.getElementById("button1");
    alert(obj);	// 可以看出这是个对象
    
    obj.onclick = functon() {
        alert("按钮被点击");
    }
}

onblur事件

  • 静态注册
function onblurFun() {
    // console是控制台对象，JavaScript提供的，向浏览器的控制台(f12,console控制台)打印输出
    console.log("hello");
}
<input onblur="onblurFun();">
  • 动态注册：同上。

onchange事件

<!-- 下拉列表标签 -->
<select>
	<option>好</option>
    <option>不好</option>
</select>

onsubmit事件

  • 验证表单内容是否合法。

  • return false可以组织表单提交。如果是静态注册return不能少！

    <from action="/student/login" method="post" onsubmit="return onsubmitFun();">  <!--注意这个return不能少！-->
	<input type="submit" value="登录">
</from>

DOM模型

DOM全称是：Document Object Model文档对象模型。

就是把文档中的标签，属性，文本，转换称为对象来管理。

如何把文档中的标签、属性、文本转化成对象来管理呢？

Document对象

  • html代码：

    <html>
	<head>
        <title>标题</title>
    </head>
    <body>
        <h1>一级标题</h1>
        <a href="www.baidu.com">超链接</a>
    </body>  
</html>

  • document对象：整个文档

  • document对象管理了所有html文档的内容。

  • 树结构文档，有层级关系。

  • 把所有标签都对象化。

    • html标签：
    • <body>
    <div id="div01">div01</div>
</body>
    • 模拟对象化：
    • class Dom{
    private String id;	// id	
    private String tagName;	//标签名
    private Dom parantNode;	// 父节点
    private List<Dom> childrenNode;	// 子节点
    private String innerHTML;	// 内容
}

  • 可以通过它访问所有的标签对象。

document对象中的方法

  • getElementById(String id);
  • getElementByName(String name);
  • getElementByTagName(String tagName);
  • createElement(String tagName);

获取或创建标签对象。获取到以后可以访问属性值。

节点的常用属性和方法

节点：简单说节点就是标签对象。（实际上文本、注释等都是节点）

方法：

  • getElementByTagName(); 从当前节点的子节点里找。
  • appendChild(); 添加子节点。

可以获取所有属性。注意：class属性要用：节点.className获取。避免与java中的类冲突。

avatar
文章
阅读
粉丝