一、javaScript介绍
Java Script(脚本) -> LiveScript -> 蹭热度 -> JavaScript Sun公司 -> Oracle公司 Java 它俩的关系就像 雷锋和雷峰塔 JavaScript是一门基于对象和事件驱动的[脚本语言](面向对象<原型prototype>的编程语言)。 脚本语言:无需编译 php python… 边解释边执行 可以给HTML添加交互行为
二、js的引入方式
<!DOCTYPE html>
<html>
<head>
<meta charset="UTF-8">
<title></title>
</head>
<body>
<!--
CSS:
1.行内样式表 style="width:xxpx;..."
2.内部样式表 <style></style>
3.外部样式表 .css文件 <link>引入到HTML中
JS:
1.内部脚本 <script></script>
2.外部脚本 .js文件 <script src=""></script>
3.行内脚本 它需要借助事件
事件:交互行为 例如:鼠标悬浮事件、鼠标移除事件、键盘按下事件
键盘松开事件、页面加载事件、鼠标单击事件、鼠标双击事件...
-->
<!-- alert() 可以在浏览器窗口弹出提示框 -->
<!--<input type="button" value="点我啊!!!" "javascript:alert('就点你!!');" />-->
<!--<input type="button" value="点我啊!!!" "alert('就点你!!')" />-->
<input type="button" value="清除缓存" "alert('清除成功!请放心使用!')" />
<script src="js/index.js" type="text/javascript" charset="utf-8"></script>
</body>
</html>
------------------------------------------------------------------------------------
另一个文件中的js文件中的一个文件,通过引入的方式来进行去另一个html 中进行引用
document.write("我是外部JS文件");
三、js核心的语法
1.变量
<!DOCTYPE html>
<html>
<head>
<meta charset="UTF-8">
<title></title>
</head>
<body>
<script type="text/javascript">
/*
* Java:
* 1.先声明再赋值
* 数据类型 变量名;
* 变量名 = 变量值;
* 2.声明并赋值
* 数据类型 变量名 = 变量值;
*/
// JS 先声明 再 赋值
var name;
name = "小韩";
// JS 声明并赋值
var age = 10;
// 不声明直接赋值(不推荐)
// gender = "男"
document.write("<strong>姓名:</strong>"+name
+"<br/><strong>年龄:</strong>"+age
+"<br/><strong>性别:</strong>"+gender);
</script>
</body>
</html>
-----------------------------------------------------------------------------------
2.数据类型
<!DOCTYPE html>
<html>
<head>
<meta charset="UTF-8">
<title></title>
</head>
<body>
<script type="text/javascript">
/*
* Java数据类型:
* 数值:byte short int long float double
* 非数值:char boolean String
*
* 基本数据类型:byte short int long float double char boolean
* 引用数据类型:数组、类(String)、接口、枚举...
*/
/* JS的数据类型:
undefined:未定义 只声明却未赋值就是undefined
null:做判断时 和 undefined是相等的
number:数值类型 整数 小数
boolean:布尔类型 true false
string:字符串类型 包含着'' ""
object:对象类型
*/
var classId;
// alert(typeof classId); // undefined
// alert(typeof null); 历史遗留问题 导致 返回object类型
// alert(typeof 10.1); //number
// alert(typeof 20) // number
// alert(typeof false); // Python:True False
// alert(typeof 'xxx'); string
// alert(typeof "xxx"); string
// 面向原型的面向对象
var array = new Array();
var str = new String();
alert(typeof array);
</script>
</body>
</html>
----------------------------------------------------------------------------------
3.字符串常用操作
<!DOCTYPE html>
<html>
<head>
<meta charset="UTF-8">
<title></title>
</head>
<body>
<script type="text/javascript">
var str1 = "Hello World";
// length属性 获取字符串长度
// Java:length();
// alert(str1.length);
// 返回指定索引位置的字符 索引从0开始
// alert(str1.charAt(4));
// 返回字符串中检索指定字符第一次出现的位置
// alert(str1.indexOf("o"));
// 提取字符串中两个指定的索引号之间的字符 [startIndex,endIndex)
// alert(str1.substring(0,5));
// 从某个索引开始 指定长度的子字符串
// alert(str1.substr(0,2));
// 把字符串分割为子字符串数组
var arr = "hello_world_你好_世界".split("_");
alert(arr[0]);
alert(arr[1]);
alert(arr[2]);
alert(arr[3]);
</script>
</body>
</html>
-----------------------------------------------------------------------------
4.数组
<!DOCTYPE html>
<html>
<head>
<meta charset="UTF-8">
<title></title>
</head>
<body>
<script type="text/javascript">
// 数组的定义
/*var arr1 = new Array(3);
arr1[0] = "视觉";
arr1[1] = "中国";
arr1[2] = "版权";*/
/*var arr1 = new Array("视觉","中国","版权");
alert(arr1[0]);
alert(arr1[1]);
alert(arr1[2]);*/
// JSON(报文)数组
var arr = ["视觉","中国","版权"];
/*alert(arr[0]);
alert(arr[1]);
alert(arr[2]);*/
alert(arr.length);
var str = arr.join("~");
alert(str);
</script>
</body>
</html>
--------------------------------------------------------------------------------
5.运算符号
<!DOCTYPE html>
<html>
<head>
<meta charset="UTF-8">
<title></title>
</head>
<body>
<script type="text/javascript">
// == !=
/*var num1 = 10;
var num2 = 10;
alert(num1 != num2);*/ // 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>
</html>
-----------------------------------------------------------------------------
5运算符号2
<!DOCTYPE html>
<html>
<head>
<meta charset="UTF-8">
<title></title>
</head>
<body>
<script type="text/javascript">
var num1 = "10";
var num2 = 10;
var num3 = "9";
// alert(num1 == num2); // 比较内容
// alert(num1 === num2); // 全等:既比较内容 又比较数据类型
alert(num1 === num3);
</script>
</body>
</html>
----------------------------------------------------------------------------
6.选择结构
<!DOCTYPE html>
<html>
<head>
<meta charset="UTF-8">
<title></title>
</head>
<body>
<script type="text/javascript">
/*
*
* Java:
* 基础if:
* if(){
*
* }
* 互斥if:
* if(){
*
* }else{
*
* }
* 多重if:
* if(){
*
* }else if(){
*
* }else{
*
* }
* 嵌套if:
* if(){
* if(){
*
* }
* }
*
* switch(){
* case 常量1:
* break;
* ....
* default:
* break;
*
* }
*
*
*/
// 进火车站
var hasTicket = 1; // 0表示无票 1表示有票
var lengthOfKnife = 8; // 刀子长度
// 1.安检:刀子长度不能大于9cm
if(lengthOfKnife <= 9){
alert("通过安检!进站!");
// 2.检票:有票才能乘车
if(hasTicket == 1){
alert("可以乘车!");
}else{
alert("无票不允许乘车!");
}
}else{
alert("没收管制刀具,登记备案!");
}
</script>
</body>
</html>
--------------------------------------------------------------------
7.循环结构
<!DOCTYPE html>
<html>
<head>
<meta charset="UTF-8">
<title></title>
</head>
<body>
<script type="text/javascript">
/*
* Java:
* while(){
*
* }
*
* do{
*
* }while();
*
* for(int i = 0; i< xxx; i++){
*
* }
*
* for(数据类型 变量名 : 要遍历的数组/集合){
*
* }
*
*/
// JS 普通for循环
var arr = ["小1","小2","小3"];
/*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>
---------------------------------------------------------------------
8.输入和输出
<!DOCTYPE html>
<html>
<head>
<meta charset="UTF-8">
<title></title>
</head>
<body>
<script type="text/javascript">
// prompt() 可以弹出带有一个文本输入框的提示信息
// p1:提示内容
/*var name = prompt("请输入您的姓名:");*/
// p2:文本框的默认值
var name = prompt("请输入您的姓名:","xx");
alert("您输入的姓名:"+name);
</script>
</body>
</html>
-------------------------------------------------------------------------
8.2输入和输出
<!DOCTYPE html>
<html>
<head>
<meta charset="UTF-8">
<title></title>
</head>
<body>
<script type="text/javascript">
// 四则运算
// +法
// -法
// 提示输入第一个整数 和 第二个整数 实现加法运算
// 将字符串转换为整数 parseInt()
/*var num1 = parseInt(prompt("请输入第一个整数:")); // 它返回的结果数据 为string类型
var num2 = parseInt(prompt("请输入第二个整数:"));
alert(num1+" + "+num2+"的结果为:"+(num1+num2));*/
var num1 = prompt("请输入第一个数:") - 0;
var num2 = prompt("请输入第二个数:") - 0;
alert(num1+num2);
</script>
</body>
</html>
----------------------------------------------------------------------------
9.自定义函数和方法
<!DOCTYPE html>
<html>
<head>
<meta charset="UTF-8">
<title></title>
</head>
<body>
<!-- onblur 失去焦点事件 -->
<!--<input type="text" id="" value="" "method3(this.value)" />-->
<!--<input type="button" name="" id="" value="点我" "method1()" />-->
<script type="text/javascript">
/*
* public void 方法名(){
*
* }
*
* public 返回值类型 方法名(){
*
* }
*
* public void 方法名(参数列表){
*
* }
*
* public 返回值类型 方法名(参数列表){
*
* }
*/
/*
* JS函数语法:
* function 方法名(参数列表){
* //
* [return ...]
* }
*/
// 无参无返
/*function method1(){
alert("呵呵");
}*/
// method1(); // 调用
// 无参有返
/*function method2(){
alert("呵呵");
return "蔡徐坤";
}
var name = method2();
alert(name);*/
// 有参无返
/*function method3(var num1,var num2){
}*/
/*function method3(val){
alert(val);
}*/
// method3("呵呵 纪检委来了!");
// 有参有返
function method4(val){
return val;
}
var v = method4("一刀999");
alert(v);
/*
* python: def:define function
* def 方法名(参数列表):
* # 方法体
*/
</script>
</body>
</html>