W3C
结构化语言标准:HTML XHTML XML…
表现语言标准:CSS
行为语言标准: ECMAScript JS
有的时候代码没错 就是不显示 原因你得变量 定义在了function(){}函数的外面
document()向页面输出内容
alert()直接弹出框 弹出来内容
prompt()弹出来框框以后再框框里面输入内容
isNaN("12")例外这个返回是false ,当不是数值的时候 返回true 是数值 返回false
onblur()失去焦点 离开文本框的时候
1. JS介绍
JavaScript是一门基于对象和事件驱动的脚本语言。
脚本语言:无需编译 php python…
边解释边执行
可以给HTML添加交互行为
<body>
<!--"text/javascript" 可以省略 推荐放在body结束标签的上方 js边解释边执行-->
<script type="text/javascript">
//单行注释
/*多行注释*/
//向页面输出内容 需要加双引号/单引号 都可以
document.write("<h1>hello world</h1>");
</script>
</body>
2. JS引入方式
JS:
1.内部脚本 <script></script>
2.外部脚本 .js文件 <script src=""></script>
3.行内脚本 它需要借助事件
事件:交互行为 例如:鼠标悬浮事件、鼠标移除事件、键盘按下事件
键盘松开事件、页面加载事件、鼠标单击事件、鼠标双击事件…
双引号里面不能再写双引号
<!DOCTYPE html>
<html>
<head>
<meta charset="UTF-8">
<title></title>
</head>
<body>
<!--
类似于当初在HTML标签中 每一个都有style属性一样
它们每一个也有事件对应的属性
onclick 在点击的时候 会触发
alert(弹出内容);
-->
<!-- 行内引入 -->
<input type="button" onclick="javascript:alert('点了!咋滴!');" value="点啊!" />
<!-- 外部引入 -->
<!--<script src="js/index.js" type="text/javascript" charset="utf-8"></script>-->
<!-- 内部编写 -->
<script type="text/javascript">
/*<!--
// 向页面输出内容
document.write("Hello JS");
-->*/
document.write("<h2>Hello JS</h2>");
</script>
</body>
</html>
3. 核心语法
3.1变量
<body>
<script type="text/javascript">
// 第一种: JS 先声明 再 赋值
var name;
name="黑色";
//document.write(name);
// 第二种: JS 声明并赋值
var age=10;
// 第三种: 不声明直接赋值(不推荐)
// gender = "男"
document.write("<strong>姓名</strong>"+name
+"<br/>年龄"+age);
</script>
</body>
3.2数据类型
<body>
<script type="text/javascript">
/*js数据类型
* undefined未定义的 只声明 未赋值
* number整数 小数
* boolean true false
* string小写s 单引+双引号
* object 对象类型
*
* typeof检测变量的返回值
* python中是True False
*/
var classid;
alert(typeof classid); //显示undefined
//alert(typeof null); 显示object
//alert(typeof 10.1); 显示number
//alert(typeof 20); 显示number
//alert(typeof true); 显示boolean
//alert(typeof 'xxx');显示string
//alert(typeof "xxx"); 显示string
//面向原型的面向对象
//var array=new Array();
//alert(typeof array);//显示object
//var str=new String();
//alert(typeof str);//显示object
//看的只是typeof后面的数
</script>
</body>
3.3字符串
<body>
<script>
var string1="hello world";
/*
alert(string1.length);
输出11
*/
//charAt返回指定索引(从0开始)的字符
//alert(string1.charAt(5));//输出空白 从0开始
//返回字符串中检索指定字符第一次出现的位置 找不到就返回-1
//alert(string1.indexOf("o"));
// 提取字符串中两个指定的索引号之间的字符 [startIndex,endIndex)
//alert(string1.substring(0,5)); 输出hello
// 从某个索引开始 指定长度的子字符串 [)
// alert(string1.substr(0,3));输出hel
/*索引从3开始 查找- 第一次出现的索引 结果为3*/
// var str1 = "你-最-衰-a";
// alert(str1.indexOf("-",3));
// 把字符串分割为子字符串数组
var str="hello_q_w".split("_");
alert(str[0]);
alert(str[1]);
alert(str[2]);
</script>
</body>
3.4数组
<body>
<script>
/*
在java中 String[] arr1=new String[3];
var arr1=new Array(3);
arr1[0]="qq";
arr1[1]="ww";
arr1[2]="ee";
*/
//两种写法
/*
java中 String arr1=new Stirng{"qq","ww","ee"};
var arr1=new Array("qq","ww","ee");
alert(arr1[0]);
alert(arr1[1]);
alert(arr1[2]);
*/
//json()数组 报文
var arr=["q","w","e"];
/*alert(arr[0]);
alert(arr[1]);
alert(arr[2]);
*/
alert(arr.length);
var str=arr.join("~");//输出q~w~e
alert(str);
</script>
</body>
3.5运算符号
<body>
<script>
//var num11=10;
//var num22=10;
//alert(num11==num22);//true
//alert(num11!=num22);//false
// 在字符串和数值进行比较时/计算 会自动将字符串转换为数值
var num1 = "10";
var num2 = 10;
// alert(num1 == num2); // true
// alert(num1-9);//输出1
// 凡是与字符串用+号拼接的 都变成了字符串
//alert(num1 + 9); // 109
// Java:equals()
var num1 = "10";
var num2 = "100";
alert(num1 == num2); // false*/
</script>
<body>
<script>
var num1="10";
var num2=10;
var num3="9";
//alert(num1==num2);//true 比较内容
alert(num1===num2);//false 全等:既比较内容 又比较数据类型
</script>
</body>
3.6逻辑控制语句
<html>
<head>
<meta charset="UTF-8">
<title>选择</title>
</head>
<body>
<script type="text/javascript">
//1有票 0无票
var hasTicket=1;
var lengthOfKnife=10;
if(lengthOfKnife<=9){
alert("进站");
//检票
if(hasTicket==1){
alert("可以乘车");
}else{
alert("无票 不允许坐车");
}
}else{
alert("没收");
}
</script>
</body>
</html>
<html>
<head>
<meta charset="UTF-8">
<title>循环</title>
</head>
<body>
<script>
/**
* js中 只有while 普通for
* while()
*
* do{
*
* }while();
*
*
* for(int i-0;i<9;i++){}
*
* for(数据类型 变量名:要遍历的数组){}
*/
var arr=["q","w","e"];
for(var i=0;i<arr.length;i++){
alert(arr[i]);
}
var i=0;//初始化循环变量
while(i<arr.length){
alert(arr[i]);
i++;
}
</script>
</body>
</html>
3.7输入输出
<body>
<script>
//prompt() p1:提示内容
var str=prompt("请输入姓名");
alert("您的姓名"+str);
//p1:提示内容 p2:文本框的默认值
var name=prompt("请输入你的颜色","red")
alert("你的颜色"+name)
</script>
</body>
<body>
<script>
/*
var num1=prompt("请输入第一个数"); // 它返回的结果数据 为string类型
var num2=prompt("请输入第二个数");
alert(num1+"+"+num2+"的结果为"+(num1+num2));
1 2 输出12
实现加法 下面来解决
*/
//parseInt字符串转为整数(1,2,3。。。)类型
/*
var num1=parseInt(prompt("请输入第一个数"));
var num2=parseInt(prompt("请输入第二个数"));
alert(num1+num2);
*/
//转为数值类型
var num1 = prompt("请输入第一个数:") - 0;
var num2 = prompt("请输入第二个数:") - 0;
alert(num1+num2);
</script>
</body>
parseFloat(num1)
3.8自定义函数
<body>
<script>
/*
* public void 方法名(){
*
* }
*
* public 返回值类型 方法名(){
*
* }
*
* public void 方法名(参数列表){
*
* }
*
* public 返回值类型 方法名(参数列表){
*
* }
*/
/*
* JS函数语法:
* function 方法名(参数列表){
* //
* [return ...]
* }
*/
/*无参无返
function method1(){
alert("呵呵")
}
method1();//调用
*/
/* //无参有返
function method2(){
return "蔡徐坤";
}
var name=method2();
alert(name)
*/
/* //有参无返
function method3(vall){
alert(vall);
}
method3("hehe");
*/
// 有参有返
function method4(val){
return val;
}
var v = method4("一刀999");
alert(v);
</script>
</body>
==获取input里面的值 ==
<body>
<!-- onblur 失去焦点事件 -->
<!--我希望当我失去焦点的时候 自动弹出内容-->
<input type="text" id="" value="" οnblur="method3(this.value)" />
<script>
function method3(vall){
alert(vall);
}
</script>
</body>
结果 你输入什么内容 就会弹出来什么内容