JS（笔记）
2021/10/10 23:47:56
本文主要是介绍JS（笔记），对大家解决编程问题具有一定的参考价值，需要的程序猿们随着小编来一起学习吧！
1.为什么学习JS
1.实现动态效果 2.减轻服务器压力
2.JS定义
JavaScript是一种基于对象和事件驱动的、并具有安全性能的脚本语言。 1.js是一种基于对象的语言(面向对象) 2.js一种弱语言(很重要！)<解释>java语言： a = 123;//编译报错--》java是强语言(格式严格规范) js语言：a = 123; a = "我是中国人";//没有任何问题--》js是弱语言--（格式很多情况下没有规范）. 3.JS是一种客户端脚本语言，可以在浏览器之上单独运行的语言。
3.JS组成
1.ECMAScript 2.DOM 3.BOM
4.JS基本结构-HelloWorld
<script type="text/javascript">
document.write("初学JavaScript");
document.write("<h1>Hello，JavaScript</h1>");
//window.document.write("<h1>Hello，JavaScript</h1>");（这里省略了一个window） //document.document.write("<h1>Hello，JavaScript</h1>");（document是奖字符串贴在网页文本上来显示的）
//（一般window可省略，document不可省略）
</script>
5.JS执行原理
6.JS引用方式
6.1内部引入
<script type="text/javascript"> </script>
6.2外部引入（目前来说是最重要的）
<script src="" type="text/javascript"></script> 解析：现在js文件夹下创建——文件名.js 文本写上 documen write（“HellowWord”） 在html页面内引入，代码为<script src="" type="text/javascript"></script>
6.3标签内部引入（调试很重要）
<input type="button" value="点击" οnclick="javascript:alert('呵呵');"/>
解析：如果出现了定义上或者是其他的错误，在浏览器上用F12再进行代码触发后可以及时的去发现问题。
7.JS核心语法
7.1变量
(1)先声明变量再赋值
var width;
width = 5;
解析：var a="字符串";
alert("第一次打印"+typeof(a));<第一次打印的是String类型>
var a=123;
alert("第二次打印变量a"+typeof(a));<第二次打印的是anumber类型>
<typeof打印在标签上的是类型，而不是变量的值>
(2)同时声明和赋值变量(企业专用)
var width = 5;
(3)不声明直接赋值（不推荐）
width=5;
7.2数据类型
(1) undefined
变量被声明后，但未被赋值
<script type="text/javascript">
var width;
alert(width);
</script>
解析：结果是undefined
(2) null
<script type="text/javascript">
var width;
alert(width == null);
</script>
解析：结果是ture
(3) number
true或false
<script type="text/javascript">
var a = 23;
var b = 23.0;
alert(typeof(a));
alert(typeof(b));
</script>
解析：结果是anumber
(4) boolean
true或false
<script type="text/javascript">
alert(1 == 2);
alert(1 == 1);
</script>
解析：结果是true或false
(5) string
用单引号或双引号来声明的字符串
<script type="text/javascript">
var s1 = "hehe";
var s2 = 'haha';
alert(typeof(s1));
alert(typeof(s2));
</script>
解析：结果是String
7.3语法详解
(1)string
alert(s1.length);<显示的是长度>
alert(s1.charAt(1));<返回的是一个字符，脚标从0开始>
alert(s1.indexOf("JavaScript"));<从定义的里面检索>
alert(s1.substring(3,6));<从第三个开始取到第六个，第六个取不到，只能取前一个>
alert(s1.split(" "));<间隔>
(2)数组
A.创建数组
第一种方式
var array = new Array(5); array[0] = 2; array[1] = 3; array[2] = "32"; array[7]=23; alert(array.length); 解析：遍历长度的术后会出现8个，超出了范围，前面的定义可以当放屁，JS就是这么的随意。
第二种方式
var array = []; array.push(1); array.push(3); array.push(9);
B.遍历数组
第一种方式（传统for循环）
for(var i = 0;i<array.length;i++){
document.write(array[i]);
}
第二种方式（增强for循环）
for(var o in array){
document.write(array[o]);
}
C.数组常用属性方法
属性：length 方法：join(),push()
7.4企业常用控制语句
if else语句 for语句
7.5注释
alert("恭喜你！注册会员成功"); //在页同上弹出注册会员成功的提示框
7.6输入/输出
alert()
代码案例：alert("你会Java吗？如果会请入职，如果不会请离职!!!");
var flag = prompt("提示信息","输入框的默认信息");
alert(flag);
代码案例： var a = prompt("你会Java吗？","会")
if(a<给个返回值>){
alert("请入职！！！");
}else{
alert("请面试下一家公司。");
}
代码案例：var str=parseInt（“123”）;
alert(isNaN(str));
//解析：是否是非数字 运行为false
//注意：双重否定表肯定
代码案例： var str=parseInt("123abc");
alert(str);
解析：输出的一定是数字
7.7函数
(1)常用系统函数
parseInt("86")//将字符串“86”转化为了number类型<在JS中只要看到parseInt都会转换成Int类型>
parseFloat("34.45")
isNaN():用于检查其参数是否是非数字
代码解析：var str1=parseInt("86");//string类型
var str2=3;
var sum=str1+str2;//如果字符串那里不加parseInt进行转换则会报错
alert(sum);
(2)自定义函数
A.有名函数(用的较多)
function haha(){
alert(HellowWord);
}
haha();
<body>
<input type="button" value="点击" οnclick="haha()"/>
</body>
B.匿名函数
var a = function(){
alert(234);
}
a();
8.调试工具
<script type="text/javascript">
var i=0;
for(i=0;i<=5;i++){
if(i==3){
break;
}
document.write("这个数字是："+i+"<br/>");
}
</script>
9.拓展
特殊案例：
<script type="text/javascript">
var a = [];
if(a instanceof Array){
alert("数组类型");
}
</script>
第二章
1.BOM的定义
BOM：浏览器对象模型（Browser Object Model） BOM提供了独立于内容的、可以与浏览器窗口进行互动的对象结构
2.BOM的组成部分
3.window对象常用方法
3.1 winow.confirm()
显示一个带有提示信息、确定和取消按钮的对话框
var flag = confirm("确认要删除此信息吗？");
if(flag){
alert("删除成功");
}else{
alert("你取消了删除");
}
var flag=window.confirm("你确认启明是架构吗？");
if(flag){
window.alert("请叫我周架构！！！");
}else{
window.alert("请叫我周开发！！！");
}
3.2 winow.open()
打开一个新的浏览器窗口，加载给定 URL 所指定的文档
<html>
<head>
<meta charset="UTF-8">
<title>333</title>
<script type="text/javascript">
function ab(){
window.open("demo03.html");
}
</script>
</head>
<body>
<input type="button" οnclick="ab()" value="触发"/>
</body>
</html>
==============================================================
<!DOCTYPE html>
<html>
<head>
<meta charset="UTF-8">
<title></title>
</head>
<body>
demo03.html.....
</body>
</html>
3.3 winow.prompt()
显示可提示用户输入的对话框
代码案例：
function a(){
var flag=window.prompt("柳岩，在吗？");
if(flag=="我在"){
alert("我在");
}else{
alert("我去找杨幂！");
}
}
3.4 winow.alert()
显示带有一个提示信息和一个确定按钮的警示框
代码案例： function a(){
var flag=window.alert("柳岩，在吗？");
}
4.history对象<对历史记录进行前进和后退的操作>
| back() | 加载 history 对象列表中的前一个URL,等价于history.go(-1) =>"浏览器后退" |
|---|---|
| forward() | 加载 history 对象列表中的下一个URL,等价于history.go(1)=>"浏览器前进" |
| go() | 加载 history 对象列表中的某个具体URL |
案例：
<!DOCTYPE html>
<html>
<head>
<meta charset="UTF-8">
<title></title>
</head>
<body>
demo05.html...
<a href="javascript:window.history.back()">返回</a>
<a href="javascript:window.history.go(-1)">返回</a>
</body>
</html>
5.location对象<跳转>
设置或返回完整的URL
<!DOCTYPE html>
<html>
<head>
<meta charset="UTF-8">
<title></title>
</head>
<body>
<a href="javascript:window.location.href='demo05.html'">触发</a>
</body>
</html>
6.document对象
6.1 常用属性referrer (返回载入当前文档的URL)
判断页面是否是链接进入
<!DOCTYPE html>
<html>
<head>
<meta charset="UTF-8">
<title></title>
<script type="text/javascript">
var url = document.referrer;
if(url==""){
alert("不是跳转进来的。");
}else{
alert("跳转进来的。");
}
</script>
</head>
<body>
demo07.html...
</body>
</html>
6.2常用方法
| getElementById() | 返回对拥有指定id的第一个对象的引用 |
|---|---|
| getElementsByName() | 返回带有指定名称的对象的集合 |
| getElementsByTagName() | 返回带有指定标签名的对象的集合 |
案例：
<!DOCTYPE html>
<html>
<head>
<meta charset="utf-8">
<title>菜鸟教程(runoob.com)</title>
</head>
<body>
<p name="a">单击按钮来改变这一段中的文本。</p>
<p name="a">单击按钮来改变这一段中的文本。</p>
<p >单击按钮来改变这一段中的文本。</p>
<button οnclick="myFunction()">点我</button>
<script>
function myFunction(){
alert(document.getElementsByTagName("p").length);
};
</script>
</body>
</html>
6.3全选功能(极其重要！)
案例：
<!DOCTYPE html>
<html>
<head>
<meta charset="UTF-8">
<title></title>
<script type="text/javascript">
function checkFather(){
var father = document.getElementById("father");
var sons = document.getElementsByName("son");
for(var i=0;i<sons.length;i++){
sons[i].checked = father.checked;
}
}
function checkSon(){
var father = document.getElementById("father");
var sons = document.getElementsByName("son");
//定义一个变量，设置为标记
var flag = true;
//遍历儿子的DOM列表元素
for(var i=0;i<sons.length;i++){
//如果儿子的DOM列表中有一个未打勾
if(sons[i].checked==false){
//flag设置为false<将父级元素设置为未打勾的状态>
flag = false;
//但凡子级DOM元素列表中有一个未打勾的状态，父级元素直接为未打勾状态，并且循环遍历直接退出
break;
}
}
//如果儿子DOM列表元素中都是打勾的状态，那么父级元素的列表也为打勾状态
father.checked=flag;
}
</script>
</head>
<body>
全选:<input type="checkbox" id="father" οnclick="checkFather()" /><br />
<input type="checkbox" name="son" οnclick="checkSon()"/><br />
<input type="checkbox" name="son" οnclick="checkSon()" /><br />
<input type="checkbox" name="son" οnclick="checkSon()" /><br />
<input type="checkbox" name="son" οnclick="checkSon()" /><br />
</body>
</html>
7.JavaScript内置对象
7.1 Date对象
var date=new Date(); //返回当前日期和时间
| getHours() | 返回 Date 对象的小时数，其值介于0～23之间 |
|---|---|
| getMinutes() | 返回 Date 对象的分钟数，其值介于0～59之间 |
| getSeconds() | 返回 Date 对象的秒数，其值介于0～59之间 |
<!DOCTYPE html PUBLIC "-//W3C//DTD HTML 4.01 Transitional//EN" "http://www.w3.org/TR/html4/loose.dtd">
<html>
<head>
<meta http-equiv="Content-Type" content="text/html; charset=UTF-8">
<title>Insert title here</title>
<script type="text/javascript">
var date = new Date();
var hh = date.getHours();
var mm = date.getMinutes();
var ss = date.getSeconds();
alert("时:"+hh+"分:"+mm+"秒"+ss);
</script>
</head>
<body>
</body>
</html>
7.2 Math对象
<!DOCTYPE html>
<html>
<head>
<meta charset="UTF-8">
<title></title>
<script type="text/javascript">
//向上取整
document.write(Math.ceil(25.1)+" ");
//向下取整
document.write(Math.floor(26.9)+" ");
//四舍五入
document.write(Math.round(24.5)+" ");
//随机数
document.write(Math.random());
</script>
</head>
<body>
</body>
</html>
这篇关于JS（笔记）的文章就介绍到这儿，希望我们推荐的文章对大家有所帮助，也希望大家多多支持为之网！
- 2024-12-21Vue3教程：新手入门到实践应用
- 2024-12-21VueRouter4教程：从入门到实践
- 2024-12-20Vue3项目实战：从入门到上手
- 2024-12-20Vue3项目实战：新手入门教程
- 2024-12-20VueRouter4项目实战：新手入门教程
- 2024-12-20如何实现JDBC和jsp的关系？-icode9专业技术文章分享
- 2024-12-20Vue项目中实现TagsView标签栏导航的简单教程
- 2024-12-20Vue3入门教程：从零开始搭建你的第一个Vue3项目
- 2024-12-20从零开始学习vueRouter4：基础教程
- 2024-12-20Vuex4课程：新手入门到上手实战全攻略
