【JavaScript学习笔记】01 HTML中的js

子逊的辛酸史

于 2018-05-28 08:50:42 发布

阅读量156

点赞数

分类专栏： javascript 文章标签： js js功能

本文链接：https://blog.csdn.net/u013182992/article/details/80475107

版权

javascript 专栏收录该内容

4 篇文章 0 订阅

订阅专栏

2018.4.20

前提知识： 1.C/S和B/S架构 C/S：客户端和服务器架构-------app

float num = Math.random();//生成一个随机数
            
            if(num<0.001){
                system.exit(1);
            }//0.5概率闪退
            
            float num = Math.random();
            if(num<0.0005) {
                sleep(100);
            }//1%概率，程序会卡顿0.1S
            
            例如：服务器版本更新，客户端必须更新，才可以使用新的功能。  热更新：必须通过APPstore更新，不能在游戏里面更新。
            
            B/S：浏览器和服务器架构------网页
            不管是手机，ios Android PC windows macOS linux
            只需要输入网址，就可以访问。
            
            如果服务器版本更新，点击刷新，就可以获取到最新的内容。
            
        相比较而言：
            B/S架构开发，维护的成本要远远低于C/S架构，B/S架构是现在最流行的一种开发方式。、
            
            
    2.开发工具：
        编辑器：Notepad++   Hbuilder  
        测试工具：谷歌浏览器或者火狐浏览器
                Safari 欧朋 世界之窗 IE Edge（新版本IE）

HTML初识

1.标签/属性/元素
    标签：
            就是以<>包含的特定字符串，通常用开始标签和结束标签
                    双边标签：<标签名>内容</标签名>
                    单边标签：<标签名/>
    属性：
        <标签名 属性1="值1" 属性2='值2' 属性3=值3></标签名>
                属性都是【键值对】形式
                iphone8 = 5888；
                建议：
                    标签的属性值要使用双引号包含。
    元素：
        一个完整的标签称之为元素。
2.全局架构标签：
    <!DOCTYPE HTML>
    <html>
            <head>
                <!--  
                    这里是注释
                    head里面的内容是不再页面内部展示的
                -->
            </head>
            <body>
                    <！-- 所见即所得-->
            </body>
    </html>
    注意事项：
        1.所有的内容，必须全部写在HTML标签内
        2.head标签里面的内容，不会展示在页面当中
        3.所有需要展示的内容，都要放到body里面。
    
3.所有的标签都有的一些属性（结合JS/CSS使用）
    class name id style
    name(重要)
    
4.字符实体
&nbsp;空格 &lt;<  &gt;>
字符实体是为了解决一些本身具有特殊含义的字符展示，例如<>
        
5.常用的标签（文本修饰）
	<h1>H1标签内容</h1>
	<h2>H2标签内容</h2>
	<b>加粗</b>
	<Strong>加粗</Strong>
	<i>斜体</i>
	<b><i>加粗斜体</i></b>
	<u>下划线</u>
	<del>删除线</del>
	<font>字体</font>
	<marquee>滚动</marquee>

	<!--上标和下标-->
	X<sup>2</sup>y<sub>2</sub>
	
URL
    统一资源定位符
    格式：协议：//地址：端口/文件？参数1=值1&参数2=值2
    eg:https://www.baidu.com/s?wd=你好&user=lzx

<a></a>
    href target title name
    锚点。
<img />
    图片标签
    src width height/alt
<video />
<audio />
    src controls loop autoplay
    
    video width 和 heightx

6.格式控制
    段落：<p></p>
    换行：<br><br />
    水平线:<hr />
    无序列表：
        ul可以加上type属性，属性值：clrcle square none desc 
        <ul>
            <li></li>
             <li></li>
                <li></li>
        </ul>
    有序列表：
       ol可以添加type属性，属性值可以是A/a/I/1 还可以有start，从哪一个开始
    
        <ol type= ""></ol>
   
   自定义列表：
        <dl>
            <dt></dt>
            <dd></dd
            <dd></dd>
            <dd></dd>
                
            
        </dl>

JavaScript

Ajs

NoteJS

React Native 一套JS代码可以同时实现IOSapp和AndroidApp FaceBook

弹窗函数

alert 这是一个只能点击确定的弹窗

运行结果：
    alert方法没有返回值，也就是说如果用一个变量去接受返回值，将会得到undefined。无论你点击“确定”还是右上角的那个“X“关闭。

运行结果：
alert("你好");

confirm 这是一个你可以点击确定或者取消的弹窗

运行结果：
confirm方法与alert不同，他的返回值是boolean，当你点击“确定”时，返回true，无论你点击“取消”还是右上角的那个“X“关闭，都返回false。

prompt 这是一个你可以输入文本内容的弹窗

第一个参数是提示信息，第二个参数是用户输入的默认值。

运行结果：
    alert("你好");
    confirm("你好");
    prompt("你爱学习吗？","爱");

<!DOCTYPE html>
<html>
	<head>
		<meta charset="UTF-8">
		<title>第一次运行JS</title>
		<!--
        	这里在head标签里面借助于script标签引入外部的JS文件
        	日本
        	VIM HHKB
        	
        	type="text/javascript" 可视化的JS文件
        	src="JS文件路径"，表示这个JS文件在什么位置，要引入的是哪一个
        	这里script标签是一个双边标签，但是在使用script标签引入外部的JS文件时，里面不能有任何内容。
        -->
        <!--
        	【注意】
        		如果说不需要JavaScript对页面进行绘制，则不需要把script标签
        		定义在bead标签里面，只需要放到body里面就可以了
        -->
        <script type="text/javascript" src="hello.js" ></script>//会运行js里面的代码
        
        <script type="text/javascript">
        	//这里是在Script内部来书写JS代码
        	
        	alert("这里是JavaScript");
        	
        	//这里是在javascript里面定义函数
        	function method() {
        		alert("这里是一个javaScript的方法");
        	}
        	
        	function method(age,name,size) {
        		alert("age:"+age+"name:"+name+"size:"+size);
        	}
        	//没有声明返回值 想返回啥是啥
        	function method(num1,num2) {
        		return num1 + num2;
        	}
        	
        	//method();
        	
        	method(18,"貂蝉","36D");
        	
        	var ret = method(5,10);
        	console.log("ret:"+ret);
        	
        	$s = method(10,165);
        	console.log("s:"+$s);
        </script>
	</head>
	<body>
	</body>
</html>

    结果：
        [Web浏览器] "ret:15"	/day30/1.html (45)
        [Web浏览器] "s:175"	/day30/1.html (48)

日期

<!DOCTYPE html>
<html>
	<head>
		<meta charset="UTF-8">
		<title>日期使用</title>
	</head>
	<body>
		<script type="text/javascript">
				//获取当前系统使用new Date();
			var date = new Date();
			
			console.log(date);
			
			var day = date.getDate();
			var month = date.getMonth()+1;
			var year = date.getFullYear();
			var seconds = date.getSeconds();
			var minutes = date.getMinutes();
			var hours = date.getHours();
			
			var time = year + "年"+month+"月"+day+"日"
			+hours+":"+minutes+":"+seconds;
			
			document.writeln(time);
			document.write("<br />");
			document.write("测试");
		</script>
	</body>
</html>

Math random ceil

<!DOCTYPE html>
    <html>
    	<head>
    		<meta charset="UTF-8">
    		<title></title>
    	</head>
    	<body>
    		<script>
    			var i =Math.random();//获取随机数
    			document.writeln(i);
    			document.writeln("<hr />");
    			var n = Math.ceil("5.1");//向上取整。
    			document.writeln(n);
    			
    		</script>
    	</body>
    </html>