javaScript基础
1.javascript基础
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8" />
<meta name="viewport" content="width=device-width, initial-scale=1.0" />
<title>Document</title>
</head>
<body>
<script>
/*
编译型语言
解释型语言
CS BS
Client Server CS NodeJs
Browser Server BS H5 CSS3 Javascript
B2B B to B Business-to-Business 企业与企业之间通过Internet完成交易
B2C B to C Business-to-Client 企业与消费者通过Internet完成交易
强类型语言 变量定义后不能修改变量值的类型
弱类型语言 变量定义后，变量值的类型随意修改 JavaScript是弱类型
ECMAScripte
*/
</script>
</body>
</html>
2.javascript组成和写法
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8" />
<meta name="viewport" content="width=device-width, initial-scale=1.0" />
<title>Document</title>
<script>
// 如果在这里操作点击按钮不可以
</script>
<!-- 引入外部js时，先加载js，加载完成后执行js -->
<!-- 先引入的js变量会做为当前页面中的全局变量，然后后面的js加载进入，可以调用前面的js文件中的全局变量 -->
<script src="./js/a.js" async></script>
<script src="./js/b.js" defer></script>
<!--
同步 一个内容完成再接着开始下一个内容
异步 一个内容的过程不会干扰另一个内容的执行，可以同时进行
增加async 让js加载成为异步
增加defer 当页面加载完成，页面标签全部创建，css全部应用，图片加载完成
在引入的js中如果有相对地址的出现，这个相对地址是当前网页的相对地址
例如img目录下有图片a.jpg
在js中相对图片的地址是../img/a.jpg
但是实际代码确实相对当前html，也就是引入js的这个html的地址 ./img/a.jpg
而link href 加载外部css，这个css中的相对地址是相对css的，而不是相对引入页面
-->
</head>
<body>
<!-- 行内js实现交互式操作 -->
<button onclick="alert(123)">按钮</button>
<a href="javascript:alert(123)">超连接</a>
<a href="javascript:void(0)">超连接</a>
<!-- 使用void(0) 不产生历史记录 -->
<script>
// script标签可以写在head和body中
// 如果写在head，不能直接操作body中的标签
// 写在body中，可以操作当前标签上的所有标签
a = 3;
// alert(a);
// 下一个script可以调用上面script的变量
</script>
</body>
</html>
<!-- <script>
alert(a);
</script> -->
3.注释和调试器
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8" />
<meta name="viewport" content="width=device-width, initial-scale=1.0" />
<title>Document</title>
<style>
div {
width: 148px;
height: 82px;
background-color: red;
}
div:hover {
background-color: blanchedalmond;
}
</style>
</head>
<body>
<div onclick="console.log(111)">aaa</div>
<div id="div1"></div>
<ul>
<li>1</li>
<li class="li0">2</li>
<li class="li0">3</li>
<li class="li0">4</li>
<li>5</li>
</ul>
<script>
// 单行注释 ctrl+/ 注释一行
// /* */ 块注释或者段落注释 alt+shift+a 注释添加代码说明
// var a=3;// alt+shift+向下 复制到下一行
// 1、不执行当前注释内容
// 2、注释添加代码说明文字
// 3、暂时保留部分代码
/*
函数名abc
函数的功能。。。。。
函数的修改时间。。。。
函数的添加内容
1
2
3
参数
a 数据类型 初始值
b......
函数返回数据
数据类型 内容
函数具体解决的内容
1
2
3
4
5
*/
// function abc(a,b){
// return a+b;
// }
// 调试器中的信息打印
// console.log("你好");
// console.trace("不错");
// console.info("信息");
// console.error("错误");
// console.dir("aaa");
// var a=3;
// var b=4;
// var c=5;
// var s=a+b;
// s=s+c;
// console.log(s);
// console.log("aaa");
// document.write("bbb");
// document.write("<a href='#'>超链接</a>");//向文档最后累计写入
// document.body.innerHTML="<a href='#'>超链接</a>"//将body的内容替换为这个
// alert("你好");//弹窗 ok对话框
// confirm("请问是否继续?");//确定取消框，返回一个布尔值
// prompt("请输入你的名字","你的姓名");//输入对话框，第一个内容是问题，第二个内容是默认结果，使用,分隔
// 返回一个字符串，就是输入的内容
// var div1=document.getElementById("div1");//根据id获取到对应的DOM对象（标签对象）
// div1.innerHTML="<a href='#'>超链接</a>"
// var li0=document.getElementsByClassName("li0");//根据class名获取DOM列表
// console.log(li0);
</script>
</body>
</html>
4.变量常量和数据类型
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8" />
<meta name="viewport" content="width=device-width, initial-scale=1.0" />
<title>Document</title>
</head>
<body>
<script>
// ES5 严格模式以后就不能再使用
// x=3;
// y=10;
// 定义变量
// var x=3;
// 有一种对象是可以省略不写的 window
// window.alert("nihao");
// window.document.write("aa");
// window.a=3;//早期就没有变量
// var x=3;//明确定义一个变量 变量仍然属于window的属性
// 变量的命名 是字符，数字，下划线,$组成，首字母不能是数字，区分大小写
// 变量命名遵守驼峰式命名 getStringName 首字母小写，每个单词首字母大写
// 当定义临时变量或者函数的参数时，变量使用下划线起头 _width
// 变量定义时不能使用关键词和保留字 var if=3;
// 变量名称起名时要注意不能与window对象下的属性或者方法同名
// var width=0;
// var height=0;
// function abc(_width,_height){
// width=_width;
// height=_height;
// }
// abc(100,200);
// var sum=10;
// console.log(window.sum);
// var status=100;
// console.log(status);
// ES6才有
// 常量的值不能改变
// const a=3;
// a=5;
// 常量命名时 全大写字母使用下划线区分单词
// const COL_NUM=10;
// var 姓名="谢天";
// console.log(姓名);
// const obj={a:1,b:2};
// 数据类型
// var a=3;
// a="a";
// 基础类型
// 字符型 String
// 数值型 Number
// 布尔型 Boolean
// 未定义型 Undefined
// 空型 Null
// 复杂类型
// 对象型 Object
// 字符型
// var a1="a";
// var a2='3';
// var a3=`5`;//ES6
// var a4="\u4e00";//ES6 双引号中可以放入utf-8的编码
// console.log(a4);
// 数值类型
// var a1=1;
// var a2=1.2
// var a3=-2;
// var a4=-2.5
// var a5=3.2e+2;//科学计数法 3.2*10（2次幂） 320
// var a6=045;//8进制 ES6中废弃
// var a7=0xFF;//16进制
// console.log(a6);
// 布尔类型
// var a1=true;
// var a2=false;
// 未定义型
// var a1;
// var a2=undefined;
// 空值
// var a1=null;
// 对象型
// var obj={a:1,4:true,c:"a"};//key->value 键值对
// 键只能是字符型或者Symbol型（ES6）,如果键不是字符型则会自动转换为字符串
// 值可以是任意类型
// console.log(obj);
</script>
</body>
</html>
5.数据类型转换
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8" />
<meta name="viewport" content="width=device-width, initial-scale=1.0" />
<title>Document</title>
</head>
<body>
<script>
// String--->Number
// var str="abc";//NaN
// var str="35";//35转换成功
// var str="43a";
// var n=Number(str);//强制转换为数值型,字符串必须是纯数值组成才可以转换，否则为NaN
// console.log(n);//NaN 非数值 数值类型
// 0,1,2,3,4,5,6,7,8,9
// 0,1,10,11,100
// 0,1,2,3,4,5,6,7,8,9,a,b,c,d,e,f,10
// var str="abc";
// var str="345"
// var str="3a";//转换时从第一位到非数值为止转换
// var str="100a";
// var n=parseInt(str);//整型，转换为整型,将字符进制转换为整型10进制数值
// 第二个参数可以不填，默认转换为10进制
// 如果第二个参数填写，只能填写2-36，做为进制转换
// console.log(n);
// var str="100.25";
// var n=parseFloat(str);//浮点型 就是带小数点的数值,没有第二个参数
// console.log(n);
// Number() parseInt() parseFloat()
// String--->Boolean 除了""字符串以外其他转换为布尔值都是true
// var str="abc";
// var str="36";
// var str="";
// var n=Boolean(str);
// console.log(n);
// String--->Object 转换为字符串对象
// var str="abc";
// var o=Object(str);
// console.log(o);
// Number-->String
// var n=255;
// var m=String(n);//强制转换 被转换为字符串
// var m=n.toString();//默认将直接转换为字符串
// var m=n.toString(2);//参数是转换进制，将数值按照进制转换为字符串
// var m=n.toString(8.8);//参数是转换进制，将数值按照进制转换为字符串 2-36，如果参数不是2-36的整数将会报错，小数时会向下取整
// console.log(m);
// var n=-255.346;
// var m=n.toFixed(2);//默认参数是0，允许参数为0-20直接
// 保留小数点后几位
// toFixed保留是会自动四舍五入
// console.log(m);
// var n=3.4e+2
// var n=3.4e-2
// var n=35;
// 科学计数法
// var m=n.toExponential();
// var o=n.toPrecision();
// Number--->Boolean 除了0和NaN以外的任何数值转为布尔值都是true
// var a=0;
// var a=NaN;
// console.log(Boolean(a));
// Number--->Object
// var a=34;
// var b=Object(a);
// console.log(b);
// Boolean--->String 相当于直接将布尔值变成字符串
// var a=true;
// var b=String(a);//"true"
// var b=a.toString(2);
// console.log(b);
// Boolean--->Number true-->1 false--->0
// var a=true;
// var b=Number(a);
// var b=parseInt(a,16);
// console.log(b);
// undefined null
console.log(Number(undefined)); //NaN
console.log(Number(null)); //0
console.log(String(undefined)); //"undefined"
console.log(String(null)); //"null"
console.log(Boolean(undefined)); //false
console.log(Boolean(null)); //false
console.log(Object(undefined)); //空对象
console.log(Object(null)); //空对象
// 对象转换为数值 NaN 字符串[object Object] 转换为布尔值都是true
// var o={a:1};
// console.log(Number(o));
// console.log(String(o));
// console.log(Boolean(o));
// String() Number() Boolean() Object() 所有的隐式转换都使用强制转换
</script>
</body>
</html>
被折叠的 条评论
为什么被折叠?
到【灌水乐园】发言
