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变量的值进行拼接,赋值给 str3
console.log( str3 );//输出为 -字符串1-字符串2
var str4 = "新字符串" + str2;
console.log( str4 );输出为 新字符串-字符串2
var 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>