JavaScript基础
一.引入方式
**第一种方式：**内部脚本，将JS代码定义在HTML页面中
JavaScript代码必须位于标签之间
在HTML文档中，可以在任意地方，放置任意数量的
一般会把脚本置于元素的底部，可改善显示速度
例子：
**第二种方式：**外部脚本将， JS代码定义在外部 JS文件中，然后引入到 HTML页面中
1
2
3外部JS文件中，只包含JS代码，不包含
引入外部js的
例子：
注意：demo.js中只有js代码，没有
二.基础语法
window.alert()
警告框
document.write()
在HTML 输出内容
console.log()
写入浏览器控制台
/* alert("JS"); */
//方式一: 弹出警告框
// window.alert("hello js");
// //方式二: 写入html页面中
// document.write("hello js");
//方式三: 控制台输出
console.log("hello js");
三.变量
var
早期ECMAScript5中用于变量声明的关键字
let
ECMAScript6中新增的用于变量声明的关键字，相比较var，let只在代码块内生效
const
声明常量的，常量一旦声明，不能修改
//var定义变量
// var a = 10;
// a = "张三";
// alert(a);
//特点1 : 作用域比较大, 全局变量
{
var x = 1;
}
alert(x);
可以重复
var x = 1;
var x = "A";
}
alert(x);
//let : 局部变量 ; 不能重复定义
// {
// let x = 1;
// alert(x);
// }
//const: 常量 , 不能给改变的.
const pi = 3.14;
pi = 3.15;
四.数据类型和运算符
number
数字（整数、小数、NaN(Not a Number)）
string
字符串，单双引皆可
boolean
布尔。true，false
null
对象为空
undefined
当声明的变量未初始化时，该变量的默认值是 undefined
运算符和Java基本一样
五.函数
第一种方式
function 函数名(参数1,参数2..){
要执行的代码
function add(a, b){
return a + b;
let result = add(10,20);
alert(result);
第二种可以通过var去定义函数的名字，具体格式如下：
var functionName = function (参数1,参数2..){
//要执行的代码
}
六.JS对象
1.数组
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<title>对象-array</title>
</head>
<body>
<script>
/*
定义：方式一 var 变量名 = new Array{元素列表}
方式二 var 变量名 = {元素列表}
访问 arr[索引] = 值
*/
var arr1 = new Array(1,2,3,4)
// 访问数组
console.log(arr1)
// 特点： 长度可变 类型可变.
arr1[5] = "j";
arr1[6] = 520;
arr1.push("T");
// 遍历数组
// for(let i = 0;i < arr1.length;i ++){
// const element =arr1[i];
// }
// foreach遍历有值的元素
// arr1.forEach( function(e) {
// const element =arr1[e];
// });
// 箭头函数
arr1.forEach(e => {
console.log(e)
})
/*
forEach() 遍历数组中的每个有值得元素，并调用一次传入的函数
push() 将新元素添加到数组的末尾，并返回新的长度
splice() 从数组中删除元素
*/
</script>
</body>
</html>for
2.字符串
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<title>string</title>
</head>
<body>
<script>
/*
创建： var str = new String()
*/
var string = new String("jly tzx");
// console.log(string)
// length 长度b
console.log(string.length)
// charAt 检查索引的结果
console.log(string.charAt(0));
// indexof 检查内容的索引值
console.log(string.indexOf("y"));
/*
trim() 去除字符串两边的空格
substring() 提取字符串中两个指定的索引号之间的字符。
*/
</script>
</body>
</html>
3.json
/*
自定义对象
创建： var 对象名 = {
属性名： 属性值 可以是字符串 数字 和 方法
}
调用方式 ： 对象名.属性名 对象名.函数名 */
// var user = {
// name : '唐执兴',
// age : 19,
// doing (){ // 或者 doing : function(){}
// alert('学习javaweb');
// }
// }
// alert(user.name);
// user.doing();
// alert(user.age)
// json 格式化
var use ={"name " : "吉","arr":[1,5,6]};
// alert(use.name);
var obj = JSON.parse(use);// 转换为对象
alert(obj.name)
alert(obj.use)
alert(JSON.stringify(obj));// 转化为字符串
4.BOM
widow 的 方法
// 弹出确定 取消的消息框 confrim
var flag = confirm("你确定你还喜欢他");
alert(flag)
// var i = 0;
// // 定时器 间隔时间内一直弹出
// setInterval(function(){
// i++;
// confirm('定时器执行第' + i + '次')
// },2000)
// 间隔时间执行一次
setTimeout(function(){
console.log('你好!');
},5000)
alert(location.href);// 获取浏览器地址
location.href = "https://www.itcast.cn"
location.href = "https://www.itcast.cn" // 跳转到该地址
</script>
5.DOM
// 对已经建立的页面内容进行修改
<img id="h1" src="img/off.gif"> <br><br>
<div class="cls">传智教育</div> <br>
<div class="cls">黑马程序员</div> <br>
<input type="checkbox" name="hobby"> 电影
<input type="checkbox" name="hobby"> 旅游
<input type="checkbox" name="hobby"> 游戏
<script>
/*
document.getElementById() 根据id属性值获取，返回单个Element对象
document.getElementsByTagName() 根据标签名称获取，返回Element对象数组
document.getElementsByName() 根据name属性值获取，返回Element对象数组
document.getElementsByClassName() 根据class属性值获取，返回Element对象数组
*/
//1. 获取Element元素
//1.1 获取元素-根据ID获取
// var img = document.getElementById('h1');
// alert(img);
//1.2 获取元素-根据标签获取 - div
// var divs = document.getElementsByTagName('div');
// for (let i = 0; i < divs.length; i++) {
// alert(divs[i]);
// }
//1.3 获取元素-根据name属性获取
// var ins = document.getElementsByName('hobby');
// for (let i = 0; i < ins.length; i++) {
// alert(ins[i]);
// }
//1.4 获取元素-根据class属性获取
// var divs = document.getElementsByClassName('cls');
// for (let i = 0; i < divs.length; i++) {
// alert(divs[i]);
// }
//2. 查询参考手册, 属性、方法
var divs = document.getElementsByClassName('cls');
var div1 = divs[0];
div1.innerHTML = '吉良艳'
