初识JavaScript
Posted 我可不是隔壁的老王
tags:
篇首语：本文由小常识网(cha138.com)小编为大家整理，主要介绍了初识JavaScript相关的知识，希望对你有一定的参考价值。
<!DOCTYPE html> <html> <head lang="en"> <meta charset="UTF-8"> <title>初识JS</title> <!-- javascript: 组成： 01.ECMAScript描述了js语言的语法和基本的对象！ 02.DOM（文档对象模型）描述了处理网页内容的方法和接口 03.BOM（浏览器对象模型）描述了与浏览器进行交互的方法和接口 特点： 01.无需预编译 弱语言类型 02.运行在客户端 减轻服务器压力 网页中引入css和js文件的顺序！ css引入在head标签中！ 目的就是在用户看到页面的时候有样式！ js引入在body标签中的对下面！目的是 在交互过程中，确保所有的内容加载完毕！ --> </head> <!--01.行内 onload="alert(‘大家辛苦了1！‘);alert(‘大家辛苦了2！‘);"--> <body> <!-- 02.内部--> <script type="text/javascript"> /* alert("大家辛苦了！");*/ </script> <!--03.外部样式引入--> <script type="text/javascript" src="js/alert.js"></script> </body> </html>
<!DOCTYPE html>
<html>
<head lang="en">
<meta charset="UTF-8">
<title>基本事件</title>
</head>
<body>
<!--
javascript: 伪协议！
当我们运行到javascript: 的时候，程序会先执行对应的js代码！之后再操作！
无论是超链接还是提交按钮，都不会立即执行！
-->
<a href="javascript:">跳转</a> <br/>
<input type="button" value="普通按钮" onclick="javascript:alert(‘你说可以‘);"> <br/>
<input type="text" placeholder="请输入用户名" on onblur="javascript:alert(‘失去焦点‘);">
<!--
onfocus="javascript:alert(‘获取焦点‘);"
-->
</body>
</html>
<!DOCTYPE html>
<html>
<head lang="en">
<meta charset="UTF-8">
<title>数据类型</title>
</head>
<body>
<!--
undefined :只声明了变量，但是没有赋予初始值，就是undefined
//声明变量
var myName;
alert("姓名是："+myName); //name什么都没有
alert("name的数据类型是："+(typeof(myName)));
null：空值，不存在的对象 等于undefined
alert(null==undefined);
number：包含了整数和浮点数
alert("20的数据类型："+typeof(20));
alert("20.5的数据类型："+typeof(20.5));
boolean：true 和 false
alert(typeof(TRUE)); // 把TRUE当成了一个变量 所以输出 undefined
alert(typeof(true));
alert(typeof("true")); //string
string ：被单引号或者双引号引起来的文本
alert(typeof(‘a‘));
alert(typeof("a"));
object：js中的对象，包含数组，对象和null
var arr1=new Array(1,2,3);
var arr2=new Array("小黑","小白");
var arr3=[];
arr3[0]=1;
arr3[1]=12.2;
arr3[2]="小黑"; //可以存放不同的数据类型
alert("arr3的数据类型"+typeof(arr3));
alert("arr3的第3个元素"+arr3[2]);
alert("null的数据类型"+typeof(null));
var date=new Date();
alert("date的数据类型"+typeof(date));
-->
<script type="text/javascript">
</script>
</body>
</html>
<!DOCTYPE html>
<html>
<head lang="en">
<meta charset="UTF-8">
<title>输入和确认</title>
</head>
<body>
<!--
alert("大家\n辛苦了"); // \n是换行
alert：是一个提示框，具有确定按钮！
confirm：是一个提示框，具有确定和取消按钮！
prompt：是一个对话框，有两个参数
01.第1个参数，是提示语
02.第2个参数，是输入框的默认值 ， 可以省略此参数
-->
<script type="text/javascript">
var flag= confirm("你想迎娶白富美吗？");
if(flag){ //用户点击的是确定
var answer= prompt("你月收入多少呀？","请输入收入"); //获取用户的输入
document.write("您的收入是："+answer);
}else{
alert("你就一屌丝！")
}
</script>
</body>
</html>
<!DOCTYPE html>
<html>
<head lang="en">
<meta charset="UTF-8">
<title></title>
</head>
<body>
<script type="text/javascript">
var num1="123.45a",num2="a123.45";
/*
* parseInt()：前提字符串第一个位置必须是数字，直到遇到 . 或者 非数字时 返回 得到整数
* parseFloat():前提字符串第一个位置必须是数字 直到遇到 非数字时 返回 得到浮点数
*/
document.write(parseInt(num1)+"<br/>");
document.write(parseInt(num2)+"<br/>"); //NaN 说明不是一个数字
document.write(parseFloat(num1)+"<br/>");
document.write("<hr/>");
/**
* 强制类型转换
* Boolean():里面的参数 只要不是false,0,null,undefied,空,NaN,未定义的变量 之外 都会返回true
* Number(): 是把整个字符串 作为 参数之后进行强制类型转换 ！ 要确保参数是 数值类型 或者boolean true=1 false=0;
* String()
*/
document.write(Boolean(true)+"<br/>");
document.write(Number(num1)+"<br/>");
document.write(String(typeof (num1))+"<br/>");
alert(typeof 1);
alert(typeof (1)); //推荐使用
</script>
</body>
</html>
<!DOCTYPE html>
<html>
<head lang="en">
<meta charset="UTF-8">
<title>常用的运算符</title>
</head>
<body>
<script type="text/javascript">
/**
* 常用的运算符
*/
document.write("+运算："+(5+5)+"<br/>");
document.write("-运算："+(5-5)+"<br/>");
document.write("*运算："+(5*5)+"<br/>");
document.write("/运算："+(5/5)+"<br/>");
// % 取余
var num=3;
/*
++在变量前 先自身加1 之后参与运算
++在变量后 先参与运算 之后自身加1
*/
document.write("%运算："+(5%3)+"<br/>");
document.write("++运算："+(num++)+"<br/>");
document.write("--运算："+(num--)+"<br/>");
document.write("--运算之后："+(num)+"<br/>");
</script>
</body>
</html>
<!DOCTYPE html>
<head lang="en">
<meta charset="UTF-8">
<title>switch</title>
</head>
<body>
<script type="text/javascript">
var num=window.prompt("请问：今天周几？"); //让用户输入整数
switch (parseInt(num)){ // 因为用户输入的是字符串 要么 case "1" 要么 parseInt(num)
case 1:
alert(1);
break;
alert(111); // 没有意义 但是不会报错
case 2:
alert(2);
break;
case 3:
alert(3);
break;
default :
alert("default");
}
</script>
</body>
</html>
<!DOCTYPE html>
<head lang="en">
<meta charset="UTF-8">
<title>break,continue</title>
</head>
<body>
<script type="text/javascript">
for(var i=0;i<=5;i++){ //break
if(i==5) break;
document.write(i+"<br/>");
}
document.write("<hr/>");
for(var i=0;i<=5;i++){ //continue
if(i==3)continue;
document.write(i+"<br/>");
}
</script>
</body>
</html>
07.break,continue
<!DOCTYPE html>
<html>
<head lang="en">
<meta charset="UTF-8">
<title>== 和 ===</title>
</head>
<body>
<!--
== ：在比较的时候，会把相对来说复杂的类型转换成简单类型之后 比较两个变量的值
===:先比较两个变量的数据类型，如果数据类型一致，再比较值！
-->
<script type="text/javascript">
var num1=5;
var num2="5";
document.write("num1==num2:::"+(num1==num2)+"<br/>");
document.write("num1===num2:::"+(num1===num2));
</script>
</body>
</html>
<!DOCTYPE html>
<html>
<head lang="en">
<meta charset="UTF-8">
<title>函数</title>
</head>
<body>
<!-- 方法的调用-->
<input type="button" value="hello" onclick="sayHello();"> <br/>
<input type="button" value="bye" onclick="sayBye();"><br/>
<input type="button" value="haha" onclick="haha();"><br/>
<script type="text/javascript">
//01.定义一个函数
function sayHello(){
alert("大家好！");
}
//02.定义一个函数
var sayBye=function(){
alert("拜拜大家！");
}
function haha(){
sayHello();
sayBye();
}
</script>
</body>
</html>
<!DOCTYPE html>
<html>
<head lang="en">
<meta charset="UTF-8">
<title>数组</title>
</head>
<body>
<script type="text/javascript">
var arr1=new Array(); //没有长度
var arr2=new Array(5); //只有一个参数 是长度
var arr3=new Array(1,2,3,4,5); // 定义数组的同时开辟空间并赋值
var arr4=[1];
document.write("arr1.length"+arr1.length+"<br/>");
document.write("arr2.length"+arr2.length+"<br/>");
document.write("arr3.length"+arr3.length+"<br/>");
document.write("arr4.length"+arr4.length+"<br/>");
document.write("arr4[0]"+arr4[0]+"<br/>");
document.write("arr4[1]"+arr4[1]+"<br/>");
//定义一个字符串 转换成数据
var str="haha,heihei,hehe,houhou";
var arr5= str.split(","); //返回一个数据
document.write(arr5.length+"<br/>");
//向数组中添加一个元素
arr5.push("heiheihahahehe");
document.write("arr5[4]"+arr5[4]+"<br/>");
//把数组中的每一个元素通过一个分隔符 连接在一起 形成新的字符串
str=arr5.join("+");
document.write(str);
</script>
</body>
</html>
<!DOCTYPE html>
<html>
<head lang="en">
<meta charset="UTF-8">
<title>for in</title>
</head>
<body>
<script type="text/javascript">
var arr=[1,2,3,4,5,6];
/* i 是下标 */
for(var i in arr){
document.write(arr[i]);
}
</script>
</body>
</html>
<!DOCTYPE html>
<html>
<head lang="en">
<meta charset="UTF-8">
<title>捕获异常</title>
</head>
<body>
<script type="text/javascript">
/*
* ex.name 错误名称
* ex.message 错误信息
*/
try{
sasas
}catch(ex){
alert(ex.name+":"+ex.message);
}
alert("大家辛苦了2");
</script>
</body>
</html>
<!DOCTYPE html>
<html>
<head lang="en">
<meta charset="UTF-8">
<title>debug</title>
</head>
<body>
<!--
网页中 F12
如果网页有代码错误会在console台中显示错误信息
之后选中错误出现的行！
就到达 sources页面
就可以打断点 （选择行号）
NetWork 是我们所有访问的资源文件
-->
<img src="images/a.jpg">
<script type="text/javascript">
document.write(1+"<br/>");
document.write(2+"<br/>");
document.write(3+"<br/>");
sasaasa
document.write(4+"<br/>");
document.write(5+"<br/>");
document.write(6+"<br/>");
</script>
</body>
</html>
以上是关于初识JavaScript的主要内容，如果未能解决你的问题，请参考以下文章
初识OpenGL 片段着色器(Fragment Shader)
初识OpenGL 片段着色器(Fragment Shader)
VSCode自定义代码片段12——JavaScript的Promise对象