JavaScript 无轨列车指南
JavaScript 无轨列车指南
可爱的chino又出现了~ 这期是JS基础~
来了来了!
JavaScript 真假美猴王 :Java分身?
Java和JS到底谁跟谁啊?长这么像?连代码都这么像!有的人说,JS可以随便写?真的是真的吗?让我们来一窥究竟吧!
先拿点家伙放进 JavaScript …
又是劳累的一天,感觉没干什么,真的没干什么~
1. 内嵌在任何地方 ~
JavaScript的代码可以内嵌在<head><body><div>等任何地方~
<script type="text/javascript">
javaScript语句;
</script>
2. 引入外部 js文件 ~
src一定要写清楚是在js文件夹里的yaya.js文件~
<script src="js/yaya.js" type="text/javascript">
</script>
3. 内嵌 html 语句 ~
这个示例中是当点击button的时候弹出提示框!
<input type="text" name="button" type="button" value="ChinoLY" onclick="javascript:alert('Chino爱你~');" />
JavaScript 引擎启动了!
写入文本 / 用html语法写入文本~
document.write("Chino开始学习JavaScript");
document.write("<h1>Hello,Chino!</h1>");
使用 <a> 标签 用 alert() 加载两个信息~ a标签会先去处理事件,再去进行一个跳转的操作~
<a onclick="javascript:alert('Chino欢迎你~')" href="javascript:alert('非常爱你~')">点击我哟!</a>
注释很简单,和java里的一样哦~
单行注释:
//XXXXXXXX
多行注释:
/*
XXXXXXXX
*/
用 onload()显示函数内容~
<body onload = "函数名()";>
</body>
声明变量方法 ~
在js文件中统一声明变量~
在html写需要输出的内容~
去chrome里测试和调试结果~
JS 里的数据类型 ~
undefined
变量如果没有初始值,将被赋予值undefined
null
空值,与undefined同等
number
var data1 = 50; //整数 var data2 = 55.2; //浮点数
boolean
true 和 false
string
单引号/双引号,都可~ var string1 = “joya yaya muwa~”;
JS 语法三约定 ~
- 代码区分大小写
- 变量、对象和函数的名称
- 分号
typeof运算符 ~
typeof语法:
typeof(变量名)
typeof中的返回值
typeof用于检测变量的返回值~
undefined
, string
,boolean
,number
,object
(对象,数组和null)
测试:查看返回值~
声明不同数据类型的变量~
用typeof()查看返回值~
返回值输出成功!(*^▽^*)~
查看字符串字节数~
语法:
字符串对象.length
这个字符串有16个char~
JS 的 属性和方法 ~
主要格式:字符串对象.方法名()
charAt(index)
返回在指定位置的字符
indexOf(str, index)
查找某个指定的字符串在字符串中首次出现的位置
substring(index1, index2)
返回位于指定索引index1和index2之间的字符串,并且包括索引index1对应的字符,不包括索引index2对应的字符
split(str)
将字符串分割为字符串数组
用空格分割你。
JS 中的运算符~
一图在手,走遍天下都不怕~
给我看看你有几个“数组”对象?
看看吧!这个才是备胎的原型!
核心语法:
var array = new Array(5);
用数组来声明不同的水果~!
属性:
length
设置或返回数组中元素的数目
方法:
join()
把数组的所有元素放入一个字符串,通过一个的分隔符进行分隔
sort()
对数组排序
push()
向数组末尾添加一个或更多元素,并返回新的长度
使用数组的方法来生成数组信息~
JS 中的判断 & 循环~
if 语句 ~
通过if判断弹窗提示~
switch 语句 ~
用switch选择一对一判断进行弹窗~
for + while 语句 ~
用for循环10个吼吼吼~
使用for循环指定长度的数组~
使用while循环5个水果数组~
break + continue 用法 ~
break用法:当序列等于3的时候就跳出循环~
continue用法:当序列等于3的时候,跳过它输出了~
for-in 语句 ~
这个,灰常灰常的好用~ 是Java里面没有的方法~
prompt 真的很好玩 ~
以弹出窗口的方式,填写信息~并用alert输出信息~
提示输入信息~
显示默认信息~
让用户输入信息~
开始显示刚才输入的信息~
显示刚才的默认值~
显示用户输入的信息~
快来修理!JS 程序调试步骤
用Chrome浏览器进行JS的程序调试~ 在控制台能够显示出具体哪里出的问题~ 等于说Java里面的console~
点击小花 (工具按钮)设置程序调试的显示窗口~
在控制台中,我们可以声明变量进行测试,观察值的变化~
网络 Network 里面的信息,可以看到每一步激活了哪些文件~ 以及显示请求的一些信息~
通过设置断点,可以看到每一步的输出情况~右上角有四个重要的按钮,显示的是调试的具体步骤~
通过监视 Watch 功能,可以查找某个具体的值到了那一步的具体的值~ 需要右键添加到监视框内~
调试小神器~
console.log(变量信息);
在真实开发中alert会被排除掉~
alert(变量信息);
JS 中的系统函数
parseInt("字符串")
将字符串转换为整型数字
parseFloat("字符串")
将字符串转换为浮点型数字
isNaN()
用于检查其参数是否是非数字
简易使用系统函数~
打个飞机过来!函数大军
调用函数 - 基本语法:
一般和表单元素一起使用!
事件名 = "函数名()";
定义函数 - 基本语法
:
function 函数名(参数1,参数2,参数3...){
JS语句
【return 返回值】
}
使用自定义的无参函数~
函数名();
自定义无参函数 ~
html里面制作一个按钮,通过按钮来触发自定义函数的事件~
触发按钮:快到我怀里来~
触发后跳转并输出~
自定义有参函数 ~
定义有参函数,通过用户输入次数来控制屏幕的输出~
我输入一个 8 次~
呵呵 😄
是“事件”哟!
这期的尾声~
没什么可说的了,封了两个多月,明天终于可以出窝了!课堂上见啵~🤭