细说Javascript
2022/2/13 22:16:32
本文主要是介绍细说Javascript，对大家解决编程问题具有一定的参考价值，需要的程序猿们随着小编来一起学习吧！
目录
JavaScript引入方式
书写语法
输出语句
变量
数据类型
运算符
类型转换
常用
流程控制语句
函数（方法）
javascript对象
Array
常用方法
String
自定义对象
window对象
获取Element
事件监听
事件绑定
JavaScript是一门跨平台、面向对象的脚本语言，来控制网页行为的，它能使网页交互
w3c标准：网页主要由三部门组成
结构：Html
表现：CSS、
行为：JavaScript
JavaScript引入方式
1.内部脚本：将JS代码定义在HTML页面中
JavaScript代码必须位于<script>与</script>标签之间
<script>
alert("hello JS");
</script>
提示：
·在HTML文档中可以在任意地方，放置任意数量的<script>
`一般把脚本置于<body>元素的底部，可改善显示速度，因为脚本执行会拖慢显示
2.外部脚本：将JS代码定义在外部JS文件中，然后引入到HTML页面中
·外部文件：demo.js
alert("hello JS");
·引入外部JS文件
<script src="../js/demo.js"></script>
注意：
·外部脚本不能包含<script>标签
·<script>标签不能自闭合
书写语法
注释：
·单行注释：//注释内容
·多行注释：/*注释内容*/
大括号表示代码块
if(count==3){
alert(count);
}
输出语句
使用window.alert()写入警告框
使用document.write()写入HTML输出
使用console.log()写入浏览器控制台
变量
JavaScript中用var关键字（variable的缩写）来声明变量
·JavaScript是一门弱类型的语言，变量可以存放不同类型的值
·变量的需要遵循的规则：
1.组成字符可以是任意字母、数字、下划线(_)或美元符号($)
2.数字不能开头
3.建议使用驼峰命名
let关键字定义变量，类似var，但是所声明的变量只能在let关键字所在的代码块有效，且不允许重复声明
const关键字用来声明一个只读的常量，一旦声明，常量的值就不能改变
数据类型
number：数字
string：字符、字符串、单双引号皆可
boolean：布尔。true,false
null:对象为空
undefined：当声明的变量末初始化时，该变量的默认值为undefined
使用typeof运算符可以获取数据类型
alert(typeof age); //弹出数据类型
运算符
==：1.判断类型是否一样，如果不一样，则进行类型转换
2.再去比较其值
===：1.判断类型是否一样，如果不一样，则直接返回false
2.再去比较其值
类型转换
·其他类型转换成number：
1.string:按照字符的字面值，转为数字，如果字面值不是数字，则转为NaN,一般使用parseInt
2.boolean:true转为1，false转为0
var str="20"; alert(parseInt(str)+1);
·其他类型转为boolean:
1.number:0和NaN转为false，其他数字转为true
var flag=0;//3
if(flag){
alert("转为true");
}else{
alert("转为false");
}
2.string:空字符串转为false,其他字符串转为true
var flag="abc";//""
if(flag){
alert("转为true");
}else{
alert("转为false");
}
3.null:转为false
4.undefined：转为false
var flag=null;//undefined
if(flag){
alert("转为true");
}else{
alert("转为false");
}
常用
//健壮性判断
//if(str != null && str.length > 0){
if(str){
alert("转为true");
}else{
alert("转为false");
}
流程控制语句
<script>
//1.if
var count=3;
if(count==3){
alert(count);
}
//2.switch
var num=3;
switch(num){
case 1:{
alert("星期一");
break;
}
case 2:{
alert("星期二");
break;
}
//...
default: {
alert("输入的星期有误");
break;
}
}
//3.for
var sum=0;
for(let i=1;i<=100;i++){
sum+=i;
}
alert(sum);
//4.while
var sum=0;
var i=1;
while(i<=100){
sum+=i;
i++;
}
alert(sum);
//5.do...while
var sum=0;
var i=1;
do{
sum+=i;
i++;
}
while(i<=100);
alert(sum);
</script>
函数（方法）
函数（方法）是被设计为执行特定任务的代码块
定义：JavaScript函数通过function关键词进行定义，语法为：
function functionName(参数1，参数2...){
要执行的代码
}
注意：
形式参数不需要类型。因为JavaScript是弱类型语言
返回值也不需要定义类型，可以在函数内部直接使用return返回即可
function add(a,b){
return a+b;
}
调用：函数名称（实际参数列表）；
let result=add(1,2);
例：
<script>
function add(a,b){
return a+b;
}
var result =add(1,2);
alert(result);
</script>
定义方式二：
var functionName=function(参数列表){
要执行的代码
}
var add=function(a,b){
return a+b;
}
调用：JS中，函数调用可以传递任意个数参数
let result =add(1,2,3);
<script>
var add=function (a,b){
return a+b;
}
var result =add(1,2,3);
alert(result);
</script>
javascript对象
Array
array对象用于定义数组
定义：
var 变量名=new Array(元素列表)；//方式一
var arr=new Array(1,2,3);
var 变量名=[元素列表];//方式二
var arr=[1,2,3];
访问
arr[索引]=值；
arr[0]=1;
注意：JS数组类似于Java集合，长度，类型都可变
<script> var arr=[1,2,3]; arr[0]=10; alert(arr); </script> //弹出10，2，3
依次弹出1，2，3(length)
<script>
var arr=[1,2,3];
for(let i=0;i<arr.length;i++){
alert(arr[i]);
}
</script>
常用方法
<script>
//push:添加方法
var arr =[1,2,3];
arr.push(10);
alert(arr);
//弹出1，2，3，10
</script>
<script>
//splice：删除元素
var arr =[1,2,3];
arr.splice(0,1);//从0元素开始删，删一个
alert(arr);
//弹出2，3
</script>
String
定义
var 变量名= new String(s);//方式一
var str=new String("hello");
var 变量名=s;//方式二
var str="hello";
var str='hello';
length属性
alert(str.length);
trim();去除字符串前后两端的空白字符
alert(1+str.trim()+1);
常用方法
charAt();返回在指定位置的字符
indexOf();检索字符串
自定义对象
格式：
var 对象名称={
属性名称1：属性值1，
属性名称2：属性值2，
...
函数名称：function（形参列表）{
...
}
}
<script>
var person={
name:"zhangsan",
age:20,
eat:function (){
alert("干饭·");
}
};
alert(person.name);
alert(person.age);
person.eat();
</script>
window对象
window：浏览器窗口对象
获取：直接使用window,其中window.可以省略
window.alert("abc");
参考文档：https://www.w3school.com.cn/jsref/obj_window.asp
https://www.w3school.com.cn/jsref/obj_window.aspWindow 对象
<script type="text/javascript">
function disp_confirm()
{
var r=confirm("Press a button")
if (r==true)
{
document.write("You pressed OK!")
}
else
{
document.write("You pressed Cancel!")
}
}
</script>
<html>
<head>
<script type="text/javascript">
function timedMsg()
{
var t=setTimeout("alert('5 seconds!')",5000)
}
</script>
</head>
<body>
<form>
<input type="button" value="显示计时的消息框！" onClick = "timedMsg()">
</form>
<p>点击上面的按钮。5 秒后会显示一个消息框。</p>
</body>
</html>
location对象
<script>
document.write("3秒后跳转到首页...");
setTimeout(function(){
location.href="https://www.baidu.com"
},3000);
</script>
获取Element
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<title>Title</title>
</head>
<body>
<img id="light" src="../imgs/IMG_6154.jpg"><br>
<div class="cls">努力学习</div>
<div class="cls">linlin</div>
<input type="checkbox"name="hobby">电影
<input type="checkbox"name="hobby">游戏
<input type="checkbox"name="hobby">跳舞
<br>
<script>
var img = document.getElementById("light");
alert(img);
</script>
</body>
</html>
事件监听
·事件：HTML事件是发生在HTML元素上的“事情”。比如：
1.按钮被点击
2.鼠标移动到元素上
3.按下键盘按键
·事件监听：JavaScript可以在事件被侦测到时执行代码
事件绑定
方式一：通过HTML标签中的事件属性进行绑定
<input type="button" onclick='on()'>
function on(){
alert("我被点了");}
方式二：通过DOM元素属性绑定
<input type="button" id="btn">
document.getElementById("btn").onclick=function(){
alert("我被点了");
}
例：
<body>
<input type="button" value="点我" onclick="on()"><br>
<input type="button" value="再点我"id="btn">
<script>
function on(){
alert("我被点了");
}
document.getElementById("btn").onclick=function (){
alert("我再被点了");
}
</script>
这篇关于细说Javascript的文章就介绍到这儿，希望我们推荐的文章对大家有所帮助，也希望大家多多支持为之网！
- 2024-05-15鸿蒙生态设备数量超8亿台
- 2024-05-13TiDB + ES：转转业财系统亿级数据存储优化实践
- 2024-05-09“2024鸿蒙零基础快速实战-仿抖音App开发（ArkTS版）”实战课程已上线
- 2024-05-09聊聊如何通过arthas-tunnel-server来远程管理所有需要arthas监控的应用
- 2024-05-09log4j2这么配就对了
- 2024-05-09nginx修改Content-Type
- 2024-05-09Redis多数据源，看这篇就够了
- 2024-05-09Google Chrome驱动程序 124.0.6367.62（正式版本）去哪下载？
- 2024-05-09有没有大佬知道这种数据应该怎么抓取呀？
- 2024-05-09这种运行结果里的10.100000001，怎么能最快改成10.1？
