Javascript入门
字符串
1.字符串的创建
1.1 字面量
//方式一: 字面量
var str = "我是字符串";
var str1 = '我是15行';
console.log(typeof str);
console.log(typeof str1);
1.2 使用构造方法
//方式二: 使用构造方法
var str2 = new String("我是19行");
var str3 = String("我是20行");
console.log(typeof str2);
注意： 使用字面量创建的字符串(方式一),是基本数据类型 ，使用构造方法创建的字符串是引用类型
2.字符串的属性 length 字符串长度
//字符串中的属性: length 表示字符串的长度
console.log(str.length);
console.log(str2.length);
3.字符串中方法
3.1 根据下标获取指定字符 charAt(index)
3.2 拼接字符串 concat(str)
3.3 替换字符串 replace
3.4 截取字符串 slice(startIndex,endIndex)
3.5 截取字符串 substring(startIndex,endIndex)
3.6 字符串分割 split(str)
3.7 字符串写转小写 toLocaleLowerCase()
3.8 字符串转大写 toLocaleUpperCase()
// 根据下标获取指定字符 charAt(index) 下标从0开始
console.log("123456".charAt(1));
// 拼接字符串 concat(str)
console.log("Hello".concat(" World"));
//替换字符串 replace 在Javascript中,replace 默认只会 一个
console.log("aaabbbccc".replace("a","m"));
//使用正则进行全局匹配 替换
console.log("aaabbbccc".replace(/a/g,"m"));
//截取字符串 slice(startIndex,endIndex) : [startIndex,endIndex )
console.log("0123456".slice(0,2));
//截取字符串 substring(startIndex,endIndex) : [startIndex,endIndex )
console.log("0123456".substring(0,2));
//字符串分割 split(str) : 按照指定字符 将字符串转化为数组
var arr = "1-2-3-4".split("-");
console.log(arr);
//toLocaleLowerCase() : 将字符串大写转化为小写
console.log("abcDm".toLocaleLowerCase());
//toLocaleUpperCase() : 将字符串小写转化为大写
console.log("abcDm".toLocaleUpperCase());
数组
1.数组的创建
创建方式一：字面量
//方式一:字面量
var str = "我是字符串";
//在javascript 可以通过 字面量 中括号的形式创建数据
var arr = [1,2,3,4];
console.log(arr);
方式二：使用构造方法
//方式二: 构造方法
var arr1 = new Array(1,2,3,4,5);
console.log(arr1);
注意点：
//注意:1.在javascript 数组中可以存储任意类型,建议存储相同类型
var arr = [1,"字符串",true,NaN];
var arr = new Array(1,"字符串",true,NaN);
console.log(arr);
// 2.使用构造方法在创建数组时,若只有一个参数,此时表示数组的长度,若多个参数,则是数组的元素
var arr = new Array(5);
console.log(arr);
//3. 在javascript中 数组不存在下标越界
var arr = [0,1,2,3];
console.log(arr[0]);
console.log(arr[1]);
console.log(arr[2]);
console.log(arr[3]);
console.log(arr[4]);
// 4. 在Javascript中，数组时没有长度大小限制的
var arr = new Array(2);
console.log(arr);
arr[0] = 1;
arr[1] = 2;
arr[2] = 3;
console.log(arr);
2.数组的属性:length
//数组的length属性
console.log(arr.length);
3.数组的访问：数组是通过下标进行访问，数组的下标初始值是0
/**
* 数组的访问: 数组是通过下标进行访问,第一下标值是 0
*/
var arr = [0,1,2,3,4,5];
for(var i = 0;i<arr.length;i++){
console.log(arr[i]);
}
//数组的修改也是通过下标进行修改
arr[0] = "我是第一个值";
console.log(arr);
//数组添加数组
arr[arr.length] = "我是最后一个";
console.log(arr);
4.数组中的方法
4.1 向数组的末尾添加一个或多个元素：push（obj）
/**
* 数组中的方法
* push(obj):向数组末尾添加一个或多个元素
*/
var arr = [1,2,3];
arr.push(4);
console.log(arr);
arr.push(5,6,7,8);
console.log(arr);
4.2 向数组前面添加一个或多个元素：unshift（obj）
/**
* 向数组前面添加一个或多个元素 unshift(obj)
*/
var arr = [1,2,3,4,5];
arr.unshift(0);
console.log(arr);
arr.unshift(-3,-2,-1);
console.log(arr);
4.3 删除数组中最后面的元素pop()
/**
* 删除数组中 最后面的元素 pop
*/
var arr = [1,2,3,4,5];
arr.pop();
console.log(arr);
4.4 删除数组中最前面的元素shift()
/**
* 删除数组中 第一个元素
*/
var arr = [1,2,3,4];
arr.shift();
console.log(arr);
4.5 批量修改数组splice（startIndex，deleteCount，items）
**startIndex:数组操作的开始下标 必填 **
deleteCount：删除的元素个数 必填
items：元素项 选填
/**
* 修改数组
* splice（startIndex，deleteCount，items）
*/
var arr = [1,2,3,4,5,6];
// 从第一个元素开始,删除 2个元素 1,2 ---> 3 4 5 6
arr.splice(0,2);
console.log(arr);
//从指定下标开始 删除指定个数 使用item 从开始下标处替换
var arr = [1,2,3,4,5,6];
arr.splice(0,2,"第一个","第二个","第三个");
console.log(arr);
了解：
1.转义符 \
在Javascript中，一些符号都有自身的意义，此时若需要使用这个符号本身，则需要进行转义。
/**
* 转义符： \
*/
var str = "\" 毛爷爷说:革命尚未成功,同志们,还需好好学习,你们是89点钟的太阳,充满朝气\"";
console.log(str);
2.字符串域
/**
* 字符串域 使用 `` 包裹的都是字符串
*/
var str = `"好好学习,天天向上"`;
console.log(str);
3.编码转码
数据提交方式一般有2种：一种是get 一种是post.
1.get提交的数据在地址栏中
2.post提交的数据在协议内部
若存在中文，且必须要使用get提交，可能会出现乱码，此时可使用JS进行编码然后进行传输。
3.1 编码 encodeURIComponent(str)
在Javascript中,若有汉字或特殊符号要在URL上进行传输，此时可使用encodeURIComponent进行编码。
/**
* 编码 encodeURIComponent(str)
*
*/
var url = "http://www.baidu.com?s=";
var keywords = encodeURIComponent("小丽");
console.log(keywords);
console.log(url+keywords);
3.2 解码decodeURIComponent（str）：
在Javascript中，若字符串存在编码，需通过decodeURIComponent进行解码
var key = decodeURIComponent("%E5%B0%8F%E4%B8%BD");
console.log(key);
注意点：
1.在Java中，可以通过URLEncoder类进行字符串编码
2.在Java中，可以通过URLDecoder类进行解码
函数
1.函数的定义
有特定功能的代码块，就是函数
2.函数的语法
2.1 关键 function
2.2 语法
function 函数名 （参数）{
代码块;
return 返回值;
}
/**
* 函数的语法： function
* function 函数名 (参数){
代码块;
return 返回值;
}
注意：
1.在Javascript中 函数是没有返回值类型
2.在Javascript 中参数是没有类型的
3. 在Javascript中 使用return 返回结果
4. 在Javascript中 调用函数时,无需传入指定个数个参数
*/
function f1(m,n){
console.log(m);
console.log(n);
return m + n;
}
f1();
f1(1);
f1(1,2);
var s = f1(1,2);
console.log(s);
2.3 匿名函数和函数表达式
/**
* 匿名函数
* 在Javascript中,若定义一个函数,不指定名称此时 就是匿名函数
* 函数表达式 将匿名函数赋值给变量 这种是函数表达式
*/
var m = function (){
console.log("你好");
}
console.log(typeof m);
console.log(typeof f1);
3.函数的使用
3.1.通过函数名称，传入响应的参数进行调用。
3.2.定义变量可以接收函数运算返回的结果
4.arguments 参数对象
arguments 表示当前函数运行的参数。
4.1 length : 实际参数的个数
4.2 arguments[下标]：根据下标获取实际参数值
4.3 calleee(参数)：callee 表示当前函数
5.Javascript中函数的注意点
5.1.在Javascript中 函数是没有返回值类型
5.2.在Javascript 中参数是没有类型的
5.3.在Javascript中 使用return 返回结果
5.4.在Javascript中 调用函数时,无需传入指定个数个参数
对象
1.对象的定义
是一个包含属性和函数的特殊数据类型.
2.对象的创建
方式一：通过new关键字进行创建
/**
* 对象的创建
* 方式一： 通过new 关键字进行创建
*/
//此时创建了一个空对象
var o = new Object();
console.log(o);
//为o 对象新增了 name属性 且值 韩梅梅
o.name = "韩梅梅";
console.log(o);
o.study = function(){
console.log("我是第20行");
}
o.study();
console.log(o);
注意：此时创建的对象都是空对象，没有任何属性和方法，需要手动添加
方式二：通过字面量
//字面量的方式
/**
* 语法：
* var 对象名 = {
属性名: 属性值
......
}
注意:多个之间使用,号分隔
*/
var obj = {
name : '我是属性的值',
age : 18,
11:27,
study: function(){
console.log("我是第29行");
}
}
console.log(obj.name);
console.log(obj.age);
obj.study();
注意: 属性值是固定的
方式三：构造函数创建
//构造函数 创建对象
function Student(name,age){
this.name = name;
this.age = age;
this.study = function (){
console.log("好好学习,天天向上");
}
}
var st1 = new Student("韩梅梅",18);
console.log(st1.name +" "+st1.age);
var st2 = new Student("李磊",18);
console.log(st2.name +" "+st2.age);
st2.study();
3.对象使用
1.对象通过.可以访问自己的属性和方法
2.对于特殊的属性也可以通过[属性名]进行访问
4.this关键字
this指的当前对象
1.若在方法中，则是调用当前方法的对象
2.若在构造函数中，则是当前创建的对象
3.全局属性都是window对象的属性
Date
/**
* Date 时间对象
*/
var date = new Date();
//获取年份
console.log(date.getFullYear());
//获取月份 0 - 11
console.log(date.getMonth()+1);
//获取 日
console.log(date.getDate());
//获取一周的某一天
console.log(date.getDay());
//获取小时
console.log(date.getHours());
//获取分
console.log(date.getMinutes());
//获取秒
console.log(date.getSeconds());
//获取毫秒
console.log(date.getMilliseconds());
//获取从1970年1月1日 到现在的毫秒数
console.log(date.getTime());
console.log(window);
//document ---> 文档
//document.write 向body中输出了一段字符串
document.write("Today's date is "+new Date());
document.write("<div><a href='http://www.baidu.com' style='color:red'>百度</a></div>")
案例：日历
<!DOCTYPE html>
<html>
<head>
<meta charset="utf-8">
<title>日历案例</title>
<style type="text/css">
.box1{
width: 300px;
height: 300px;
background-color: blue;
position: relative;
margin: auto;
}
p{
text-align: center;
color: azure;
font-size: 20px;
top: 30px;
height: 50px;
line-height: 50px;
}
.box2{
width: 150px;
height: 150px;
background-color: green;
position: absolute;
bottom: 20px;
left: 75px;
text-align: center;
line-height: 150px;
font-size: 40px;
font-weight: 900;
color: aquamarine;
}
</style>
</head>
<body>
<script type="text/javascript">
var html = `<div class="box1"><p>today</p><div class="box2">day</div></div>`;
var week = ["星期日","星期一","星期二","星期三","星期四", "星期五","星期六"];
var date = new Date();
var today = date.getFullYear()+"年"+(date.getMonth()+1)+"月"+date.getDate()+"日 "+week[date.getDay()];
html = html.replace("today",today);
var day = date.getDate();
html = html.replace("day",day);
document.write(html);
</script>
</body>
</html>
定时器
1.周期性定时器:setInterval(fun,time)
/**
* setInterval(fun,time): 周期性的定时器
* fun : 周期性执行的函数
* time : 执行周期 单位 毫秒
*/
/* setInterval(function(){
console.log("我执行了");
},1000); */
function task (){
console.log("我是18行");
}
setInterval(task,1000);
2.一次性的定时器:setTimeout(fun,time)
/**
* 一次性执行的setTimeout(fun,time)
* fun : 执行的函数
* time :延迟执行的时间
*/
setTimeout(function(){
console.log("我是第27行");
},10000);
function task2(){
console.log("我是第30行");
}
setTimeout(task2,10000);
3.清除定时器:clearInterval(obj)
/**
* clearInterval(timerObj):
* 结束定时器
* timerObj : 定时器对象
*/
var m = 0;
var timer = setInterval(function(){
console.log("我是第35行");
m++;
if(m == 3){
//终止定时器
clearInterval(timer);
}
},1000);
Javascript调试
方式一：
1.按F12
2.找到JS代码---Source
[图片上传失败...(image-d7b7b4-1563350181418)]
3.在最最侧打断点
4.当鼠标移动到变量上时会显示变量值
5.通过右侧Watch 手动添加需要监视的变量
[图片上传失败...(image-edbb0-1563350181419)]
6.通过右侧上方的功能按钮进行debug操作
[图片上传失败...(image-ccbb5f-1563350181419)]
方式二：
通过debugger关键字，进行强制debug操作。
DOM入门
1.DOM定义 Document Object Model
在我们HTML中，本质上也是一个DOM模型，HTML是根节点，下面涵盖多个子节点。
body节点就是在窗口中显示的内容。浏览器有内置对象：window,window对象下面有document属性
document就涵盖整个页面的DOM对象
2.DOM查找
2.1.根据ID查找 ： getElementById(id的值) 返回单个dom对象
2.2.根据class属性值查找 ：getElementsByClassName(class值) 返回dom集合
2.3.根据标签名查找： getElementsByTagName(标签名称) 返回dom集合
//getElementById(id值): 根据ID查找标签 返回单个对象
var div = document.getElementById("divId");
console.log(div);
//getElementsByClassName(class的值): 根据class属性查找标签
var divs = document.getElementsByClassName("divClass");
console.log(divs);
for (var i = 0; i < divs.length; i++) {
console.log(divs[i])
}
//getElementsByTagName(): 根据标签名称 获取 标签集合
var divs = document.getElementsByTagName("div");
console.log(divs);
3.DOM事件入门
DOM事件3要素：事件源、事件类型、事件程序
/**
* 事件：
* 事件源 ：在哪发生
* 事件类型： 什么事件
* 事件程序： 函数
*/
function fun1(){
console.log("我是事件程序");
}
/**
* 此时 button 是事件源
* onclick: 事件类型
* fun1 ：事件程序
*/
4.DOM内容操作
在HTML中，页面标签的内容：标签或者文本
4.1.innerHTML:用于获取或设置DOM的内容
4.2.innerText：用于获取或设置DOM的文本内容
/**
* DOM的内容操作
* innerHTML: 获取DOM的内容或设置内容
* innerText: 获取DOM的文本内容设置文本内容
*
*/
var div = document.getElementById("divId");
console.log(div);
//innerHTML 子标签及子标签中的文本都会获取
var child = div.innerHTML;
console.log(child);
//innerText 只获取文本内容
var childText = div.innerText;
console.log(childText);
var div3 = document.getElementById("div3");
//innerHTML 设置内容时,若是标签会处理为标签
div3.innerHTML = "<a href='http://www.baidu.com'>百度</a>";
//innerText 设置内容时,设置文本内容
div3.innerText = "<a href='http://www.baidu.com'>百度</a>";
/**
* 注意点： innerHTML 和innerText 在设置内容时 都会覆盖DOM的内容
*/
注意： innerHTML 和innerText 在设置内容时 都会覆盖DOM的内容
5.DOM的属性操作
方式一：DOM对象.属性名 获取或设置属性
方式二：使用Javascript内置的属性操作方法：
获取属性值 ：getAttribute(属性名)
设置属性值 ： setAttribute(属性名,属性值)
删除属性： removeAttribute(属性名)
判断是否有该属性：hasAttribute(属性名)
/**
* DOM的属性操作：
* 一般而言，Javascript 操作DOM的属性，只需要
* DOM对象.属性 进行获取属性值和设置属性值
*/
var img = document.getElementById("img");
//设置DOM属性值
img.src = "img/tk.jpg";
//获取DOM的属性值
console.log(img.src);
//获取DOM对象
var input = document.getElementById("input");
//通过DOM对象操作属性
var v = input.value;
console.log(v);
//设置input value属性值
input.value="我是新的字符串";
/**
* 注意：在操作DOM的class属性，不能使用class 要使用className
*/
function changeColor(){
console.log("我真的被点击了!");
var div2 = document.getElementById("div2");
//div2.className = "box2";
div2.setAttribute("class","box2");
}
//找到checkbox
var ck1 = document.getElementById("ck1");
//checked : 设置选中
ck1.checked = true;
//通过方法设置:
/**
* 获取属性值 ：getAttribute(属性名)
* 设置属性值 ： setAttribute(属性名,属性值)
* 删除属性： removeAttribute(属性名)
* 判断是否有该属性：hasAttribute(属性名)
*/
var img = document.getElementById("mv");
//获取属性值
var src = img.getAttribute("src");
console.log(src);
//设置属性值
img.setAttribute("title","程序员鼓励师");
//判断是否存在某个属性
console.log(img.hasAttribute("src"));
//删除指定属性
img.removeAttribute("title");
//注意:使用Javascript 内置的属性操作方法时,操作class属性无需使用className,应使用class
网友评论