一、Hello JavaScript
1、输出文档
<script>
document.write("Hello Javascript");
</script>
2、JavaScript和DOM结合
οnclick="..." 表示点击button之后做的事情
document.getElementById 根据id获取指定的元素
.style.display='none' 隐藏
.style.display='block' 显示(准确的讲，以block的形式显示)
onclick，getElementById，style.display 这些内容，是HTML DOM 应该到才会用到的知识和概念
3、语言基础、BOM和DOM
只有通过javascript操作DOM对象的时候，才会带来很好的实用效果
二、script标签
javascript代码必须放在script标签中
script标签可以放在html的任何地方，一般建议放在head标签里
1、标签
从上到下顺序执行
<html>
<head>
<script>
document.write("这是 javascript");
</script>
</head>
</html>
2、使用外部js文件，html文件中包含
<html>
<script src="https://how2j.cn/study/hello.js"></script>
</html>
三、注释
1、单行注释 //
2、多行注释 /*多行注释*/
四、变量
声明变量
<script>
var x = 10;
document.write("变量x的值:"+x);
</script>
五、调试办法
1、alert(1)；
2、console.log()
<script>
x = 10;
console.log("x="+x);
document.write("没有用var声明的变量x的值:"+x);
console.log("end");
</script>
六、变量类型
1、申明但未赋值 undefined
<script>
var x; //声明了变量x,但是没有赋值
document.write('声明了，但是没有赋值的变量 x: '+x);
</script>
2、布尔
<script>
var x=true;
var y=false;
document.write("布尔值:"+x);
document.write("<br>");
document.write("布尔值:"+y);
</script>
3、数字
<script>
var a=10; //十进制
var b=012;//第一位是0，表示八进制
var c=0xA;//0x开头表示十六进制
var d=3.14;//有小数点表示浮点数
var e=3.14e2;//使用e的幂表示科学计数法
document.write("十进制 10 的值: "+a);
document.write("<br>");
document.write("八进制 012 的值: "+b);
document.write("<br>");
document.write("十六进制 0xA 的值: "+c);
document.write("<br>");
document.write("浮点数 3.14 的值: "+d);
document.write("<br>");
document.write("科学记数法 3.14e2 的值: "+e);
document.write("<br>");
</script>
4、字符串
javascript中没有字符的概念，只有字符串，所以单引号和双引号，都用来表示字符串
<script>
var x='hello '; //单引号
var y="javascript"; //双引号
document.write("单引号的字符串:"+x);
document.write("<br>");
document.write("双引号的字符串:"+y);
</script>
5、动态类型
<script>
var x=10; //Number类型
document.write("此时 x的值是 "+x+" 类型是数字");
document.write("<br>");
x = "hello javascript"; //String类型
document.write("此时 x的值是 "+x+" 类型是字符串");
</script>
6、变量判断
<script>
var x;
document.write('声明了但是未赋值的时候，类型是： '+typeof x);
document.write("<br>");
x=5;
document.write('赋值为5之后，类型是： '+typeof x);
document.write("<br>");
x=5.1;
document.write('赋值为5.1之后，类型是： '+typeof x);
document.write("<br>");
x=true;
document.write('赋值为true之后，类型是： '+typeof x);
document.write("<br>");
x="hello";
document.write('赋值为hello之后，类型是： '+typeof x);
</script>
七、类型转换
1、伪对象概念：基本类型，也是伪对象，所以他们都有属性和方法。
<script>
var a="hello javascript";
document.write("变量a的类型是:"+(typeof a));
document.write("<br>");
document.write("变量a的长度是:"+a.length);
</script>
2、转换为字符串
<script>
var a=10;
document.write("数字 "+a+" 转换为字符串"+a.toString());
document.write("<br>");
var b=true;
document.write("布尔 "+b+" 转换为字符串"+b.toString());
document.write("<br>");
var c="hello javascript";
document.write("字符串 "+c+" 转换为字符串 "+c.toString());
document.write("<br>");
</script>
3、数字转字符串
<script>
var a=10;
document.write('默认模式下，数字10转换为十进制的'+a.toString()); //默认模式，即十进制
document.write("<br>");
document.write('基模式下，数字10转换为二进制的'+a.toString(2)); //基模式，二进制
document.write("<br>");
document.write('基模式下，数字10转换为八进制的'+a.toString(8)); //基模式，八进制
document.write("<br>");
document.write('基模式下，数字10转换为十六进制的'+a.toString(16)); //基模式，十六进制
document.write("<br>");
</script>
4、转为数字
javascript分别提供内置函数 parseInt()和parseFloat()，转换为数字
<script>
document.write("字符串的\"10\"转换为数字的:"+parseInt("10")); //转换整数
document.write("<br>");
document.write("字符串的\"3.14\"转换为数字的:"+parseFloat("3.14"));//转换浮点数
document.write("<br>");
document.write("字符串的\"10abc\"转换为数字的:"+parseInt("10abc")); //判断每一位，直到发现不是数字的那一位
document.write("<br>");
document.write("字符串的\"hello javascript\"转换为数字的:"+parseInt("hello javascript")); //如果完全不包含数字，则返回NaN - Not a Number
document.write("<br>");
</script>
5、转换为boolean
使用内置函数Boolean() 转换为Boolean值
当转换字符串时：非空即为true
当转换数字时：非0即为true
当转换对象时：非null即为true
6、Number()和parseInt()区别
当转换的内容包含非数字的时候，Number() 会返回NaN(Not a Number)
parseInt() 要看情况，如果以数字开头，就会返回开头的合法数字部分，如果以非数字开头，则返回NaN
7、String()和toString()区别
对null处理不同
String()会返回字符串"null"
toString() 就会报错，无法执行
8、函数
<script>
function print(){
document.write("这一句话是由一个自定义函数打印");
}
print();
</script> //调用
9、返回值的函数
<script>
function print(message){
document.write(message);
}
function calc(x,y){
return x+y;
}
var sum = calc(500,20);
print(sum);
</script>
八、阶段练习
1、计算器
<head>
<meta http-equiv="Content-Type" content="text/html; charset=GB2312">
<script>
function get(){
var num1=document.getElementById("num1").value;
var num2=document.getElementById("num2").value;
var result = parseFloat(num1)+parseFloat(num2);
document.getElementById("result").value=result;
}
</script>
<style>
input{
width:50px;
}
button{
width:50px;
}
</style>
<input type="text" id="num1"> + <input type="text" id="num2"> = <input type="text" id = "result">
<input type = "button" id="get" onclick="get()" value="计算"/>
</head>
2、获取输入框内容打印
<html>
<head>
<style>
body{
font-family: 宋体;
}
span{
display:inline-block;
border: 1px solid lightgray;
width:120px;
margin-bottom:5px;
}
button#generate{
width:80px;
height:30px;
}
textarea{
width:100%;
height:150px;
margin-top:50px;
}
</style>
</head>
<script>
function generate(){
var city = $("location")
var result = city+"最大互联网公司阿里九九倒闭了";
document.getElementById("result").value=result;
}
function $(id){
var value = document.getElementById(id).value;
return value;
}
</script>
<body>
<span>地名:</span> <input type="text" id ="location" value="浙江">
<br>
<div align="center">
<button id="generate" onclick="generate()">生成</button>
<br>
<textarea id="result">浙江最大互联网公司阿里九九倒闭了</textarea>
</div>
<br>
</body>
</html>
九、作用域
全局：
<script>
var a = 0; //定义在函数前面，即全局变量，所有函数都可以访问
function f1(){
document.write('通过函数f1 设置全局变量a的值 为 5');
a = 5; //能够访问
}
function f2(){
document.write('通过函数f2 访问并打印全局变量a的值 '+a); //能够访问
}
f1(); //通过f1，设置a的值
document.write('<br>');
f2(); //通过f2, 打印a的值
</script>
十、事件
1、鼠标点击事件
<html>
<script>
function get(){
alert("点击事件");
}
</script>
<body>
<button type="button" onclick="get()"></button>
</body>
</html>
十一、运算符、逻辑运算
1、当两边都是数字的时候 ，表现为算数运算符
<script>
document.write('当+两边都是数字的时候，+就是加法运算符，所以1+2='+(1+2));
document.write("<br>");
document.write('当+任意一边是字符串的时候，+就是字符串连接符，所以1+\"2\"='+ (1+"2"));
</script>
2、绝对等===
<script>
function p(s){
document.write(s);
document.write("<br>");
}
p("1=='1': "+(1=='1'));//1=='1': true
p("1==='1': "+(1==='1'));//1==='1': false 绝对等，类型判断
</script>
3、三目运算符
如果第一个返回true,就返回第二个操作符，否则就返回第三个操作符。
<script>
var age = 15;
var movie = age<18?"卡通":"你懂的";
document.write('使用?: 三相运算法进行判断。 <br>');
document.write('age<18?"卡通":"你懂的" <br>表示当年纪小于18的时候，就看卡通，否则就看 你懂得<br>');
document.write('而age变量的值是15，所以返回 '+movie);
</script>
十二、条件语句
1、多条件判断
<script>
var age = 20;
if(age<18){
document.write("小于18就看 卡通");
}
else if(age<22){
document.write("大于等于18，并且小于22，就看 你懂的");
}
else{
document.write("大于等于22就看 新闻联播");
}
</script>
2、switch
<script>
var day=new Date().getDay(); //通过日期对象获取数字形式的星期几
var today;
switch (day)
{
case 0:
today="星期天";
break;
case 1:
today="星期一";
break;
case 2:
today="星期二";
break;
}
document.write("今天是 ： "+today);
</script>
十三、循环语句
1、for循环
<script>
function p(s){
document.write(s);
document.write("<br>");
}
document.write("使用for循环打印 0 到 4<br>");
for(var i=0;i<5;i++){
p(i);
}
</script>
2、while循环
<script>
document.write("使用while循环打印 0 到 4<br>");
function p(s){
document.write(s);
document.write("<br>");
}
var i = 0;
while(i<5){
p(i);
i++;
}
</script>3、do-while
<script>
function p(s){
document.write(s);
document.write("<br>");
}
document.write("使用do-while循环打印 0 到 4<br>");
var i = 0;
do{
p(i);
i++;
} while(i<5);
</script>
十四、错误处理
try-catch
<script>
function f1(){
//函数f1是存在的
}
try{
document.write("试图调用不存在的函数f2()<br>");
f2(); //调用不存在的函数f2();
}
catch(err){
document.write("捕捉到错误产生:");
document.write(err.message);
}
document.write("<p>因为错误被捕捉了，所以后续的代码能够继续执行</p>");
</script>
扫一扫
264
被折叠的 条评论
为什么被折叠?
到【灌水乐园】发言
