【Javascript Day1】javascript基础
javascript编程规则
弹窗（举例）
alert("内容")，直接写在控制区生效
三种写法
1、行内js语法 ：需要注意引号的问题
<input type="button" value="提示窗" οnclick=' alert("消息") '>
（onclick : 为标签绑定一个 数据的左键点击功能，οnclick=" 写js代码 "）
2、内联js语法
<input type="button" value="提示窗" οnclick=" show() ">
<input type="button" value="提示窗2" οnclick=" 消息() ">
（show、消息为类似id的名字，必须唯一，重复则覆盖）
function show(){
alert("消息")
}
// 后续代码覆盖前面的代码
function show(){
alert("昨天")
}
3、外联js语法
<input type="button" value="提示窗" οnclick="showTip()">
然后通过<script src="./文件路径.js"></script>联系js文件
js注释方法
// 单行注释
/*
多行注释
*/
/**
文档注释
*/
js结果输出
<script>
function outMsg1(){// 控制台输出// ==> 程序员的开发过程中的调试// ==> 页面彩蛋console.log("控制台输出1"); // 日志输出console.error("控制台输出2"); // 错误输出console.warn("控制台输出3"); // 警告输出console.info("控制台输出4"); // 提示}function outMsg2(){// 页面输出// 第一次调用时，将整个页面进行替换，连续多次的输出都会保留// 不换行document.write("页面输出1");document.write("页面输出2");document.write("页面输出3");// 换行输出，以html不识别的换行方式进行输出（显示为空格）document.writeln("页面输出4");document.writeln("页面输出5");document.writeln("页面输出6");// 通过定义标签的方式，向页面写入结果，浏览器一样会解析标签document.write("页面输出7<br>");document.write("页面输出8<br>");document.write("页面输出9<br>");document.write("页面输出10<br>");}function outMsg3(){// 信息提示弹出（从上到下依次显示，如果不操作则显示第一个）alert("弹窗输出1");// alert("弹窗输出2");// alert("弹窗输出3");// alert("弹窗输出4");// alert("弹窗输出5");// 确认弹窗confirm("弹出输出6") （有确认和取消按钮）// 输入弹窗prompt("输入弹窗") （多一个输入框）}</script><body><input type="button" value="控制台输出" onclick=" outMsg1() "><hr><input type="button" value="页面输出" onclick=" outMsg2() "><hr><input type="button" value="弹窗输出" onclick=" outMsg3() "></body>js变量定义和使用
<script>// 变量：可变的数据存储区域// 1. 变量声明// function var 标识符// var 用于定义变量// 语法 var 变量名;// 定义了一个名字叫做arg的变量var arg;// 变量赋值arg = "数据";function printArg(){// 调用变量alert( arg )}function setArg(){// 变量的赋值arg = "新数据";}// 声明(定义)变量时可以直接赋值var msg = "msg数据";// 一次性声明多个变量，并进行赋值var a="a值" , b="b值" , c="值";// JS 虽然变量名是根据需要自行定义的,需要遵守规则规范// *语法规范： 变量名只能用以 数字 字母 _ $ 组成，不能以数字开头 ==> 报错，程序不能运行// *约定规范： 变量使用英文单词的名词，名称要有含义 ==> 为了让代码阅读更加流程// var +name = "张三"; //非法var name12 = "李四"; // 合法// var 33name = "王五"; // 非法var age = "数据1";var age = "数据2";// 区分大小写var Age = "数据3";function printAge(){console.log(age);}// var var = "数据"; // 变量名不能使用标识符// 变量名由多个单词组成时，需要从第二个单词开始首字母大写 => 驼峰命名规则var homeTel = "18913000000";</script><body><input type="button" value="输出变量arg的值" onclick="printArg()"><br><input type="button" value="对变量arg重新赋值" onclick="setArg()"><br><input type="button" value="输出age" onclick="printAge()">
</body>
// 自动执行，直接写大括号内内容跳过onclick,页面刷新自动执行
var name = "张三";
console.log( name );
js变量类型
<script>// 变量记录和存储数据// 数据基于功能不同，类型也不同// 不同的类型可以在程序中进行不同的操作// 例子：要求把 张三 和 100 求和 ， 无理：求和只能发生在数字和数字之间// 简单数据类型：String 字符串// Number 数值 => 特殊取值 Infinity NaN// Boolean 布尔真假// undefined 未定义 // null 空var str = "字符串"; // 字符串 - 文本var str1 = '字符串';var str2 = "100"; // 字符串var num = 100; // 数值var num1 = -100;var float = 22.22;// var float2 = abc; // 报错// 数值类型数据 var num4 = Infinity; // 正无穷var num5 = -Infinity; // 负无穷var num6 = NaN; // 该变量被赋予的数据，不是一个数值数据 => not a number// console.log( 100/2 ); // 除非运算// console.log( "abc"/2 ); // 除非运算// 布尔值 => boolean => 是或不是// 有效值 true （是）// false （否）var flag = true; var flag1 = false; // undefined 值 ==> 表示变量没有赋值var arg1 = undefined;console.log(arg1);var arg2;console.log(arg2);// null 值 ==> 变量值为 空var arg3 = null;console.log(arg3)</script>字符串数据的使用
<script>var name = "张三";// console.log( "我是" );// console.log( name );// console.log( "我是name" );console.log( "我是"+name ); // 字符串拼接name = "豆豆";console.log( "我是"+name ); // 字符串拼接// 字符串的运算// + 关键字可以实现多个字符串的拼接var str1 = "-字符串1";var str2 = "-字符串2";console.log( str1 + str2 );var str3 = str1 + str2; // 将str1和str2变量的值进行拼接，赋值给 str3console.log( str3 );//输出为 -字符串1-字符串2var str4 = "新字符串" + str2;console.log( str4 );输出为 新字符串-字符串2var msg1 = 'JS学习时知道定义字符串变量使用的语法是: var 变量名 = "字符串值" ';console.log(msg1)// 字符串定义时，必须通过 关键字 "" 或者 '' 包裹，此时最外面的 "" '' 不是内容，是关键字// 成对的符号，基本都是就近匹配// 转移符 \ 转移符用于定义或者匹配一些特殊字符var msg2 = " JS学习时知道定义字符串变量使用的语法是: var 变量名 =" \"字符串变量\" ";// \" 告诉js 当前的"不是关键字console.log(msg2)// 目前，代码定义字符串不能换行，如果一定要换行，通过 \n 定义换行文字， \n 换行符var msg3 = "aaaa\nbbbb";console.log(msg3);// \t 缩进符 => tab 键 => 由多个空格组成 => 空格数量是可以调整var msg4 = "\tabc";console.log(msg4)// var msg5 = "\"";(输出")var msg5 = "\\";(输出\)console.log(msg5)var msg6 = "\\\\\\\\\\";console.log(msg6) （输出\\\\\）// var name = "张三"// document.write("<h1 style=\"color:red;\">" + name + "</h1>");(输出红色大号张三)//等效为document.write("<h1 style=\"color:red;\">张三</h1>");</script>