黑马JavaWeb-day02

什么是JavaScript？

JavaScript：简称Js,是一门跨平台、面向对象的脚本语言。是用来控制网页行为的，它能使网页可交互

JavaScript和Java是完全不同的语言，无论是概念还是设计。但是基础语法类似。

JavaScript

JavaScript引入方式

内部脚本：将JS代码定义在HTML页面中

JavaScript代码必须位于<script></script>标签之间
在HTML文档中，可以在任意地方，放置任意数量的<script>
一般会把脚本放置于<body>元素的底部，可改善显示速度

外部脚本：将JS代码定义在外部JS文件中，然后引入到HTML页面中

外部JS文件中，只包含JS代码，不包含<script>标签
<script>不能自闭合

JS基础语法

区分大小写：与Java一样，变量名、函数名以及其他一切东西都是区分大小写的。
每行结尾的分号可有可无,但是结尾的分号建议写上。
注释：单行注释：//注释内容，多行注释：/**/
大括号代表代码块 if(count==3){alert(count)}

JS输出语句

使用windows.alert()写入警告框
使用document.write()写入HTML输出
使用console.log()写入浏览器控制台

JS变量

JavaScript中用var关键字（variable的缩写）来声明变量
JavaScript是一门弱类型语言，变量可以存放不同类型的值
变量名需要遵循如下规则
1. 组成字符可以是任何字母、数字、下划线（_）、或者美元符号（$）
2. 数字不能开头
3. 建议使用驼峰命名

通过var定义的变量的特点：

作用域比较大，全局变量
可重复定义

注意事项；新增let关键字来定义变量，用法和var类似，但是let所声明的变量只在let关键字所在代码块内有效，且不允许重复声明。
const关键字，用来声明一个只读的常量。一旦声明，常量的值就不能改变。

JavaScript的数据类型

JS中的数据类型分为原始数据类型和引用数据类型：

原始数据类型
1. number：数字（整数、小数、NaN）
2. string：字符串，单双引皆可
3. boolean：布尔。true，false
4. null：对象为空
5. undefined：当声明的变量未初始化时，该变量的默认值时undefined

使用typeof可以获取数据的数据类型

JS中的运算符

==:会先进行类型比较，如果类型不一样，先将类型转化一致，再进行比较

=== ：不会进行类型转换

类型转换：

字符串转为数字：将字符串字面值转为数字。如果字面值不是数字，则转为NaN
其他类型转为boolean：
- Number：0和NaN为false，其他均为true
- String：空字符串为false，其他均为true
- Null和undefined：均转为false

函数：是被设计为执行特定任务的代码块。

函数定义：JavaScript函数通过function关键字进行定义，语法为：

function functionName(参数1, 参数2) {
	//要执行的代码
}

注意：

形参不需要类型。因为JS是弱类型语言
返回值也不需要定义类型，可以在函数内部直接使用return返回即可
调用：函数名称(实参列表)

<script>
    //定义函数
    function add(a, b) {
        return a + b;
    }
    result = add(10, 20);
    alert(result);
</script>

定义方式二：

var functionName = function(参数1, 参数2) {
	//要执行的代码
}

JS中的对象

Array：
JS中Array对象使用了定义数组的。
定义：

var 变量名=new Array(元素列表);
var 变量名=[元素列表]；

var arr=new Array(1,2,3,4);
var arr=[1, 2, 3, 4];

Js中的数组类似Java中的集合，长度可变，类型可变。

for循环和for-Each的区别；for循环遍历所有元素，for-each只遍历数组里面有值的元素.

ES6中对于函数的简化如下:

var arr - [1, 2, 3, 4]
arr.forEach(function(e){
	console(e);
})
arr.forEach((e) => {
	console(e);
})

String对象

和Array对象类似,创建String对象也有两种方式

var 变量名 = new String("..."); //方式一
var 变量名 = ""; //方式二

var str = new String("小明");
var str = "小明";

JSON对象

Javascript自定义对象:
定义格式:

var 对象名 = {
	属性名1: 属性值1,
	属性名2: 属性值2,
	属性名3: 属性值3,
	函数名称: function(形参列表){}
};

var user = {
	name:'Tom',
	age:20,
	gender:"male",
	eat:function() {
		alert("用膳");
	}
	/*这样定义方法也是可以的
	ear () {
	
	}
	*/
};

JSON:JavaScript Object Notation,JavaScript对象标记法,json就是通过JavaScript对象标记法书写的文本.

json中所有的key必须使用""(双引号)引起来

{
	"name":'Tom',
	"age":20,
	"gender":"male",
}

json语法简单,层次结构鲜明,多用于数据载体,在网络中进行数据传输.

json基础语法:

定义:

var 变量名 = '{"key1":value1, "key2":value2}';
var userStr	= '{"name":"Jerry", "age":18, "addr":["北京", "上海", "西安"]}'

JSON字符串转化为JS对象

var jsObject = JSON.parse(userStr);

JS对象转化为JSON字符串

var jsonStr = JSON.stringify(jsObject);

BOM对象:Browser Object Model 浏览器对象模型,允许JavaScript与浏览器对话,JavaScript将浏览器的各个组成部分封装成对象.

Window:浏览器窗口对象
Navigator:浏览器对象
Screen:屏幕对象
History:历史记录对象
Location:地址栏对象

window对象

介绍:浏览器窗口对象
获取:直接使用window,其中window可以省略.window.alert(“Hello world”); alert(“Hello world”);
属性:
1. history:对History对象的只读引用.
2. location:用于窗口或框架的Location对象.
3. navigator:对Navigator对象的只读y引用.
方法
1. alert():显示带有一段消息和一个确认按钮的警告框.
2. confirm():显示带有一段消息以及确认按钮和取消按钮的对话框.
3. setInterval():按照指定的周期来调用函数或计算表达式.
4. setTimeout():在指定数毫秒后调用函数或计算表达式.

Location对象:
地址栏对象
获取:

window.location.属性;
location.属性

属性:

href:设置或返回完整的url

DOM对象:

概念:Document Object Model,文档对象模型

将标记语言的各个组成部分封装为对应的对象

Document:整个文档对象
Element:元素对象
Attribute:属性对象
Text:文本对象
Comment:注释对象

JavaScript通过DOM,就能够对HTML进行操作:

改变HTML元素的内容
改变HTML元素的样式(CSS)
对HTML DOM事件作出反应
添加,删除HTML元素

DOM是W3C的标准,定义了访问HTML和XML的标准,分为3个不同的部分:

Core DOM:所有文档类型的标准
- Document:整个文档对象
- Element:元素对象
- Attribute:属性对象
- Text:文本对象
- comment:注释对象
XML DOM-XML文档的标准模型
HTML DOM-HTML 文档的标准模型

HTML中的Element对象可以通过Document对象获取,而Document对象是通过window对象获取的.

Document对象中提供了以下获取Element元素对象的函数:

<script>
    // 获取元素通过id
    var img = document.getElementById("h1");
    alert(img);
    // 获取元素通过标签名
    var divs = document.getElementsByTagName('div')
    for(let i=0;i<divs.length;i++){
        alert(divs[i]);
    }
    // 获取元素通过name
    var ins = document.getElementsByName('hobby');
    for(let i=0;i<ins.length;i++){
        alert(ins[i]);
    }
    // 获取元素通过类名
    var cls = document.getElementsByClassName('cls');
    for(let i=0;i<cls.length;i++){
        alert(cls[i]);
    }
    //通过获取到的对象操作html
    var divs = document.getElementsByTagName('div')
    divs[0].innerHTML = "传智播客";
</script>

事件:HTML事件是发生在HTML元素上的事情.比如:

按钮被点击
鼠标移动到元素上
按下键盘按键

事件监听:JavaScript可以在事件被侦测到时执行代码

事件绑定:

两种方式:

方式一:通过HTML标签中的事件属性进行绑定
方式二:通过DOM元素属性绑定

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>JS-事件-事件绑定</title>
</head>
<body>
    <input type="button" id="btn1" value="事件绑定1" onclick="on()">
    <input type="button" id="btn2" value="事件绑定2">
    
</body>
<script>
    on = function(){
        alert("事件绑定1");
    }
    document.getElementById("btn2").onclick = function(){
        alert("事件绑定2");
    }
    
</script>
</html>

js中的常见事件

Vue:Vue是一套前端框架,免除原生JavaScript中的DOM操作,简化书写.基于MVVM(Model-View-ViewModel)思想,实现数据的双向绑定,将编程的关注点放在数据上.

Vue快速入门

插值表达式:形式:{{表达式}},内容可以是:变量,三元运算符,函数调用,算数运算

Vue的常见指令:

指令:HTML标签上带有v-前缀的特殊属性,不同指令具有不同的含义.例如v-if,v-for

v-bind:为html标签绑定属性值,如设置href,css样式等

<a v-bind:href="url">传智教育</a>

//简写形式
<a :href="url">传智教育</a>

v-model:

<input type="text" v-model="url">

注意如果通过v-bind或者v-model绑定变量,必须在数据模型中声明.

v-on:为HTML标签绑定事件

<input type="button" value="按钮" v-on:click="handle()">
<input type="button" value="按钮" @click="handle()">
<script>
	new Vue({
	 el:"#app",
	 data: {
	 	//...
	 },
	 methods: {
	 	handle:function() {
			alert("我被点击了");
		}
	 },
	})
</script>