前端开发 - JavaScript - 上
1.js引入
<!DOCTYPE html>
<html lang="cn">
<head>
<meta charset="UTF-8">
<title>js引入</title>
<style type="text/css">
.span1{ color: red;}
</style> <!--外链式-->
<!--<script src="./1.js"></script>--> </head>
<body>
<!-- dom == document object model 有属性 有方法 行内式引入 -->
<p class="" id="" onclick="clickhandler()">123</p>
<span>234</span>
</body> <!-- 内部式 引入 建议引入时候在body之后，因为要等待所有dom元素标签加载完成后再去执行相应得js操作-->
<script type="text/javascript"> // window.document.write()
// document.write('有一首歌叫123')
document.write('<span class="span1">233</span>'); // windows.console.log()
console.log('我很好');
console.error('错误ss'); console.dir(window);
console.clear(); var a = prompt('输入姓名');
console.log(a); function clickhandler(){
// 弹出警告框
/*
这是一个方式
一个很好得方法
*/
window.alert(1);
alert(1)
}
</script> </html> <!--
总结：
引入js 三种方式； 行内式 内部式 外链式
做项目时：css js 一般使用外链式引入； javascript得输出方式：
1.document.write('有一首歌叫123')
document.write('<span class="span1">233</span>');
window.document.write()
2.console.log('我很好');
console.error('错误');
console.clear();
windows.console.log()
3.alert(1);
window.alert(1);
4.innerHTML/innerText
...
5.var a = prompt('输入姓名');
console.log(a);
-->
2.变量的声明和定义
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<title>变量得声明和定义</title>
</head>
<body> </body> <script type="text/javascript">
// 变量得声明
//js 中代码得执行顺序 自上往下 //1.先声明在定义
var dog;
// alert(dog); //undefined 未定义 dog='小黄';
// alert(dog)
// alert(dog)
// alert(dog) //2.声明立刻定义
var dog2='小红';
// alert(dog2); var $='aa';
alert($); //建议使用驼峰标识 来命名
var myHousePrice = '$1234'; /*
变量命名规范：
1.严格区分大小写
2.命名时名称可以出现字母、数字、下划线、$ ,但是不能数字开头，也不能纯数字，不能包含关键字和保留字。
关键字：var number等
除了关键字 top name 也尽量不使用。
3.推荐驼峰命名法：有多个有意义的单词组成名称的时候，第一个单词的首字母小写，其余的单词首字母大写
4.匈牙利命名：就是根据数据类型单词的的首字符作为前缀
*/ </script> </html>
3.五种基本数据类型
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<title>基本数据类型</title>
</head>
<body> <script type="text/javascript">
/*
js中有两种数据类型
1.基本数据类型
number string boolean null undefined
2.引用数据类型
对象
Array object 正则
函数
*/ //1.number 数字类型
var a = 123;
console.log(a);
console.log(typeof a); //2.string 字符串类型
var str = '123';
console.log(str);
console.log(typeof str); //3.boolean 布尔类型
var b1 = false; //true/false
console.log(b1);
console.log(typeof b1); //4.null
var c1 = null; //空对象
console.log(c1);
console.log(typeof c1); //5.undefined
var d1;
console.log(d1);
console.log(typeof d1); //特殊：分母为0；
// Infinity
// number
var e1 = 5/0;
console.log(e1);
console.log(typeof e1); </script>
</body>
</html>
4.运算符
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<title>运算符</title>
</head>
<body> <script type="text/javascript"> //1.赋值运算符
// var money = prompt('请输入金额...');
// var saveMoney = money * (1+0.02);
// console.log(saveMoney); //2.算数运算
var a = 10;
var b = 3;
var sum = a + b;
var min = a - b;
var t1 = a * b;
var t2 = a / b;
var t3 = a % b; // 余数 console.log(sum,min,t1,t2,t3); // 13 7 30 3.3333333333333335 1 //3.复合运算符
var c = 7, d = 8;
// d = c + d;
d += c;
console.log(c,d); // 7 15 // 自增 自减
var e1 = d++; //先赋值后+++
var e2 = ++d; //先++后赋值
console.log(e1,e2); var f1 = d--;
var f2 = --d;
console.log(f1,f2); //4.比较运算符 > < >= <= == === !=
console.log(5>6); //false
console.log(4==4); //true
console.log(4==5); //false
// 隐式转换 浏览器会将数值转成字符串； === 类型和值都比较
console.log('5'==5); // true
console.log('5'===5); // false console.log(4!=3) // true //5.逻辑运算符 &&（and） ||(or)
console.log('xxx:',false && false)
// console.log(true && true)
console.log(true || false) // true </script>
</body>
</html>
5.字符串处理
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<title>字符串处理</title>
</head>
<body>
<script type="text/javascript"> //字符串运算
var firstName = 'alice';
var lastNmae = 'B'; var fullName = firstName + " " + lastNmae;
console.log(fullName); // 字符串拼接 //字符串拼接
var str1 = '飞行员';
var str2 = '航空公司';
var str = '该法院受理的'+str1+'离职纠纷案件中，'+str2+'要求离职飞行';
console.log(str); // 对字符串 + 是拼接 其他得运算可以 - * /
var a1='1';
var a2='2';
console.log(a1+a2); // 12 拼接 不是数值
console.log(typeof(a1+a2)); // string
console.log(parseInt(a1)+parseInt(a2)); // 3 console.log(a1*a2); // 2
console.log(typeof (a1*a2)); //number var b1 = 'one';
var b2 = 'two';
console.log(b1*b2); // NaN == not a number
console.log(typeof (b1*b2)) // number </script>
</body>
</html>
6.数据类型转换
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<title>数据类型转换</title>
</head>
<body>
<script type="text/javascript">
//1.将数字类型转换成字符串类型 隐式转换 String() num.toString()
var n1 = 123;
var n2 = '123';
var n3 = n1+n2;
// 123 隐式转换 将数字转换成 string 进行拼接
console.log(n3); // 123123
console.log(typeof n3) // string //强制类型转换 String() toString()
console.log(':',typeof n1)
var str1 = String(n1)
console.log(str1);
console.log(typeof str1) var num = 234;
console.log(num.toString()) //2.将 字符串 类型转换成 数字 类型 Number() parseInt() parseFloat()
var stringNum = '789.123as';
var num2 = Number(stringNum);
console.log(num2)
console.log(typeof num2); // parseInt() 解析一个字符串 并且返回一个整数
console.log(parseInt(stringNum));
console.log(typeof parseInt(stringNum)); console.log(parseFloat(stringNum))
console.log(typeof parseFloat(stringNum)) //number // 在js中所有得数据类型 都会被转换为boolean类型
// 0 NaN null undefined 为false 其他得为true
var b1 = '123';
var b2 = -123;
var b3 = Infinity; //无穷大 var b4 = 0;
var b5 = NaN;
var b6; //undefined
var b7 = null; console.log(':',Boolean(b1)) //true
console.log(Boolean(b2)) // true
console.log(Boolean(b3)) // true
console.log(Boolean(b4)) // false
console.log(Boolean(b5)) // false
console.log(Boolean(b6)) // false
console.log(Boolean(b7)) // false </script>
</body>
</html>
7.if
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<title>if</title>
</head>
<body>
<script type="text/javascript"> //if 语句
var ji = 10;
if(ji>=20){
console.log('大吉大利')
}else{
console.log('下次努力')
} if(true){ }else if(true){ }else if(true){ }else{ } // alert(222)
// 浏览器解析代码得顺序 是 从上往下 执行 // 考试系统录入
var math = 90;
var english = 85;
var sum = 485; //1.模拟 总分 > 400 并且(&&两个条件都成立才成立)数学 > 89 被清华录入
if(sum>400 && math>90){
console.log('录入成功')
}else{
alert('高考失利')
} //2.模拟 总分>400或者（|| 只要有一个成立就成立）英语>85 就被复旦录入
if(sum>500 || english>85){
alert('录入')
}else{
alert('失利')
} if(sum>500 || (math+english)>170){
alert(22)
} </script>
</body>
</html>
8.switch
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<title>switch</title>
</head>
<body>
<script type="text/javascript"> //switch
var gameScore = 'good'; // case 表示一个条件 满足条件走进去 遇到break 跳出
switch(gameScore){
case 'good':
console.log('good 玩得很好');
break; // 一定要加 break 否则会打印 better 下得内容
case 'better':
console.log('better 很好');
break;
case 'best':
console.log('best');
break;
default:
console.log('很遗憾');
// break; // 不需要些 走到最后了
}
// alert(11) </script>
</body>
</html>
9.while
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<title>while</title>
</head>
<body>
<script type="text/javascript"> // while 循环
//1.初始化循环变量 2.判断循环条件 3.更新循环变量
var i = 1;
while(i<=9){
// console.log(i);
i+=1;
} //练习
// 1-100 之间 是3得倍数 输出出来
var j = 1;
while(j<=100){
if(j%3===0){
console.log(j)
}
j++;
} </script>
</body>
</html>
10.do while
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<title>do_while</title>
</head>
<body>
<script type="text/javascript"> // do while
//1.初始化循环变量 2.判断循环条件 3.更新循环变量
// 不管有没有满足while，do里面得代码都会执行一次
var i = 3;
do{
console.log(i);
i++;
}while(i<5); </script>
</body>
</html>
11.for
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<title>for</title>
</head>
<body>
<script type="text/javascript"> //for 循环
//1.初始化 2.循环条件 3.更新循环变量
// for(var i = 1; i < 10; i++){
// console.log(i);
// } //1-100 偶数
// for(var i=1;i<=100;i++){
// if(i%2===0){
// //偶数
// console.log(i)
// }
// } //1.练习
//1-100之间所有数得和
// var sum = 0;
// for(var i=1;i<=100;i++){
// sum += i;
// }
// console.log(sum) //2.练习
/*
******
******
******
*/
// 双重for 循环
// for(var i=1;i<=3;i++){ // 行
// for(var j=1;j<=6;j++){ //列
// document.write('*')
// }
// document.write('<br>')
// } //作业： 在浏览器中输出直角三角形 6行 等边三角形 使用python 和js 语言输出
/* *
* *
* * *
* * * *
* * * * *
* * * * * * */ for(var i=1;i<=6;i++){
for(var j=1;j<=i;j++){
document.write('*')
}
document.write('<br>')
}
document.write('<br><br>'); /*
* 2*1-1
*** 2*2-1
***** 2*3-1
******* 2*4-1
********* 2*5-1
*********** 2*6-1 */
/*
* 2*1-1
*** 2*2-1
***** 2*3-1
******* 2*4-1
********* 2*5-1
*********** 2*6-1
*********
*******
*****
***
*
*/ //等边三角形
for(var m=1;m<=6;m++){
for(var n1=m;n1<6;n1++){
document.write(' ')
}
for(var n2=1;n2<=2*m-1;n2++){
document.write('*')
}
document.write('<br>')
} document.write('<br>'); //菱形
for(var a=1;a<=11;a++){
if(a<=6) {
for (var a1 = a; a1 < 6; a1++) {
document.write(' ')
}
}else{
for(var a2=7;a2<=a; a2++){
document.write(' ')
}
}
if(a<=6){
for(var a3=1;a3<=2*a-1;a3++){
document.write('*')
}
}else{
for(var a4=a*2-1;a4<22;a4++){
document.write('*')
}
} document.write('<br>')
} </script>
</body>
</html>
前端开发 - JavaScript - 上的更多相关文章
- 第十一章 前端开发-JavaScript
第十一章 前端开发-JavaScript 11.3.1 js引入方式 行内样式 <p id="" class="" style="" ...
- 1+x 证书 Web 前端开发 JavaScript 专项练习
官方QQ群 1+x 证书 Web 前端开发 JavaScript 专项练习 http://blog.zh66.club/index.php/archives/198/
- 前端开发 JavaScript 干货知识点汇总
很多初学的朋友经常问我,前端JavaScript都需要学习哪些东西呀?哪些是JavaScript的重点知识啊? 其实做前端开发工程师,所有的知识点都是我们学习必备的东西,只有扎实的技术基础才是高薪的关 ...
- 前端开发 JavaScript 规范文档
一,规范目的 为提高团队协作效率,便于前端后期优化维护,输出高质量的文档. 二.基本准则 符合web标准,结构表现行为分离,兼容性优良.页面性能方面,代码要求简洁明了有序, 尽可能的减小服务器负载,保 ...
- 前端开发 - JavaScript - 总结
一.JavaScript的特征 javaScript是一种web前端的描述语言,也是一种基于对象(object)和事件驱动(Event Driven)的.安全性好的脚本语言.它运行在客户端从而减轻服务 ...
- 前端开发JavaScript入门——JavaScript介绍&基本数据类型
JavaScript 诞生于1995年,它的出现主要是用于处理网页中的 前端验证. • 所谓的前端验证,就是指检查用户输入的内容是否符合一定的 规则. • 比如:用户名的长度,密码的长度,邮箱的格式等 ...
- 15款不容错过的前端开发Javascript和css类库 - 2017版本~
前端的JS和CSS类库日新月异, 在今天这篇介绍中,我们将精挑细选15款超棒的JS/CSS类库, 希望大家在开发过程中会觉得有帮助~ Core UI 基于Bootstrap4的一套UI类库, Core ...
- 前端开发 - JQuery - 上
一.js的缺点 <!DOCTYPE html> <html lang="en"> <head> <meta charset="U ...
- Web前端开发JavaScript基础
JavaScript 一种直译式脚本语言,是一种动态类型.弱类型.基于原型的语言,内置支持类型,它的解释器被称为JavaScript引擎,是浏览器的一部分,并且是被广泛用于客户端的脚本语言,JavaS ...
随机推荐
- 自定义控件VS用户控件
自定义控件VS用户控件 2015-06-16 1 自定义控件与用户控件区别 WinForm中, 用户控件(User Control):继承自 UserControl,主要用于开发 Container ...
- lucene4.7学习总结 (zhuan)
http://blog.csdn.NET/mdcmy/article/details/38167955?utm_source=tuicool&utm_medium=referral ***** ...
- 一款纯css3实现的tab选项卡
今天给大家带来一款纯css3实现的tab选项卡.单击左侧的选项的时候,右侧内容以动画的形式展示.效果图如下: 在线预览 源码下载 实现的代码. html代码: <div class=&quo ...
- 最新PHPcms9.6.0 任意文件上传漏洞
在用户注册处抓包: 然后发送到repeater POC: siteid=&modelid=&username=z1aaaac121&password=aasaewee311as ...
- 去除inline-block元素间间距的N种方法<转>
一.现象描述 真正意义上的inline-block水平呈现的元素间,换行显示或空格分隔的情况下会有间距,很简单的个例子: <input /> <input type="su ...
- hdu 2717:Catch That Cow（bfs广搜，经典题，一维数组搜索）
Catch That Cow Time Limit: 5000/2000 MS (Java/Others) Memory Limit: 32768/32768 K (Java/Others)To ...
- 一老掉牙的故事、是一个阿Q还是另一道曙光
几年前曾经看到过这个故事,当时以为自己要怎样怎样!可结果似乎不那么美好! 几年人生美好广景,几年依然碌碌无为,不沉着.不冷静.不务实.不圆滑.不老练.不勇敢.不勤劳,关键不聪明,无毅力.着 ...
- 插件之下拉框Select2
select2为代替常规的select而出现,可自定义select的样式,最明显的功能就是集合中可以搜索 关于浏览器要求,ie8+,Chrome 8+,Firefox 10+,Safari 3+,Op ...
- UIViewController三种不同的初始化view的方式
You can specify the views for a view controller using a Storyboard created in Interface Builder. A s ...
- VC++ ListCtrl Report使用
1.在VC++ 6.0中新建基于对话框的MFC应用程序ListCtrl; 2.在主对话框上添加一个List Control至合适的位置及大小: 3.在对话框OnInitDialog中初始化ListCt ...