| |
|
|
开发:
C++知识库
Java知识库
JavaScript
Python
PHP知识库
人工智能
区块链
大数据
移动开发
嵌入式
开发工具
数据结构与算法
开发测试
游戏开发
网络协议
系统运维
教程: HTML教程 CSS教程 JavaScript教程 Go语言教程 JQuery教程 VUE教程 VUE3教程 Bootstrap教程 SQL数据库教程 C语言教程 C++教程 Java教程 Python教程 Python3教程 C#教程 数码: 电脑 笔记本 显卡 显示器 固态硬盘 硬盘 耳机 手机 iphone vivo oppo 小米 华为 单反 装机 图拉丁 |
| -> JavaScript知识库 -> JS（笔记） -> 正文阅读 |
|
|
[JavaScript知识库]JS（笔记） |
1.为什么学习JS1.实现动态效果 ? 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
<script type="text/javascript">
var a = 23;
var b = 23.0;
alert(typeof(a));
alert(typeof(b));
</script>
解析：结果是anumber
(4) boolean
<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对象<对历史记录进行前进和后退的操作>
案例： <!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常用方法
案例： <!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(); ? //返回当前日期和时间
<!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>
|
|
|
| JavaScript知识库 最新文章 |
| ES6的相关知识点 |
| react 函数式组件 & react其他一些总结 |
| Vue基础超详细 |
| 前端JS也可以连点成线（Vue中运用 AntVG6） |
| Vue事件处理的基本使用 |
| Vue后台项目的记录 （一） |
| 前后端分离vue跨域，devServer配置proxy代理 |
| TypeScript |
| 初识vuex |
| vue项目安装包指令收集 |
|
|
| 上一篇文章 下一篇文章 查看所有文章 |
|
|
开发:
C++知识库
Java知识库
JavaScript
Python
PHP知识库
人工智能
区块链
大数据
移动开发
嵌入式
开发工具
数据结构与算法
开发测试
游戏开发
网络协议
系统运维
教程: HTML教程 CSS教程 JavaScript教程 Go语言教程 JQuery教程 VUE教程 VUE3教程 Bootstrap教程 SQL数据库教程 C语言教程 C++教程 Java教程 Python教程 Python3教程 C#教程 数码: 电脑 笔记本 显卡 显示器 固态硬盘 硬盘 耳机 手机 iphone vivo oppo 小米 华为 单反 装机 图拉丁 |
| 360图书馆 购物 三丰科技 阅读网 日历 万年历 2024年11日历 | -2024/11/23 23:21:44- |
|
| 网站联系: qq:121756557 email:121756557@qq.com IT数码 |